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

Desarrollo web con AMP - Nivel principiante

Coppel UX
November 15, 2019

Desarrollo web con AMP - Nivel principiante

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

Coppel UX

November 15, 2019
Tweet

More Decks by Coppel UX

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 • Es desalentador aprenderlo solo • ¡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. ¿Para quién es este curso? • Creado para programadores con

    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
  6. Pre-requisitos 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
  7. Sigue el código con Glitch • Editor de código en

    línea • Recomendado para completar los ejercicios del curso. • Código de muestra y soluciones proporcionadas como repositorios de Glitch
  8. Depósito de Glitch para principiantes • Este curso comienza en:

    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
  9. Configuración del validador de AMP • Extensión de Chrome que

    detecta errores en páginas AMP • Se ejecuta automáticamente en páginas AMP • Descarga la extensión en: validator.ampproject.org
  10. Introducción a la documentación de AMP • La mayoría de

    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. •
  11. Comenzando nuestro viaje • Las páginas AMP tienen ⚡ o

    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">
  12. 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
  13. 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é.
  14. 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
  15. El poder del caching Web server Edge server Edge server

    Edge server Edge server Edge server Edge server Edge server
  16. Objetivos de ejercicio • Practica usando la extensión AMP Validator

    • Encuentra las líneas donde existen errores en tu código • Aprende a corregir errores de validación
  17. Paso 1 - Vista previa de su sitio Actualiza la

    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">
  18. Paso 2 - Depuración de errores Para el primer error

    en la lista, selecciona la opción "depurar" para ver el error en línea con tu código AMP.
  19. Paso 3 - Aprende más Para cualquier otro error, selecciona

    la opción "obtener más información" para ver la documentación sobre cómo solucionar ese error.
  20. Paso 4 - Glosario de errores de validación Lista completa

    de errores de validación de AMP y correcciones recomendadas: amp.dev/documentation/guid es-and-tutorials/learn/validati on-workflow/validation_errors
  21. Anatomía de una página de AMP • Todas las páginas

    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/
  22. AMP Boilerplate <!doctype html> <html ⚡> | <html amp> <head>

    <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
  23. AMP Boilerplate <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link

    rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
  24. AMP Boilerplate <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link

    rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
  25. AMP Boilerplate <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link

    rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
  26. AMP Boilerplate <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link

    rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
  27. AMP Boilerplate <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link

    rel="canonical" href="h ello-world.html"> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World! </body> </html>
  28. AMP Boilerplate <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link

    rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
  29. AMP Boilerplate <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link

    rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
  30. AMP Boilerplate <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link

    rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>
  31. CSS y AMP • CSS incluido en la etiqueta <style

    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)
  32. 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>
  33. Objetivos del ejercicio • Agrega el boilerplate de AMP faltante

    al sitio • Agrega a la página CSS personalizado • Elimina los errores de validación
  34. Paso 1 - Agrega el Boilerplate de AMP • Agrega:

    • Etiqueta de script de biblioteca AMP • Estilos repetitivos • Enlace canónico • Etiqueta de viewport • PISTA: Puedes copiar el código desde: amp.dev/documentation/guid es-and-tutorials/start/create/ basic_markup
  35. Step 2 - Agrega estilos Obtén estilos y agrégalos a

    tu sitio. Usaremos estos estilos para este y futuros cursos: glitch.com/edit/#!/nosy-leech? path=public/BASE_STYLES
  36. Solución • Solo debe quedar 1 error de validación •

    "Powered by AMP" debería aparecer en la consola del desarrollador • El código de la solución está disponible en: glitch.com/~hungry-modem
  37. Una página válida de AMP ... ¡Casi! • Algunas etiquetas

    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!
  38. Agregar funciones a nuestro sitio • Necesitamos corregir el último

    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!
  39. ¿Qué son los Componentes Web? Son bloques de construcción para:

    • 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/
  40. Tipos de Componentes • Base - Incluidos en la biblioteca

    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
  41. Agregar el script de un Componente Extendido <!doctype html> <html

    ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script> </head> <body>Hola Mundo!</body> </html>
  42. Objetivos del Ejercicio • Arreglar la última validación de errores

    de nuestro sitio • Utilizar tu primer componente AMP • Aprender como los componentes AMP reemplazan algunas etiquetas HTML
  43. <amp-img> • Componente base • Reemplaza la etiqueta <img> •

    Tiene soporte para la carga inteligente de imágenes • Necesita el tamaño de la imagen para cargar correctamente el estilo de la página
  44. <amp-img> • Reemplaza <img> con <amp-img> en tu sitio •

    Las dimensiones de la imagen deberían ser de 640 pixeles por 480 pixeles • Los atributos necesarios son: • src • width • height
  45. Organización y tamaño de componentes • La imagen aún se

    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.
  46. Valores del atributo Layout • fixed - tamaño fijo sin

    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!
  47. Objetivos del Ejercicio • Insertar un video de YouTube en

    el sitio • Practicar el uso de layout en un componente AMP • Utilizar otros atributos de un componente
  48. <amp-youtube> • Component extendido • Inserta un video de YouTube

    • Se necesita el ID del video (por ejemplo,. youtube.com/watch? v=BlpMQ7fMCzA)
  49. <amp-youtube> • Agrega <amp-youtube> en la parte de abajo de

    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
  50. Adding Extended Component Script <!doctype html> <html ⚡> <head> <meta

    charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script> </head> <body>Hello World!</body> </html>
  51. Navegar por la documentación del componente AMP ¿Cómo encontramos componentes

    más allá de <amp-img> y <amp-youtube>? ¡Usamos la documentación!
  52. • Queremos agregar una colección de imágenes para hacer clic

    • 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
  53. Preguntas sobre componentes AMP • ¿Qué hace este componente? •

    ¿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?
  54. Secciones de documentación de componentes AMP • Descripción: ¿qué hace

    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?
  55. Ejemplo de <amp-carousel> <amp-carousel id="carousel-with-preview" width="450" height="300" layout="responsive" type="slides"> <amp-img

    src="images/image1.jpg" width="450" height="300" layout="responsive" alt="apples"></amp-img> <amp-img src="images/image2.jpg" width="450" height="300" layout="responsive" alt="lemons"></amp-img> <amp-img src="images/image3.jpg" width="450" height="300" layout="responsive" alt="blueberries"></amp-img> </amp-carousel>
  56. Objetivos del Ejercicio • Agregar un carrusel de imágenes a

    nuestro sitio • Practicar el uso de la documentación de AMP
  57. <amp-carousel> • Agrega el carrusel arriba del video de YouTube

    • 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
  58. Solución <amp-carousel width="412" height="309" layout="responsive" type="slides" loop> <amp-img width="412" height="309"

    layout="responsive" src="https://cdn.glitch.com/ d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheddar-chaser.jpg?1540228205366"> </amp-img> <amp-img width="412" height="309" layout="responsive" src="https://cdn.glitch.com/ d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fcheese.jpg?1540228223785"> </amp-img> <amp-img width="412" height="309" layout="responsive" src="https://cdn.glitch.com/ d7f46a57-0ca4-4cca-ab0f-69068dec6631%2Fmouse.jpg?1540228223963"> </amp-img> </amp-carousel>
  59. Agregar el Script del Componente <!doctype html> <html ⚡> <head>

    <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"> </script> </head> <body>Hello World!</body> </html>
  60. Descubriendo Nuevos Componentes • No siempre puedo se conocen los

    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 •
  61. AMP By Example • Muchos ejemplos con código • Casos

    de uso comunes • Se incluye en las referencias de la documentación de componentes
  62. Objetivo del Ejercicio • Agregar a nuestro sitio un grupo

    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
  63. Enlaces para compartir en Redes Sociales • Ofrecer una manera

    de compartir contenido en redes sociales. • AMP proporciona valores predeterminados preconfigurados para las redes sociales más populares • Es un componente extendido
  64. Enlaces para compartir en Redes Sociales • Encuentra el componente

    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
  65. Solución <div class="social-bar"> <amp-social-share type="email" width="44" height="44"></amp-social-share> <amp-social-share type="linkedin" width="44"

    height="44"></amp-social-share> <amp-social-share type="tumblr" width="44" height="44"></amp-social-share> <amp-social-share type="twitter" width="44" height="44"></amp-social-share> </div>
  66. Agregar el Script del Componente <!doctype html> <html ⚡> <head>

    <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1, initial-scale=1"> <style amp-boilerplate>(✄snip)</style> <noscript><style amp-boilerplate>(✄)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"> </script> </head> <body>Hola Mundo!</body> </html>
  67. Qué hemos aprendido • AMP ayuda a los programadores y

    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 •
  68. Qué hemos construído • Un sitio AMP básico sin errores

    de validación • Agregamos a nuestro sitio: • Imágenes • Un carrusel • Un video de YouTube • Botones para compartir en redes sociales
  69. Siguientes pasos • Cómo responder a la entrada del usuario

    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