AMP ¿Como iniciar?

AMP ¿Como iniciar?

How to start working with AMP?

Slides in Spanish

8513bd393d0d86f1d297ae5a3e4a2157?s=128

Mariano Alvarez

November 02, 2019
Tweet

Transcript

  1. 2.

    Web Practice Lead Co-Organizador de Angular Costa Rica Fan de

    JS, TS, NG, Web Techs, Pizza, Emojis Mariano Álvarez @malvarezcr
  2. 4.

    ¿Que es un AMP? AMP is a web component framework

    and a website publishing technology developed by Google which has the mission to "provide a user-first format for web content”
  3. 5.

    ¿Que es un AMP? • Escrito con los estándares actuales

    de HTML, CSS y JS • Compatible con los browsers modernos • No depende de herramientas especiales o lógica de deployment • Basado en componentes igual que otros frameworks actuales
  4. 6.

    ¿Beneficios de los AMPs? • Mejora el tiempo de carga

    • Mejor posicionamiento en buscadores • Layout flexible • Disminuye la descarga de datos • Son desplegados en el carrusel del Google Search • Pre-carga son precargados cuando se realiza una búsqueda
  5. 7.

    Desventajas • Enfocado en el rendimiento y no en el

    diseño • Los analytics son limitados • Uso restringido de Javascript y CSS
  6. 8.

    Limitaciones • El uso de Javascript solo puede ser a

    través de los Web Components de AMP • No se pueden utilizar CSS externo, debe ser en línea con un peso máximo de 50kb • Algunas propiedades de CSS no se pueden usar. Ej. important!
  7. 15.

    Estructura basica • <html ⚡ lang="en"> • <meta charset="utf-8" />

    • <script async src="https://cdn.ampproject.org/v0.js"></script>
  8. 17.

    ¿Como validar mi AMP? • Agregar el siguiente fragment al

    final url E.g http://localhost:8000/cars.amp.html#development=1
  9. 23.
  10. 25.

    Links de referencia • Ejemplo Github https://github.com/mahcr/amp • Documentacion AMP

    https://amp.dev/documentation/ • Generators https://amp.dev/boilerplate/ • Twitter: @malvarezcr / Medium: @mahcr Mariano Álvarez