Segun ha anunciado Google el 24 de Febrero del 2016 empezaran a indexar las paginas creadas con AmpHtml
Manual y tutorial basico de como utilizar las diferentes extensiones del Amp Html
Si has llegado a esta pagina y no sabes que es el lenguaje web AMP HTML, deberias empezar por AQUI para aprender los conceptos basicos y crear tu primera pagina
amp-anim
Su utiliza para insertar en una pagina una imagen animada como por ejemplo un gif animado. Dispone de los mismos atributos que amp-img. Otros atributos:
- attribution: Con este atributo indicas el origen la de la imagen
attribution="cortesia de clasesordenado" - Styling: Puedes añadir codigo css como por ejemplo modificar el fondo de la imagen
amp-audio
Sustituye la etiqueta de audio de html5, funciona igual que en html5 con la diferencia en que el componente amplificador se carga cuando esta cerca del archivo del audio lo que supone menos tiempos de carga de esta extension.
En el caso de que el navegador no sea compatible con la extension de audio se puede personalizar un mensaje. Se puede configurar hasta 3 tipos de fuentes del mismo audio. Atributos que dispone:
autoplay: Reproduccion automatica, loop: Cuando lleha al final vuelve al principio, muted: El audio esta apagado.
amp-brightcove
Si tienes una cuenta la pagina web de videos en brightcove.com con esta extension puedes añadir tus videos en tu pagina web.
Atributos: data-account, data-player, data-embed, data-video-id, data-playlist-id. Todos estos datos los dispondras en tu cuenta de brighcove
amp-instagram
Si dispone de una cuenta de Instagram y deseas insertar imagenes en una pagina web, esta es la manera
Aspectos a tener en cuenta:
En el caso de que la imagen en Instagram SI sea cuadrada el Width sera la achura real de la foto y el height la altura que aparezca en instagram
En el caso de que la imagen en Instagram NO ser cuadrada el widht y el height seran la anchura y la altura real de la imagen
amp-twitter
Twitter: Solamente tienes que cambiar el valor del data-tweetid
A tener en cuenta, el widht y el height hay que definirlo manualmente
amp-carousel
Una etiqueta muy util para crear galerias de imagenes. Visualiza múltiples piezas similares de contenido a lo largo de un eje horizontal.
Se pueden poner ilimitados imagenes o referencias a articulos. Dispone de flechas hacia adelante y hacia atras, esta etiqueta permite la anidación. Atributos disponibles:
controls: Muestra las flechas derecha e izquierda, se puede regular la velocidad de las flechas en el css.
type: Dispone de dos formas de mostrar el contenido:
Estilo:type="carousel": Muestra todas las diapositivas, type="slides": Muestra una sola diapositiva
autoplay: Las diapositivas avanzan por si solas a intervalos entre 1000 y 5000 milisegundos.
amp-fit-text
El texto que va dentro de esta etiqueta cambia de tamaño adaptandose a las diferentes resoluciones de la pantalla. Atributos que se utilizan:
min-font-size: Minimo tamaño de la fuente de letra, max-font-size: maximo tamaño de la fuente de letra.
amp-iframe
Es el equivalente a la etiqueta frame y object en html5. Dispone de los siguientes atributos.
sandbox: Esta opcion por defecto esta vacia, permite algunas características al amp-iframe que suelen estar bloqueadas en algunos navegadores como: sandbox="allow-scripts" sandbox="allow-popups allow-popups"
Iframe Resizing: Permite que se modifique el tamaño del iframe dependiendo de la resolución de la pantalla
Limitaciones en el uso del amp-iframe: Esta instrucción NO puede estar al principio de la pagina en concreto NO debe de estar en el 25% inicial del documento
amp-youtube
¿Como mostrar un video de Youtube en una pagina?
amp-vine
¿Como mostrar un video de Vine en una pagina?
¿Como mostrar un video de Youtube en una pagina?
