{"id":450,"date":"2021-11-22T06:46:57","date_gmt":"2021-11-22T06:46:57","guid":{"rendered":"https:\/\/softwareinformatico.com\/blog\/?p=450"},"modified":"2021-11-22T06:48:10","modified_gmt":"2021-11-22T06:48:10","slug":"descubre-las-tecnologias-amp","status":"publish","type":"post","link":"https:\/\/softwareinformatico.com\/blog\/descubre-las-tecnologias-amp\/","title":{"rendered":"Descubre las tecnolog\u00edas AMP"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><br><strong>\u00bfQu\u00e9 son las AMP?<\/strong><br><br><\/h2>\n\n\n\n<p class=\"has-text-color has-very-dark-gray-color\"><br>Las tecnolog\u00edas<strong> AMP<\/strong> (<strong>Accelerated Mobile Pages)<\/strong> son&nbsp;<strong>p\u00e1ginas m\u00f3viles aceleradas.<\/strong><br><br><\/p>\n\n\n\n<p class=\"has-text-color has-very-dark-gray-color\">Se trata de una tecnolog\u00eda de c\u00f3digo abierto impulsada por Google y otras compa\u00f1\u00edas, su objetivo es lograr una mejor <a href=\"https:\/\/softwareinformatico.com\/optimizacion-web\/\" target=\"_blank\" aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" rel=\"noreferrer noopener\">optimizaci\u00f3n web<\/a> e inmediatez de contenido en los sitios web visitados desde m\u00f3viles.<br><br><\/p>\n\n\n\n<p style=\"font-size:17px\" class=\"has-text-color has-very-dark-gray-color\">Esta iniciativa se centra en los m\u00f3viles porque como ya sabemos es nuestro principal medio de comunicaci\u00f3n, aunque muchas <a href=\"https:\/\/softwareinformatico.com\/\" target=\"_blank\" aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" rel=\"noreferrer noopener\">aplicaciones inform\u00e1ticas<\/a> contin\u00faan sin estar correctamente optimizadas, lo que penaliza bastante . <br><br><br><strong>Las tecnolog\u00edas AMP nacen con el prop\u00f3sito de mejorar la experiencia de los usuarios en los dispositivos m\u00f3viles al acceder a contenido de la web<\/strong>.<br><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>La importancia de las A<\/strong>ccelerated Mobile Pages<br><br><br><\/h2>\n\n\n\n<p>Hoy en d\u00eda <strong>uno de los factores m\u00e1s importantes para el <a href=\"https:\/\/softwareinformatico.com\/posicionamiento-en-google\/\" target=\"_blank\" aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" rel=\"noreferrer noopener\">posicionamiento en Google<\/a> es la velocidad<\/strong> <strong>de carga<\/strong>, que cada vez sea m\u00e1s r\u00e1pida y que los usuarios permanezcan en el sitio.<br><br><\/p>\n\n\n\n<p>\u00bfPor qu\u00e9 le da tanta relevancia? Es simple, los usuarios son muy impacientes y lo quieren todo al instante. <br><br><br>De modo que si una web tarda m\u00e1s de la cuenta en cargar, los usuarios perder\u00e1n el inter\u00e9s, acabar\u00e1n abandon\u00e1ndola y probablemente no regresen. Esto es lo que las tecnolog\u00edas AMP quieren evitar a toda costa.<br><br><br> <strong>Una p\u00e1gina web con carga r\u00e1pida y facilidad de lectura, nos garantizara una experiencia del usuario positiva y como resultado un mejor tr\u00e1fico en nuestra web.<\/strong><br><br><br><\/p>\n\n\n\n<p>Si nuestra p\u00e1gina es AMP, Google nos tendr\u00e1 en cuenta en los resultados de las b\u00fasquedas y nos posicionar\u00e1 por encima de la competencia.<br><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Descubre c\u00f3mo funcionan las tecnolog\u00edas AMP<\/strong><br><br><\/h2>\n\n\n\n<p><br>Principalmente no se utilizan hojas de estilo tanto internas como externas, formularios o JavaScripts y todo debe quedar ajustado a los l\u00edmites de tama\u00f1o definidos.<br><br><\/p>\n\n\n\n<p><strong>Las p\u00e1ginas AMP utilizan un lenguaje propio HTML<\/strong>:<br><br><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Las modificaciones del c\u00f3digo HTML son necesarias para implementar las webs de AMP. Por ejemplo, para im\u00e1genes debemos usar esta etiqueta \u201c<strong>amp-img<\/strong>\u201d.<br><br>As\u00ed podremos publicar fotos con un menor peso dando lugar a una carga m\u00e1s \u00e1gil.<br><br>Otras etiquetas son: V\u00eddeos \u201c<strong>amp-video<\/strong>\u201d, archivos de audio \u201c<strong>amp-audio<\/strong>\u201d o iframes \u201c<strong>amp-iframe<\/strong>\u201d.<br><br><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>JavaScript<\/strong> solo se podr\u00e1 usar desde la biblioteca de AMP.<br><br><br><\/li><li>Se hace uso de <strong>Cach\u00e9s CDN<\/strong> del propio proyecto para obtener m\u00e1s p\u00e1ginas AMP,  para validar su correcto desarrollo y para ofrecer una mayor optimizaci\u00f3n de la web al usuario.<br><br><\/li><\/ul>\n\n\n\n<div class=\"div_consulta_bordes\"><p class=\"text_ini\">Si necesitas ayuda, o tienes dudas sobre <a href=\"https:\/\/softwareinformatico.com\/\" title=\"Software Inform\u00e1tico\">Software Inform\u00e1tico<\/a> preg\u00fantanos, podemos ayudarte.<\/p><div class=\"creatutienda\"><a href=\"https:\/\/softwareinformatico.com\/consulta-informatica\/\" title=\"consulta informatica\">CONSULTA INFORM\u00c1TICA<\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><br><br><br><strong>Los beneficios de las tecnolog\u00edas AMP<\/strong><br><br><br><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Aumentar\u00e1 la velocidad de carga y los contenidos de la web se cargar\u00e1n inmediatamente.<br><br><br><\/li><li>La tasa de rebote disminuir\u00e1.<br><br><br><\/li><li>Se producir\u00e1 una mejora del rendimiento web y obtendremos altos porcentajes de clics.<br><br><br><\/li><li>Disminuiremos el consumo de bater\u00eda y de datos.<br><br><br><\/li><li>La experiencia del usuario resultar\u00e1 m\u00e1s positiva gracias a la velocidad de carga y a la facilidad de lectura.<br><br><br><\/li><li>Lograremos una mejora del posicionamiento.<br><br><br>Uno de los factores que tiene en cuenta Google es la velocidad, por tanto si decidimos optimizar nuestra web con  las tecnolog\u00edas AMP, <strong>Google destacar\u00e1 los resultados y los identificar\u00e1 con el s\u00edmbolo del rayo<\/strong>.<br><br><br><\/li><li>Obtendremos una mayor visibilidad.<br><br><br><\/li><li>Ganaremos un aumento de tr\u00e1fico en nuestra web.<br><br><br><\/li><li>Tendremos disponible un <a href=\"https:\/\/es.wordpress.org\/plugins\/accelerated-mobile-pages\/\" target=\"_blank\" aria-label=\"undefined (abre en una nueva pesta\u00f1a)\" rel=\"noreferrer noopener nofollow\"><strong>plugin AMP para WordPress<\/strong><\/a>.<br><br><br><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><br><strong>Descubre como identificar las tecnolog\u00edas AMP<\/strong><br><br><\/h2>\n\n\n\n<p><br>Detectar si una p\u00e1gina es AMP es muy sencillo: <br><br><br>Para empezar, tendremos que observar dentro de los resultados de b\u00fasqueda de Google la presencia de <strong>un s\u00edmbolo de un rayo acompa\u00f1ado por las siglas AMP.<\/strong><br><br><br>Igualmente podemos encontrar sus siglas en la parte inicial de la URL.<br><br><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Implementar las tecnolog\u00edas AMP en mi web<\/strong><br><br><\/h2>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>Elementos esenciales:<\/strong><br><br><br><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Para empezar:  <strong>&lt;!doctype html&gt;<\/strong>&nbsp;.<br><br><br><\/li><li>Puedes identificar el documento con&nbsp;<strong>&lt;html amp&gt;&nbsp;<\/strong>o<strong>&nbsp;&lt;html&gt;<\/strong>.&nbsp; Asimismo, puedes a\u00f1adir informaci\u00f3n sobre el idioma&nbsp;<strong>lang=\u00bb..\u00bb<\/strong><br><br><br><\/li><li>Luego debes poner <strong>&lt;head&gt;<\/strong>&nbsp;y&nbsp;<strong>&lt;body&gt;<\/strong>.<br><br><br><\/li><li>Dentro de head <strong>&lt;meta charset=\u00bbutf-8\u2033&gt;<\/strong>.<br><br><br><\/li><li>Despu\u00e9s insertaremos en la biblioteca AMP JS <strong>&lt;script async src=\u00bbhttps:\/\/cdn.ampproject.org\/v0.js\u00bb&gt;&lt;\/script&gt;<\/strong>.<br><br><br><\/li><li>La etiqueta&nbsp;<strong>&lt;link rel=\u00bbcanonical\u00bb&gt;<\/strong>&nbsp;con enlace al HTML original.<br><br><br><\/li><li><strong>&lt;meta name=\u00bbviewport\u00bb content=\u00bbwidth=device-width,minimum-scale=1,initial-scale=1\u2033&gt;<\/strong><br><br><br><\/li><li>Para terminar, antes del final de<strong>&nbsp;&lt;head&gt;<\/strong>, copiaremos el c\u00f3digo&nbsp;<strong>&lt;style amp-boilerplate&gt;<\/strong>&nbsp;.<br><br><br><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>Metadatos:<\/strong><br><br><\/h4>\n\n\n\n<p><br>Aunque no son obligatorios se recomienda incluirlos.<br><br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>CSS:<\/strong><br><br><\/h4>\n\n\n\n<p><br><strong>Su utilizaci\u00f3n es necesaria<\/strong> y el CSS debe quedar unificado e incrustado en el head en una \u00fanica etiqueta <strong>&lt;style amp-custom&gt;<\/strong>.<br><br><\/p>\n\n\n\n<p>Se aconsejan normas de estilo sencillas con respecto a tama\u00f1os de letra y colores.<br><br><\/p>\n\n\n\n<p>Existe una excepci\u00f3n, es posible enlazar a fuentes externas en CSS al usar @font-face como con una etiqueta <strong>&lt;link&gt;<\/strong> en <strong>&lt;head&gt;<\/strong>.<br><br><\/p>\n\n\n\n<p>Cabe destacar que \u00fanicamente se permiten archivos que se alojen a Google Font.<br><br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Javascript:<\/strong><br><br><\/h4>\n\n\n\n<p><br>Las \u00fanicas etiquetas permitidas son las de la propia biblioteca, AMP JS y metadatos JSON-LD.<br><br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>Introducci\u00f3n del contenido:<\/strong><br><br><\/h4>\n\n\n\n<p><br>Introduciremos el contenido que tenemos en la p\u00e1gina original HTML en \u201cbody\u201d y&nbsp; luego lo adaptaremos al AMP para obtener la validaci\u00f3n.<br><br><br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&nbsp;<br><strong>Im\u00e1genes:<\/strong><br><br><\/h4>\n\n\n\n<p><br>El uso de im\u00e1genes es muy importante y debemos insertar al menos una por art\u00edculo.<br><br><br>Para adaptar las im\u00e1genes ser\u00e1 necesario darlo a conocer a AMP y  sustituiremos las etiquetas &lt;img&gt; por <strong>&lt;amp-img&gt;<\/strong>. Adem\u00e1s, debemos expresar correctamente tanto la altura como la anchura y tiene que estar p\u00edxeles.<br><\/p>\n\n\n\n<p><br>Podr\u00e1s asegurarte de que sean responsive con<strong> layout=\u00bbresponsive\u00bb<\/strong>, y est\u00e1n permitidas otras propiedades para ofrecer contenido como: srcset.<br><br><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><br><strong>V\u00eddeos:<\/strong><br><\/h4>\n\n\n\n<p><br>Al igual que en las fotos, los v\u00eddeos deben estar correctamente adaptados a AMP <strong>&lt;amp-video&gt;<\/strong>. <\/p>\n\n\n\n<p><br><br><br><br><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>\u00bfQu\u00e9 son las AMP? Las tecnolog\u00edas AMP (Accelerated Mobile Pages) son&nbsp;p\u00e1ginas m\u00f3viles aceleradas. Se trata de una tecnolog\u00eda de c\u00f3digo abierto impulsada por Google y <a class=\"mh-excerpt-more\" href=\"https:\/\/softwareinformatico.com\/blog\/descubre-las-tecnologias-amp\/\" title=\"Descubre las tecnolog\u00edas AMP\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":596,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[32,44,23,33],"class_list":["post-450","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-paginas-web","tag-google","tag-movil","tag-optimizacion-web","tag-seo"],"_links":{"self":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts\/450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/comments?post=450"}],"version-history":[{"count":0,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/posts\/450\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/media\/596"}],"wp:attachment":[{"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/media?parent=450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/categories?post=450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softwareinformatico.com\/blog\/wp-json\/wp\/v2\/tags?post=450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}