Estudio de AMP.js

UI / SSR ⭐ 14k stars
Accelerated Mobile Pages: páginas web rápidas para móvil con componentes predefinidos.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: HTML: <script async src="https://cdn.ampproject.org/v0.js"></script>

<!doctype html><html amp><head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head><body><h1>Hola AMP</h1></body></html>

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Página AMP con imagen

HTML AMP con una imagen optimizada.

<!doctype html>
<html amp>
<head>
  <meta charset="utf-8" />
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  <amp-img src="foto.jpg" width="400" height="300" layout="responsive" alt="Foto"></amp-img>
</body>
</html>
🔁 Cómo funciona: `amp-img` precarga y hace lazy-loading; el runtime AMP optimiza la carga móvil.

2. Carrusel

Componente amp-carousel de imágenes.

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<amp-carousel width="400" height="300" layout="responsive" type="slides">
  <amp-img src="1.jpg" width="400" height="300"></amp-img>
  <amp-img src="2.jpg" width="400" height="300"></amp-img>
</amp-carousel>
🔁 Cómo funciona: El custom-element registra el carrusel y `type="slides"` activa el deslizamiento.

5 · Referencia

CategoríaUI / SSR
Stars (GitHub)⭐ 14k
Sitio oficialhttps://amp.dev/
GitHubhttps://github.com/ampproject/amphtml
InstalaciónHTML: <script async src="https://cdn.ampproject.org/v0.js"></script>
RelacionadasReact.js · Vue.js · Angular
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.