Portada del sitio > Documentación > Programación y diseño > Google AMP - Accelerated Mobile Pages

Google AMP - Accelerated Mobile Pages

Miércoles 25 de abril de 2018, por Keila

Avances

HTML Estatico

<!doctype html>
<html >
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>La izquierda diario amp version1</title>
    <link rel="canonical" href="hola-mundo.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>
  </head>
  <body>
    <h1>¡La Izquierda Diario!</h1>
	
	<amp-story-page id="amp-img">
	<amp-story-grid-layer template="fill">
    <amp-img src="http://notasdejl.com/wp-content/uploads/2016/09/La-izquierda-diario-577x445.png"
      grid-area="middle-third"
      width="400"
      height="350"
      layout="responsive"></amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h1 grid-area="upper-third">amp-img</h1>
  </amp-story-grid-layer>
</amp-story-page>
	
	
  </body>
</html>

1- Volver a genera archivo html estático

2- Se creó archivo pruebaAMP.html con un bucle

3- Ir reemplazando y completando el contenido del artículo.

4- Ver como está hecho gacetilla.html. Fijate que recibe como parámetro el id_article: http://www.laizquierdadiario.com/spip.php?page=gacetilla-articulo&id_article=102659

5- De la misma manera reemplazar el bucle para que reciba como parámetro el id_article.
De esta manera ():
<BOUCLE_articulo(ARTICLES){id_article}>
Y al llamarse se llama así:
http://www.laizquierdadiario.com/spip.php?page=pruebaAMP&id_article=102659

Ultima version al 11/05.

El código hasta ahora, muestra cualquier
articulo, sin estilos, muestra la foto en tamaño reducido para que se
vea bien en el celular, y linkea los nombres de los autores a sus
perfiles.
Según las pruebas realizadas abre aproximadamente 3 veces mas rápido
los artículos y por ahora muestra solo el logo principal. Con
velocidad 4G una noticia de LID la puedo abrir en 9/10 seg y la
versión de AMP se abre en tan solo 3.
Falta desarrollar una parte del codigo para que si son varias fotos
las muestre todas como hace la gacetilla. Con agregarle estilos y
algunos inclure(entiendo x lo que vi en la gacetilla), ya quedaria de
forma muy similar a cuando un articulo se muestra por gacetilla.
Ya que no existe una dirección url fija para cada vez que se accede a
la versión gacetilla(intente buscar via google para comprobar.. y no encontré nada),
hacer esta versión de pruebaAMP es un avance, pero no nos
sirve aun para implementar. Ya que de esta forma el buscador de google
no lo encontraría, ni se podría acceder a la versión amp desde
cualquier link que cualquier usuario comparte, o que aparezca linkeado
en LID.

Entiendo que habría que modificar una serie de esqueletos que son los
que arman los artículos para ver como continuar trabajando sobre
gAMP(no hago propuesta concreta sobre esto porque hay cosas que no
entiendo como funcionan). Pensar si hacer que todos los artículos
puedan ser AMP o si solo los que aparezcan en la portada o los mas
visitados.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>LID esta probando amp..</title>
    <link rel="canonical" href="hola-mundo.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>
</head>
<body>
<BOUCLE_amp(ARTICLES){id_article}> 
<ul>
<li>
<p>#SURTITRE</p>
<h1><p>#TITRE</p></h1>
<p>#CHAPO</p>
<BOUCLE_auteurs(AUTEURS){id_article}{" "}>
<a href= #URL_AUTEUR <p>#NOM</p> </a> 
</BOUCLE_auteurs>
[(#LOGO_ARTICLE|image_reduire{300,300})]
<p>#TEXTE</p>
</li>
</ul>
</BOUCLE_amp>
</body>
</html>

REFERENCIAS

Excelente y detallada explicación del equipo de Google AMP, con todas las ventajas de usar esta plataforma. 7 min, en Ingles. Muy completo.
https://www.youtube.com/watch?v=lBTCB7yLs8Y

Explicacion larga, desde cero y en español.
https://www.youtube.com/watch?v=Dtyzfot04VA

Detalla la estructura de AMP y sus funciones. (en inglés)
https://www.youtube.com/watch?v=bAFfuAXzYmU

Páginas para especificar:
– https://www.ampproject.org/es
– https://developers.google.com/amp

Etiquetas de html en AMP para desarrollar codigo
https://ampbyexample.com/

SPIP + AMP
Foros donde programadores han intentado combinar ambos lenguajes, pero ninguno desarrollo algo muy avanzado.

https://forum.spip.net/fr_264038.html
https://contrib.spip.net/AMP-pour-SPIP-Accelerated-Mobile-Pages

Explicación breve: ¿Qué es Google AMP?
https://www.youtube.com/watch?v=rzxPZUJX9vE

¿Cómo funciona G. AMP? Con ejemplos. (en inglés)
https://www.youtube.com/watch?v=XCyFgt57ouE

Ventajas de AMP (en inglés)
https://www.youtube.com/watch?v=hC2e9KtMPKg

Otras paginas para chusmear si tenes tiempo: