Material a nivel introductorio sobre desarrollo y diseño de sitios web con AMP (Accelerated Mobile Pages), adaptado a español de los materiales publicados en www.amp.dev
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
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!
o sin experiencia • Cubriremos: • Cómo las páginas AMP son diferentes de las páginas HTML • La creación incremental de un proyecto de ejemplo utilizando componentes AMP reales • Las estrategias para crear sitios web modernos
https:/ /glitch.com/~nosy-leech • Contiene todo lo que necesitas para este y futuros cursos (por ejemplo, imágenes y código del servidor) • Te proporcionaremos un nuevo Glitch con ejercicios de código completos al final de cada curso
los ejercicios requieren que uses componentes AMP • Si está atascado, busque ayuda en amp.dev • Aprenderemos mucho más sobre los componentes y la documentación de AMP más adelante en este curso. •
amp 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">
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
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é.
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
etiqueta HTML en tu sitio para indicar que es AMP. Verifica que la extensión AMP Validator esté habilitada y que informe errores en tu sitio. <html ⚡ lang="es"> <html amp lang="es">
AMP comienzan con el mismo código básico (la plantilla de AMP) • Puedes copiarlo desde https:/ /amp.dev/documentation/guides-and-tutorials/start/create /basic_markup • Generador repetitivo más avanzado en: https:/ /amp.dev/boilerplate/
amp-custom> en <head> 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)
HTML no están permitidas en las páginas AMP • En lugar de <img>, AMP usa una etiqueta diferente • Las etiquetas AMP personalizadas se denominan componentes • Para corregir este último error de validación, ¡aprendamos sobre los componentes!
error de validación en nuestro sitio • Queremos agregar nuevas funciones: • Video de YouTube Embedded • Carrusel de imágenes • Links para compartir en redes sociales • ¡AMP tiene componentes para cada uno!
• Implementar una función o proporcionar una funcionalidad (por ejemplo, un menú deslizable,un reproductor de video, análisis de página, etc.) • Combinar estructura (HTML), estilo (CSS) y comportamiento (JavaScript) • Los componentes de AMP tienen accesibilidad y rendimiento integrados • Se puede encontrar una lista en: • https:/ /amp.dev/documentation/components/
base de AMP (i.e. <amp-img>, <amp-pixel>) • Extendidos - Se requieren scripts adicionales (por ejemplo, <amp-twitter> o <amp-youtube>) • Experimentales - Aún no están listos para uso en producción
muestra sobre el costado de la pantalla en dispositivos más pequeños. • La propiedad layout le dice a AMP cómo ajustar el tamaño de los elementos en diferentes tamaños de página • Para solucionar el problema de diseño, le daremos el layout responsivo.
comportamiento responsivo • intrinsic - mantiene la relación de tamaño pero con un tamaño intrínseco • responsive - mantiene la relación de tamaño • ¡Y otros que puedes consultar en la documentación!
la página • El tamaño es de 480px por 270px • El ID del video es BlpMQ7fMCzA (utiliza el atributo data-videoid) • Layout es responsive • No olvides el script
• Un carrusel se implementa con <amp-carousel> • Los componentes hasta ahora han sido relativamente simples • Necesitamos la documentación para aprender sobre <amp-carousel> Agregar un carrusel de imágenes
¿Cómo utilizo este componente? • ¿Cómo puedo personalizar este componente con atributos? • ¿Cómo cambio el estilo de este componente? • ¿Este componente necesita su propio script? • ¿Que layouts admite este componente?
este componente? • Comportamiento: ¿cómo uso este componente? • Atributos: ¿cómo puedo personalizar este componente con atributos? • Estilo: ¿cómo puedo diseñar este componente? • Script requerido: ¿este componente necesita su propia etiqueta de script? • Diseño admitido: ¿qué layouts admite este componente?
• Especifica como layout: responsive • El type debería ser “slides” • El carrusel debería reiniciarse al llegar a la última imágen • Las imágenes del carrusel deberían ser de un tamaño de 412px × 309px • Imágenes: cheddar-chaser.jpg, cheese.jpg, mouse.jpg
nombres de los componentes que se necesitan • Encuentra componentes buscando por nombre o por su descripción • La Referencia de Componentes AMP (AMP Components Reference) enumera todos los componentes de AMP por categoría •
de enlaces para compartirlo en redes sociales • Practicar cómo encontrar un componente AMP con información limitada. • Usar la documentación para implementar el componente encontrado
de compartir contenido en redes sociales. • AMP proporciona valores predeterminados preconfigurados para las redes sociales más populares • Es un componente extendido
adecuado en la documentación de AMP • Agrega los enlaces para compartir en redes sociales en la parte de abajo de la página • Permite a los usuarios compartir la página por correo electrónico, Tumblr, LinkedIn y Twitter • Agrega los botones en una etiqueta <div> con la clase “social-bar” • El tamaño de cada bot{on es de 44px × 44px
diseñadores a crear sitios accesibles con buen desempeño • Cada sitio de AMP comienza con la plantilla de AMP • El Validador AMP ayuda a detectar y corregir errores. • El caché de AMP ayuda a optimizar y servir páginas más rápido • Los componentes son los componentes básicos de los sitios AMP • La documentación de AMP ayuda a los creadores a encontrar y usar componentes •
como clics o pulsaciones de teclas • Invocar acciones en componentes para cambiarlos • Combinar componentes para crear interfaces de usuario más elaboradas • Continuar construyendo nuestro sitio de Cheese Bike • Repo de Glitch con todos los ejercicios completados de este curso está en: glitch.com/~aquamarine-baritone