PAGINA II TUTORIAL Y MANUAL DE AMPHTML EXTENSIONES

Fecha actualización el 2016-6-9. Fecha publicación el . Categoría: Programacion. Autor: Versión Movil https://www.clasesordenador.com/amphtml/pag1.html

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-SOUNDCLOUD, AMP-SOCIAL-SHARE, AMP-SIDEBAR Siguiente

AMP-KALTURA-PLAYER

El amp-kaltura-player muestra en pantalla los videos de la platafprma Kaltura

ATRUBUTOS DE AMP-KALTURA-PLAYER

data-partner: La Identificación del socio de Kaltura. Este atributo es obligatorio.

data-uiconf: El jugador Kaltura id - Identificación del uiconf.

data-entryid: El identificador de entrada Kaltura.

data-param-*: Todos los atributos de datos *-pará- se añadirán como parámetro de consulta a la src jugador iframe. Esto puede ser usado para pasar los valores personalizados a través de plugins jugador, tales como los parámetros de anuncios o identificadores de vídeo para Realizar jugadores.

extension de amphtml amp-kaltura-player

AMP-LIGHTBOX

Permite un "lightbox" o experiencia similar en el que hau una interacción del usuario. La extensión se expande para llenar el visor, hasta que se cierra de nuevo por el usuario.

La extensión amp-lightbox define los elementos secundarios que se mostrarán en una superposición de ventana completa. Se activa para asumir el visor cuando el usuario toca o hace clic en un elemento con el atributo que se dirige a la identificación del elemento amp-lightbox.

Si se pulsa la tecla de escape en el teclado, se cerrará el amp-lightbox. Alternativamente al establecer el atributo en el uno o más elementos dentro amp-lightbox es el método para cerrar el lightbox, se cerrará cuando el elemento se toca o hace clic.

extension de amphtml amp-lightbox

AMP-LIST

Obtiene el contenido dinámico desde un punto final CORS JSON y lo hace utilizando una plantilla suministrada.

El amp-lista define fuente de datos utilizando los siguientes atributos: src define una URL CORS. El protocolo del URL debe ser HTTPS. Define una opción de credenciales según lo especificado por la API de Fetch. Para enviar las credenciales, pasar el valor de "incluir". Si se establece, la respuesta debe seguir las directrices de seguridad AMP CORS.

extension de amphtml amp-list

AMP-MUSTACHE

Permite usar la libreria Mustache.js.

La plantilla de amp-mustache tiene que definirse y utilizarse de acuerdo con la AMP especificaciones de plantilla.

extension de amphtml amp-mustache

AMP-PINTEREST

Muestra un widget o el botón Pinterest Pin It

ATRUBUTOS DE AMP-PINTEREST

data-url: Requiere cuando los datos-do es botón Pin. Contiene la dirección URL completa destinada a ser fijada o re-hecho en un widget.

data-media: Se requiere cuando los datos-do es buttonPin. Contiene la dirección URL completa de la imagen destinada a ser fijada. Si el pin con el tiempo contener elementos multimedia (como YouTube), debe apuntar a una miniatura de alta resolución.

data-description: Se requiere cuando los datos-do es buttonPin. Contiene la descripción predeterminada que aparece en el pasador de crear la forma; Por favor, elige con cuidado, ya que muchos Pinners se cierre el formulario sin definir si no tiene sentido.

extension de amphtml amp-pinterest

AMP-REACH-PLAYER

Esta extensión permite configurar la plataforma de videos Beachfront Reach.

ATRUBUTOS DE AMP-REACH-PLAYER

data-embed-id: El Reach player ID del jugador de inserción se encuentra en la sección "jugadores" o en la propia inserción generado.

extension de amphtml amp-reach-player

AMP-SIDEBAR

Una barra lateral proporciona una manera de mostrar el contenido de meta destinada a acceso temporal (menú de navegación, botones, menús, etc.). La barra lateral puede ser revelado por un grifo botón mientras el contenido principal sigue siendo visualmente debajo.

El ancho de la barra lateral se puede establecer y ajustar entre 45 píxeles y 80vw el uso de CSS.

El amp-sidebar no puede contener ningún elemento AMP excepción de amp-accordion, amp-img y el amp-fit-text.

El máximo de la altura de la barra lateral es 100vh, si la altura es superior a 100vh, aparece una barra de desplazamiento vertical. La altura predeterminada se establece en 100vw en CSS y es reemplazable en el CSS.

No puede haber un solo amp-sidebar en un documento de AMP. El amp-sidebar debe ser un elemento secundario directo de la body. La barra lateral sólo puede aparecer en el lado izquierdo o derecho de una página.

ATRUBUTOS DE SIDEBAR

side: El atributo side puede ajustarse a la izquierda o a la derecha dependiendo de si se debe abrir la barra lateral en el lado izquierdo o derecho de la página. Si un equipo no se encuentra en la barra amp-sidebar entonces será heredado de atributo dir del cuerpo de la etiqueta (LTR => a la izquierda, RTL => derecho ") y si uno no existe entonces el lado está predeterminada a izquierda.

open: El atributo abierta está presente en la barra lateral cuando está abierto.

layout: El único valor permitido para el atributo de disposición en amp-sidebar lateral se visualiza ninguna imagen.

extension de amphtml amp-sidebar

AMP-SOCIAL-SHARE

Muestra un botón de acción social,

ATRUBUTOS DE AMP-SOCIAL-SHARE

type: (Requerido) Selecciona el tipo de pre-configurado. Esto es necesario tanto para los proveedores pre-configurados y externos.

data-share-endpoint: (Necesario para los proveedores no está configurado) amp-social-share tiene algunos parámetros preconfigurados para compartir proveedores populares.

extension de amphtml amp-social-share

AMP-SOUNDCLOUD

Muestra un clip de Soundcloud.

ATRIBUTOS DE AMP-SOUNDCLOUD

data-trackid: El ID de la pista, un número entero.

data-visual: Value: "true" or "false" Si es True, muestra el modo de ancho completo "Visual". De lo contrario, muestra el modo "clásico".

width and height: El diseño es fixed-height y va a llenar todo el espacio horizontal disponible. Esto es ideal para el modo "clásico", sino por "Visual", se recomienda que la altura de 300px, 450px o 600px, según Soundcloud código de inserción. Esto permitirá que los elementos internos del clip para cambiar el tamaño correctamente en el móvil

extension de amphtml amp-soundcloud

AMP-SPRINGBOARD-PLAYER

muestra el jugador utilizado en la plataforma de vídeo Springboard.

ATRIBUTOS DE AMP-SPRINGBOARD-PLAYER

data-site-id: El id de identificación. Específico para cada partner..

data-mode: El modo de un jugador (vídeo | lista de reproducción).

data-content-id: El jugador Identificación del contenido (vídeo o la identificación lista de reproducción).

data-player-id: El id del usuario de Springboard.

data-domain: El dominio del partner de Springboard partner.

data-items: El numero de video en la lista de reproducción

extension de amphtml amp-springboard-player

AMP-TWITTER

Muestra un Twitter Tweet.

ATRIBUTOS DE AMP-TWITTER

data-tweetid: El ID de el tweet. data-nameofoption: Las opciones para la aparición Tweet se pueden ajustar mediante los atributos de data extension de amphtml amp-twitter

En este enlace encontraras un archivo PDF con ejemplos practicos de las extensiones de amphtml aqui descritas. DESCARGAR