Introducción: Google AMP es un marco HTML de código abierto, donde AMP es un acrónimo de Accelerated Mobile Pages. Fue creado por Google y ahora es desarrollado por AMP Open Source Project. Está optimizado para páginas web móviles y tiene la intención de ayudar a que las páginas web se carguen más rápido.
Para usar Google AMP debe tener conocimientos previos de HTML, CSS y JavaScript. Se recomienda aprender los temas mencionados anteriormente antes de comenzar a aprender Google AMP.
Sitio web oficial: https://amp.dev/
Campo de codificación oficial: https://playground.amp.dev/
¿Por qué usar AMP?
Bueno, cualquier usuario de su sitio web querría que el sitio web se cargara rápido y, por otro lado, desearía que el sitio web administrara el tráfico del sitio web, Google AMP resuelve ambos problemas. Está programado de tal manera que no solo carga el sitio web a alta velocidad, sino que también administra el tráfico del sitio web.
Ventajas de Google AMP:
- Las páginas de Google AMP son livianas y también se cargan más rápido.
- Google da prioridad a las páginas AMP en la búsqueda de Google, por lo que obtiene más usuarios. Se enumeran en formato de carrusel en la parte superior de la página.
- Las páginas de Google AMP responden y se ajustan al navegador, lo que las hace compatibles con dispositivos móviles.
Desventajas de Google AMP: Como todos sabemos nada son puras ventajas y lo mismo ocurre con Google AMP. Poseen las siguientes desventajas:
- El editor tiene que mantener dos versiones para sus páginas amp y non-amp, lo que puede aumentar el almacenamiento.
- El usuario tiene que hacer esfuerzos adicionales para convertir las páginas que no son amplificadores en un amplificador. As amp no admite JavaScript personalizado ni la carga de JavaScript externo.
Programa básico: para escribir un programa en AMP, debe usar la etiqueta <html amp> o <html ⚡> en su código en lugar de la etiqueta <html>, ya que cuando el navegador lee esto, entiende que lo siguiente es un código AMP.
HTML
<!-- Doctype declaration is required. -->
<!DOCTYPE html>
<!-- This tells everyone that this is an
AMP file, `<html amp>` works too. -->
<html amp>
<head>
<!-- The charset definition must be the first
child of the `<head>` tag. -->
<meta charset="utf-8">
<title> Hello World</title>
<!-- The AMP runtime must be loaded as the
second child of the `<head>` tag.-->
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- AMP HTML files require a canonical
link pointing to the regular HTML.
If no HTML version exists, it
should point to itself -->
<link rel="canonical" href=
"https://amp.dev/documentation/examples/introduction/hello_world/index.html">
<!-- AMP HTML files require a viewport
declaration. It's recommended to
include initial-scale=1. -->
<meta name="viewport" content=
"width=device-width,minimum-scale=1,
initial-scale=1">
<!-- CSS must be embedded inline. -->
<style amp-custom>
h1 {
color: forestgreen;
}
</style>
<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>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Producción:
Esta salida es para iPhone 6/7/8
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA