MANUAL DE AMP HTML EXTENSIONES PARTE II

Fecha actualización el 2017-6-17. Fecha publicación el 2016-2-4. Categoría: Web, html, Amp. Autor: Oscar olg

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
como implementar un fig animado

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.

eqiqueta audio en amp html

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

amp-instagram

Si dispone de una cuenta de Instagram y deseas insertar imagenes en una pagina web, esta es la manera amp html Instagram

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

Twitter con amp html

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.

galeria de imagenes

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

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

galeria de imagenes

amp-youtube

¿Como mostrar un video de Youtube en una pagina?

Videos de Youtube

amp-vine

¿Como mostrar un video de Vine en una pagina?

¿Como mostrar un video de Youtube en una pagina?

Videos de Vine

Algunos de estas extensiones necesitan el archivo .js correspondiente a la extensión

Enlaces de interes relacionadas con el Amp Html: GITHUB Descargar V0.JS WEB OFICIAL