Home Blog AMP HTML ¡Conoce las Accelerated Mobile Pages

AMP HTML ¡Conoce las Accelerated Mobile Pages

4/18/2025

Introducción a AMP HTML

AMP (Accelerated Mobile Pages) es un framework de código abierto diseñado para mejorar el rendimiento de las páginas web en dispositivos móviles.

Diagrama de AMP HTML

¿Por qué usar AMP?

  • Rendimiento mejorado: Las páginas AMP cargan casi instantáneamente.
  • Mejor SEO: Google prioriza las páginas AMP en los resultados móviles.
  • Experiencia consistente: Uniformidad en la experiencia del usuario.

Componentes principales de AMP

  1. AMP HTML: HTML con restricciones para garantizar un rendimiento rápido.
  2. AMP JS: Biblioteca JavaScript que gestiona la carga de recursos.
  3. AMP Cache: Red de entrega de contenido para servir páginas AMP.

Estructura básica de un documento AMP

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Mi página AMP</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width">
  <style amp-boilerplate>body{-webkit-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}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
  <noscript><style amp-boilerplate>body{-webkit-animation:none;animation:none}</style></noscript>
</head>
<body>
  <h1>Hola Mundo AMP!</h1>
</body>
</html>

Comparativa: AMP vs HTML tradicional

Característica AMP HTML Tradicional
Tiempo de carga ~1 segundo 3-5 segundos
Tamaño del JS ~150KB 500KB-2MB
Renderizado Priorizado Depende del navegador
"AMP es más que una tecnología, es un ecosistema diseñado para hacer la web más rápida y accesible para todos los usuarios, especialmente en móviles."
- Malte Ubl, creador de AMP

¿Quieres aprender más sobre AMP?

Suscríbete a nuestro boletín:

Explicación de cómo se aplica la estructura CSS

Encabezados (h1-h4)

  • Se muestran con diferentes tamaños según su jerarquía
  • El h1 tiene el tamaño más grande (2.5rem en desktop)
  • Cada encabezado tiene márgenes superiores e inferiores consistentes
  • En móviles, los tamaños se reducen automáticamente (media queries)

Ejemplo de código:

h1 {
  font-size: 2.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
}

Párrafos (p)

  • Espaciado uniforme (margin-bottom: 1.25rem)
  • Tamaño de fuente heredado del body (16px en desktop, 14px en móviles)
  • Interlineado cómodo (line-height: 1.6)

Listas (ul, ol, li)

  • Las listas tienen sangría izquierda (padding-left: 2rem)
  • Cada ítem tiene espacio inferior (margin-bottom: 0.5rem)
  • Las listas anidadas tienen menos margen

Ejemplo visual:

  1. Elemento de lista ordenada
  2. Otro elemento
    • Sub-elemento desordenado
    • Otro sub-elemento

Código (code, pre)

  • code tiene fondo gris claro y tipografía monoespaciada
  • pre muestra bloques de código con scroll horizontal si son muy largos
  • Padding y bordes redondeados para mejor legibilidad

Tablas (table, th, td)

  • Bordes delgados y limpios
  • Encabezados con fondo gris claro
  • En móviles, la tabla tiene scroll horizontal

Ejemplo de tabla:

Elemento Propiedad CSS Valor
table overflow-x auto
th background-color #f5f5f5

Imágenes (img)

  • Máximo ancho del 100% para que sean responsive
  • Margen inferior consistente
  • Se centran automáticamente
Ejemplo de imagen responsive

Formularios (input, select, button)

  • Estilos consistentes para todos los elementos
  • Botones con transición de color al hover
  • Inputs con bordes sutiles y padding adecuado

Ejemplo de formulario:

Responsive Design

  • Los media queries ajustan tamaños de fuente y espaciados en móviles
  • El contenedor principal tiene padding lateral que se reduce en pantallas pequeñas
  • Las tablas se adaptan con scroll horizontal en móviles

Ejemplo de media query:

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  
  .container {
    padding: 0 0.75rem;
  }
}

Conclusión

Este ejemplo muestra cómo todos los elementos trabajan juntos para crear una experiencia de lectura consistente tanto en desktop como en móviles, aplicando los principios de diseño responsive.


Tags:

Share:

3 comentarios: