amp-brightcove, amp-anim, amp-audio, amp-carousel: Descripcion avanzada de las extensiones de AmpHtml amp-accordion, amp-brid-player amp-install-serviceworker, amp-jplayer: Descripcion avanzada de las extensiones de AmpHtml amp-dailymotion, amp-iframe, amp-dynamic-css-classes, amp-image-lightbox, amp-facebook, amp-fit-text, amp-instagram, amp-font AMP-SOUNDCLOUD, AMP-SOCIAL-SHARE, AMP-SIDEBAR: Descripcion avanzada de las extensiones de AmpHtml AMP-KALTURA-PLAYER, AMP-LIGHTBOX, AMP-LIST, AMP-MUSTACHE, AMP-PINTEREST, AMP-REACH-PLAYER, AMP-TWITTER, AMP-SPRINGBOARD-PLAYER AMP HTML Manual y tutorial para iniciarse: El Amp Html se puede decir que es un lenguaje y framework de codigo web al mismo nivel que el Html5

Pagina I AmpHtml tutorial y manual Extensiones

Descripcion avanzada de las extensiones de AmpHtml amp-dailymotion, amp-iframe, amp-dynamic-css-classes, amp-image-lightbox, amp-facebook, amp-fit-text, amp-instagram, amp-font, amp-install-serviceworker, amp-jplayer

AMP-DAILYMOTION

El amp-dailymotion muestra en pantalla los videos de dailymotion.com

ATRUBUTOS DE AMP-DAILYMOTION

data-videoid: La url de video Dailymotion se encuentra la página de vídeo.

data-mute: Posibilidad de silenciar el vídeo o no true o False (default).

data-endscreen-enable: Si conviene que la pantalla final o no true (default) o False

data-sharing-enable: Si se muestra el botón de compartir o no true (default) o False

data-start: Especifica el tiempo en segundos cuando el vídeo debe comenzar a salir.

data-ui-highlight: Cambiar el color de resaltado por defecto utilizado en los controles.

data-ui-logo: Ya sea para mostrar el logotipo Dailymotion o no true (default) o False

data-info: Ya sea para mostrar la información de vídeo (título y propietario) en la pantalla de inicio true (default) o False

AMP DYNAMIC CSS CLASSES

Agrega varios nombres de clases CSS dinámico sobre el elemento body.

ATRUBUTOS DE AMP-BIRD-PLAYER

Estas son las clases que se pueden agregar:

amp-referrer: Se establecerá una o más clases de URL de referencia, uno para cada nivel de especificidad subdominio. Por ejemplo www.google.com añadira tres classes: amp-referrer-www-google-com, amp-referrer-google-com, and amp-referrer-com.

amp-viewer: Establece si el documento actual se visualiza dentro de un visor.

AMP-FACEBOOK

Muestra un perfil, post o video de Facebook

ATRUBUTOS DE AMP-FACEBOOK

datos href: La dirección URL del facebook del poste / vídeo

data-embed-as: Posibilidad de incrustar como post o como video

AMP-FIT-TEXT

Se expande o se contrae su tamaño de fuente para adaptarse al contenido dentro del espacio que se le da.

El amp-fit-text espera que su contenido sea texto o de otros contenidos en línea, pero también puede contener contenido no-inline. Para el contenido dado amp-fit-text se ajusta al texto y tratará de encontrar el mejor tamaño de la fuente para adaptarse a todo el contenido dentro del espacio disponible.

Si el contenido del amp-fit-text se ajusta al texto el espacio disponible con el tamaño mínimo de la letra, si el contenido desborda será cortada y escondida. El WebKit y navegadores basados en Blink mostrarán puntos suspensivos en este caso.

ATRUBUTOS DE AMP-FACEBOOK

min-font-size: El tamaño mínimo de letra como un entero para que el ampt-fit-text se ajuste al texto

max-font-size: El tamaño maximp de letra como un entero para que el ampt-fit-text se ajuste al texto

AMP-FONT

La extensión amp-font debe ser utilizado para el control de los tiempos de espera de carga en la fuente.

Permite agregar y quitar clases CSS de document.documentElement en función de si un tipo de letra se cargó o se encuentra en estado de error.

ATRUBUTOS DE AMP-FONT

font-family: La familia de fuentes de la fuente personalizada que se está cargando.

timeout: Tiempo en milisegundos después de lo cual el que no espere a que la fuente personalizada esté disponible. Este atributo es opcional y su valor por defecto es 3000. Si el tiempo de espera se establece en 0, el amplificador de fuente-carga la fuente si ya está en la memoria caché, de lo contrario la fuente no sería cargado. Si el tiempo de espera es tiene un valor no válido entonces el tiempo de espera por defecto es 3000.

on-load-add-class: La clase CSS que se añade al document.documentElement después de asegurarse de que la fuente personalizada está disponible para su visualización. Este atributo es opcional.

on-load-remove-class: La clase CSS que se retira de la document.documentElement y document.body después de asegurarse de que la fuente personalizada está disponible para su visualización. Este atributo es opcional.

on-error-add-class: La clase CSS que se añade a la document.documentElement, si el intervalo de tiempo de espera se agota antes de que la fuente esté disponible para su uso. Este atributo es opcional.

font-weight, font-style, font-variant: Los atributos, sobre todo, deben comportarse como lo hacen en elementos estándar.

AMP-IFRAME

Muestra un iframe

Tienen varias diferencias importantes como marcos flotantes que se han diseñado para que sea más seguro y evitar que los archicos de AMP esten dominadas por un único marco flotante

No puede aparecer cerca de la parte superior del documento (a excepción de marcos flotantes que utilizan marcador de posición).

Deben ser o bien 600px lejos de la parte superior o no dentro del primer 75% de la ventana gráfica cuando se desplaza a la parte superior, lo que sea menor.

Sólo deben solicitar recursos a través de HTTPS o de una técnica de URI o por medio del atributo srcdoc.

No deben estar en el mismo origen que el contenedor a menos que no permiten allow-mismo origen en el atributo caja de arena

ATRUBUTOS DE AMP-IFRAME

src, srcdoc, frameborder, allowfullscreen, allowtransparency: Los atributos, sobre todo, deben comportarse como lo hacen en iframes estándar.

AMP-IMAGE-LIGHTBOX

Permite una imagen o experiencia similar en el que la interacción del usuario con la imagen se consique que se expanda para llenar el visor hasta que se cierra de nuevo por el usuario.

Se activa mediante la acción sobre el elemento amp-img haciendo referencia a la identificación del elemento de la imagen. Cuando se activa, se coloca la imagen en el centro de la ventana gráfica. Puede mostrar opcionalmente un título para la imagen en la parte inferior de la ventana gráfica. El titulo de la imagen puede ir en:
  • El contenido del elemento figcaption cuando la imagen se encuentra en la etiqueta.
  • El contenido del elemento cuyo ID está especificado por el atributo de la imagen.

AMP-INSTAGRAM

Muestra un embed Instagram.

Los atributos de anchura y altura son especiales para la inserción de Instagram. Estos deben ser la anchura y la altura reales de la imagen de Instagram. El sistema añade automáticamente el espacio para el "cromo" que Instagram añade alrededor de la imagen.

Muchos Instagrams son cuadrados. Cuando se establece layout="responsive" cualquier valor en el ancho y la altura son los mismos va a funcionar.

Si el Instagram no es cuadrada tendrás que introducir las dimensiones reales de la imagen. Cuando se utiliza el diseño no responsive tendrá que tener en cuenta el espacio extra añadido para el "cromo Instagram" alrededor de la imagen. Este es actualmente 48px arriba y debajo de la imagen y 8px en los lados

ATRIBUTOS DE AMP-INSTAGRAM

data-shortcode: La url donde se encuentra la imagen de instagram

AMP-INSTALL-SERVICEWORKER

Se instala un ServiceWorker para la página actual.

Registra el ServiceWorker por el atributo src AMP si el documento se carga desde el mismo origen que el ServiceWorker URL dada. Si el data-iframe-src se establece, que las cargas de URL como un iframe cuando el documento AMP se sirve de una caché de AMP. Esto permite la instalación de la caché ServiceWorker AMP, de forma que el ServiceWorker es instalado por el tiempo que los usuarios visitan el sitio de origen

Este ServiceWorker se ejecuta cada vez que el archivo de AMP se sirve desde el origen, donde se publica el archivo de AMP.

ATRIBUTOS DE AMP-INSTALL-SERVICEWORKER

src: URL del ServiceWorker para registrarse.

data-iframe-src: URL de un documento HTML que instalar un ServiceWorker.

layout: Debe tener el valor nodisplay

AMP-JWPLAYER

Un componente amp-jwplayer que muestra una JWPlayer alojada en la nube

ATRIBUTOS DE AMP-JWPLAYER

data-player-id: Esta es una secuencia alfanumérica de 8 dígitos que se pueden encontrar en la sección de los jugadores en el JW jugador del tablero de instrumentos.

data-media-id: Secuencia alfanumérica de 8 dígitos que se pueden encontrar en la sección Contenido en su JW jugador del tablero de instrumentos

data-playlist-id: Secuencia alfanumérica de 8 dígitos que se pueden encontrar en la sección Listas de reproducción en su JW jugador del tablero de instrumentos. Si se especifican los datos de lista de reproducción-Id y datos-media-id, los datos de lista de reproducción-id-tiene prioridad.