Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tour por AMP

Tour por AMP

En esta presentación, Mauricio Angulo hace un recorrido por las principales aplicaciones de AMP (Accelerated Mobile Pages): AMP Websites, AMP Ads, AMP Mail y AMP Stories, así como algunos tips y herramientas para creadores,

GDG Culiacán

February 04, 2021
Tweet

More Decks by GDG Culiacán

Other Decks in Programming

Transcript

  1. La Experiencia de Usuario sufre en sitios lentos Carga lenta

    Páginas que no responden Contenido desplazado por anuncios
  2. ¿Por qué AMP? • Refuerza buenas prácticas para: • Desempeño

    • Accesibilidad • Confiabilidad • Diseño responsivo • ¡AMP puede ayudar!
  3. Cómo AMP mejora el desempeño web • Extiende HTML al

    agregar etiquetas para características comunes de un sitio web • JavaScript está restringido • Validator informa problemas que podrían afectar la accesibilidad o el rendimiento • Los servidores almacenan en caché y optimizan páginas AMP válidas AMP HTML AMP JS AMP Cache
  4. Aprendiendo AMP para aprender desarrollo web • Los sitios de

    AMP son: • Construidos con HTML estándar, CSS y JavaScript • Compatible con todos los navegadores modernos. • No dependen de herramientas especiales. • Basados en componentes ¡Aprende las mejores prácticas con el ejemplo!
  5. Comenzando nuestro viaje • Las páginas AMP tienen ⚡ o

    en la etiqueta HTML • Herramientas como el validador y la memoria caché reconocen sitios como AMP • El validador de AMP puede mostrar qué más necesitamos para una página de AMP válida <html ⚡ lang="es"> <html amp lang="es">
  6. Validación de AMP • El AMP válido es importante, porque

    el AMP válido es bueno para sus usuarios. • Además, necesitarás AMP válido para ingresar a los cachés de AMP • Las reglas de AMP representan las mejores prácticas en accesibilidad, rendimiento, etc. • Los errores le indican que hay espacio para mejorar la experiencia de sus usuarios
  7. El Caché AMP • Los rastreadores de motores de búsqueda

    buscan páginas AMP y le dicen a un caché AMP que las almacene • Almacena solo páginas válidas de AMP • Permite que las páginas AMP se carguen de manera segura y eficiente • Optimiza las páginas en caché.
  8. El poder del caching Web server Edge server Edge server

    Edge server Edge server Edge server Edge server Edge server
  9. Optimizaciones de rendimiento de caché AMP • Caché de imágenes

    y fuentes • Limita las dimensiones máximas de la imagen y agrega srcset • Convierte y comprime imágenes. • Sanitiza el HTML para evitar ataques XSS o errores de análisis
  10. Cómo crear sitios AMP CSS un conjunto de reglas que

    definen cómo se ve todo HTML lenguaje de marcado estándar para crear páginas web Javascript el código en un sitio web, usado para hacer que el sitio sea interactivo
  11. CSS y AMP • CSS incluido en la etiqueta en

    o como estilos en línea • ¡Esto ayuda al rendimiento de tu página! • Restricciones de CSS: • Límite de 50 KB • No se puede utilizar !important • Algunos settings de CSS están restringidos (como transition)
  12. Ejemplo de CSS AMP <style amp-custom> body { font-family: sans-serif;

    line-height: 1.5rem; padding: 20px; } p, h2 { border: 1px dotted red; } </style>
  13. Cómo crear AMP Ads • Caché de imágenes y fuentes

    • Limita las dimensiones máximas de la imagen y agrega srcset • Convierte y comprime imágenes. • Sanitiza el HTML para evitar ataques XSS o errores de análisis
  14. Los beneficios de AMP Mail • Mayor capacidad en el

    correo. Los remitentes pueden incluir componentes AMP en correos electrónicos enriquecidos y atractivos, lo que los hace dinámicos e interactivos. Los usuarios pueden interactuar con el contenido y tomar medidas rápidamente, como confirmar su asistencia a eventos, completar cuestionarios y personalizar su contenido. Los correos electrónicos de AMP están siempre actualizados y pueden funcionar como resúmenes, con menos clics necesarios para lograr resultados eficientes. • Seguro y a salvo. AMP para correo electrónico no tiene funciones de terceros arbitrarias para limitar los problemas de seguridad y supera con creces las capacidades que ofrecen actualmente los proveedores de terceros. Los componentes de anuncios no están permitidos en el correo electrónico AMP, lo que mantiene a los usuarios seguros. Para mantener las expectativas de seguridad y privacidad de los usuarios, solo se permitirá un subconjunto conservador de la funcionalidad AMP.
  15. Los beneficios de AMP Mail • Coherencia y escalabilidad Incrustar

    AMP dentro de un correo electrónico es simple, agregue una nueva parte MIME con un tipo de contenido de como un descendiente de . Debe convivir con las secciones o el sin formato definido. Esto asegura que el mensaje de correo electrónico funcione en todos los clientes. • Mayor personalización AMP para correo electrónico permite una participación del usuario más inteligente y eficiente, ya que los clientes pueden tomar medidas directamente desde su correo electrónico, como administrar sus suscripciones, responder a encuestas, garabatos y reservas. Esto es posible porque el servidor recupera contenido nuevo de puntos finales remotos, manteniendo el correo electrónico actualizado.
  16. Los beneficios de AMP Mail • Experiencia de cliente interactiva

    Las capacidades en expansión de AMP Email le permiten tomar medidas directamente desde su bandeja de entrada. Esto incluye carruseles y acordeones, y tomar la entrada del usuario en formularios y cuestionarios. • Servicios mejorados y más inteligentes El correo electrónico AMP ofrece una opción atractiva para correos electrónicos promocionales y de lista de suscriptores. A través de un compromiso más inteligente, puede mejorar la satisfacción del cliente a través de comentarios sin problemas y administración de suscripciones, todo dentro de su bandeja de entrada.
  17. Estructura de AMP Mail El correo electrónico está estructurado como

    un árbol MIME (Multipurpose Internet Mail Extensions). Este árbol MIME contiene el cuerpo del mensaje y los archivos adjuntos al correo electrónico. Para incrustar AMP en un correo electrónico, agrega una nueva parte MIME con un tipo de contenido de como descendiente de . Debe convivir con o sin formato existentes. Esto asegura que el mensaje de correo electrónico funcione en todos los clientes.
  18. Clientes de Email con soporte para AMP Mail Estos son

    los clientes de email que soportan AMP Mail actualmente:
  19. AMP Stories • Caché de imágenes y fuentes • Limita

    las dimensiones máximas de la imagen y agrega srcset • Convierte y comprime imágenes. • Sanitiza el HTML para evitar ataques XSS o errores de análisis
  20. La documentación de AMP • La mayoría de las funcionalidades

    se resuelven con componentes AMP • Si está atascado, busca ayuda en amp.dev • Aprenderás mucho más sobre los componentes y la documentación de AMP mientras lo usas.