Your browser doesn't support HTML5 video.
AMP es una iniciativa de código abierto que busca mejorar la velocidad de carga de las páginas web en dispositivos móviles, proporcionando una experiencia más fluida y rápida para los usuarios.
Las páginas web AMP están diseñadas para cargar de manera rápida y eficiente en los resultados de búsqueda de Google, y también están disponibles en otras plataformas como Twitter y LinkedIn.
Como hemos comentado, AMP es un framework de código abierto que mejora la velocidad de carga de las páginas web en dispositivos móviles. Esto se logra mediante la utilización de un subconjunto de HTML, JavaScript y CSS especialmente optimizado para cargar rápido y proporcionar una experiencia de navegación fluida y sin interrupciones.
Estas son algunas de las ventajas que aporta al usuario:
Este framework de código abierto se publica en AMP, aunque no es sencillo cumplir con todos los requisitos para que la página sea AMP. Para cumplir con los parámetros se debe seguir estos pasos:
AMP es una iniciativa de código abierto y hay muchas herramientas y recursos disponibles para ayudarle a implementarlo. Si tiene problemas o necesita ayuda, puede consultar la documentación de AMP o solicitar presupuesto a Uthorp.
Your browser doesn't support HTML5 video.
La estructura de componentes web de AMP se incluye para sitios web de AMP, Web Stories, AMP email, anuncios AMP, además de otras muchas funcionalidades que mejoran la velocidad de carga y la usabilidad móvil.
En la página web amp.es podemos encontrar toda la documentación relacionada como guías y tutoriales, componentes, ejemplos, cursos, plantillas...
Las guías y tutoriales explican cómo empezar a utilizar el framework AMP y crear una página HTML AMP.
Google ofrece un código como. de o plantilla con extensión. HTML que indica la etiqueta que se debe incluir en el
y , además de otras etiquetas para identificar identificar la página como AMP, la codificación de la página, incluir la carga de biblioteca JavaScript de AMP, y conectar a la versión HTML del documento la versión AMP HTML.Para la integración explica el código que se debe utilizar para transformar los enlaces AMP mediante el tiempo de escritura en el lado del servidor preferido, el tiempo de lectura del lado del servidor, e incluso, si no es posible este último, la aplicación desde el lado del cliente.
Google indica la API de AMP URL para la recuperación de información aportando ejemplos de listas de URLs y de AMP en formato JSON.
Esta integración permite también el uso de cachés de AMP para entregar de esta manera solo páginas a AMP válidas que permitan que se cargue la página de manera más eficiente y segura, con código optimizado en rendimiento que beneficia al usuario.
Actualmente, hay 2 proveedores de Cache: Google AMP Cache y Bing AMP Cache .
Esto proporciona dos opciones para el mostrar el archivo AMP, que puede ser en una versión alojada por el editor, y otra alojada en un caché AMP.
La recomendación es utilizar el caché amp, dado que mejora la experiencia de usuario con un tiempo de carga más rápido y baja latencia, en concreto, hasta un segundo inferior como tiempo de carga.
Además, beneficia el rendimiento y ancho de banda gracias al almacenamiento adicional incluido en el caché de objetos dependientes en el cliente. En caso de que el archivo a AMP original se haya actualizado y ya no sea válido, no penaliza la experiencia de usuario ya que se carga mediante él caché AMP. Pero no solo eso, AMP caché permite que los usuarios siempre vean el mismo archivo AMP protegido frente a malwares y hackeos.
Por último, permite la implementación de un visor AMP. AMP Runtime facilita una API viewer, para controlar la preproducción de documentos amp en la navegación entre artículos e instrumentación de AMP Runtime.
Todas estas ventajas consiguen que al compartir contenido AMP , sean las plataformas quienes elijan la versión del documento que se le presenta al usuario, por lo que se lleva a cabo mediante la versión canónica.
Para aprender sobre las especificaciones de AMP y HTML, Google ofrece nuevos artículos actualizados con el fin de garantizar una información correcta y una buena explicación de las características.
Los documentos AMP HTML pueden cargarse desde la web al servidor como cualquier otro documento HTML, sin necesidad de configuraciones especiales. Están diseñados de manera óptima para los servidores y documentos AMP proxy.
Esto permite reemplazar imágenes de referencia con menor peso y añadir variables CSS precargadas de componentes de extensiones.
Utilizando el formato AMP, los desarrolladores permiten que los archivos AMP estén disponibles para ser rastreados, almacenándolos en caché y mostrándolos a terceros.
Dentro de las guías y tutoriales , especifican también las formas de actuación, cómo se debe llevar a cabo la incursión de protocolos HTTP, la restricción de anuncios para que solo puedan ser descargados si así lo desea el usuario, y cómo configurarlo para que los navegadores puedan calcular el espacio que necesita cada recurso en la página sin tener que buscar ese recurso.
Todo ello es demostrado mediante ejemplos de código con los márgenes requeridos, metadatos, etiquetas HTML, atributos HTML, clases, IDs, enlaces, hojas de estilos, propiedades, fotogramas clave, fuentes personalizadas, componentes...
El estilo de las páginas se aplica mediante diseños similares a HTML para páginas normales, utilizando CSS.
No obstante, amp limita el uso de CSS por motivos de usabilidad, aunque permite algunas capacidades adicionales de diseño como placeholders & fallbacks, uso avanzado vía srcset y los atributos del layout .
En su guía AMP de diseño y layout explican cómo agregar estilos a una página, definiendo los componentes con selectores de clase comunes de CSS.
Estos elementos siempre están diseñados para adaptarse a los dispositivos móviles gracias a atributos width y height.
Como siempre, Google ofrece un excelente feedback a través de un soporte para placeholders y fallbacks. Permiten también dirigir las imágenes gracias a los atributos srcset y sizes, y permiten validar los estilos y diseños con guías para la revisión de errores de estilo y diseño .
Por último, explican cómo debe aplicarse la configuración de Analytics. Antes de empezar se debe conocer qué datos se necesitan y cómo se pretende analizarlos.
Es importante saber responder a las preguntas de cómo analizarán las interacciones de los usuarios con herramientas de terceros, o cuales serán los comportamientos de los usuarios para comprender cómo interactúan con la página.
Estos datos se pueden integrar mediante AMP Analytics y enviar a varias URLs. AMP Analytics está configurado para medir los datos una sola vez, aunque pueden ser enviados a diferentes destinatarios. Si se trabaja con proveedores de análisis externos, recomiendan visitar la lista de proveedores que integran sus herramientas con AMP.
Según los datos necesarios para estudiar y medir la participación de los usuarios, recomiendan tener en cuenta si se va a registrar el tráfico de las páginas vistas o se supervisarán más patrones de interacción. Para ello ofrecen las opciones de AMP Pixel y AMP Analytics .
Por último indican la necesidad de que se reconozca el tipo de datos a capturar de usuarios, con el fin de conocer las opciones para la sustitución de variables , y de la identificación de usuarios.
Catálogo de componentes AMP ofrece una extensa librería para aplicar todas las funcionalidades AMP a la página.
Estos componentes incluyen explicaciones sobre la creación, extensión, y componentes experimentales.
Toda la información puede ser filtrada por categorías como contenido dinámico, anuncios de análisis, diseño, medios presentación y social.
La página expone mediante ejemplos de código como deben ser incluidos en el sitio web.
La sección de ejemplos muestra paso a paso el código necesario para configurar los componentes, diseños, acciones avanzadas, y comprobaciones mediante AMP Playground.
Todos ellos son filtrados por categorías y explicados mediante código, imágenes y grafismos.
Otra de las ventajas que ofrece la web de AMP son los cursos para aprender a desarrollar webs con AMP . Estos cursos están desarrollados tanto para programadores expertos, como para personal de poca experiencia que se inicia en el mundo de la programación.
Los cursos se componen de una oferta de curso inicial, intermedio, y avanzado, tanto para alumnos como para profesores.
Los únicos requisitos es disponer de conexión a Internet y navegador Chrome.
Respecto a los requisitos previos que debe tener el usuario, es suficiente con conocimientos básicos en HTML y CSS, para el curso avanzado con experiencia en JavaScript y JSON.
Estas plantillas AMP están divididas por los tipos de página, como arte y diseño, comercio electrónico, alimentos y bebidas, noticias y blog, y anuncios en las stories.
Las plantillas ofrecen diseños predeterminados para webs con estilos de galerías, tiendas, viajes, moda y diseño, software, vídeos...
Este framework de Google ofrece herramientas para la ayuda en la creación, diseño y desarrollo de las páginas.
Respecto a la creación y diseño ofrece Instapage, que automatiza la creación, optimización y personalización de experiencias post-crick gran escala, y Unbounce, plataforma para crear páginas de destino, ventanas emergentes de sitios web y barras de navegación fijas.
Además, ofrece plataformas y CMS que ayudan en páginas de compañías como WordPress, Magento, Quintype... Todo ello conectado a Search Console y validado mediante los test oficiales de Google AMP .
Rellene el formulario y nuestro equipo se pondrá en contacto con usted lo antes posible.
Tu navegador no soporta vídeo HTML5.