TUTORIAL Y MANUAL DE AMPHTML EXTENSIONES

Fecha actualización el 2016-6-9. Fecha publicación el . Categoría: Programacion. Autor: Versión Movil Comenta y comparte en Compartir en Google+

Descripcion avanzada de las extensiones de AmpHtml amp-accordion, amp-brid-player, amp-brightcove, amp-anim, amp-audio, amp-carousel Siguiente

AMP-ACCORDION

Un amp-accordion proporciona una forma para que los usuarios puedan ver los contenidos y saltar a cualquier sección. Esto es útil para los dispositivos móviles de mano, donde incluso un par de frases en una sección requiere un desplazamiento.

Cada uno de los hijos inmediatos de amp-accordion se considera una sección en el accordion. Cada uno de estos nodos debe haber una etiqueta section.

1. Un amp-accordion puede contener uno o más sección como sus hijos directos.

2. Cada sección debe contener exactamente dos hijos directos.

3. El primer hijo (de la sección) debe ser uno de H1, H2, H3, H4, H5, H6, de cabeza, y es el título de la sección.

4. El segundo hijo (de la sección) puede ser cualquier etiqueta HTML permitido en AMP y es el contenido de la sección.

5. Al hacer clic sobre el encabezado de una sección se expande / o colapsa la sección.

extension de amphtml amp-accordion

AMP-BRID-PLAYER

Un amp-brid-player muestra en la pagina web un video de Brid utilizado en la plataforma de vídeo Brid.tv.

ATRUBUTOS DE AMP-BIRD-PLAYER

data-partner: El usuario Identificación del Brid.tv.

data-player: La identificación del usuario en Brid.tv. Específico para cada video.

data-video: El ID de vídeo

data-playlist: El ID de lista de reproducción. Insertar o bien debe tener vídeo o atributo de lista de reproducción.

extension de amphtml amp-brid-player

AMP-BRIGHTCOVE

Muestra el mismo estilo de reproductor de Brightcove igual al que se utiliza en Brightcove's Video Cloud

ATRUBUTOS DE AMP-BRIGHTCOVE

data-account: El Video Cloud de Brightcove o realizar ID de cuenta.

data-player or data-player-id: El reproductor de Brightcove ID. Este es un GUID, ShortID o "por defecto". El valor por defecto es "default".

data-embed: El reproductor de Brightcove ID. Este es un GUID o "default". El valor por defecto y el valor más común es "default"

data-video-id:La mayoría de los reproductores de Video Cloud necesitarán esto.

data-playlist-id:La lista de reproducción de Video Cloud ID. Para AMP HTML utiliza un ID de vídeo normalmente se utiliza en su lugar. Si se especifican una lista de reproducción y un vídeo, la lista de reproducción tiene prioridad.

data-param-*: Todos los atributos de datos pará- se añadirá como parámetro de consulta a la src jugador iframe. Esto puede ser usado para pasar los valores personalizados a través de plugins

extension de amphtml amp-brightcove

AMP-ANIM

Muestra una imagen animada normalmente un gif animado.

El componente amp-anim es muy similar al elemento amp-image, y proporciona una funcionalidad adicional para gestionar la carga y reproducción de imágenes animadas, tales como archivos GIF.

El componente amp-anim también puede tener un marcador de posición opcional, mientras que para visualizar el archivo src está cargando. El marcador de posición se especifica mediante el atributo marcador de posición

ATRUBUTOS DE AMP-ANIM

src o srcset: El valor debe ser un URL que apunta a un archivo de imagen pública aplicables a la caché.

alt: Titulo de la imagen. Identica a la esxtension amp-img.

attribution: Una texto que indica el origen o la fuente de la imagen.

extension de amphtml amp-anim

AMP-AUDIO

Esta extensión es equivalente a la instruccion de audio de html5, en realidad lo que hace es incrustar en la pagina web un archivo de audio. El componente amplificador de amp-audio dispone del recurso de audio especificado por el atributo src en un momento determinado por el tiempo de ejecución. Puede ser controlada de la misma manera como una etiqueta de audio estándar HTML5. Al igual que todos los recursos externos incrustado en un archivo AMP, el audio es "incrustado" y cargado, sólo cuando el elemento amp-audio está cerca de la ventana gráfica.

ATRIBUTOS DE AMP-AUDIO

autoplay: El atributo de reproducción automática permite al autor para especificar cuándo - si alguna vez - la imagen animada se reproducirán automáticamente.
La presencia del atributo solo implica que la imagen animada será siempre la reproducción automática. El autor puede especificar valores para limitar cuando las animaciones se reproducirán automáticamente. Los valores permitidos son escritorio, tableta o móvil, con varios valores separados por un espacio. El tiempo de ejecución realiza una aproximación mejor conjetura al tipo de dispositivo para aplicar este valor.

loop: Si está presente, lo hará de forma automática el audio bucle de nuevo al comienzo al llegar a la final.

muted: Si está presente, se silenciará el audio por defecto.

extension de amphtml amp-audio

AMP-CAROUSEL

Un carrusel genérico para la visualización de múltiples piezas similares de contenido a lo largo de un eje horizontal; destinado a ser altamente flexible y performante. El componente amp-carousel se considera un elemento en el carousel. Cada uno de estos nodos pueden también tener hijos HTML arbitrario. El carousel se compone de un número arbitrario de elementos, así como las flechas de navegación opcionales para ir hacia adelante o hacia atrás un solo elemento. El carousel avanza entre los artículos si los golpes de usuario, utiliza las teclas de flecha, hace clic en una flecha de navegación opcional.

ATRIBUTOS DE AMP-CAROUSEL

controls: Están presente, las pantallas flechas izquierda y derecha para el usuario para uso en la navegación en el móvil. Visibilidad de las flechas también puede ser controlado a través de un estilo y una consulta de medios puede ser utilizado para sólo flechas exhibición en determinados anchos de pantalla. En el escritorio, flechas siempre se mostrarán a menos que solo un niño está presente.

type: carousel (default) - Todas las diapositivas se muestran y son desplazables horizontalmente. slides -Muestra una sola diapositiva a la vez

loop (solamente type=slides): Si está presente, el usuario puede avanzar más allá del primer artículo o el artículo final.

autoplay (solamente type=slides): Si está presente, los avances en la diapositiva a la siguiente diapositiva sin interacción del usuario. Por defecto se hará avanzar una diapositiva en intervalos de 5000 milisegundos (5 segundos) y puede ser anulado por el atributo de retardo. Si la reproducción automática está presente también a adjuntar el atributo de bucle a un amplificador de bucle-carrusel si no está ya presente.

delay (solamente type=slides) De forma predeterminada una diapositiva avanzará en intervalos de milisegundos 5000 (5 segundos) cuando se especifica la reproducción automática y utilizará el valor del atributo de retardo si está presente (mínimo de 1.000 ms.

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