Cómo hacer una página AMP básica desde cero

Cómo hacer una página AMP básica desde cero

Desde qué es AMP hasta cómo puede implementar
AMP en su sitio web. Una guía completa para comprender
las páginas AMP y sus entresijos.

| www.GustavoGuardadoRoa.com |

Costa Rica (506) 8322-2771 - seoanddesign @ gmail.com


sitios en la web facebook costa ricatwitter costa ricapinterest costa ricalinkedin costa ricayoutube costa ricamix sitios en la web costa ricatumblr sitios en la web costa ricainstagram sitios en la web costa ricagoogle my business sitios en la web costa rica

marketing digital

 

El Proyecto AMP es una iniciativa de código abierto recientemente implementada respaldada por Google, con el objetivo de ayudar a que los sitios sean más rápidos, particularmente aquellos con un uso intensivo de medios y / o necesidad de monetización. Es esencialmente una forma “sin complicaciones” de implementar lo que de otra manera podrían ser métodos de optimización algo complejos, con la mayoría de los procesos a cargo detrás de escena por usted.

En este tutorial seremos más prácticos, con una guía paso a paso para crear una página AMP desde cero, explicando cómo hacer algunas tareas comunes de la forma AMP y compartiendo algunos consejos sobre la marcha.

¡Vamos a empezar!

Agregar el código repetitivo

La adición de código repetitivo estándar es donde comienza cada plantilla de AMP. Hay un conjunto de código que debe estar presente en cada plantilla AMP, o fallará la validación.

Cree un nuevo archivo HTML llamado index.html y agréguele el siguiente código:

<!doctype html>
<html amp lang="es">
  <head>
    <meta charset="utf-8">
    <title>Make an AMP Page</title>
    <link rel="canonical" href="/index.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Make an AMP Page</h1>
  </body>
</html>

Puede leer un desglose de cada elemento del código anterior en: 

Configurar una vista previa de localhost

Puede (si lo desea) obtener una vista previa de su plantilla AMP recién creada abriéndola directamente en un navegador. Sin embargo, siempre es una buena idea obtener una vista previa en un localhost. Este enfoque simula un servidor web, por lo que el entorno en el que está obteniendo una vista previa de su plantilla es lo más parecido posible al entorno en vivo en el que se implementará.

Para este propósito, recomiendo usar MAMP para Windows o Mac. Si aún no tiene MAMP instalado, diríjase al  sitio web de MAMP  y descargue una copia.

Una vez que haya instalado MAMP, busque su carpeta htdocs . En Mac, normalmente lo encontrará en / Applications / MAMP / htdocs , y en Windows en C: \ MAMP \ htdocs \ .

Dentro de él, cree una nueva carpeta para albergar su proyecto, por ejemplo, myproject . Luego, mueva el archivo index.html que creó en el paso anterior a la carpeta.

Ejecute MAMP y ahora debería poder obtener una vista previa de su plantilla AMP yendo a la URL  http: // localhost: 8888 / myproject /  en Chrome. Incluso si prefiere otro navegador, utilice Chrome, ya que utilizaremos las herramientas para desarrolladores de Chrome en el siguiente paso. 

Su página AMP debería tener este aspecto actualmente:

https://cms-assets.tutsplus.com/uploads/users/53/posts/26158/image/mampamppreview.png

Si va a esta URL y no funciona, es posible que MAMP se esté ejecutando en un número de puerto diferente al 8888 que ve en la URL proporcionada anteriormente. Para saber si este es el caso, en la interfaz de MAMP, haga clic en el botón que dice Abrir página WebStart . Esto lo llevará a una página con información sobre MAMP, y en la URL verá el número de puerto correcto para usar en su lugar:

Activar depuración

Antes de continuar, queremos activar el modo de depuración de AMP para que, si accidentalmente hacemos algo que no pasa la validación, lo sabremos de inmediato. 

Para hacer esto, agregue  #development=1al final de su URL de vista previa, por ejemplo,  http: // localhost: 8888 / myproject / # development = 1.

Luego abra Chrome Developer Tools y vaya a la pestaña Consola , donde debería ver aparecer el siguiente mensaje Powered by AMPHTML ...:

A medida que desarrolle su página, si algo no pasa la validación de AMP, verá un mensaje de error en la consola. En este momento, no tenemos mensajes de error y, en su lugar, vemos "Validación de AMP exitosa", lo que nos informa que todo funciona como debería.

Metadatos JSON opcionales

Junto con el código repetitivo que ya agregó, tiene la opción de agregar algunos metadatos JSON a la sección principal en formato Schema.org así:

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Open-source framework for publishing content",
    "datePublished": "2015-10-07T12:02:41Z",
    "image": [
      "logo.jpg"
    ]
  }
</script>

Esto no es esencial para aprobar la validación de AMP, pero es esencial para ser recogido por varios lugares como Google Search News.

Para leer más sobre estos metadatos, visite:

Tratar con CSS en línea

Uno de los requisitos de AMP es que todos los CSS personalizados deben colocarse en línea en la headsección, entre <style amp-custom>...</style>etiquetas. 

A pesar de este requisito, escribir tu CSS directamente en la sección principal no es un flujo de trabajo ideal. Lo que realmente necesita es poder escribir su CSS en una hoja de estilo externa, como lo haría normalmente, y luego mover ese CSS al lugar apropiado en las headsecciones de todos los archivos de plantilla de su sitio.

No cubriremos el paso a paso de cómo hacer esto aquí, pero si desea saber cómo usar una hoja de estilo externa y aún aprobar la validación de AMP, siga los pasos de nuestro tutorial de consejos rápidos  Facilite el CSS en línea de AMP a través de Jade o PHP  antes de continuar.

Agregar imágenes

Ahora que tiene su código esencial en su lugar, el modo de desarrollo activado y (opcionalmente) la administración de hojas de estilo externas lista para comenzar, ahora podemos pasar a agregar algunos medios a su página. Comenzaremos con el tipo de medio más común: las imágenes.

En AMP, no usa la <img>etiqueta para cargar imágenes. En su lugar, utiliza el elemento personalizado, <amp-img>ya que manejará la optimización de carga en todas las imágenes de su página.

A partir de ahora, en el tutorial, trabajaremos con un diseño de plantilla existente para ayudar a acelerar las cosas. Continúe ahora y obtenga una copia de la plantilla Ceevee gratuita  de StyleShout. Esta plantilla incluye algunas imágenes que puede usar para practicar la incrustación en su documento AMP.

En la carpeta de imágenes de plantillas de Ceevee, verá una imagen grande de dunas de arena por la noche. Comenzaremos colocando esto en su plantilla. Copie la carpeta de imágenes y péguela en la carpeta de su proyecto. 

Luego, agregue el siguiente código para incrustar la imagen, encima de las h1etiquetas que ya están en el HTML:

<amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>

Cualquier forma de contenido multimedia que se coloque en una página AMP debe tener una inicial widthy un heightconjunto, por lo que, a diferencia del uso de una imgetiqueta, en una amp-imgetiqueta no se pueden omitir estos atributos. 

Si no está seguro del tamaño exacto de una imagen, está bien, siempre que los valores que ingrese representen con precisión la relación de aspecto. Los valores widthy heightse pueden considerar como marcadores de posición, ya que AMP puede diseñar la página con los valores que usted proporcione y luego hacer ajustes después de que la imagen esté completamente cargada.

El layoutatributo es lo que permite a AMP ajustar la visualización de la imagen después de cargarla. Hemos establecido su valor en responsive, lo que significa que la imagen mantendrá la relación de aspecto derivada de los valores de ancho y alto, pero se encogerá o expandirá para llenar su contenedor. Es por eso que incluso si no conoce el tamaño exacto de una imagen, siempre que tenga la relación de aspecto, está listo para comenzar.

Lea más sobre amp-imgy el layoutatributo en:

Aproximación de imágenes de fondo de "portada"

Un elemento común en el diseño web actual es el uso de una imagen de fondo que llena la altura y el ancho de la ventana gráfica, creando una especie de presentación de entrada para una página. Normalmente, esto se hace utilizando una imagen de fondo con el CSS  background-size: cover;aplicado. Sin embargo, en los sitios AMP realmente no queremos traer imágenes de fondo grandes a través de CSS, ya que esto evitaría la optimización de carga del sistema.

Ahora, ciertamente podría argumentar que cargar imágenes de fondo grandes no es ideal para aumentar la velocidad de carga y, por esa razón, es mejor que deje todas las imágenes grandes juntas. 

Sin embargo, si inevitablemente necesita crear un diseño con una imagen grande y completa de la ventana gráfica, al menos puede aprovechar la priorización de carga de AMP agregándola a través de la amp-imgetiqueta en lugar de como fondo. Así es como puede hacerlo, aproximándose a la técnica de "cobertura" de fondo en el proceso.

Vamos a tomar la imagen que acaba de incrustar y convertirla en una imagen de portada. Primero, envuelva la imagen con una divetiqueta usando la clase doc_headerpara que tenga:

<div class="doc_header">
  <amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>
</div>

Luego, si aún no lo ha hecho, agregue algunas <style amp-custom>...</style>etiquetas a la sección del encabezado para que podamos incluir algo de CSS personalizado. Entre esas etiquetas agregue:

.doc_header {
    height: 100vh;
    background-color: #000;
    overflow: hidden;
    position: relative;
}

Por lo general, en lugar de lo que se ve arriba, al crear una imagen de portada un diseñador fijará el heightde la htmly bodylos elementos a 100%y luego también establecer su sección de presentación a una heightde  100%, por lo que es llenar la ventana.

Sin embargo, este enfoque no funcionará con AMP ya que el CSS que carga aplica el estilo  height: auto!important;en el bodyelemento, lo que evita que height: 100%;funcione una configuración de .

Entonces, en cambio, si realmente necesita algo que tenga la altura de la ventana gráfica, puede usarlo height: 100vh;, como lo hemos hecho con nuestra doc_headerclase. La vhunidad representa la "altura de la ventana gráfica" y un valor de  100vhequivale al 100% de la altura de la ventana gráfica.

Si guarda y actualiza su sitio ahora, debería ver que el div "doc_header" llena la ventana gráfica exactamente.

Sin embargo, por el momento, la imagen no necesariamente llena el div "doc_header". Si la ventana gráfica es más alta que ancha, habrá un área negra en blanco debajo de ella.

Para solucionar esto, agregue la clase doc_header_bga su amp-imgetiqueta de esta manera:

<amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>

Luego agregue a su CSS:

.doc_header_bg {
    min-height: 100vh;
}

Este código asegurará que la altura de la imagen nunca sea menor que la de la ventana gráfica.

Desafortunadamente, aún se aplastará en anchos más estrechos, por lo que no es tan elegante en apariencia como usar una imagen de fondo. Sin embargo, es una aproximación lo más cercana que podemos obtener mientras todavía usamos el amp-imgelemento.

Uso de fuentes web

Ahora vamos a agregar algunas fuentes web personalizadas a nuestra plantilla. Al hacer esto con AMP, tiene tres métodos de carga que pasarán la validación:

Agregar una fuente de Google

La carga de una fuente de Google debe realizarse a través de un elemento de enlace en el encabezado, utilizando la URL que se le proporcionó para las fuentes que desea en  https://www.google.com/fonts.

Para nuestra plantilla usaremos Open Sans y Libre Baskerville. 

Para cargar estas dos fuentes, agregue este código a la sección de su encabezado:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic|Libre+Baskerville" rel="stylesheet" type="text/css">

Ahora vamos a agregar algo de texto al área de portada de nuestro sitio, al que aplicaremos nuestras nuevas fuentes web. Dentro del div "doc_header" existente, debajo de la imagen, agregue un nuevo div con la clase doc_header_inner:

<div class="doc_header_inner">
</div>

Dentro de ese div, agregue el siguiente código:

<h1 class="doc_header_title">Simulate Background Image Cover</h1>
<p class="doc_header_text">This is a basic page created to show you how to work with the <a href="https://ampproject.org/">AMP Project</a>. In this cover section the background image uses AMP loading optimization. The social icons below use AMP compliant custom font loading. Read on to see more ways to use AMP.</p>
<hr>

Ahora agregue lo siguiente a su CSS personalizado:

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 2;
  color: #838C95;
}
.doc_header_inner {
  position: absolute;
  width: 85vw;
  max-width: 64rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 2rem;
  text-align: center;
}
h1.doc_header_title {
  font: bold 5.625rem/1.1em 'Open Sans', sans-serif;
  color: #fff;
  letter-spacing: -0.125rem;
  margin: 0 auto 1rem auto;
  text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, .8);
}
@media (max-width: 35rem){
  h1.doc_header_title {
    font-size: 12vw;
  }
}
p.doc_header_text {
  font-family: 'Libre Baskerville';
  line-height: 1.9;
  color: #A8A8A8;
  margin: 0 auto;
  width: 70%;
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, .5);
}
.doc_header_text span,
.doc_header_text a {
  color: #fff;
}
.doc_header_inner hr {
  width: 60%;
  margin: 1.125rem auto 1.5rem auto;
  border-color: #2F2D2E;
  border-color: rgba(150, 150, 150, .1);
}

El código anterior es solo CSS normal con el fin de diseñar nuestro texto recién agregado, sin embargo, notará que el proceso de aplicación de nuestras fuentes de Google en una plantilla AMP no es diferente de lo habitual. Utiliza la font-familypropiedad con el valor de la fuente elegida, p. Ej. font-family: 'Libre Baskerville';

Al guardar y actualizar su sitio, debería ver ambas fuentes de Google ahora aplicadas al texto en la sección de portada.

Agregar una fuente personalizada

A continuación, agregaremos una fuente personalizada que no está disponible en Google Fonts o Fonts.com, y esa es Font Awesome. A menudo, si está utilizando Font Awesome, puede cargarlo a través de MaxCDN, sin embargo, AMP no lo permitirá, ya que el CDN no es uno de los dos orígenes de fuente aprobados. Como tal, nos encargaremos de la carga nosotros mismos a través de @font-face.

Descarga los archivos de fuentes

Para cargar la fuente usted mismo, primero deberá descargar los archivos de fuentes, lo que puede hacer en  https://fortawesome.github.io/Font-Awesome/. Tenga en cuenta que solo necesita "Font Awesome", no las herramientas adicionales " Fort Awesome" que se ofrecen durante la descarga.

Una vez que haya descargado el archivo zip Font Awesome, extráigalo y copie la carpeta de fuentes que contiene en la carpeta de su proyecto.

A su CSS, agregue el siguiente código:

/* Font Awesome */
@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-facebook:before {
    content: "\f09a";
}
.fa-twitter:before {
    content: "\f099";
}
.fa-google-plus:before {
    content: "\f0d5";
}
.fa-linkedin:before {
    content: "\f0e1";
}
.fa-instagram:before {
    content: "\f16d";
}
.fa-dribbble:before {
    content: "\f17d";
}
.fa-skype:before {
    content: "\f17e";
}
/* /Font Awesome */

Recomiendo insertar el código anterior en la parte superior de su CSS personalizado para ayudar a mantener las cosas organizadas. Este código se carga en nuestros archivos de fuentes personalizados y crea clases que se pueden usar para agregar íconos de fuentes a un diseño; es el CSS estándar proporcionado para su uso por Font Awesome.

Luego también agregue este CSS:

.doc_header_social {
    margin: 1.5rem 0;
    padding: 0;
    font-size: 1.875rem;
    text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, .8);
}
.doc_header_social li {
    display: inline-block;
    margin: 0 1rem;
    padding: 0;
}
.doc_header_social li a {
    color: #fff;
}
.doc_header_social li a:hover {
    color: #11ABB0;
}

Este CSS adicional agrega un estilo específico a nuestra plantilla que usaremos para configurar una fila de íconos sociales vinculados. 

Agregue este HTML después del <hr>interior del div "doc_header_inner":

<ul class="doc_header_social">
  <li><a href="#"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
  <li><a href="#"><i class="fa fa-instagram"></i></a></li>
  <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
  <li><a href="#"><i class="fa fa-skype"></i></a></li>
</ul>

Si actualiza su sitio ahora, debería ver una fila de @font-faceíconos sociales potenciados en la parte inferior del texto que agregamos anteriormente-

Integrar el amp-fontelemento

Para ayudar a garantizar que los visitantes no terminen viendo un sitio roto si las fuentes personalizadas no se cargan correctamente, AMP proporciona el amp-fontelemento que le permite crear alternativas.

Para que este elemento funcione, lo primero que debe hacer es cargar el script AMP que lo habilita. En su sección principal, agregue este código:

<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

Ahora, con el amp-fontelemento listo para usar, podemos hacer que agregue una clase a la etiqueta htmlo bodysi nuestra fuente no se carga. Agregue este código al final de su plantilla, antes de la </body>etiqueta de cierre :

<amp-font layout="nodisplay" font-family="FontAwesome" timeout="3000" on-error-add-class="font-awesome-missing"></amp-font>

Echemos un vistazo rápido a los atributos establecidos en este elemento. Primero establecemos lo layout="nodisplay" que asegura que el elemento sea invisible.

A continuación, el atributo font-familyse establece en FontAwesome, lo que le dice a AMP que queremos rastrear la carga de la fuente llamada "FontAwesome". Asegúrese de que este valor coincida exactamente con la font-familyconfiguración de su @font-facecódigo CSS.

El atributo timeoutestá establecido en 3000, lo que significa que permitiremos hasta tres segundos para que se cargue la fuente antes de pasar a una reserva. Puede cambiar esto a cualquier valor que prefiera.

Finalmente, nos pusimos on-error-add-classen font-awesome-missing. Si la fuente no se carga después de tres segundos, esta clase se agregará al elemento htmlo body. Podemos apuntar a esta clase para crear nuestro comportamiento alternativo agregando este código a nuestro CSS personalizado:

.font-awesome-missing .doc_header_social {
    display:none;
}

Si la fuente no se carga después de tres segundos, el CSS anterior se activará y ocultará toda la barra de iconos sociales para que no tengamos ninguna pantalla rota.

Ahora intente cambiar temporalmente el nombre de la carpeta de fuentes de su proyecto para que las fuentes no se carguen, luego actualice su página y debería ver que el área de iconos sociales se oculta. También debería ver la clase font-awesome-missingagregada a la etiqueta htmlo body. Restaure la carpeta de fuentes con el nombre correcto y debería ver los íconos de fuentes nuevamente al actualizar.

Lea más sobre el amp-fontelemento en:

Agregar un video de YouTube

A continuación, aprenderemos cómo agregar un video de YouTube de la manera AMP, pero primero debemos agregar un pequeño código de limpieza para crear una sección para que el video se siente.

Después del div "doc_header", reemplace las h1etiquetas existentes con este HTML:

<div class="video_wrap">
  <div class="standard_width standard_padding">
    <h2>Embed a YouTube Video</h2>
  </div>
</div>

Luego agregue esto a su CSS personalizado:

.standard_width {
  width: 100%;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}
.standard_padding {
  box-sizing: border-box;
  padding: 6rem 3rem;
}
.video_wrap {
  background-color: #2B2B2B;
}

Sugerencia: Manejo del modelo de caja en páginas AMP

Es posible que haya notado en el CSS anterior que configuramos box-sizing: border-box;en la standard_paddingclase. 

La razón de esto es que en AMP no puede usar la técnica común de incluir  * {box-sizing: border-box}, porque el  * selector se considera que consume demasiados recursos. Como tal, deberá configurar box-sizing: border-box; los elementos específicos en los que lo necesita, o simplemente manejar el relleno y los bordes a la antigua usanza: con una calculadora o contando con los dedos.

Integrar el amp-youtubeelemento

Ahora que la sección está configurada y lista para el contenido, agregaremos un video de YouTube usando el amp-youtubeelemento personalizado de AMP . Al usar este elemento en lugar del código de inserción estándar de YouTube, podemos aprovechar técnicas de optimización de carga similares a las de  amp-img.

Para empezar, deberá agregar el JavaScript de AMP necesario para habilitar el nuevo elemento. En la sección de cabecera, pegue:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Ahora agregue el siguiente HTML dentro de los divs que acaba de agregar, debajo de las h2etiquetas: 

<amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="600" height="270"></amp-youtube>

Para especificar el video que desea cargar, configure su ID de YouTube en el atributo data-videoid. Aparte de este atributo, el amp-youtubeelemento es muy similar al amp-imgelemento.

Tenemos el  widthy height establecido en 600y 270respectivamente. Al igual que con las imágenes, los videos deben tener un ancho y un alto iniciales establecidos.

Luego usamos layout="responsive"para que el video se ajuste al tamaño de su contenedor, mientras mantenemos la relación de aspecto extraída de sus configuraciones de alto y ancho.

Guarde y actualice su sitio e intente cambiar el tamaño de la ventana gráfica. Debería ver que su video de YouTube se expande o encoge para adaptarse, manteniendo la relación de aspecto correcta a medida que avanza.

Lea más sobre el amp-youtubeelemento en:

Agregar contenido basado en iframe

AMP tiene elementos personalizados adicionales para cargar contenido de sitios específicos, como amp-twitter, amp-instagramy algunos más. Para el contenido de sitios de terceros que no tienen su propio elemento AMP dedicado, está el amp-iframeelemento. Ahora vamos a utilizar este elemento para cargar un mapa de Google en nuestra página.

Cree un contenedor para el mapa agregando este código debajo de sus divs "video_wrap":

<div class="standard_width standard_padding">
  <h2>Use iframe Embedding, e.g. Maps</h2>
</div>

Ahora, al igual que con los elementos amp-fonty amp-youtube, necesitaremos cargar el script AMP que impulsa el amp-iframeelemento. Agregue esto a la sección de su cabeza:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

A continuación, dentro de su nuevo div y debajo de las h2etiquetas, agregue este código:

<amp-iframe width="1100" height="600" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" layout="responsive" frameborder="0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&amp;q=Alameda,%20CA"></amp-iframe>

Vuelva a cargar su sitio y debería ver un mapa de Google ahora en su lugar.

Además de optimizar la carga, el uso del amp-iframeelemento ayuda a garantizar que el contenido que se visualiza a través del iframe no se comporte de formas no deseadas, como ejecutar JavaScript que podría causar una carga lenta o forzar la aparición de anuncios emergentes. El sandboxatributo le permite determinar qué nivel de control aplica sobre el contenido del iframe.

Para obtener detalles completos sobre amp-iframey sus controles de "caja de arena", visite:

Configurar una galería de imágenes con Lightbox

Una de las cosas que puede parecer limitante cuando se trabaja con AMP es la regla de que no se permite JavaScript personalizado. Sin embargo, por otro lado, hay elementos personalizados incluidos en AMP que tienen como objetivo brindarle algunas de las funciones que normalmente podría implementar a través de JavaScript personalizado.

Por ejemplo, en lugar de cargar un script de caja de luz personalizado, puede usar el amp-image-lightboxelemento. Vamos a crear una galería de imágenes que use este elemento ahora.

Comience creando un contenedor para su galería agregando este código justo encima de su amp-fontetiqueta:

<div class="portfolio_wrap">
  <div class="standard_width">
    <div class="portfolio_inner clearfix">
      <h2>Create a Gallery with Lightboxes</h2>
    </div>
  </div>
</div>

También agregue esto a su CSS personalizado:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
.portfolio_wrap {
    background-color: #ebeeee;
}
.portfolio_inner {
    padding: 4rem 6rem;
}
.portfolio_item {
    box-sizing: border-box;
    float: left;
    width: 25%;
    text-align: center;
    padding: 0.8rem;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

Al igual que nuestros últimos elementos personalizados, necesitaremos cargar un script AMP para habilitar el amp-image-lightboxelemento. Agregue esto a la sección de su cabeza:

<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>

Ahora estamos listos para comenzar a configurar nuestra galería de lightbox. Comience agregando este código dentro de sus nuevos divs, debajo de las h2etiquetas:

<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

Este amp-image-lightboxelemento creará la pantalla de caja de luz real con las imágenes ampliadas en su interior. Queremos ocultarlo hasta que un usuario haga clic en una imagen que desee ampliar, así que lo configuramos en layout="nodisplay". 

Nota : hemos establecido el ID de este elemento en lightbox1.

Para agregar un elemento a la galería, agregue este div debajo del amp-image-lightboxelemento:

<div class="portfolio_item">
</div>

Luego, dentro de él, agregue este amp-imgcódigo:

<amp-img on="tap:lightbox1" role="button" tabindex="0" src="images/portfolio/coffee.jpg" width="215" height="215" layout="responsive"></amp-img>

En su mayor parte, este amp-imageelemento es el mismo que agregamos anteriormente, sin embargo, notará la adición de on="tap:lightbox1". Esto le dice a AMP que cuando se toca o hace clic en la imagen, la versión más grande debe abrirse en una caja de luz con la identificación lightbox1, es decir, el amp-image-lightboxelemento que acabamos de crear.

Agregue otras siete imágenes a la galería con este código:

<div class="portfolio_item">
  <amp-img on="tap:lightbox1" role="button" tabindex="1" src="images/portfolio/console.jpg" width="215" height="215" layout="responsive"></amp-img>
</div>
<div class="portfolio_item">
  <amp-img on="tap:lightbox1" role="button" tabindex="2" src="images/portfolio/farmerboy.jpg" width="215" height="215" layout="responsive"></amp-img>
</div>
<div class="portfolio_item">
  <amp-img on="tap:lightbox1" role="button" tabindex="3" src="images/portfolio/girl.jpg" width="215" height="215" layout="responsive"></amp-img>
</div>
<div class="portfolio_item">
  <amp-img on="tap:lightbox1" role="button" tabindex="4" src="images/portfolio/into-the-light.jpg" width="215" height="215" layout="responsive"></amp-img>
</div>
<div class="portfolio_item">
  <amp-img on="tap:lightbox1" role="button" tabindex="5" src="images/portfolio/judah.jpg" width="215" height="215" layout="responsive"></amp-img>
</div>
<div class="portfolio_item">
  <amp-img on="tap:lightbox1" role="button" tabindex="6" src="images/portfolio/origami.jpg" width="215" height="215" layout="responsive"></amp-img>
</div>
<div class="portfolio_item">
  <amp-img on="tap:lightbox1" role="button" tabindex="7" src="images/portfolio/retrocam.jpg" width="215" height="215" layout="responsive"></amp-img>
</div>

Para leer más sobre la amp-image-lightboxvisita:

Terminando

Ahora tiene una página AMP básica con algunos de los tipos de contenido más comunes y algunos pequeños trucos para ayudarlo a trabajar de manera eficiente y de acuerdo con las reglas de validación de AMP. 

Recapitulemos los puntos clave de lo que cubrimos:

  • Siempre comience con el  código repetitivo
  • Utilice una vista previa de localhost; Recomendado por MAMP
  • Active la depuración agregando #development=1a su URL de vista previa y mirando la consola de Herramientas para desarrolladores de Chrome
  • Incluya metadatos JSON de Schema.org si lo desea
  • Maneje CSS en línea más fácilmente a través de este consejo rápido
  • Utilice elementos personalizados de AMP en lugar de elementos HTML predeterminados cuando estén disponibles
  • Cuando sea necesario, cargue JavaScript AMP adicional para impulsar elementos personalizados
  • Cargue fuentes personalizadas de Google Fonts, Fonts.com o via @font-face, usando el amp-fontelemento para crear alternativas
  • Utilice elementos personalizados de AMP integrados en lugar de JavaScript personalizado, por ejemplo, en amp-image-lightboxlugar de una secuencia de comandos de lightbox

Espero que todo esto haya ayudado a aclarar el proceso de creación de páginas AMP para que se sienta seguro de crear sitios en vivo desde cero. ¡Ahora sal y diviértete creando sitios web acelerados de AMP!

Plantillas HTML para practicar

Eche un vistazo a algunas de estas plantillas de página de destino si desea practicar en algo diferente al de este tutorial:

Gustavo Guardado Roa

Te ofrecezco desarrollar tu proyecto web de forma profesional.
Tengo a tu disposición diversas opciones atractivas.

 

Publicar un comentario

Nota: Los Campos marcados con un * son obligatorios.

Nombre:

Apellidos:

E-mail:

Comentario:

"Asegurate de colocar la dirección de tu correo electrónico, de lo contrario, no podremos evacuar tus preguntas, consultas o saber quién comenta"

blank space




Bueno, te preguntarás ¿Quién es la persona que te brinda estos consejos técnicos?, pues es quien te ha estado enviando contenidos de SEO, SEM, SMO, Web and Graphic Design. Sí, esta es mi foto y mi nombre es Gustavo Guardado Roa y soy tu anfitrión en el recorrido de este sitio en la web, mi idea es asistirte en el proceso de hacer tu página web y del como tener un ingreso con el buen uso del marketing en la internet y las mejores aplicaciones.

gustavo guardado roa
Gustavo Guardado Roa
Consultor Marketing Digital y SEO
Leer mas

posicionamiento web en costa rica
chatbot costa rica
Chatbot Costa Rica

posicionamiento web en costa rica
Inscríbete a nuestro Boletín Electrónico
Recibí consejos GRATIS sobre las
últimas noticias de Marketing Digital.

posicionamiento web en costa rica
¿Qué es SEO?

que es seo
Bajar PDF- -> SEO vs PPC

posicionamiento web en costa rica WhatsApp SEO Costa Rica

posicionamiento web en costa rica

seo costo
Presios SEO

Permitínos mejorar tus
resultados de marketing en línea.
Hemos aumentado el tráfico,
los clientes potenciales y
las ventas de compañías en
turismo, bienes raíces, medicina.
Además, para cientos de pequeñas
empresas locales como dentistas,
veterinarios, fontaneros, dermatólogos, etc.

posicionamiento web en costa rica

Posicionamiento internacional a través de SEO

Compartí este
artículo por Whatsapp

posicionamiento web en costa rica

SEO Costa Rica MAPA


posicionamiento web en costa rica

Cómo hacer una página AMP básica desde cero

Cómo hacer una
página AMP básica desde cero


posicionamiento web en costa rica

  Pasos para desarrollar un plan de SEO exitoso

Pasos para desarrollar
un plan de SEO exitoso


posicionamiento web en costa rica

Cómo implementar AMP en tu sitio web

Cómo implementar AMP
en tu sitio web


posicionamiento web en costa rica

 Core Web Vitals elementos básicos de la Web

Core Web Vitals
elementos básicos de la Web


posicionamiento web en costa rica

Diseño web receptivo y móvil primero

Diseño web receptivo
y móvil primero


posicionamiento web en costa rica

¿Qué es Mobile First Design?

¿Qué es Mobile First Design?


posicionamiento web en costa rica

como-mejorar-el-seo-de-tu-blog

¿Cómo mejorar el SEO de tu blog?


posicionamiento web en costa rica

 ¿Cómo funciona el SEO con un presupuesto de PYME?

¿Cómo funciona el SEO
con un presupuesto de PYME?


posicionamiento web en costa rica

¿Cómo desarrollar el mejor presupuesto de marketing SEO?

¿Cómo desarrollar el mejor
presupuesto de marketing SEO?


posicionamiento web en costa rica

Crear estrategia SEO con presupuesto reducido 

Crear estrategia SEO
con presupuesto reducido


posicionamiento web en costa rica

Consejos de publicaciones óptimas para blog SEO

Consejos de publicaciones
óptimas blog SEO


posicionamiento web en costa rica

  Consejos para clasificar más alto en una búsqueda

Consejos para clasificar
más alto en una búsqueda


posicionamiento web en costa rica