Google AMP es una buena manera de hacer un sitio web móvil con función de carga rápida. Está completamente construido sobre las últimas tecnologías web. Google AMP ha logrado tal velocidad al restringir algunas partes de HTML, CSS y JavaScript para cargar las páginas web a la mejor velocidad posible sin perder su belleza. Esas restricciones conducen a una definición de reglas y elementos personalizados.
Normas:
- Se requiere la declaración de tipo de documento.
<!doctype html>
- El diseñador debe usar <html ⚡> o <html amp> en su lugar o la etiqueta estándar <HTML> para iniciar el código de la página AMP. Esto le dice al navegador que el archivo es un archivo AMP.
<html amp>
- La etiqueta HEAD debe contener los siguientes enlaces y código para que funcione el código AMP.
HTML
<!-- The charset definition must be the
first child of the `<head>` tag. -->
<meta charset="utf-8">
<!-- 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">
<!-- The AMP boilerplate -->
<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>
- Se puede agregar CSS personalizado en la página de AMP escribiendo CSS en la etiqueta AMP CSS como se muestra:
HTML
<style amp-custom> <!-- Custom CSS --> </style>
Cabe señalar que la mayoría de las etiquetas HTML se pueden usar directamente en una página AMP, mientras que algunas etiquetas como img se reemplazan con la etiqueta AMP redefinida.
Ejemplo:
HTML
<!-- Doctype declaration is required. -->
<!doctype html>
<!-- This tells the browser that this is
an AMP file. `<html ⚡>` works too. -->
<html amp>
<head>
<!-- The charset definition must be the
first child of the `<head>` tag. -->
<meta charset="utf-8">
<!-- 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!<br>Welcome to
GeeksForGeeks
</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