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,

1. Un Tour por AMP Un vistazo a las aplicaciones de AMP Mauricio Angulo S. UX Architect mauricio.angulo@coppel.com
2. Internet es el concentrador de información del mundo
3. La Experiencia de Usuario sufre en sitios lentos Carga lenta Páginas que no responden Contenido desplazado por anuncios
4. ¿Por qué AMP? • Refuerza buenas prácticas para: • Desempeño • Accesibilidad • Confiabilidad • Diseño responsivo • ¡AMP puede ayudar!
5. Cómo AMP ayuda AMP HTML AMP JS AMP Cache
6. 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
7. 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!
8. AMP Websites
9. 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">
10. 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
11. 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é.
12. El poder del caching Web server Edge server Edge server Edge server Edge server Edge server Edge server Edge server
13. 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
14. 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
16. 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)
17. 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>
18. Ejemplo de un componente - <amp-img> <amp-img src="IMG-URL" width="640" height="480" layout="responsive"> </amp-img>
19. Ejemplo de Componente - <amp-youtube> <amp-youtube data-videoid="ID" width="480" height="270" layout="responsive"> </amp-youtube>
20. Ejemplo de componente - <amp-twitter> <amp-twitter width="486" height="657" layout="responsive" data-tweetid="ID"> </amp-twitter>
22. AMP Ads
23. 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
24. Formatos de AMP Ads Carrusel Parallax Lightbox
25. Cómo funcionan los AMP Ads
26. Anatomía de un banner en AMPHTML ⚡
28. Google Web Designer
29. AMP Mails
30. AMP Mail
31. 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.
32. 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.
33. 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.
34. AMP Mail
35. 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.
36. Anatomía de AMP Mail ⚡
38. Clientes de Email con soporte para AMP Mail Estos son los clientes de email que soportan AMP Mail actualmente:
39. AMP Stories
40. 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
41. AMP Stories
42. Cómo se construyen las AMP Stories
43. Shell de AMP Story
46. 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.
47. ¡Gracias! Mauricio Angulo S. UX Architect mauricio.angulo@coppel.com