Share
El Proyecto AMP es una iniciativa de código abierto recientemente implementada y respaldada por Google, con el objetivo de ayudar a que los sitios sean más rápidos, en particular aquellos con un uso intensivo de medios y / o que necesiten monetización. Es esencialmente una manera "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 resueltos detrás de la escena para usted.
En nuestro artículo Proyecto AMP: ¿Hará que sus sitios sean más rápidos ?, explicamos en detalle lo que AMP significará para usted desde el punto de vista de un desarrollador, y le brindamos algunos números en bruto sobre qué tipo de ganancias de velocidad puede o no dar AMP tú.
En este tutorial seremos más prácticos, con una guía paso a paso para crear realmente una página AMP desde cero, explicar cómo realizar algunas tareas comunes de la manera AMP y compartir algunos consejos a medida que avanzamos..
Vamos a empezar!
Agregar código estándar de caldera es donde comienza cada plantilla AMP. Hay un conjunto de código que debe estar presente en cada plantilla de AMP, o fallará la validación.
Crea un nuevo archivo HTML llamado index.html y añádele el siguiente código:
Hacer una página de AMP Hacer una página de AMP
Puede leer un desglose de cada elemento del código anterior en:
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 realizar una vista previa en un host local. Este enfoque simula un host web, por lo que el entorno en el que está previsualizando su plantilla es lo más cercano 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 tengas MAMP instalado, encuentra su htdocs carpeta. En Mac normalmente lo encontrarás en / Aplicaciones / MAMP / htdocs, y en Windows en C: \ MAMP \ htdocs \.
Dentro, cree una nueva carpeta para albergar su proyecto, por ejemplo,. mi proyecto. Luego mueve el index.html archivo que creó en el paso anterior en la carpeta.
Ejecute MAMP y ahora debería poder obtener una vista previa de su plantilla AMP ingresando a la URL http: // localhost: 8888 / myproject / en Chrome. Incluso si prefiere otro navegador, use Chrome ya que usaremos Chrome Developer Tools en el siguiente paso.
Tu página de AMP debería tener este aspecto:
Si accede a esta URL y no funciona, es posible que MAMP se esté ejecutando en un número de puerto diferente al 8888 que se ve en la URL que se proporciona más arriba. Para saber si este es el caso, en la interfaz MAMP, haga clic en el botón que dice Abrir la 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:
Antes de seguir adelante, queremos activar el modo de depuración de AMP, por lo que si hacemos algo accidentalmente que no pasa la validación, lo sabremos de inmediato..
Para ello, añada # desarrollo = 1 hasta el final de la URL de vista previa, por ejemplo, http: // localhost: 8888 / myproject / # development = 1.
Entonces abre Herramientas para desarrolladores de Chrome e ir a la Consola pestaña, donde deberías ver lo siguiente Desarrollado por AMP ⚡ HTML ... Aparece el mensaje:
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 "La validación de AMP fue exitosa", lo que nos permite saber que todo está funcionando como debería..
Junto con el código de referencia que ya ha agregado, tiene la opción de agregar algunos metadatos JSON a la sección de cabecera en formato Schema.org, de esta manera:
Esto no es esencial para pasar la validación de AMP, pero es esencial para ser recogido por varios lugares como Google Search News.
Para leer más sobre esta visita de metadatos:
Uno de los requisitos de AMP es que todas las CSS personalizadas deben colocarse en línea en el cabeza sección, entre etiquetas.
A pesar de este requisito, en realidad escribir su 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 hacer que el CSS se mueva al lugar apropiado en el cabeza secciones de todos los archivos de plantilla de su sitio.
No veremos paso a paso cómo hacer esto aquí, pero si desea saber cómo usar una hoja de estilo externa y aún así pasar la validación de AMP, siga los pasos en nuestro tutorial de consejos rápidos Haga que el Inline CSS de AMP sea más fácil a través de Jade o PHP antes de continuar.
Ahora que tiene el código esencial en su lugar, el modo de desarrollo activado y (opcionalmente) la administración de hojas de estilo externa lista para comenzar, ahora podemos continuar agregando algunos medios a su página. Comenzaremos con el tipo más común de medios: imágenes..
En AMP no usas el
De aquí en adelante en el tutorial, vamos a trabajar con un diseño de plantilla existente para ayudar a acelerar el proceso. Avance ahora y consiga 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 las plantillas de Ceevee. imagenes En la carpeta verá una imagen grande de dunas de arena en la noche. Vamos a comenzar colocando esto en su plantilla. Copie el imagenes Carpeta y pégala en tu carpeta de proyecto.
Luego, agregue el siguiente código para incrustar la imagen, arriba del h1 Etiquetas que ya están en el HTML:
Cualquier tipo de medio colocado en una página AMP debe tener una inicial anchura y altura conjunto, por lo que a diferencia de usar un img etiqueta, en un amp-img etiqueta no puedes dejar estos atributos.
Si no está seguro del tamaño exacto que tendrá una imagen, está bien, siempre y cuando los valores que ingrese representen con precisión la relación de aspecto. los anchura y altura Los valores se pueden considerar como marcadores de posición, ya que AMP puede diseñar la página con los valores que proporciona y luego realizar ajustes una vez que la imagen está completamente cargada..
los diseño atributo es lo que permite a AMP ajustar la visualización de la imagen después de cargarla. Hemos fijado su valor en sensible, lo que significa que la imagen mantendrá la relación de aspecto derivada de los valores de ancho y alto, pero se reducirá o expandirá para llenar su contenedor. Esta es la razón por la que incluso si no conoce el tamaño exacto de una imagen, siempre que tenga la relación de aspecto que está listo para usar.
Guarde y actualice su vista previa y debería ver la imagen llenando su ventana gráfica:
Leer más sobre amp-img y el diseño atributo en:
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 presentación de entrada para una página. Normalmente esto se hace usando una imagen de fondo con el CSS tamaño de fondo: cubierta; aplicado a ella Sin embargo, en los sitios de AMP no queremos traer grandes imágenes de fondo a través de CSS, ya que esto evitaría la optimización de carga del sistema..
Ahora, sin duda, 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 dejar de lado las imágenes grandes..
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 amp-img etiqueta en lugar de como fondo. A continuación le indicamos cómo puede hacerlo, aproximando 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, envuelve la imagen con un div etiqueta usando la clase doc_header así que tienes:
Entonces, si aún no lo has hecho, agrega algo etiquetas a la sección de cabecera para que podamos incluir algunos CSS personalizados. Entre esas etiquetas agregue:
.doc_header altura: 100vh; color de fondo: # 000; desbordamiento: oculto; posición: relativa;
Por lo general, en lugar de lo que se ve arriba, al crear una imagen de portada, un diseñador establecerá el altura del html y cuerpo elementos para 100% y luego también establecer su sección de portada a una altura de 100%, haciéndolo llenar la ventana.
Sin embargo, este enfoque no funcionará con AMP ya que el CSS que carga impone el estilo altura: auto! importante; sobre el cuerpo elemento, evitando un ajuste de altura: 100%; de trabajar.
Entonces, si realmente necesitas algo para ser la altura de la ventana gráfica que puedes usar altura: 100vh;, como hemos hecho con nuestro doc_header clase. los vh unidad representa la "altura de la ventana gráfica", y un valor de 100vh equivale al 100% de la altura de la ventana gráfica.
Si guarda y actualiza su sitio ahora, debería ver que la división "doc_header" llena la ventana gráfica exactamente.
En este momento, sin embargo, 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 arreglar esto agrega la clase doc_header_bg para usted amp-img etiqueta como esta:
Entonces 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 seguimos usando el amp-img elemento.
Ahora vamos a agregar algunas fuentes web personalizadas en nuestra plantilla. Al hacer esto con AMP, tiene tres métodos de carga que pasarán la validación:
Accentsconagua
@Perfil delantero La carga de una fuente de Google se debe realizar a través de un elemento de enlace en la cabecera, 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 su sección principal:
Ahora vamos a agregar un poco de texto a nuestra área de cobertura del sitio, a la que aplicaremos nuestras nuevas fuentes web. Dentro de la div "doc_header" existente, debajo de la imagen, agregue una nueva div con la clase doc_header_inner:
Dentro de esa div agregue el siguiente código:
Simular portada de imagen de fondo
Esta es una página básica creada para mostrarle cómo trabajar con el Proyecto AMP. En esta sección de portada, la imagen de fondo utiliza la optimización de carga de AMP. Los siguientes iconos sociales utilizan la carga de fuentes personalizadas compatible con AMP. Sigue leyendo para ver más formas de usar AMP..
Ahora agregue lo siguiente a su CSS personalizado:
body font-family: 'Open Sans', sans-serif; tamaño de letra: 1rem; línea de altura: 2; color: # 838C95; .doc_header_inner posición: absoluta; ancho: 85vw; ancho máximo: 64rem; superior: 50%; izquierda: 50%; transformar: traducir (-50%, -50%); parte inferior de relleno: 2rem; text-align: center; h1.doc_header_title font: bold 5.625rem / 1.1em 'Open Sans', sans-serif; color: #fff; espacio entre letras: -0.125rem; margen: 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'; línea de altura: 1.9; color: # A8A8A8; margen: 0 auto; ancho: 70%; texto-sombra: 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%; margen: 1.125rem auto 1.5rem auto; color de borde: # 2F2D2E; color de borde: rgba (150, 150, 150, .1);
El código anterior es solo CSS regular para los fines de presentar 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. Usas el Familia tipográfica propiedad con el valor de la fuente elegida, por ejemplo,. Familia tipográfica: 'Libre Baskerville';
Al guardar y actualizar su sitio, debería ver las dos fuentes de Google ahora aplicadas al texto en la sección de la cubierta:
A continuación, agregaremos una fuente personalizada que no está disponible en Google Fonts o Fonts.com, y eso 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 fuentes aprobados. Como tal, vamos a manejar la carga a través de @Perfil delantero.
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 el extra “Fuerte Impresionantes "herramientas que se ofrecen durante la descarga.
Una vez que haya descargado el archivo zip Font Awesome, extráigalo y copie el fuentes carpeta que contiene en su carpeta de 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') formato ('embedded-opentype'), url ('fonts / fontawesome-webfont.woff? v = 4.0.3') formato ( 'woff'), url ('fuentes / fontawesome-webfont.ttf? v = 4.0.3') formato ('truetype'), url ('fuentes / fontawesome-webfont.svg? v = 4.0.3 # fontawesomeregular') formato ('svg'); fuente-peso: normal; estilo de letra: normal; .fa display: inline-block; Familia de fuentes: FontAwesome; estilo de letra: normal; fuente-peso: normal; línea de altura: 1; -webkit-font-smoothing: suavizado; -moz-osx-font-smoothing: escala de grises; .fa-facebook: antes de contenido: "\ f09a"; .fa-twitter: antes de contenido: "\ f099"; .fa-google-plus: antes de contenido: "\ f0d5"; .fa-linkedin: antes de contenido: "\ f0e1"; .fa-instagram: antes de contenido: "\ f16d"; .fa-dribbble: antes de contenido: "\ f17d"; .fa-skype: antes de contenido: "\ 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 iconos de fuentes a un diseño: es el CSS estándar proporcionado por Font Awesome.
Entonces también agrega este CSS:
.doc_header_social margen: 1.5rem 0; relleno: 0; tamaño de fuente: 1.875rem; texto-sombra: 0 0.0625rem 0.125rem rgba (0, 0, 0, .8); .doc_header_social li display: inline-block; margen: 0 1rem; relleno: 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 iconos sociales vinculados.
Añadir este HTML después de la
Si actualizas tu sitio ahora deberías ver una fila de @Perfil delantero Íconos sociales activados en la parte inferior del texto que agregamos anteriormente:
fuente amp ElementoPara ayudar a garantizar que los visitantes no terminen viendo un sitio roto si las fuentes personalizadas no se cargan correctamente, AMP proporciona el fuente amp Elemento para permitirle crear fallbacks..
Para que este elemento funcione, lo primero que debe hacer es cargar el script AMP que lo habilita. En tu sección principal, agrega este código:
Ahora con el fuente amp Elemento listo para usar, podemos hacer que agregue una clase a la html o cuerpo etiqueta si nuestra fuente no se carga. Agregue este código al final de su plantilla, antes del cierre
Echemos un vistazo rápido a los atributos establecidos en este elemento. Primero establecemos layout = "nodisplay" lo que asegura que el elemento es invisible..
A continuación, el atributo Familia tipográfica se establece en FontAwesome, que le indica a AMP que queremos rastrear la carga de la fuente llamada "FontAwesome". Asegúrese de que este valor coincida exactamente con el Familia tipográfica estableciendo en su @Perfil delantero Código CSS.
El atributo se acabó el tiempo se establece en 3000, lo que significa que vamos a permitir hasta tres segundos para que la fuente se cargue antes de pasar a un repliegue. Puedes cambiar esto al valor que prefieras.
Finalmente, nos propusimos en error-agregar-clase a falta de letra impresionante. Si la fuente no se carga después de tres segundos, esta clase se agregará a la html o cuerpo elemento. Podemos dirigirnos a esta clase para crear nuestro comportamiento alternativo al agregar este código a nuestro CSS personalizado:
.font-awesome-missing .doc_header_social display: none;
Si la fuente falla, cargue después de tres segundos, el CSS anterior se activará y ocultará toda la barra de íconos sociales para que no tengamos una pantalla de aspecto roto..
Ahora intente renombrar temporalmente 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ías ver la clase. falta de letra impresionante añadido a la html o cuerpo etiqueta. Restaure la carpeta de fuentes al nombre correcto y debería ver los íconos de fuentes nuevamente al actualizar.
Lea más sobre el fuente amp elemento en:
A continuación, aprenderemos cómo agregar un video de YouTube a la manera de AMP, pero primero necesitamos agregar un pequeño código de mantenimiento para crear una sección para que el video se siente..
Después de la div "doc_header", reemplace el existente h1 Etiquetas con este HTML:
Insertar un video de YouTube
Luego agrega esto a tu CSS personalizado:
.standard_width ancho: 100%; ancho máximo: 75rem; margen izquierdo: auto; margen derecho: auto; .standard_padding box-sizing: border-box; relleno: 6rem 3rem; .video_wrap background-color: # 2B2B2B;
Es posible que hayas notado en el CSS anterior que configuramos. tamaño de caja: caja de borde; en el standard_padding clase.
La razón de esto es que en AMP no puede utilizar la técnica común de incluir * box-sizing: border-box, porque el * El selector se considera demasiado hambriento de recursos. Como tal tendrás que configurar tamaño de caja: caja de borde; para los elementos específicos en los que lo necesita, o simplemente manipule el relleno y los bordes a la antigua usanza, con una calculadora o contando con sus dedos.
amp-youtube ElementoAhora que la sección está configurada y lista para el contenido, vamos a agregar un video de YouTube utilizando la costumbre de AMP amp-youtube elemento. Al utilizar este elemento en lugar del código de inserción estándar de YouTube, podemos aprovechar las técnicas de optimización de carga similares a las de amp-img.
Para empezar, deberá agregar el JavaScript de AMP requerido para habilitar el nuevo elemento. En la sección de cabeza, pegar en:
Ahora agregue el siguiente HTML dentro de los divs que acaba de agregar, debajo de h2 etiquetas:
Para especificar el video que desea cargar, establezca su ID de YouTube en el atributo datos de video. Aparte de este atributo, el amp-youtube El elemento es muy similar al amp-img elemento.
Tenemos el anchura y altura ajustado a 600 y 270 respectivamente. Al igual que con las imágenes, los videos deben tener un ancho y una altura iniciales establecidos.
Entonces usamos layout = "responsive" de modo que el video se ajuste al tamaño de su contenedor, mientras mantiene la relación de aspecto dibujada desde su configuración de altura y anchura.
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 se reduce para que se ajuste, manteniendo la relación de aspecto correcta a medida que avanza..
Lea más sobre el amp-youtube elemento en:
AMP tiene elementos personalizados adicionales para cargar contenido de sitios específicos, como amp-twitter, amp-instagram y algunos más. Para el contenido de sitios de terceros que no tienen su propio elemento AMP dedicado, existe la amp-iframe elemento en su lugar. 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":
Utilice incrustación de iframe, por ejemplo, Mapas
Ahora, como con el fuente amp y amp-youtube elementos, tendremos que cargar el script AMP que impulsa el amp-iframe elemento. Agrega esto a tu sección de cabeza:
A continuación, dentro de tu nueva div y bajo la h2 etiquetas, agregue este código:
Recargue su sitio y debería ver un mapa de Google ahora en su lugar.
Además de optimizar la carga, utilizando el amp-iframe element ayuda a garantizar que el contenido que se está viendo a través del iframe no se comporte de manera no deseada, como la ejecución de JavaScript que podría causar una carga lenta o forzar la aparición de anuncios emergentes. los salvadera El atributo le permite determinar qué nivel de control aplica sobre el contenido de iframe.
Para más detalles sobre amp-iframe y sus controles de "caja de arena", visite:
Una de las cosas que puede parecer limitante cuando se trabaja con AMP es la regla de que no se permite un JavaScript personalizado. Por otro lado, hay elementos personalizados incluidos en AMP que tienen como objetivo proporcionarle algunas de las funciones que normalmente puede implementar a través de JavaScript personalizado..
Por ejemplo, en lugar de cargar un script de lightbox personalizado, puede usar el amp-image-lightbox elemento. Vamos a crear una galería de imágenes que usa este elemento ahora..
Comience por crear un contenedor para su galería agregando este código justo encima de su fuente amp etiqueta:
Crear una galería con lightboxes
También agregue esto a su CSS personalizado:
.portfolio_wrap background-color: #ebeeee; .portfolio_inner padding: 4rem 6rem; .portfolio_item box-sizing: border-box; flotador izquierdo; ancho: 25%; text-align: center; relleno: 0,8rem; .clearfix: before, .clearfix: after content: ""; pantalla: tabla; .clearfix: after clear: both;
Al igual que nuestros últimos elementos personalizados, necesitaremos cargar un script AMP para habilitar el amp-image-lightbox elemento. Agrega esto a tu sección de cabeza:
Ahora estamos listos para comenzar a configurar nuestra galería de lightbox. Comience agregando este código dentro de sus nuevos divs, bajo la h2 etiquetas:
Esta amp-image-lightbox El elemento creará la visualización real de la caja de luz con las imágenes ampliadas en su interior. Queremos ocultarlo hasta que un usuario haya hecho clic en una imagen que desee ampliar, por lo que la 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-lightbox elemento:
Entonces dentro de esto agrega esto amp-img código:
En su mayor parte, este imagen de amplificador El elemento es el mismo que el que agregamos anteriormente, sin embargo notará la adición de on = "tap: lightbox1". Esto le dice a AMP que cuando se toca / 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-lightbox elemento que acabamos de crear.
Agrega otras siete imágenes a la galería con este código:
Cuando guardes y actualizas, deberías ver una galería en tu página que se ve así:
Y cuando haces clic en cualquiera de las imágenes, deberías verla abierta en una caja de luz como esta:
