Un tour por AMP

Un Tour por AMP
Un vistazo a las aplicaciones de
AMP
Mauricio Angulo S.
UX Architect
mauricio.angulo@coppel.com

Internet es el concentrador de información del mundo

La Experiencia de Usuario sufre en sitios lentos
Carga lenta Páginas que no responden Contenido desplazado por
anuncios

¿Por qué AMP?
●
Refuerza buenas prácticas
para:
●
Desempeño
●
Accesibilidad
●
Conﬁabilidad
●
Diseño responsivo
●
¡AMP puede ayudar!

Cómo AMP ayuda
AMP HTML AMP JS AMP Cache

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

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!

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">

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

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
eﬁciente
●
Optimiza las páginas en caché.

El poder del caching
Web server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server
Edge server

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

Cómo crear sitios AMP
CSS
un conjunto de reglas que
deﬁnen 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

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)

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>

Ejemplo de un componente - <amp-img>
<amp-img
src="IMG-URL"
width="640"
height="480"
layout="responsive">
</amp-img>

Ejemplo de Componente - <amp-youtube>
<amp-youtube
data-videoid="ID"
width="480"
height="270"
layout="responsive">
</amp-youtube>

Ejemplo de componente - <amp-twitter>
<amp-twitter
width="486"
height="657"
layout="responsive"
data-tweetid="ID">
</amp-twitter>

Cómo crear AMP Ads
●
●
Limita las dimensiones máximas de la
imagen y agrega srcset
●
●
Sanitiza el HTML para evitar ataques XSS
o errores de análisis

Formatos de AMP Ads
Carrusel Parallax Lightbox

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 conﬁrmar 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 eﬁcientes.
●
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.

●
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.

●
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.

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.

Clientes de Email con soporte para AMP Mail
Estos son los clientes de email que soportan AMP Mail actualmente:

AMP Stories
●
●
Limita las dimensiones máximas de la imagen y agrega srcset
●
●
Sanitiza el HTML para evitar ataques XSS o errores de análisis

Cómo se construyen las AMP Stories

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.

¡Gracias!
Mauricio Angulo S.
UX Architect
mauricio.angulo@coppel.com

Un tour por AMP

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Similar a Un tour por AMP

Similar a Un tour por AMP (20)

Más de Mauricio Angulo Sillas

Más de Mauricio Angulo Sillas (10)

Último

Último (20)

Un tour por AMP