Convertir páginas web HTML al formato AMP

Librería en PHP que extrae los datos del HTML y genera automáticamente el código para crear una página AMP. Tutorial con todos los pasos.

Los que poseen un sitio de páginas estáticas en HTML, que no sea muy grande, pueden usar el siguiente método para crear versiones de estas páginas en formato AMP.
El código necesario se genera automáticamente, aunque ciertas tareas requieren de la intervención manual.
No tiene nada de perfecto, pero en muchos casos puede resultar de utilidad.
Debido a la importancia del formato de páginas AMP, para el posicionamiento de un sitio en los dispositivos móviles, vale la pena dedicar una parte de nuestro tiempo a probar e implementar esta tarea.
En este artículo explico en detalle cómo hacerlo.


Requisitos y funcionamiento del generador AMP

La librería que permite esta tarea es Lullabot/amp-library, disponible en Github y creada originalmente para Drupal.
Requiere la instalación del servidor Apache en la computadora, Composer un administrador de PHP y los propios archivos de la librería antes mencionada.
La página original en formato HTML se sitúa en el directorio creado en el servidor y se inicia una función desde la línea de comandos, que crear una copia de la misma página en formato AMP.
Para su creación adjunto un archivo batch creado por mí que lo facilito y una plantilla de ejemplo.
Posteriormente es necesario revisar el código, agregarle el script necesario de AMP y cargarla en el servidor para validarla.
Finalmente podemos subirla por SFTP a nuestro sitio.
Todo lo anterior lo explico con detalles a continuación

Instalar el servidor Apache

Los que aún no tengan instalado el servidor en la computadora o deseen realizar otra instalación en otro directorio, pueden descargar el instalador de XAMPP desde Apache Friends.
XAMPP incluye varios módulos, pero en este caso solo es necesario instalar el de Apache y por supuesto PHP.
Instalar el servidor Apache en Windows con XAMPP
Después de concluir la instalación podemos probar el servidor introduciendo en el navegador la dirección: http://localhost/


Instalar Composer

Composer instala y administra varias librerías auxiliares que se requieren para la tarea.
Descarga el instalador desde https://getcomposer.org/download/ e instálalo.
El programa se instala en el directorio C y a continuación detecta la ruta a PHP que instala Apache, esta debe ser: “C:\xampp\php\php.exe”.
Si instalaste Apache en otro directorio, modifícala.
Para instalar las librerías auxiliares haz lo siguiente:
– Da un clic derecho en el botón de Inicio de Windows y en el menú selecciona: Símbolo del sistema (Administrador).
– Introduce o pega en la pantalla de la consola: composer –V y presiona Enter.
– No la cierres.

Descargar la librería AMP

Usa el siguiente enlace para acceder a la página de Lullabot/amp-library en Github:
https://github.com/Lullabot/amp-library
Presiona el botón de color verde “Clone or download” y selecciona “Download Zip”.
Extrae los archivos que descargues en el directorio de Apache en “C:\xampp\htdocs\”.
En la ventana de la consola escribe o introduce:
cd c:\xampp\htdocs\amp-library-master\
A continuation: composer install
Instalando Composer y sus dependencias en el Símbolo del sistema de Windows
Espera a que termine la instalación de las dependencias desde internet y cierra la ventana de la consola.


Convertir una página HTML a AMP

Descarga dos archivos desde el siguiente enlace creados por mí para facilitar la conversión a los que no poseen experiencia en la línea de comandos:
Descargar archivos
Extrae el archivo comprimido dentro de la carpeta “c:\xampp\htdocs\amp-library-master\”
Contiene el archivo batch “convertir.cmd” y la plantilla “test.html”
Para probar la plantilla que es una página normal, introduce en el navegador: https://localhost/amp-library-master/test.html
Para convertirla al formato AMP haz lo siguiente:
Ejecuta el archivo “convertir.cmd”, escribe el nombre de la página a convertir (en este caso test) y presiona Enter.
En el mismo directorio se crea el archivo de nombre “test-amp.html” y se carga en el navegador automáticamente.
De forma similar se pueden convertir otras páginas, las que se deben situar en el interior del directorio mencionado.


Validar el código y corregir la página AMP

Después de cargar la página creada con el navegador Google Chrome, presiona las teclas Control + Shift + J para abrir el panel de Herramientas de desarrolladores.
Agrégale al final de la dirección: “#development=1” y recarga la página para validarla.
Se podrá comprobar que posee varios errores.
– Falta la etiqueta rel canonical, agrégala:

<link rel="canonical" href="https://norfipc.com/web/como-validar-comprobar-codigo-paginas-amp.php">

– Falta la siguiente etiqueta de AMP, agrégala bajo la etiqueta de cierre:

<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>

Falta la hoja de estilo, agrega la siguiente de ejemplo, bajo la etiqueta anterior:

<style amp-custom>
html{height:100%;}
body{width:768px;margin:0 auto;font-family:sans-serif;font-size:19px;line-height:28px;color:#333333;}
#page{border:1px solid #ddd;padding:8px 16px;margin-bottom:0px;}
img{max-width:100%;height:auto;}
.intro{border:1px solid #7fb1fc;padding:8px;margin:6px 0 12px 0;border-radius:8px;}
.about{font-size:0.8em;background-color:#d4eefd;padding:6px 12px;margin:6px 0;margin-top:8px;}
@media screen and (min-width:300px) and (max-width:740px) {
body{width:100%;margin:0 auto;padding:0;font-size:17px;line-height:24px;}
#page{width:93%;padding:10px;margin:4px;border:none;}
}
</style>

Es todo, la página validará correctamente y está lista para subirla a un servidor por SFTP.
Validar página AMP con el navegador Google Chrome
En caso de que se trate de la versión en AMP de otra página, será necesario agregarle a la original la siguiente etiqueta:

<link rel="amphtml" href="URL de la pagina AMP">

 


Usos prácticos del convertidor de páginas AMP

Esta solo una sencilla página de ejemplo, para comprender las posibilidades del generador y la librería AMP.
La librería puede convertir correctamente elementos compatibles con AMP como marcos (iframe), bloques de publicidad de AdSense, scripts de Facebook, Twitter, Pinterest y otras redes sociales.
Para un uso más avanzado se necesita leer la documentación que acompaña a la librería descargada desde Github.

Estoy en: NorfiPC | Notas | Desarrollo web | Convertir páginas web HTML al formato AMP



Páginas relacionadas

Buscar con Google