Share
El Proyecto AMP proporciona una forma relativamente manos libres para implementar varios tipos diferentes de optimización de páginas web. Puede leer nuestro resumen completo de qué es exactamente el proyecto y qué hace en el Proyecto AMP: hará que sus sitios sean más rápidos?.
Para resumir cómo se implementa AMP, usted deberá:
Una vez que haya hecho las tres cosas anteriores, el resto del proceso de optimización se manejará entre bastidores. Además, las páginas de AMP deben pasar una prueba de validación, y para aprobar esta prueba se deben cumplir todas las reglas de mejores prácticas.
Sin embargo, una de las reglas de AMP puede ser un poco difícil de manejar durante el desarrollo, y ese es el requisito de que todos los CSS personalizados se carguen en línea en el cabeza sección entre un conjunto de etiquetas.
Si escribes manualmente tu CSS directamente en tus páginas ' cabeza En las secciones te enfrentarás a problemas y limitaciones. Si necesita cambiar el CSS en varias páginas del sitio, será laborioso y no tendrá la opción de utilizar herramientas de mejora de CSS como preprocesadores o minificadores..
Por esta razón, si se ve haciendo más de una plantilla de AMP, querrá encontrar una manera de escribir su CSS en una hoja de estilo externa para mantener su flujo de trabajo habitual, pero aún así pasar la validación de AMP moviendo todo su CSS a la cabeza seccion despues del hecho.
En este consejo rápido, aprenderá dos formas de hacerlo..
Jade es un lenguaje en el que puedes pensar como un preprocesador para HTML. Le permite escribir HTML en una forma abreviada y abreviada que se compila en HTML normal, pero lo más importante para el tema en cuestión también le permite importar archivos CSS y tener su contenido completo en cualquier lugar que desee..
En este método, escribirás tus plantillas AMP utilizando la sintaxis de Jade e importarás un archivo CSS externo en la sección principal de cada una de tus plantillas. Este es uno de los mejores métodos que puede utilizar para crear páginas AMP si necesita generar HTML estático. Aquí está cómo hacerlo.
Lo primero que deberá hacer es configurar la hoja de estilo externa que desea importar en sus plantillas AMP. Cree una carpeta para albergar su proyecto, luego dentro de ella cree una nueva hoja de estilo y llámela "estilo.css".
Agregue un poco de CSS básico a su hoja de estilo, cualquier cosa de su elección siempre y cuando su archivo no tenga un tamaño superior a 50 kb, en cumplimiento con las reglas de validación de AMP.
Si solo desea una prueba de CSS para comenzar, agregue lo siguiente:
cuerpo fondo: # 3498db; color: #fff
El siguiente paso es agregar el código repetitivo de AMP, pero con dos diferencias significativas. Uno, usaremos la sintaxis de Jade en lugar de HTML directo, y dos, estaremos importando nuestro archivo externo "style.css".
Cree un nuevo archivo en la carpeta de su proyecto llamado "index.jade" y agregue el siguiente código:
doctype html (amp, lang = "en") head meta (charset = "utf-8") título AMP a través del enlace de Jade (rel = "canonical", href = "/ index.html") meta (nombre = "viewport" , content = "width = device-width, minimal-scale = 1, initial-scale = 1") script (type = "application / ld + json"). "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Marco de código abierto para publicar contenido", "datePublished": "2015-10-07T12: 02: 41Z "," imagen ": [" logo.jpg "] | | script (async, src = "https://cdn.ampproject.org/v0.js") estilo (amp-custom) incluye style.css body h1 Esta es una página AMP basada en Jade.
El código anterior es el mismo que encontrará en los documentos de AMP, que se convirtió a la sintaxis de Jade.
Notarás que al final de este código tenemos:
style (amp-custom) incluye style.css
La linea de lectura estilo (amp-custom) dará salida a la requerida etiquetas Con sangría en la siguiente línea verá incluye style.css. Esto aprovecha la funcionalidad de Jade, e importará todo el contenido de su archivo "style.css" y lo imprimirá entre las etiquetas de estilo.
Ahora ha configurado todo el código requerido para este método y solo necesita compilar su plantilla de Jade. Puede hacerlo a través de un ejecutor de tareas como Gulp o Grunt, o mediante una compilación de aplicaciones..
Para proyectos relativamente sencillos en los que solo desea compilar archivos, recomiendo usar una aplicación llamada Prepros. Solo necesitarás la versión gratuita / de prueba para este método..
Una vez que haya instalado y ejecutado Prepros, todo lo que tiene que hacer es arrastrar la carpeta del proyecto a su interfaz y encontrará su archivo Jade. Comenzará automáticamente a ver los cambios en su proyecto, así que solo guarde el archivo Jade o CSS y eso hará que Prepros compile su plantilla..
Ahora debería ver aparecer un nuevo archivo en su proyecto llamado "index.html", y dentro de él debería ver su código HTML compilado completo con CSS personalizado en línea:
AMP via Jade Esta es una página AMP basada en Jade.
Lo siguiente que querrás hacer es revisar una vista previa de tu sitio. Si bien es posible simplemente ver su archivo AMP en un navegador cargado directamente desde su disco duro, es una buena práctica obtener una vista previa de sus sitios con un host local, es decir, simular un host web en su computadora.
Prepros viene con una vista previa localhost incluida que se actualiza automáticamente cuando se realizan cambios en su proyecto. Sin embargo, no podrá usarlo con AMP (desafortunadamente). La razón por la cual Prepros carga algunos JavaScript en su vista previa para habilitar la recarga en vivo, pero debido al hecho de que no se permite JavaScript personalizado en las páginas de AMP, el validador detectará este script y luego emitirá un error..
Por esta razón, el enfoque que recomiendo es configurar la vista previa de su sitio localhost usando MAMP para Mac o Windows. Seguirá el mismo proceso que realizamos anteriormente, la única diferencia es que creará su carpeta de proyecto dentro de su carpeta "htdocs" de MAMP antes de arrastrarla a su interfaz Prepros. Cuando MAMP se está ejecutando, esto le permitirá obtener una vista previa en una URL como http: // localhost: 8888 / myproject.
Con este enfoque, obtiene lo mejor de ambos mundos: una vista previa de localhost sin errores de validación a través de MAMP y compilación automática de Jade a través de Prepros.
Si no necesita generar plantillas HTML estáticas, tiene la opción de usar PHP para generar dinámicamente su hoja de estilo en la sección principal. Probablemente este enfoque requiera un poco menos de esfuerzo, pero solo es apropiado si los requisitos de su proyecto (y su anfitrión) permiten PHP.
Por cierto, incluso si nunca ha usado PHP antes y solo desea escribir en HTML directo en lugar de usar la sintaxis de Jade, puede usar esta técnica..
Comience por crear un archivo de índice con el código estándar estándar de AMP agregado, pero en lugar de nombrar el archivo "index.html", nombre "index.php":
Hola amp Bienvenido a la web móvil.
Si ya ha estado trabajando en una plantilla AMP, también puede simplemente cambiar el nombre del archivo, cambiando la extensión a ".php", convirtiéndolo en un archivo PHP. Por ejemplo, "about.htm" sería renombrado a "about.php". (Solo asegúrate de cambiar la extensión en cualquier enlace interno).
Ahora, cree una hoja de estilo externa llamada "style.css" en su carpeta raíz. Si tiene una plantilla en la que ya está trabajando, corte cualquier CSS que tenga actualmente entre sus etiquetas y pégalo en tu hoja de estilo externa.
Para colocar su CSS externo en la sección principal de su archivo AMP, simplemente pegue este fragmento de PHP de una línea entre la etiquetas:
Si no está particularmente interesado en PHP, puede dejarlo así, ya que el fragmento le permitirá a PHP recuperar su hoja de estilo del servidor, leer su contenido y luego publicarlo en línea. Sin embargo, si desea saber más sobre el fragmento, vamos a desglosarlo..
Primero, tenemos las etiquetas de apertura y cierre de PHP. . Estos le permiten al servidor saber que lo que hay entre estas etiquetas es PHP y no HTML normal.
Entonces estamos usando la función archivo de lectura (). Esta función examina el archivo especificado entre paréntesis, lo recupera del servidor, lee su contenido y luego emite ese contenido en línea..
Entre los paréntesis tenemos la función. getcwd (). Esta función obtiene la ruta al directorio de trabajo actual, es decir, el directorio en el que se encuentra nuestro archivo PHP.
Después de eso tenemos la cadena (texto normal) "/style.css" que especifica el nombre de nuestra hoja de estilo, relativa a la ubicación de nuestro archivo PHP. Luego entre esta cadena y la getcwd () función ponemos un punto . que concatena (conecta) los dos juntos para crear la ruta completa a nuestra hoja de estilos. Por ejemplo, en una vista previa de MAMP, la ruta sería algo así como "/Applications/MAMP/htdocs/myproject/style.css".
Puede usar este fragmento en tantas plantillas de PHP como necesite, y cualquier cambio en su hoja de estilo externa se publicará en todas sus plantillas..
Al igual que con el método de Jade, una excelente manera de obtener una vista previa de las páginas AMP basadas en PHP es usar MAMP, que es totalmente compatible con PHP. Instale MAMP y cree su carpeta de proyecto dentro de su carpeta "htdocs" y podrá obtener una vista previa de su sitio en una URL como http: // localhost: 8888 / myproject sin ninguna configuración adicional.
Ahora hemos cubierto dos formas en que puede mantener su hoja de estilo externa y el flujo de trabajo de desarrollo de CSS normal, pero aún así pasar la validación de AMP moviendo su CSS en línea. Vamos a resumir rápidamente cada uno.
Accentsconagua
cabeza sección. Compilar con Prepros y previsualizar con MAMP.cabeza sección. Previsualizar con MAMP.En cuanto a qué método elegir, dependerá de los aspectos específicos de su proyecto, pero en términos generales:
Con cualquiera de estos métodos, puede desarrollar CSS de la forma en que está acostumbrado, los cambios se reflejan instantáneamente en todas las plantillas y el acceso a preprocesadores y herramientas de optimización, al mismo tiempo que incorpora su CSS de forma compatible con AMP.
Espero que esto ayude a que los procesos de desarrollo de AMP sean un poco más suaves.!
