tag:blogger.com,1999:blog-59798005641854033342024-12-18T19:33:08.912-08:00Amp en EspañolPáginas Móviles Aceleradas (AMP). Aprenda a crear páginas AMP y ver ejemplos para todos los componentes de AMP.Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comBlogger74125tag:blogger.com,1999:blog-5979800564185403334.post-87738198758588664812018-06-30T14:23:00.000-07:002019-04-17T19:58:36.303-07:00¿Cómo agregar una galería de imágenes lightbox? amp-lightbox-gallery<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUMwJuMnaRoZKaAIj7EHvElqn7qlQq0PRz1XZrGCRu9_hhZEeGf8oVktctDcLpYInzEq4gCkkhYLB9RUllhYQu4wDbto0RDLYtlZnjH2px77Qp6s-aNqa4cW1CFV3oX7KLVZcFsq-KzPdW/s1600/como-agregar-una-galeria-de-imagenes-lightbox.jpg" width="626" height="412" alt="¿Cómo agregar una galería de imágenes lightbox? amp-lightbox-gallery"/></noscript>
Desde que se lanzó AMP, los desarrolladores han estado pidiendo una forma fácil de vincular <amp-carrusel> con <amp-image-lightbox> para que los usuarios puedan experimentar una visión inmersiva del contenido en los carruseles. Si bien ha sido posible combinar numerosos componentes (como <amp-bind> ) para hacer que algo como esto funcione, no ha sido fácil.<br />
<br />
El componente <amp-lightbox-gallery> proporciona una experiencia multimedia inmersiva que puede ser independiente o integrarse con el amp-carrusel. El componente se puede aplicar a una imagen independiente o a un grupo de imágenes para que cuando un usuario toque estas imágenes, ingrese una vista inmersiva donde puedan deslizar sin problemas de una imagen a otra. Cuando <amp-lightbox-gallery> se aplica a un <amp-carrusel>, todas las imágenes del carrusel heredan el comportamiento de la galería lightbox, de modo que los deslizamientos entre los elementos de la vista inmersiva se sincronizan con los del lightbox, para crear una imagen uniforme, experiencia de galería intuitiva.<br />
<br />
<b><u>Inserte los siguientes componentes "script"</u></b><br />
<a name='more'></a><br />
Importe el componente amp-lightbox-gallery en el encabezado.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
</pre>
</div>
</div>
<br />
De manera opcional, importe el componente amp-carrusel en el encabezado si está usando lightbox con carrusel.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b><u>Uso Básico</u></b><br />
<br />
Este es un ejemplo básico que demuestra lightboxed <amp-img>. Usted tiene uno o más elementos <amp-img> en la página. Simplemente agregue el atributo "lightbox" a cada imagen que desee ver en un lightbox.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div class="container">
<amp-img lightbox
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9I6vzAvkPi7Zj2Md_0vdUwgmNCDK_EFKmaYOM8Z7VME3U6RL9IDlVQb7RYbwNLAyi2YmM86KaGnpY8aw7UJkZYROiy6jQUT_etitP4mn9fRn__WMhSavfmpzHAyEgwE8vwEHI4XBSaNCH/s1600/amp-1.jpg"
width="300"
height="200"
layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9mQy6h6Cueg6QxTbHl69x3gmp3Lq-_NQaeRvoxY0aNMVP5wzP-BpfFmjLS-41tZqfW3x1K0OfKCLZi4ee7ghVooNd4CEHGJD3uIEBFtjTW-nHZckJ3brmRmz0PvmoU-dRmjO7ty0kHxg/s1600/amp-2.jpg"
width="300"
height="200"
layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjic0J8xya_AFEyXIA8NPUc6R1uCBJO6CGcTk6jgrNq0FB_90lWSupG29TVvuA7RmQ4kzGdGnbLHtaj_q7CJ40ry4VuuPy7nUB6fb2F4Cq3P3DIqtuhQ9y50bYdc7GG3tLezXjq8y3s-3AQ/s1600/amp-3.jpg"
width="300"
height="200"
layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="container">
<amp-img lightbox
src="/img/road-1.jpg"
width="300"
height="200"
layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox
src="/img/road-2.jpg"
width="300"
height="200"
layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox
src="/img/road-3.jpg"
width="300"
height="200"
layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</pre>
</div>
</div>
<br />
<b><u>Uso con carrusel</u></b><br />
<br />
También puede usar <amp-lightbox-gallery> con <amp-carousel> para ver los contenidos del carrusel en un lightbox. Simplemente incluya a <amp-carousel> con <amp-img> y agregue el atributo "lightbox" al <amp-carousel>. Las imágenes de la caja lightbox se sincronizarán con las diapositivas del carrusel.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit">
<amp-carousel lightbox
width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9I6vzAvkPi7Zj2Md_0vdUwgmNCDK_EFKmaYOM8Z7VME3U6RL9IDlVQb7RYbwNLAyi2YmM86KaGnpY8aw7UJkZYROiy6jQUT_etitP4mn9fRn__WMhSavfmpzHAyEgwE8vwEHI4XBSaNCH/s1600/amp-1.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9mQy6h6Cueg6QxTbHl69x3gmp3Lq-_NQaeRvoxY0aNMVP5wzP-BpfFmjLS-41tZqfW3x1K0OfKCLZi4ee7ghVooNd4CEHGJD3uIEBFtjTW-nHZckJ3brmRmz0PvmoU-dRmjO7ty0kHxg/s1600/amp-2.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjic0J8xya_AFEyXIA8NPUc6R1uCBJO6CGcTk6jgrNq0FB_90lWSupG29TVvuA7RmQ4kzGdGnbLHtaj_q7CJ40ry4VuuPy7nUB6fb2F4Cq3P3DIqtuhQ9y50bYdc7GG3tLezXjq8y3s-3AQ/s1600/amp-3.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
</amp-carousel>
</div>
<amp-carousel lightbox
width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="/img/image1.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="/img/image2.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="/img/image3.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
</amp-carousel>
</pre>
</div>
</div>
<br />
<b><u>Grupos de Lightbox</u></b><br />
<br />
Por defecto, todos los elementos de lightbox se agruparán en el mismo lightbox a menos que pertenezcan a un carrusel. Todos los elementos en el mismo carrusel lightbox pertenecen a la misma caja lightbox. Puede anular este comportamiento estableciendo el atributo lightbox en una cadena única. Un patrón común es tener una imagen de héroe que se abre en una galería lightbox de varias imágenes.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-img lightbox="hero"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9I6vzAvkPi7Zj2Md_0vdUwgmNCDK_EFKmaYOM8Z7VME3U6RL9IDlVQb7RYbwNLAyi2YmM86KaGnpY8aw7UJkZYROiy6jQUT_etitP4mn9fRn__WMhSavfmpzHAyEgwE8vwEHI4XBSaNCH/s1600/amp-1.jpg"
width="400"
height="300"
layout="responsive">
<span class="overlay-text">See photo gallery</span>
</amp-img>
<div hidden>
<amp-img lightbox="hero"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9mQy6h6Cueg6QxTbHl69x3gmp3Lq-_NQaeRvoxY0aNMVP5wzP-BpfFmjLS-41tZqfW3x1K0OfKCLZi4ee7ghVooNd4CEHGJD3uIEBFtjTW-nHZckJ3brmRmz0PvmoU-dRmjO7ty0kHxg/s1600/amp-2.jpg"
layout="responsive"
width="400"
height="710"></amp-img>
<amp-img lightbox="hero"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjic0J8xya_AFEyXIA8NPUc6R1uCBJO6CGcTk6jgrNq0FB_90lWSupG29TVvuA7RmQ4kzGdGnbLHtaj_q7CJ40ry4VuuPy7nUB6fb2F4Cq3P3DIqtuhQ9y50bYdc7GG3tLezXjq8y3s-3AQ/s1600/amp-3.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
</div>
</div>
<amp-img lightbox="hero"
src="/img/clean-2.jpg"
width="400"
height="300"
layout="responsive">
<span class="overlay-text">See photo gallery</span>
</amp-img>
<div hidden>
<amp-img lightbox="hero"
src="/img/clean-1.jpg"
layout="responsive"
width="400"
height="710"></amp-img>
<amp-img lightbox="hero"
src="/img/clean-3.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
</div>
</pre>
</div>
</div>
<br />
<b><u>Subtítulos (Captions)</u></b><br />
<br />
Opcionalmente, puede especificar un título para cada elemento en el lightbox. Estos campos se leen y muestran automáticamente <amp-lightbox-gallery> en el siguiente orden de prioridad:<br />
<br />
<blockquote class="tr_bq">
figcaption (si el elemento lightboxed es el hijo de una figura)<br />
aria-describedby Los siguientes ejemplos demuestran cómo usar subtítulos. La primera imagen no tiene un título. La segunda imagen utiliza <figcaption>. La tercera imagen utiliza aria-describedby.</blockquote>
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div class="container">
<amp-img lightbox="caption"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9I6vzAvkPi7Zj2Md_0vdUwgmNCDK_EFKmaYOM8Z7VME3U6RL9IDlVQb7RYbwNLAyi2YmM86KaGnpY8aw7UJkZYROiy6jQUT_etitP4mn9fRn__WMhSavfmpzHAyEgwE8vwEHI4XBSaNCH/s1600/amp-1.jpg"
width="300"
height="200"
layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure>
<amp-img lightbox="caption"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9mQy6h6Cueg6QxTbHl69x3gmp3Lq-_NQaeRvoxY0aNMVP5wzP-BpfFmjLS-41tZqfW3x1K0OfKCLZi4ee7ghVooNd4CEHGJD3uIEBFtjTW-nHZckJ3brmRmz0PvmoU-dRmjO7ty0kHxg/s1600/amp-2.jpg"
width="300"
height="200"
layout="responsive"></amp-img>
<figcaption class="image">
This is a long road. We don't know where it leads.
</figcaption>
</figure>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox="caption"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjic0J8xya_AFEyXIA8NPUc6R1uCBJO6CGcTk6jgrNq0FB_90lWSupG29TVvuA7RmQ4kzGdGnbLHtaj_q7CJ40ry4VuuPy7nUB6fb2F4Cq3P3DIqtuhQ9y50bYdc7GG3tLezXjq8y3s-3AQ/s1600/amp-3.jpg"
layout="responsive"
width="300"
height="200"
aria-describedby="desc">
</amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div hidden
id="desc">
I'm not too sure where this road leads either.
</div>
</div>
</div>
<div class="container">
<amp-img lightbox="caption"
src="/img/road-1.jpg"
width="300"
height="200"
layout="responsive"></amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure>
<amp-img lightbox="caption"
src="/img/road-2.jpg"
width="300"
height="200"
layout="responsive"></amp-img>
<figcaption class="image">
This is a long road. We don't know where it leads.
</figcaption>
</figure>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<amp-img lightbox="caption"
src="/img/road-3.jpg"
layout="responsive"
width="300"
height="200"
aria-describedby="desc">
</amp-img>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div hidden
id="desc">
I'm not too sure where this road leads either.
</div>
</div>
</pre>
</div>
</div>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-5878606837641642962018-06-30T10:37:00.001-07:002019-04-17T19:59:02.609-07:00¿Cómo agregar amp-date-picker a mi sitio web? Instrucciones<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAFF3Qwsjz064MVdboxYhySiOAJF0HK1zU7bU2J2NJMECIHvUa4Ez9iQnwtMACFi03qa9f_Ruv3Aype5UfVLNa8N1ubX3c7IvkDmzluUnD9rPxmHsGZc_B8APXxKp5xTQmVG4xyF6o93OI/s1600/como-agregar-amp-date-picker-a-mi-sitio-web.png" width="682" height="398" alt="¿Cómo agregar amp-date-picker a mi sitio web? Instrucciones"/></noscript>
amp-date-picker, es un selector de fecha interactivo al estilo calendario para la entrada de formularios. Con este componente, los usuarios pueden especificar fechas únicas o rangos de fechas con una interfaz de calendario que hace que el proceso sea más rápido y menos propenso a errores.<br />
<br />
<b><u>Inserte los siguientes script</u></b><br />
<br />
Agregue el componente amp-date-picker<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-date-picker" src="https://cdn.ampproject.org/v0/amp-date-picker-0.1.js"></script>
</pre>
</div>
</div>
<br />
<a name='more'></a><br />
Inserte el componente amp-bind para establecer las variables en función de la fecha seleccionada.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</pre>
</div>
</div>
<br />
Incluya el componente amp-mustache para mostrar un panel de información debajo del selector de fecha.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</pre>
</div>
</div>
<br />
Agregar el componente amp-lightbox para mostrar un selector de fecha dentro de una vista de caja de luz a pantalla completa.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
</pre>
</div>
</div>
<br />
Insertar el componente amp-form para crear formularios.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</pre>
</div>
</div>
<br />
Para personalizar el amp-date-pickerestilo, puede usar clases tales como las CalendarMonth_caption que se heredan de las fechas de reacción. amp-date-picker también expone las clases de CSS que puede usar en la regla de CSS, como amp-date-picker-selecting, que se aplica a la entrada de fecha que el usuario está editando.<br />
<br />
<b>Estilos CSS</b><br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<style amp-custom>
.CalendarMonth_caption {
color: #fff;
}
[type="range"] .amp-date-picker-selecting {
border-bottom-color: #b60845;
color: #b60845;
}
.align-content-center,
.align-content-center .amp-date-picker-calendar-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
}
.space-between > * + * {
margin-left: 1em;
}
amp-lightbox {
background: rgba(0, 0, 0, .75);
}
amp-lightbox .align-content-center {
height: 100%;
}
.example-picker {
display: flex;
}
.example-picker[mode="overlay"] {
padding: 1em;
}
.small-button {
font-size: .75em;
line-height: .75em;
margin: .75em;
}
.icon-input {
background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1393.1 1500" style="enable-background:new 0 0 1393.1 1500;" xml:space="preserve"><path d="M107.2,1392.9h241.1v-241.1H107.2V1392.9z M401.9,1392.9h267.9v-241.1H401.9V1392.9z M107.2,1098.2h241.1V830.4H107.2 V1098.2z M401.9,1098.2h267.9V830.4H401.9V1098.2z M107.2,776.8h241.1V535.7H107.2V776.8z M723.4,1392.9h267.9v-241.1H723.4V1392.9z M401.9,776.8h267.9V535.7H401.9V776.8z M1044.8,1392.9H1286v-241.1h-241.1V1392.9z M723.4,1098.2h267.9V830.4H723.4V1098.2z M428.7,375V133.9c0-7.3-2.7-13.5-8-18.8c-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3,0-13.5,2.7-18.8,8c-5.3,5.3-8,11.6-8,18.8V375 c0,7.3,2.7,13.5,8,18.8c5.3,5.3,11.6,8,18.8,8h53.6c7.3,0,13.5-2.7,18.8-8C426,388.5,428.7,382.3,428.7,375z M1044.8,1098.2H1286 V830.4h-241.1V1098.2z M723.4,776.8h267.9V535.7H723.4V776.8z M1044.8,776.8H1286V535.7h-241.1V776.8z M1071.6,375V133.9 c0-7.3-2.7-13.5-8-18.8c-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3,0-13.5,2.7-18.8,8c-5.3,5.3-8,11.6-8,18.8V375c0,7.3,2.7,13.5,8,18.8 c5.3,5.3,11.6,8,18.8,8h53.6c7.3,0,13.5-2.7,18.8-8C1069,388.5,1071.6,382.3,1071.6,375z M1393.1,321.4v1071.4 c0,29-10.6,54.1-31.8,75.3c-21.2,21.2-46.3,31.8-75.3,31.8H107.2c-29,0-54.1-10.6-75.3-31.8C10.6,1447,0,1421.9,0,1392.9V321.4 c0-29,10.6-54.1,31.8-75.3s46.3-31.8,75.3-31.8h107.2v-80.4c0-36.8,13.1-68.4,39.3-94.6S311.4,0,348.3,0h53.6 c36.8,0,68.4,13.1,94.6,39.3c26.2,26.2,39.3,57.8,39.3,94.6v80.4h321.5v-80.4c0-36.8,13.1-68.4,39.3-94.6 C922.9,13.1,954.4,0,991.3,0h53.6c36.8,0,68.4,13.1,94.6,39.3s39.3,57.8,39.3,94.6v80.4H1286c29,0,54.1,10.6,75.3,31.8 C1382.5,267.3,1393.1,292.4,1393.1,321.4z"/></svg>');
background-repeat: no-repeat;
flex-shrink: 0;
height: 28px;
margin-top: 8px;
width: 27px;
}
</style>
</pre>
</div>
</div>
<br />
<b><u>Selector de fecha único</u></b><br />
<br />
<b><i>amp-date-picker</i></b> con type=single se puede usar para seleccionar una sola fecha. Puede usar amp-mustache con el atributo info-template para mostrar un panel de información debajo del calendario, aquí mostramos la fecha que acaba de seleccionar. info-template también habilita el enlace AMP haciendo disponibles las variables que se han establecido con AMP.setState. Se requiere un marcador de posición para el componente. Para una sola fecha, esto puede tomar la forma: <input amp-date-placeholder placeholder="Pick a date">. amp-date-picker introduce clear acción que se puede llamar después de hacer clic en un botón para borrar la selección de fecha; requiere el atributo show-clear-date.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-date-picker id="simple-date-picker"
type="single"
mode="overlay"
layout="container"
on="select:AMP.setState({date1: event.date, dateType1: event.id})"
format="YYYY-MM-DD"
open-after-select
input-selector="[name=date1]"
class="example-picker space-between">
<div class="icon-input"></div>
<div class="ampstart-input">
<input class="border-none p0"
name="date1"
placeholder="Pick a date">
</div>
<button class="ampstart-btn caps"
on="tap: simple-date-picker.clear">Clear</button>
<template type="amp-mustache"
info-template>
<span [text]="date1 != null ? 'You picked ' + date1 + '.' : 'You will see your chosen date here.'">You will see your chosen date here.</span>
</template>
</amp-date-picker>
</div>
<amp-date-picker id="simple-date-picker"
type="single"
mode="overlay"
layout="container"
on="select:AMP.setState({date1: event.date, dateType1: event.id})"
format="YYYY-MM-DD"
open-after-select
input-selector="[name=date1]"
class="example-picker space-between">
<div class="icon-input"></div>
<div class="ampstart-input">
<input class="border-none p0"
name="date1"
placeholder="Pick a date">
</div>
<button class="ampstart-btn caps"
on="tap: simple-date-picker.clear">Clear</button>
<template type="amp-mustache"
info-template>
<span [text]="date1 != null ? 'You picked ' + date1 + '.' : 'You will see your chosen date here.'">You will see your chosen date here.</span>
</template>
</amp-date-picker>
</pre>
</div>
</div>
<br />
Además, también puede usar amp-mustache para crear plantillas para el marcado de fecha personalizado, como un icono en lugar del número del mes. Aquí estamos usando un ícono de taco en lugar del número del mes con una frecuencia de 2 semanas cada martes. Los casos de uso común pueden ser fechas del mes en que el precio de un artículo se fija en un número específico.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-date-picker id="simple-date-picker-2"
type="single"
mode="overlay"
layout="container"
on="select:AMP.setState({date2: event.date, dateType2: event.id})"
locale="en"
format="YYYY-MM-DD"
open-after-select
input-selector="[name=date2]"
class="example-picker space-between">
<div class="ampstart-input">
<input class="border-none p0"
name="date2"
placeholder="Pick a date">
</div>
<button class="ampstart-btn caps"
on="tap: simple-date-picker-2.clear">Clear</button>
<template type="amp-mustache"
date-template
dates="FREQ=WEEKLY;DTSTART=20180101T000000Z;INTERVAL=2;WKST=SU;BYDAY=TU"
id="tacos2">
<span>🌮</span>
<span class="taco-tuesday"></span>
</template>
<template type="amp-mustache"
info-template>
<span [text]="date2 ? 'You picked ' + date2 + '.' +
(dateType2 == 'tacos2' ? ' Happy Taco Tuesday!' : '') : ''">You will see your chosen date here.</span>
</template>
</amp-date-picker>
</div>
<amp-date-picker id="simple-date-picker-2"
type="single"
mode="overlay"
layout="container"
on="select:AMP.setState({date2: event.date, dateType2: event.id})"
locale="en"
format="YYYY-MM-DD"
open-after-select
input-selector="[name=date2]"
class="example-picker space-between">
<div class="ampstart-input">
<input class="border-none p0"
name="date2"
placeholder="Pick a date">
</div>
<button class="ampstart-btn caps"
on="tap: simple-date-picker-2.clear">Clear</button>
<template type="amp-mustache"
date-template
dates="FREQ=WEEKLY;DTSTART=20180101T000000Z;INTERVAL=2;WKST=SU;BYDAY=TU"
id="tacos2">
<span>🌮</span>
<span class="taco-tuesday"></span>
</template>
<template type="amp-mustache"
info-template>
<span [text]="date2 ? 'You picked ' + date2 + '.' +
(dateType2 == 'tacos2' ? ' Happy Taco Tuesday!' : '') : ''">You will see your chosen date here.</span>
</template>
</amp-date-picker>
</pre>
</div>
</div>
<br />
<b><u>Selector de rango de fechas</u></b><br />
<br />
amp-date-picker con type=rangese puede usar para seleccionar un rango de fechas. Por defecto, amp-date-picker deshabilita las fechas pasadas, use el atributo min para habilitarlas.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-date-picker type="range"
mode="overlay"
id="range-date-picker"
on="
select:
AMP.setState({
dates: event.dates,
startDate: event.start,
endDate: event.end
})"
format="YYYY-MM-DD"
open-after-select
min="2017-10-26"
start-input-selector="#range-start"
end-input-selector="#range-end"
class="example-picker space-between">
<div class="ampstart-input">
<input class="border-none p0"
id="range-start"
placeholder="Start date">
</div>
<div class="ampstart-input">
<input class="border-none p0"
id="range-end"
placeholder="End date">
</div>
<button class="ampstart-btn caps"
on="tap:range-date-picker.clear">Clear</button>
<template type="amp-mustache"
info-template>
<span [text]="(startDate && endDate ?
'You picked ' + startDate.date + ' as start date and ' + endDate.date + ' as end date.' :
'You will see your chosen dates here.')">
You will see your chosen dates here.
</span>
</template>
</amp-date-picker>
</div>
<amp-date-picker type="range"
mode="overlay"
id="range-date-picker"
on="
select:
AMP.setState({
dates: event.dates,
startDate: event.start,
endDate: event.end
})"
format="YYYY-MM-DD"
open-after-select
min="2017-10-26"
start-input-selector="#range-start"
end-input-selector="#range-end"
class="example-picker space-between">
<div class="ampstart-input">
<input class="border-none p0"
id="range-start"
placeholder="Start date">
</div>
<div class="ampstart-input">
<input class="border-none p0"
id="range-end"
placeholder="End date">
</div>
<button class="ampstart-btn caps"
on="tap:range-date-picker.clear">Clear</button>
<template type="amp-mustache"
info-template>
<span [text]="(startDate && endDate ?
'You picked ' + startDate.date + ' as start date and ' + endDate.date + ' as end date.' :
'You will see your chosen dates here.')">
You will see your chosen dates here.
</span>
</template>
</amp-date-picker>
</pre>
</div>
</div>
<br />
<b><u>Configuración Externa</u></b><br />
<br />
Es posible configurar las preferencias amp-date-picker utilizando un json externo. Usamos el siguiente JSON en la URL /json/amp-date-picker.json:<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre> {
"templates": [{
"id": "spooky",
"dates": [
"FREQ=WEEKLY;DTSTART=20180101T160000Z;BYDAY=MO",
"FREQ=YEARLY;DTSTART=20180101T160000Z;WKST=SU;BYMONTH=10;BYMONTHDAY=31",
"FREQ=MONTHLY;DTSTART=20180101T160000Z;WKST=SU;BYDAY=FR;BYMONTHDAY=13"
]
}]
}
</pre>
</div>
</div>
<br />
Para las fechas que coinciden con la lista de fechas en el blob JSON, la plantilla con id="spooky" se utilizará para representar ese día en el calendario. En este caso, estas fechas son los lunes, viernes 13 y Halloween.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-date-picker id="src-picker"
type="single"
mode="overlay"
layout="container"
format="YYYY-MM-DD"
src="https://ampbyexample.com/json/amp-date-picker.json"
input-selector="#src-input"
class="example-picker space-between">
<div class="ampstart-input">
<input class="border-none p0"
id="src-input"
placeholder="Pick a date">
</div>
<button class="ampstart-btn caps"
on="tap: src-picker.clear">Clear</button>
<template type="amp-mustache"
date-template
id="spooky">
<span>🙀</span>
</template>
</amp-date-picker>
</div>
<amp-date-picker id="src-picker"
type="single"
mode="overlay"
layout="container"
format="YYYY-MM-DD"
src="https://ampbyexample.com/json/amp-date-picker.json"
input-selector="#src-input"
class="example-picker space-between">
<div class="ampstart-input">
<input class="border-none p0"
id="src-input"
placeholder="Pick a date">
</div>
<button class="ampstart-btn caps"
on="tap: src-picker.clear">Clear</button>
<template type="amp-mustache"
date-template
id="spooky">
<span>🙀</span>
</template>
</amp-date-picker>
</pre>
</div>
</div>
<br />
<b><u>Selector de fecha estático "Static date picker"</u></b><br />
<br />
amp-date-picker con mode="static" puede mostrar una vista de calendario. El selector estático se puede usar con o sin una entrada adjunta.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div class="align-content-center">
<amp-date-picker id="static-picker"
type="single"
mode="static"
layout="fixed-height"
height="360"
format="YYYY-MM-DD"
input-selector="#static-picker-input">
</amp-date-picker>
</div>
</div>
<div class="align-content-center">
<amp-date-picker id="static-picker"
type="single"
mode="static"
layout="fixed-height"
height="360"
format="YYYY-MM-DD"
input-selector="#static-picker-input">
</amp-date-picker>
</div>
</pre>
</div>
</div>
<br />
amp-date-picker admite una variedad de atributos, por ejemplo highlighted y blocked. Encuentra la lista completa en el documento oficial. El atributo blocked permite especificar una lista separada por espacios de fechas ISO 8601 y RRULE RFC 5545 que especifican fechas no permitidas. Los atributos highlighted son una lista separada por espacios de fechas de ISO 8601 y RRULE de RFC 5545 que especifican las fechas que se muestran con un estilo de resaltado. Aquí cada jueves es highlighted, mientras que cada fin de semana lo es blocked.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div class="align-content-center">
<amp-date-picker id="simple-date-picker-3"
type="single"
mode="static"
layout="fixed-height"
height="360"
on="select:AMP.setState({date3: event.date ? event.date : ''})"
locale="en"
format="YYYY-MM-DD"
highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH"
blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU">
</amp-date-picker>
</div>
</div>
<div class="align-content-center">
<amp-date-picker id="simple-date-picker-3"
type="single"
mode="static"
layout="fixed-height"
height="360"
on="select:AMP.setState({date3: event.date ? event.date : ''})"
locale="en"
format="YYYY-MM-DD"
highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH"
blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU">
</amp-date-picker>
</div>
</pre>
</div>
</div>
<br />
Si el selector de fecha utiliza type="range" y hay fechas bloqueadas que pueden formar parte del rango, el atributo allow-blocked-dates permite a los usuarios seleccionar rangos que incluyen fechas bloqueadas.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div class="align-content-center">
<amp-date-picker id="simple-date-picker-4"
type="range"
mode="static"
layout="fixed-height"
height="360"
on="select:AMP.setState({date4: event.date ? event.date : ''})"
locale="en"
format="YYYY-MM-DD"
allow-blocked-ranges
highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH"
blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU">
</amp-date-picker>
</div>
</div>
<div class="align-content-center">
<amp-date-picker id="simple-date-picker-4"
type="range"
mode="static"
layout="fixed-height"
height="360"
on="select:AMP.setState({date4: event.date ? event.date : ''})"
locale="en"
format="YYYY-MM-DD"
allow-blocked-ranges
highlighted="FREQ=WEEKLY;WKST=SU;BYDAY=TH"
blocked="FREQ=WEEKLY;WKST=SU;BYDAY=SA,SU">
</amp-date-picker>
</div>
</pre>
</div>
</div>
<br />
<b><u>Lightbox date picker</u></b><br />
<br />
amp-date-picker puede mostrar dentro de un lightbox modal. El evento activate abre el lightbox si el usuario enfoca los elementos de entrada conectados del selector y presiona la tecla de flecha hacia abajo. deactivatese activa cuando el usuario presiona escapar cuando interactúa con la vista del calendario. Para un cuadro de interfaz de solo toque, el atributo on="tap:..." abre el selector cuando el usuario toca la entrada.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div class="p1">
<p>Choose your travel dates</p>
<div class="align-content-center space-between">
<div class="ampstart-input">
<input class="border-none p0"
id="lb-start"
placeholder="Start date"
on="tap:lb.open"
role="textbox"
tabindex="0">
</div>
<div class="ampstart-input">
<input class="border-none p0"
id="lb-end"
placeholder="End date"
on="tap:lb.open"
role="textbox"
tabindex="0">
</div>
<button class="ampstart-btn caps"
on="tap:lb-picker.clear">Clear</button>
</div>
<amp-lightbox id="lb"
layout="nodisplay">
<button class="ampstart-btn absolute m1 caps small-button"
on="tap:lb.close"
tabindex="0">Close</button>
<div class="align-content-center">
<amp-date-picker id="lb-picker"
type="range"
mode="static"
layout="fixed-height"
height="360"
format="MM/DD/YYYY"
on="activate: lb.open;
deactivate: lb.close;"
start-input-selector="#lb-start"
end-input-selector="#lb-end"></amp-date-picker>
</div>
</amp-lightbox>
</div>
</div>
<div class="p1">
<p>Choose your travel dates</p>
<div class="align-content-center space-between">
<div class="ampstart-input">
<input class="border-none p0"
id="lb-start"
placeholder="Start date"
on="tap:lb.open"
role="textbox"
tabindex="0">
</div>
<div class="ampstart-input">
<input class="border-none p0"
id="lb-end"
placeholder="End date"
on="tap:lb.open"
role="textbox"
tabindex="0">
</div>
<button class="ampstart-btn caps"
on="tap:lb-picker.clear">Clear</button>
</div>
<amp-lightbox id="lb"
layout="nodisplay">
<button class="ampstart-btn absolute m1 caps small-button"
on="tap:lb.close"
tabindex="0">Close</button>
<div class="align-content-center">
<amp-date-picker id="lb-picker"
type="range"
mode="static"
layout="fixed-height"
height="360"
format="MM/DD/YYYY"
on="activate: lb.open;
deactivate: lb.close;"
start-input-selector="#lb-start"
end-input-selector="#lb-end"></amp-date-picker>
</div>
</amp-lightbox>
</div>
</pre>
</div>
</div>
<br />
<b><u>Selector lightbox date picker</u></b><br />
<br />
amp-date-picker también puede mostrarse como una vista de pantalla completa dentro de una caja de luz. El atributo fullscreen le dice al selector de fecha que tome el espacio en su contenedor y permita que su contenido se desplace verticalmente.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div class="p1">
<p>Choose your travel dates</p>
<div class="align-content-center space-between">
<div class="ampstart-input">
<input class="border-none p0"
id="lb-fullscreen-start"
placeholder="Start date"
on="tap:lb-fullscreen.open"
role="textbox"
tabindex="0">
</div>
<div class="ampstart-input">
<input class="border-none p0"
id="lb-fullscreen-end"
placeholder="End date"
on="tap:lb-fullscreen.open"
role="textbox"
tabindex="0">
</div>
<button class="ampstart-btn caps"
on="tap:lb-fullscreen-picker.clear">Clear</button>
</div>
<amp-lightbox id="lb-fullscreen"
layout="nodisplay"
scrollable>
<button class="ampstart-btn m1 absolute caps z3 small-button"
on="tap:lb-fullscreen.close"
tabindex="0">Close</button>
<amp-date-picker id="lb-fullscreen-picker"
fullscreen
layout="fill"
mode="static"
type="range"
number-of-months="12"
format="MM/DD/YYYY"
on="activate: lb-fullscreen.open;
deactivate: lb-fullscreen.close;"
start-input-selector="#lb-fullscreen-start"
end-input-selector="#lb-fullscreen-end"></amp-date-picker>
</amp-lightbox>
</div>
</div>
<div class="p1">
<p>Choose your travel dates</p>
<div class="align-content-center space-between">
<div class="ampstart-input">
<input class="border-none p0"
id="lb-fullscreen-start"
placeholder="Start date"
on="tap:lb-fullscreen.open"
role="textbox"
tabindex="0">
</div>
<div class="ampstart-input">
<input class="border-none p0"
id="lb-fullscreen-end"
placeholder="End date"
on="tap:lb-fullscreen.open"
role="textbox"
tabindex="0">
</div>
<button class="ampstart-btn caps"
on="tap:lb-fullscreen-picker.clear">Clear</button>
</div>
<amp-lightbox id="lb-fullscreen"
layout="nodisplay"
scrollable>
<button class="ampstart-btn m1 absolute caps z3 small-button"
on="tap:lb-fullscreen.close"
tabindex="0">Close</button>
<amp-date-picker id="lb-fullscreen-picker"
fullscreen
layout="fill"
mode="static"
type="range"
number-of-months="12"
format="MM/DD/YYYY"
on="activate: lb-fullscreen.open;
deactivate: lb-fullscreen.close;"
start-input-selector="#lb-fullscreen-start"
end-input-selector="#lb-fullscreen-end"></amp-date-picker>
</amp-lightbox>
</div>
</pre>
</div>
</div>
<br />
<b><u>Selector de fecha en un formulario "Date picker in a form"</u></b><br />
<br />
amp-date-picker se integra con los formularios de AMP. Si no proporciona una entrada para un selector estático, creará una entrada oculta para enviar en el formulario.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<form method="post"
class="p1"
action-xhr="/components/amp-form/submit-form-xhr"
target="_top">
<amp-date-picker id="form-picker"
type="single"
mode="static"
layout="fixed-height"
height="360"
format="YYYY-MM-DD">
</amp-date-picker>
<input type="submit"
class="ampstart-btn caps">
<div submit-success>
<template type="amp-mustache">
Success! Thanks for trying the
<code>amp-form</code> demo!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Error!
</template>
</div>
</form>
</div>
<form method="post"
class="p1"
action-xhr="/components/amp-form/submit-form-xhr"
target="_top">
<amp-date-picker id="form-picker"
type="single"
mode="static"
layout="fixed-height"
height="360"
format="YYYY-MM-DD">
</amp-date-picker>
<input type="submit"
class="ampstart-btn caps">
<div submit-success>
<template type="amp-mustache">
Success! Thanks for trying the
<code>amp-form</code> demo!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Error!
</template>
</div>
</form>
</pre>
</div>
</div>
<br />
Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-6679180010331072572018-06-21T17:37:00.001-07:002019-04-17T19:59:19.127-07:00¿Qué hay en una URL de AMP?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3DeIsheQJCBVGiwsxVGQii_CFSMhiRSGnAYxk4wZOdkS2R-eDx5ryrnLUiNrrYo7Kl8Qs-cBcu9iDwxRmsgNLzSkS1U6AG0YMijkSORxZiC9LQPodS9KDoFkkRSNbacmEsdTV7DDMLfF-/s1600/que-hay-en-una-url-de-amp.jpg" width="712" height="430" alt="¿Qué hay en una URL de AMP?"/></noscript>
En la web, mucho: las URL y los orígenes representan, hasta cierto punto, la confianza y la propiedad del contenido. Cuando estás leyendo un artículo del New York Times, un rápido vistazo a la URL te da un nivel de confianza de que lo que estás leyendo representa la voz del New York Times. La atribución, la marca y la propiedad son claras.<br />
<br />
AMP en la Búsqueda de Google ha borrado un poco esta línea. En esta publicación, primero intentaré explicar el razonamiento detrás de algunas de las decisiones técnicas que se han tomado y dar sentido a los diferentes tipos de URL de AMP que existen. A continuación, describiré los cambios que se han estado realizando para abordar las preocupaciones sobre las URL.<br />
<br />
<i>Para empezar, los documentos AMP tienen tres tipos diferentes de URL:</i><br />
<br />
<blockquote class="tr_bq">
<b><i>URL original:</i></b> el documento del editor escrito en formato AMP. http://www.example.com/amp/doc.html<br />
<b><i>URL de caché de AMP:</i></b> el documento servido a través de un caché de AMP (por ejemplo, todos los AMP servidos por Google se sirven a través de Google AMP Cache ). La mayoría de los usuarios nunca verán esta URL. https://www-example-com.cdn.ampproject.org/c/www.example.com/amp/doc.html<br />
<b><i>URL de Google AMP Viewer</i></b>: el documento que se muestra en un visor de AMP (por ejemplo, cuando se representa en la página de resultados de búsqueda). https://www.google.com/amp/www.example.com/amp.doc.html</blockquote>
<div class="amp-img-500">
<amp-img alt="¿Qué hay en una URL de AMP?" height="278" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi52C9cCMOiFR78jPod3eAvIYeP_SZ-YGzE4-pnExU1kzKj1R5Ov95IFZloimPcWSEhtV8dFwwhtn8PEEYQO3O5r-sdZxl1VYSrahyphenhyphenM1GEmdO4hXQA9rjWiXsavH6EWSLstbdz814L7sb7M/s400/que-hay-en-una-url-de-amp.jpg" width="400"></amp-img>
</div>
<br />
Aunque tener tres URL diferentes con orígenes diferentes para esencialmente el mismo contenido puede ser confuso, existen dos razones principales por las que existen estas diferentes URL: el almacenamiento en memoria caché y la pre representación. Ambos son grandes contribuyentes a la velocidad de AMP, pero requieren nuevas URL y me extenderé sobre por qué es así.<br />
<br />
<a name='more'></a>
<b><u>AMP Cache URLs</u></b><br />
<br />
Comencemos con las URL de caché de AMP. Paul Bakaus, un Defensor de Desarrolladores de Google para AMP, tiene una excelente publicación que describe por qué existen los cachés de AMP. La publicación de Paul entra en gran detalle describiendo los beneficios de AMP Caches, pero no responde completamente a la pregunta de por qué requieren nuevas URL. La respuesta a esta pregunta se reduce a uno de los principios de diseño de AMP: compilar para una fácil adopción. AMP intenta resolver algunos de los problemas de la web móvil a escala, por lo que sus componentes deben ser fáciles de usar para todos.<br />
<br />
Hay una variedad de opciones para obtener validación, proximidad a los usuarios y otros beneficios provistos por AMP Caches. Sin embargo, para un sitio pequeño que no gestiona sus propias entradas DNS, no tiene recursos de ingeniería para enviar contenido a través de API complicadas, o no puede pagar redes de distribución de contenido, muchas de estas tecnologías son inaccesibles.<br />
<br />
Por este motivo, Google AMP Cache funciona mediante una simple "transformación" de URL. Un webmaster solo tiene que hacer que su contenido esté disponible en alguna URL y el caché de AMP de Google puede almacenar y servir el contenido a través de la infraestructura mundial de Google a través de una nueva URL que refleja y transforma el original. Es tan simple como eso. Aprovechar un caché de AMP utilizando la URL original, por otro lado, requeriría que el webmaster modifique sus registros DNS o reconfigure sus servidores de nombres. Si bien algunos sitios hacen precisamente eso, el enfoque basado en URL es más fácil de usar para la gran mayoría de los sitios.<br />
<br />
<b><u>URL de AMP Viewer</u></b><br />
<br />
En la sección anterior, aprendimos sobre las URL de caché de Google AMP: URL que apuntan a la versión almacenada en caché de un documento de AMP. Pero, ¿qué pasa con las www.google.com/ampURL? ¿Por qué son necesarios? Estas son URL de "AMP Viewer" y existen debido a la pre representación.<br />
<br />
El soporte integrado de AMP para la privacidad y el preescrito con conciencia de recursos rara vez se menciona y, a menudo, se malinterpreta. Los documentos de AMP se pueden preprocesar sin activar una cascada de recuperaciones de recursos, sin acaparar la CPU y la memoria de los usuarios, y sin ejecutar ningún código de análisis sensible a la privacidad. Esto funciona independientemente de si la aplicación de inserción es una página web móvil o una aplicación nativa. La necesidad de nuevas URL, sin embargo, proviene principalmente de implementaciones web móviles, entonces estoy usando Google'<br />
<br />
<b><u>¿Cómo funciona la pre representación?</u></b><br />
<br />
Cuando un usuario realiza una búsqueda en Google que devuelve resultados habilitados para AMP, algunos de estos resultados se renderizan previamente detrás de escena. Cuando el usuario hace clic en un resultado preprocesado, la página de AMP se carga instantáneamente.<br />
<br />
La preprocesamiento funciona cargando un iframe oculto en la página de incrustación (la página de resultados de búsqueda) con el contenido de la página de AMP y un parámetro adicional que indica que el documento de AMP solo se está preprocesando. El componente de JavaScript que maneja el ciclo de vida de estos iframes se llama "AMP Viewer".<br />
<br />
<div class="amp-img-500">
<amp-img alt="¿Qué hay en una URL de AMP?" height="400" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI5lD-TAbzdspruLQ12vr5X1ZBP5yKhxN72sZXzvFpt5ICo_kp2Mm_6LBtNKhMRKEOEwfdg7Buh2MTH_7NnApLkoop1LNo2mxXnEfw_eUrdLRz-f2XRvMGqQKOlq_nPm54fRdZKV_GVBI1/s400/que-hay-en-una-url-de-amp.jpg" width="366"></amp-img>
</div>
<br />
<center>
<b>AMP Viewer representa un documento de AMP en un iFrame oculto.</b><br />
</center>
<br />
El navegador del usuario carga el documento y el tiempo de ejecución AMP y comienza a renderizar la página AMP. Como todos los demás recursos, como imágenes e incrustaciones, son administrados por el tiempo de ejecución de AMP, no se carga nada más en este punto. El tiempo de ejecución de AMP puede decidir buscar algunos recursos, pero lo hará de una manera sensible a los recursos y la privacidad.<br />
<br />
Cuando un usuario hace clic en el resultado, todo lo que AMP Viewer debe hacer es mostrar el iframe que el navegador ya ha procesado y dejar que el tiempo de ejecución de AMP sepa que el documento de AMP ahora está visible.<br />
<br />
Como puede ver, esta operación es increíblemente barata: no hay actividad de red o navegación difícil en una página nueva. Esto lleva a una experiencia de carga casi instantánea del resultado.<br />
<br />
<b><u>¿De dónde provienen las URL de google.com/amp?</u></b><br />
<br />
Todo lo anterior ocurre mientras el usuario todavía está en la página original (en nuestro ejemplo, esa es la página de resultados de búsqueda). En otras palabras, el usuario no ha ido a una página diferente; acaban de ver un iframe en la misma página y, por lo tanto, el navegador no cambia la URL.<br />
<br />
Todavía queremos que la URL en el navegador refleje la página que se muestra en la pantalla y facilite el enlace de los usuarios. Cuando los usuarios presionan Actualizar en su navegador, esperan que aparezca el mismo documento y no la página de resultados de búsqueda subyacente. Entonces el espectador de AMP tiene que actualizar manualmente esta URL. Esto sucede usando la API de historial. Esta API permite que AMP Viewer actualice la barra de URL del navegador sin realizar una navegación difícil.<br />
<br />
La pregunta es a qué URL debe actualizarse el navegador. Idealmente, esta sería la URL del resultado en sí (por ejemplo, www.example.com/amp/doc.html); o la URL de caché de AMP (por ejemplo, www-example-com.cdn.ampproject.org/www.example.com/amp/doc.html). Lamentablemente, no puede ser ninguno de esos. Una de las principales restricciones de la API de historial es que la nueva URL debe tener el mismo origen que la URL original ( referencia ). Esto es reforzado por los navegadores (por razones de seguridad ), pero significa que en la Búsqueda de Google, esta URL debe estar en www.google.com de origen.<br />
<br />
<b><u>¿Por qué se muestra una barra de encabezado?</u></b><br />
<br />
La sección anterior explicaba las restricciones en las URL que un AMP Viewer debe manejar. Estas URL, sin embargo, pueden ser confusas y engañosas. Pueden abrir las puertas a los ataques de phishing. Si una página de AMP mostraba una página de inicio de sesión que se parece a la de Google y dice la barra de URL www.google.com, ¿cómo sabría un usuario que esta página no es en realidad la de Google? Ahí es donde entra la necesidad de una atribución adicional.<br />
<br />
Para proporcionar la atribución adecuada del contenido, cada AMP Viewer debe dejar en claro a los usuarios de dónde proviene el contenido que están buscando. Y una forma de lograr esto es agregar una barra de encabezado que muestre el origen "verdadero" de una página.<br />
<br />
<div class="amp-img-500">
<amp-img alt="¿Qué hay en una URL de AMP?" height="290" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRZVVn9eWH6Q8ZxayLK0lY2Rv1-mVbtypsG15Z1CRp-gkODcC_t8aPVRknNqwFelzVsNA6OGYPg0NWW7QAIKCW2raekFawwK_JqeP6Bbrch8fWtWIXD63sBNOlhReoiao5QC_-HeA9HgEF/s400/que-hay-en-una-url-de-amp.jpg" width="400"></amp-img>
</div>
<br />
<b><u>¿Qué sigue?</u></b><br />
<br />
Espero que las secciones anteriores aclaren por qué existen estas diferentes URL y por qué debe haber un encabezado en cada visor de AMP. Hemos escuchado cómo se siente acerca de este enfoque y la importancia de las URL. Entonces, ¿qué sigue?<br />
<br />
Desde el lanzamiento de AMP en la Búsqueda de Google en febrero de 2016, se a seguido los siguientes pasos:<br />
<br />
<blockquote class="tr_bq">
Todas las URL de Google (es decir, la URL caché de Google AMP y la dirección URL del visor Google AMP) reflejan la fuente original del contenido de la mejor manera posible: . www.google.com/amp/www.example.com/amp/doc.html<br />
Cuando los usuarios se desplazan hacia abajo de la página para leer un documento, la barra de encabezado del visor de AMP se esconde, liberando el valioso espacio de la pantalla.<br />
Cuando los usuarios visitan una URL de visor de Google AMP en una plataforma donde el visor no está disponible, se redirige a la página canónica del documento.</blockquote>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-10056731672602023002018-06-21T16:45:00.003-07:002019-04-17T19:59:48.187-07:00AMP Google<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_LqzfIxY7BkxyAPljiJM6u6440M9hf7DZDGwrMGyciQZvGtdN2cOJwFC-2SmMlogV-mWhiXh8UOVGLFZP5mA9Sw-JMq02iDNaOl3i7ZSyqFTSoMPh7XjjbMEDcgpMcXv4uCN3ggqMCGmu/s1600/AMP-Google.jpg" width="459" height="321" alt="AMP Google"/></noscript>
<b><u>Acerca de AMP en la Búsqueda de Google</u></b><br />
<br />
La Búsqueda de Google indexa las páginas de AMP para proporcionar una experiencia web rápida y confiable. Cuando hay una página de AMP disponible, se puede mostrar en la búsqueda de dispositivos móviles como parte de los excelentes resultados y carruseles.<br />
<br />
En la búsqueda móvil, el icono de AMP ayuda a los usuarios a identificar rápidamente las páginas que se cargan de manera rápida y sin problemas. Cuando los usuarios seleccionan una página de AMP, la Búsqueda de Google recupera la página de Google AMP Cache, lo que permite una variedad de optimizaciones de la carga que a menudo hacen que estas páginas aparezcan de forma instantánea, como la ejecución previa. Actualmente, las páginas de AMP en el escritorio no se muestran con funciones avanzadas (como el logotipo y los carruseles de AMP); Las páginas AMP canónicas se comportan como resultados estándar.<br />
<br />
<b><u>Sus páginas AMP en los resultados de búsqueda de Google</u></b><br />
<br />
Su contenido de AMP podría aparecer en los resultados de búsqueda de Google en carruseles y resultados enriquecidos. Un carrusel es un contenedor para múltiples resultados enriquecidos del mismo tipo en su sitio. Un carrusel también puede contener recetas y artículos de diferentes sitios en un carrusel (por ejemplo, Historias principales). Un resultado enriquecedor es un resultado que incluye estilo, imágenes y otras características.<br />
<br />
<b><u>Funciones de búsqueda que funcionan con AMP</u></b><br />
<br />
Agregue datos estructurados a su contenido para hacer que su página sea elegible para aparecer en carruseles y resultados enriquecidos. Ser elegible para una determinada función de búsqueda no garantiza la visualización de esa función.<br />
<br />
<a name='more'></a>
<b><i>Categorías de funciones de búsqueda</i></b><br />
<br />
<b>Carrusel de historias principales:</b> un contenedor que incluye artículos, blogs en vivo y videos. Para ser elegible para aparecer en el carrusel de Historias principales, agregue datos estructurados para el artículo a su página canónica para uno o más de los siguientes tipos de esquema (dependiendo de su tipo de contenido):<br />
<blockquote class="tr_bq">
Article<br />
NewsArticle (subtype of Article)<br />
BlogPosting (subtype of Article)<br />
LiveBlogPosting (subtype of BlogPosting)<br />
DiscussionForumPosting (subtype of Article)<br />
VideoObject (subtype of Article)</blockquote>
<b>Carrusel de host</b>: contenedor para múltiples resultados enriquecidos del mismo tipo en su sitio. Para ser elegible para aparecer en un carrusel de host, agregue datos estructurados para el artículo a su página canónica para uno o más de los siguientes tipos de esquema (dependiendo de su tipo de contenido):<br />
<blockquote class="tr_bq">
Article<br />
NewsArticle (subtype of Article)<br />
BlogPosting (subtype of Article)<br />
LiveBlogPosting (subtype of BlogPosting)<br />
DiscussionForumPosting (subtype of Article)<br />
VideoObject (subtype of Article)</blockquote>
<b>Resultado enriquecido:</b> un resultado que incluye estilo, imágenes y otras características. Para ser elegible para aparecer en un resultado enriquecido, agregue datos estructurados a su página canónica para uno o más de los siguientes tipos de esquema (dependiendo de su tipo de contenido):<br />
<blockquote class="tr_bq">
Article<br />
NewsArticle (subtype of Article)<br />
BlogPosting (subtype of Article)<br />
LiveBlogPosting (subtype of BlogPosting)<br />
DiscussionForumPosting (subtype of Article)<br />
VideoObject (subtype of Article)<br />
Restaurant<br />
Movie<br />
Recipe<br />
Video</blockquote>
<b><u>El visor de Google AMP</u></b><br />
<br />
Cuando su contenido de AMP está vinculado desde la Búsqueda de Google, puede aparecer en Google AMP Viewer. Su contenido está en caché y servido por Google AMP Cache para optimizar la entrega de contenido para una mejor experiencia del usuario. En la parte superior de Google AMP Viewer, se muestra el dominio de su contenido para que los usuarios entiendan quién lo publicó.<br />
<br />
Google AMP Viewer es un entorno híbrido donde puede recopilar datos sobre el usuario. La recopilación de datos por parte de Google se rige por la política de privacidad de Google. Como editor de páginas de AMP cuyo contenido se muestra en Google AMP Viewer, su recopilación de datos se rige por su política de privacidad. Debido a que elige los comportamientos y las integraciones de proveedores en su página de AMP, usted es responsable de cumplir con las obligaciones de cumplimiento derivadas de esas elecciones.<br />
<br />
<b>Mejore AMP para la Búsqueda de Google</b><br />
<br />
Puede mejorar su contenido de AMP para la Búsqueda de Google creando una página AMP básica, agregando datos estructurados, supervisando sus páginas y practicando con los <a href="https://www.amphtmlenespanol.com/search/label/AMP%20Tutorial" target="_blank">ejemplos</a>.<br />
<br />
<b><i>Crea una página AMP básica</i></b><br />
<blockquote class="tr_bq">
1 Crea tu primera página de AMP.<br />
2 Siga las pautas de Búsqueda de Google para las páginas de AMP.<br />
3 Haga que su contenido sea reconocible al vincular sus páginas. Para rastrear e indexar, la Búsqueda de Google requiere que una página de AMP se vincule con una <a href="https://support.google.com/webmasters/answer/139066" target="_blank">página canónica</a>. La página canónica puede ser una versión de la página que no sea de AMP o puede ser la propia de AMP. Para obtener más información, consulte <a href="https://www.amphtmlenespanol.com/2018/06/que-hay-en-una-url-de-amp.html">¿Qué hay en una URL de AMP?</a>.<br />
4 Asegúrese de que los usuarios puedan experimentar el mismo contenido y realizar las mismas acciones en las páginas de AMP que en las páginas canónicas correspondientes, siempre que sea posible.<br />
5 Use la herramienta de <a href="https://search.google.com/test/amp" target="_blank">prueba AMP</a> para asegurarse de que su página cumpla con los requisitos de búsqueda de Google para un documento válido de AMP HTML.<br />
6 Use el mismo <a href="https://developers.google.com/search/docs/guides/mark-up-content" target="_blank">marcado de datos estructurados</a> en las páginas AMP y canónicas.<br />
7 Aplicar las mejores prácticas de contenido común:<br />
<ol>
<li>Asegúrese de que su archivo <a href="https://developers.google.com/search/reference/robots_txt" target="_blank">robots.txt file</a> no bloquee su página de AMP. Use los meta robots noindex, <a href="https://support.google.com/webmasters/answer/93710?" target="_blank">indexación de bloques</a> y metaetiquetas de robots.</li>
</ol>
<ol>
<li>Siga las pautas para <a href="https://support.google.com/webmasters/answer/189077?" target="_blank">hreflang</a> para el idioma y las URL regionales. Para ejemplos específicos de AMP, vea Internacionalización.</li>
</ol>
</blockquote>
<br />
<b><u>Crea una página AMP usando un CMS</u></b><br />
<br />
Si sirve su contenido web a través de un Sistema de gestión de contenido (CMS), puede usar un complemento de CMS existente (como WordPress, Drupal o Joomla) o implementar una funcionalidad personalizada en su CMS para generar contenido de AMP. Si tiene la intención de personalizar su CMS, siga estas pautas además de Crear una página AMP básica:<br />
<br />
<blockquote class="tr_bq">
<b>1</b> Considere cómo los archivos HTML de AMP se adaptarán al esquema de ruta de URL de su sitio. Si está generando una página AMP además de una página canónica que no es de AMP, le recomendamos que elija uno de los siguientes esquemas de URL:<br />
a) http://www.example.com/myarticle/amp<br />
b) http://www.example.com/myarticle.amp.html<br />
<b>2</b> Desarrolle una plantilla de marcado de datos estructurados. Aquí hay algunas pautas:<br />
a) Construya la plantilla según los requisitos para el tipo de contenido que está publicando.<br />
b) <a href="https://github.com/ampproject/amphtml/tree/master/examples/metadata-examples" target="_blank">Consulte los ejemplos de metadatos del Proyecto AMP</a> para ver ejemplos de plantillas de recetas, artículos, videos y reseñas.</blockquote>
<b><u>Optimice para obtener resultados de búsqueda ricos en dispositivos móviles</u></b><br />
<br />
Use datos estructurados para mejorar la apariencia de su página en los resultados de búsqueda de Google para dispositivos móviles. Las páginas AMP con datos estructurados pueden aparecer en resultados enriquecidos en la búsqueda móvil, como el carrusel de historias principales o el carrusel de host.<br />
<blockquote class="tr_bq">
1 <a href="https://developers.google.com/search/docs/guides/intro-structured-data" target="_blank">Implementar datos estructurados</a>. Para obtener más información sobre los datos estructurados compatibles con AMP, lea la primera información.<br />
2 Verifique que sus datos estructurados se procesen correctamente utilizando la <a href="https://search.google.com/structured-data/testing-tool" target="_blank">herramienta de prueba de datos estructurados</a>.<br />
3 Asegúrese de que su logotipo cumpla con las <a href="https://developers.google.com/search/docs/data-types/article#logo-guidelines" target="_blank">pautas del logotipo de AMP</a>. Si su logotipo falta o no está formateado correctamente, se mostrará o no se mostrará en absoluto en el carrusel de Historias principales.<br />
4 Verifique su AMP completo para Búsqueda de Google utilizando la <a href="https://search.google.com/test/amp" target="_blank">herramienta de prueba AMP</a>.</blockquote>
<b><u>Controle y mejore sus páginas</u></b><br />
<br />
Compruebe periódicamente todas sus páginas de AMP controlando los siguientes informes:<br />
<br />
<a href="https://www.google.com/webmasters/tools/accelerated-mobile-pages" target="_blank">Informe de AMP en Search Console</a>: consulte las plantillas del sitio y otros problemas de implementación en todo el sitio que pueden afectar a un gran número de páginas de AMP.<br />
<a href="https://support.google.com/webmasters/answer/6381755" target="_blank">Informe de tarjetas enriquecidas en Search Console</a>: identifique problemas con sus datos estructurados y oportunidades para proporcionar datos estructurados adicionales.<br />
Si necesita actualizar inmediatamente el caché de Google AMP para publicar la última versión de su contenido, consulte <a href="https://www.amphtmlenespanol.com/" target="_blank">Actualizar el contenido de AMP</a>.<br />
<br />
Si necesita dejar de publicar sus páginas de AMP desde los resultados de la Búsqueda de Google, siga con la opción Eliminar AMP de los resultados de la Búsqueda de Google.<br />
<br />
<b><u>Recursos</u></b><br />
<br />
Algunos recursos para obtener más información sobre otras integraciones de productos de Google para AMP:<br />
<br />
Obtenga información sobre <a href="https://support.google.com/adsense/answer/7183212" target="_blank">cómo crear bloques de anuncios AMP</a>.<br />
Implemente <a href="https://support.google.com/dfp_premium/topic/7178122" target="_blank">DoubleClick y AMP</a> para monetizar sus páginas de carga rápida.<br />
Use el Administrador de etiquetas de Google para optimizar y medir las iniciativas de marketing.<br />
Agregue análisis a sus páginas AMP para rastrear las interacciones del usuario con el soporte incorporado de <a href="https://developers.google.com/analytics/devguides/collection/amp-analytics/" target="_blank">Google Analytics</a>.<br />
<br />
<b><u>Validar AMP para búsqueda de Google</u></b><br />
<br />
Después de crear el contenido de AMP, aquí hay algunas maneras de validar su contenido de AMP para la Búsqueda de Google:<br />
<br />
Use la <a href="https://search.google.com/test/amp" target="_blank">herramienta de prueba AMP</a> para asegurarse de que su contenido de AMP sea válido para la Búsqueda de Google.<br />
Para los tipos de contenido de AMP aplicables, use la <a href="https://search.google.com/structured-data/testing-tool" target="_blank">herramienta de prueba de datos estructurados</a> para verificar que sus datos estructurados se analicen correctamente.<br />
Use el <a href="https://www.google.com/webmasters/tools/accelerated-mobile-pages?utm_medium=referral&utm_campaign=6155685" target="_blank">informe de AMP en Search Console</a> para supervisar el rendimiento de todas las páginas de AMP en su sitio.<br />
<blockquote class="tr_bq">
"El informe de Accelerated Mobile Pages (AMP) muestra un recuento de las páginas AMP que se han indexado correctamente o que contienen errores relacionados con AMP detectados cuando Google rastreaba el sitio web. En este informe no se muestran los errores de conectividad, los enlaces rotos ni otros errores. Las páginas con errores de AMP, o que no contengan los elementos de datos estructurados necesarios, no se mostrarán en los resultados de búsqueda de Google cuando se usen funciones relacionadas con AMP."</blockquote>
<b>Repara los errores comunes de AMP</b><br />
<br />
Si su página de AMP no aparece en la Búsqueda de Google, intente los siguientes pasos:<br />
<blockquote class="tr_bq">
<i>Nota</i>: Puede llevarle tiempo a Google indexar su contenido de AMP. Si Google ha indexado su contenido y necesita actualizar inmediatamente Google AMP Cache para que publique la última versión de su contenido, actualice Google AMP Cache.</blockquote>
<blockquote class="tr_bq">
<b>1</b> Haga que su página sea reconocible al vincular sus páginas.<br />
¿Agregaste <i>rel="amphtml"</i> a la página canónica?<br />
¿Agregó <i>rel="amphtml"</i> a otras páginas que no son de AMP (por ejemplo, móvil)?<br />
¿Agregaste <i>rel="canonical"</i> a la página de AMP?<br />
<b>2</b> Siga las pautas de Búsqueda de Google para las páginas de AMP.<br />
<b>3</b> Haga que su contenido de AMP sea accesible para Googlebot:<br />
Edite el archivo robots.txt de su sitio para permitir que Googlebot rastree la página canónica, la página AMP y los enlaces en los datos estructurados (si corresponde).<br />
Elimine todas las metaetiquetas de robots y encabezados HTTP de X-Robots-Tag de su contenido canónico y AMP. Para obtener más información, consulte <a href="https://developers.google.com/search/reference/robots_meta_tag" target="_blank">las especificaciones de encabezado de Robots meta tag y X-Robots-Tag HTTP</a><br />
<b>4</b> Asegúrese de que sus datos estructurados sigan las pautas de datos estructurados para su página y tipo de función. Para obtener más información acerca de los requisitos de datos estructurados para AMP, vea la información que se encuentra al principio de este post .</blockquote>
<br />
Si su página AMP aún no aparece en la Búsqueda de Google después de completar los pasos anteriores, estos son algunos motivos adicionales:<br />
<blockquote class="tr_bq">
1 Es posible que algunas funciones de Búsqueda de Google no estén disponibles en su país.<br />
3 Es posible que su sitio aún no esté indexado. Para obtener más información sobre el rastreo y la indexación, consulte las Preguntas frecuentes para webmasters.</blockquote>
<b><u>Eliminar el contenido de AMP de la Búsqueda de Google</u></b><br />
<br />
Esta página describe cómo eliminar el contenido de AMP de la Búsqueda de Google.<br />
<blockquote class="tr_bq">
<b>Punto clave:</b> a lo largo de esta página, nos referimos a páginas canónicas, páginas AMP y páginas que no son de AMP. La página canónica puede ser una versión de la página que no sea de AMP o puede ser la propia de AMP. Puede tener una de las dos configuraciones de página posibles:<br />
<b>Canonical AMP:</b> una versión de una página, donde la página de AMP es la página canónica.<br />
<b>Canonical no AMP:</b> dos versiones de una página que incluye una página AMP y una página canónica no AMP.</blockquote>
<b><i>Hay tres opciones para eliminar el contenido de AMP:</i></b><br />
<blockquote class="tr_bq">
Elimine rápidamente todas las versiones de una página, incluidas las páginas AMP y no AMP canónicas<br />
Elimine solo la página de AMP emparejada con una página canónica que no sea de AMP, mientras mantiene activa la página canónica no AMP.<br />
Elimine el contenido de AMP con un CMS (con opciones para eliminar todas las versiones de una página, o solo la versión de AMP)</blockquote>
<b>Elimine todas las versiones de contenido AMP, incluidos AMP y no AMP</b><br />
<br />
Esta sección describe cómo eliminar todas las versiones de contenido de AMP de la Búsqueda de Google, que incluye páginas de AMP y de otras.<br />
<br />
<blockquote class="tr_bq">
<b><i>Precaución</i></b>: este método puede mostrar un mensaje de error al usuario. Solo use este método para eliminar su página de AMP tan rápido como sea posible de la Búsqueda de Google.</blockquote>
<br />
Para eliminar páginas AMP y no AMP de la Búsqueda de Google, siga los pasos a continuación:<br />
<br />
<blockquote class="tr_bq">
1 Elimine las versiones AMP y no AMP de la página de su servidor o CMS.<br />
2 Utilice la <a href="https://www.google.com/webmasters/tools/removals" target="_blank">herramienta Eliminar contenido obsoleto</a> para solicitar la eliminación de su página. Ingrese las URL (direcciones web) en sus versiones de AMP y las que no son de AMP de la página que desea eliminar.<br />
3 <a href="https://www.amphtmlenespanol.com/" target="_blank">Actualice Google AMP Cache</a> para asegurarse de que su contenido de AMP se elimine del caché.<br />
4 Verifique la eliminación de su página de AMP buscando su contenido mediante la Búsqueda de Google. Para verificar la eliminación de un gran número de páginas de AMP, use el <a href="https://www.google.com/webmasters/tools/accelerated-mobile-pages?utm_medium=referral&utm_campaign=6155685" target="_blank">informe de Search Console AMP</a>. Esté atento a una línea de tendencia decreciente en el gráfico de "páginas AMP indexadas".</blockquote>
<br />
Puede verificar el estado de su solicitud en la página <a href="https://www.google.com/webmasters/tools/removals" target="_blank">Eliminar contenido obsoleto</a>.<br />
<br />
<blockquote class="tr_bq">
<i>Nota:</i> Cuando elimina su página de AMP, hay un retraso antes de que el robot de Google descubra que se ha eliminado. La búsqueda de Google muestra un error al usuario durante este tiempo.</blockquote>
<br />
<b>Elimine solo páginas AMP, mientras conserva las páginas canónicas que no son AMP</b><br />
<br />
Esta sección describe cómo eliminar solo las páginas AMP de la Búsqueda de Google, al tiempo que conserva sus páginas canónicas que no son de AMP.<br />
<br />
<blockquote class="tr_bq">
<i>Precaución:</i> no elimine el contenido de AMP simplemente borrando el contenido del archivo. Los documentos que están vacíos y que faltan todos los márgenes se consideran inválidos. Cuando la Búsqueda de Google reconoce que un documento no es válido, la Búsqueda de Google continúa publicando la versión válida más antigua disponible.</blockquote>
<br />
Para eliminar la versión de AMP de su página de la Búsqueda de Google (conservando la página canónica que no es de AMP), siga los pasos a continuación:<br />
<br />
<blockquote class="tr_bq">
<b>1</b> Elimine el enlace rel="amphtml" de la página canónica no AMP en el código fuente. </blockquote>
<blockquote class="tr_bq">
<b>2</b> Configure su servidor para que devuelva una respuesta HTTP 301 Moved Permanently o 302 Found para la página AMP eliminada.</blockquote>
<blockquote class="tr_bq">
<b>3</b> Configure un redireccionamiento desde la página AMP eliminada a la página canónica no AMP.</blockquote>
<blockquote class="tr_bq">
<b>4</b> Si desea eliminar una página de AMP de plataformas que no son de Google además de eliminar de la Búsqueda de Google, complete los pasos a continuación:<br />
a) Elimine su página de AMP para que ya no se pueda acceder configurando su servidor para enviar un HTTP 404 no encontrado para su página de AMP eliminada. Esto garantiza que Google AMP Cache no envíe contenido obsoleto a otras plataformas.<br />
b) <a href="https://www.amphtmlenespanol.com/search/label/Amp%20HTML" target="_blank">Actualice Google AMP Cache</a> para asegurarse de que su contenido de AMP se elimine del caché.<br />
c) Verifique la eliminación de su página de AMP buscando su contenido en la Búsqueda de Google. Para verificar la eliminación de un gran número de páginas de AMP, use el <a href="https://www.google.com/webmasters/tools/accelerated-mobile-pages?utm_medium=referral&utm_campaign=6155685" target="_blank">informe de Search Console AMP</a>. Esté atento a una línea de tendencia decreciente en el gráfico de "páginas AMP indexadas".<br />
d) Si desea mantener permanentes los enlaces permanentes, configure su servidor para que envíe un redireccionamiento HTTP 301 de su página AMP eliminada a su página canónica no AMP.</blockquote>
<br />
<b>Elimine las páginas de AMP y las que no son de AMP con un CMS</b><br />
<br />
En general, los proveedores de CMS publican páginas AMP y no AMP al mismo tiempo. Para eliminar una sola página, anule la publicación o elimine la página, lo que elimina las versiones AMP y AMP de esa página.<br />
<br />
<b>Eliminar una sola página</b><br />
<br />
Para eliminar una página y dejar de publicarla en sus formularios AMP y no AMP, use la interfaz CMS. Consulte la página de ayuda de su proveedor CMS para obtener detalles sobre cómo dejar de servir AMP:<br />
<br />
<a href="https://en.support.wordpress.com/google-amp-accelerated-mobile-pages/" target="_blank">Ayuda de WordPress.com</a><br />
<a href="http://cgit.drupalcode.org/amp/tree/README.md?h=8.x-1.x" target="_blank">Drupal ayuda</a><br />
<a href="https://support.squarespace.com/hc/en-us/articles/223766868-Using-AMP-with-Squarespace" target="_blank">Ayuda de SquareSpace</a><br />
<br />
<b><u>Eliminar todas las páginas de AMP</u></b><br />
<br />
Otra opción es deshabilitar AMP de su CMS.<br />
<blockquote class="tr_bq">
Advertencia: esta opción elimina todas las páginas de AMP de su sitio.</blockquote>
Para deshabilitar AMP, consulte la página de ayuda de su proveedor de CMS o comuníquese con su proveedor de CMS. Si su sitio está alojado en un dominio CMS, el CMS puede redirigir a los usuarios a la página canónica que no es de AMP después de que AMP esté desactivado. Si la redirección no ocurre, contacte a su proveedor de CMS para asistencia.<br />
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-61115557244907904412018-06-10T15:21:00.004-07:002019-04-17T20:00:00.283-07:00¿Cómo crear Tabs con AMP?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDFAl8rCd7SH1XhE42qZ4bfLsA2xyUQ9N107mLPLcg7sYL2dkTdRMOWudrYUzoTAYjpef7snrYZZJtQLhdmCSzptwvOkV9fvMzMqNFXN845I4dGFMYI2vNs8IVbin4ynsM8zCtQR_wBi4/s1600/como-crear-tabs-con-amp.jpg" width="504" height="311" alt="¿Cómo crear Tabs con AMP?"/></noscript>
Aprenda a insertar Tabs con el formato AMP. Learn how to create tabs with AMP. ¿Tabs for amp is it possible?<br />
<br />
<b><u>Tabs</u></b><br />
<br />
Las Tabs son perfectas para aplicaciones web de una sola página, o para páginas web capaces de mostrar diferentes temas<br />
<br />
<b>Vamos a utilizar el siguiente componente:</b><br />
<br />
amp-selector<br />
<br />
<b><u>How To Create Tabs with AMP</u></b><br />
<br />
Create Toggleable Tabs<br />
<br />
Paso 1) Agregar los componentes<br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<script async src='https://cdn.ampproject.org/v0.js'/><br />
<script async custom-element='amp-selector' src='https://cdn.ampproject.org/v0/amp-selector-0.1.js'/></div>
</div>
<br />
Paso 2 Vamos a insertar un CSS para acoplar este ejemplo, inserte el CSS justo antes de </head><br />
<br />
<a name='more'></a>
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<style amp-custom><br />
section {<br />
background-position: 50% 50%;<br />
background-repeat: no-repeat;<br />
background-size: cover;<br />
}<br />
<br />
.amp-tabs-design .ampTabContainer {<br />
display: flex;<br />
flex-wrap: wrap;<br />
}<br />
.amp-tabs-design amp-selector {<br />
padding: 1rem;<br />
margin: 1rem;<br />
}<br />
.amp-tabs-design amp-selector [option][selected] {<br />
outline: none;<br />
}<br />
amp-selector [option][selected] {<br />
cursor: auto;<br />
outline: 1px solid rgba(0,0,0,0.7);<br />
}<br />
.amp-tabs-design .tab-button {<br />
list-style: none;<br />
flex-grow: 1;<br />
text-align: center;<br />
cursor: pointer;<br />
}<br />
amp-selector [option] {<br />
cursor: pointer;<br />
}<br />
.amp-tabs-design .tab-button[selected] .amp-tab-head {<br />
background-color: #000;<br />
color: #fff;<br />
}<br />
.amp-tabs-design .amp-tab-head {<br />
padding: 15px;<br />
margin: 0.3rem;<br />
border-radius: 0.5rem;<br />
border: solid 1px #000;<br />
transition: all 0.3s;<br />
color: #003;<br />
}<br />
.amp-tabs-title {<br />
font-family: &#39;Source Sans Pro&#39;,sans-serif;<br />
font-size: 1.4rem;<br />
font-weight: 700;<br />
}<br />
<br />
.align-center {<br />
text-align: center;<br />
}<br />
<br />
.amp-tabs-design .tab-button[selected] + .tab-content {<br />
display: block;<br />
}<br />
.amp-tabs-design .tab-content {<br />
display: none;<br />
width: 100%;<br />
order: 1;<br />
padding-top: 1rem;<br />
padding-bottom: 1.5rem;<br />
margin-top: 1rem;<br />
}<br />
<br />
.box-txt-2 {<br />
padding: 1rem;<br />
padding-left: 3rem;<br />
margin-bottom: 1rem;<br />
}<br />
.box-txt-2 h2 {<br />
line-height: 1.2em;<br />
padding-bottom: 10px;<br />
color: #000;<br />
margin: 0;<br />
font-weight: 500;<br />
font-family: &#39;Montserrat&#39;,sans-serif;<br />
font-size: 1.4rem;<br />
}<br />
.box-txt-2 p {<br />
color: #313131;<br />
margin: 0;<br />
font-family: &#39;Roboto&#39;,sans-serif;<br />
font-size: 1rem;<br />
font-style: normal;<br />
font-weight: 400;<br />
padding: 10px 0;<br />
}<br />
.fondo-background-color{<br />
background: #bdc3c7; /* fallback for old browsers */<br />
background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7); /* Chrome 10-25, Safari 5.1-6 */<br />
background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */<br />
}<br />
.amp-polygon {<br />
-webkit-clip-path: polygon(0 0%,100% 4%,100% 96%,0% 100%);<br />
clip-path: polygon(0 0%,100% 4%,100% 96%,0% 100%);<br />
padding: 85px 10px;<br />
overflow: hidden;<br />
}<br />
.container{position:relative;margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px; overflow: hidden;}@media (min-width:576px){.container{padding-right:15px;padding-left:15px}}@media (min-width:768px){.container{padding-right:15px;padding-left:15px}}@media (min-width:992px){.container{padding-right:15px;padding-left:15px}}@media (min-width:1200px){.container{padding-right:15px;padding-left:15px}}@media (min-width:576px){.container{width:540px;max-width:100%}}@media (min-width:768px){.container{width:720px;max-width:100%}}@media (min-width:992px){.container{width:960px;max-width:100%}}@media (min-width:1200px){.container{width:1140px;max-width:100%}}<br />
<br />
/*! CSS Grid | http://ayudadeblogger.com */<br />
@media screen and (min-width:1024px){.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;margin:8px 0;padding:0}@media screen and (max-width:480px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{padding:0;width:100%}}<br />
.center-col{float:none;margin-left:auto;margin-right:auto}<br />
<br />
</style></div>
</div>
<br />
Paso 3) Agregar el siguiente código después de la apertura <body><br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<section class="amp-polygon fondo-background-color amp-tabs-design"><br />
<div class="container"><br />
<br />
<div class="align-center box-txt-2 col col-8 center-col"><br />
<h2>Las mejores características en este proyecto</h2><br />
<p>Contrario a la creencia popular, Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raíces en una pieza de literatura latina clásica del año 45 aC, lo que hace más de 2000 años.<br />
</p><br />
</div><br />
<br />
<amp-selector role="tablist" layout="container" class="ampTabContainer"><br />
<br />
<br />
<div role="tab" class="tab-button" selected="" option="a"><br />
<h3 class="align-center amp-tabs-title amp-tab-head"><br />
AMP design<br />
</h3><br />
</div><br />
<div role="tabpanel" class="tab-content"><br />
<div class="container"><br />
<div class="col col-6"><br />
<div class="box-container-w"><br />
<div class="box-txt-2"><br />
<h2>AMP design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<div class="box-txt-2"><br />
<h2>Clean design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<br />
<div class="box-txt-2"><br />
<h2>Mobile friendly</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
</div><br />
</div><br />
<div class="col col-6"><br />
<amp-img alt="" height="1080" layout="responsive" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpees6VMeNh0QvSOtV4kIoKTo7y4gZyqkyW51KGbZGB84NqTyLGigPh4Lj9h2P3d8BIb-lrvcsL5sDGlaVwFOCgfTAahRkMs_u4uvwA_JtAT9k0fimrsXx0sybi6cl-sYXz8DBQyiztc4/s1600/amp-html-cover-slider.png</i>" width="1235"></amp-img><br />
</div><br />
</div> <br />
</div><br />
<br />
<br />
<br />
<div role="tab" class="tab-button" option="b"><br />
<h3 class="align-center amp-tabs-title amp-tab-head"><br />
Clean design<br />
</h3><br />
</div><br />
<div role="tabpanel" class="tab-content"><br />
<br />
<div class="container"><br />
<div class="col col-6"><br />
<amp-img alt="" height="670" layout="responsive" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__0wHxirl6S_n4UrTyhvTmrhCkGcyDl_pHmODEHrYgCE650xnJkSl0PJAaTswL9FFGQ_qCdhH9_xqIc6nX-hfYYhHa3IcMoCy8PB2jsn27BxHNjhaRAUUHwR8PTOoHN6jF_rBaVd7cBrb/s700/amp-modern-video-premium-blogger-template.png</i>" width="600"></amp-img><br />
</div><br />
<br />
<br />
<div class="col col-6"><br />
<div class="box-container-w"><br />
<div class="box-txt-2"><br />
<h2>AMP design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<div class="box-txt-2"><br />
<h2>Clean design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<br />
<div class="box-txt-2"><br />
<h2>Mobile friendly</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
</div><br />
</div><br />
<br />
</div><br />
</div><br />
<br />
<div role="tab" class="tab-button align-center" option="c"><br />
<h3 class="align-center amp-tabs-title amp-tab-head"><br />
Mobile friendly<br />
</h3><br />
</div><br />
<div role="tabpanel" class="tab-content"><br />
<br />
<div class="container"><br />
<div class="col col-6"><br />
<div class="box-container-w"><br />
<div class="box-txt-2"><br />
<h2>AMP design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<div class="box-txt-2"><br />
<h2>Clean design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<br />
<div class="box-txt-2"><br />
<h2>Mobile friendly</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
</div><br />
</div><br />
<div class="col col-6"><br />
<amp-img alt="" height="1200" layout="responsive" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dsUsLEH1SNLK9qROOcEvN0sHmS4k6I5SEvOKft2oGk95xPIRMJ2JI_T0XLySlRriEKb28_A6l2t_1EKykrI40snFxpgElH2RaIK7x5T03QCelvot9sc8X-pqTQV6fXDG_RLl7UVzV_c/s1600/amp-fenix-blogger-template-amp-html.png</i>" width="1600"></amp-img><br />
</div><br />
</div><br />
<br />
</div><br />
<br />
</amp-selector><br />
</div><br />
</section></div>
</div>
<br />
Paso 4) Cambie las URLs de imágenes, también las palabras del ejemplo<br />
<br />
Paso 5) Demostración<br />
<div id="ayudadeblogger">
<a class="adb-slide" href="https://amp-ejemplo.blogspot.com/2018/06/ejemplo-3.html" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Clic aquí</span>
</a>
</div>
A continuación la estructura completa del ejemplo<br />
<br />
<div class="amp-example">
<h3>Ejemplo</h3>
<div class="amp-code">
<!doctype html><br />
<html ⚡><br />
<head><br />
<meta charset="utf-8"><br />
<script async src="https://cdn.ampproject.org/v0.js"></script><br />
<script async custom-element='amp-selector' src='https://cdn.ampproject.org/v0/amp-selector-0.1.js'/><br />
<link rel="canonical" href="https://www.amphtmlenespanol.com/"><br />
<br />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><br />
<br />
<style amp-custom><br />
section {<br />
background-position: 50% 50%;<br />
background-repeat: no-repeat;<br />
background-size: cover;<br />
}<br />
<br />
.amp-tabs-design .ampTabContainer {<br />
display: flex;<br />
flex-wrap: wrap;<br />
}<br />
.amp-tabs-design amp-selector {<br />
padding: 1rem;<br />
margin: 1rem;<br />
}<br />
.amp-tabs-design amp-selector [option][selected] {<br />
outline: none;<br />
}<br />
amp-selector [option][selected] {<br />
cursor: auto;<br />
outline: 1px solid rgba(0,0,0,0.7);<br />
}<br />
.amp-tabs-design .tab-button {<br />
list-style: none;<br />
flex-grow: 1;<br />
text-align: center;<br />
cursor: pointer;<br />
}<br />
amp-selector [option] {<br />
cursor: pointer;<br />
}<br />
.amp-tabs-design .tab-button[selected] .amp-tab-head {<br />
background-color: #000;<br />
color: #fff;<br />
}<br />
.amp-tabs-design .amp-tab-head {<br />
padding: 15px;<br />
margin: 0.3rem;<br />
border-radius: 0.5rem;<br />
border: solid 1px #000;<br />
transition: all 0.3s;<br />
color: #003;<br />
}<br />
.amp-tabs-title {<br />
font-family: &#39;Source Sans Pro&#39;,sans-serif;<br />
font-size: 1.4rem;<br />
font-weight: 700;<br />
}<br />
<br />
.align-center {<br />
text-align: center;<br />
}<br />
<br />
.amp-tabs-design .tab-button[selected] + .tab-content {<br />
display: block;<br />
}<br />
.amp-tabs-design .tab-content {<br />
display: none;<br />
width: 100%;<br />
order: 1;<br />
padding-top: 1rem;<br />
padding-bottom: 1.5rem;<br />
margin-top: 1rem;<br />
}<br />
<br />
.box-txt-2 {<br />
padding: 1rem;<br />
padding-left: 3rem;<br />
margin-bottom: 1rem;<br />
}<br />
.box-txt-2 h2 {<br />
line-height: 1.2em;<br />
padding-bottom: 10px;<br />
color: #000;<br />
margin: 0;<br />
font-weight: 500;<br />
font-family: &#39;Montserrat&#39;,sans-serif;<br />
font-size: 1.4rem;<br />
}<br />
.box-txt-2 p {<br />
color: #313131;<br />
margin: 0;<br />
font-family: &#39;Roboto&#39;,sans-serif;<br />
font-size: 1rem;<br />
font-style: normal;<br />
font-weight: 400;<br />
padding: 10px 0;<br />
}<br />
.fondo-background-color{<br />
background: #bdc3c7; /* fallback for old browsers */<br />
background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7); /* Chrome 10-25, Safari 5.1-6 */<br />
background: linear-gradient(to right, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */<br />
}<br />
.amp-polygon {<br />
-webkit-clip-path: polygon(0 0%,100% 4%,100% 96%,0% 100%);<br />
clip-path: polygon(0 0%,100% 4%,100% 96%,0% 100%);<br />
padding: 85px 10px;<br />
overflow: hidden;<br />
}<br />
.container{position:relative;margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px; overflow: hidden;}@media (min-width:576px){.container{padding-right:15px;padding-left:15px}}@media (min-width:768px){.container{padding-right:15px;padding-left:15px}}@media (min-width:992px){.container{padding-right:15px;padding-left:15px}}@media (min-width:1200px){.container{padding-right:15px;padding-left:15px}}@media (min-width:576px){.container{width:540px;max-width:100%}}@media (min-width:768px){.container{width:720px;max-width:100%}}@media (min-width:992px){.container{width:960px;max-width:100%}}@media (min-width:1200px){.container{width:1140px;max-width:100%}}<br />
<br />
/*! CSS Grid | http://ayudadeblogger.com */<br />
@media screen and (min-width:1024px){.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;margin:8px 0;padding:0}@media screen and (max-width:480px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{padding:0;width:100%}}<br />
<br />
.center-col{float:none;margin-left:auto;margin-right:auto}<br />
</style><br />
<br />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><br />
<br />
</head><br />
<br />
<body><br />
<br />
<section class="amp-polygon fondo-background-color amp-tabs-design"><br />
<div class="container"><br />
<br />
<div class="align-center box-txt-2 col col-8 center-col"><br />
<h2>Las mejores características en este proyecto</h2><br />
<p>Contrario a la creencia popular, Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raíces en una pieza de literatura latina clásica del año 45 aC, lo que hace más de 2000 años.<br />
</p><br />
</div><br />
<br />
<amp-selector role="tablist" layout="container" class="ampTabContainer"><br />
<br />
<br />
<div role="tab" class="tab-button" selected="" option="a"><br />
<h3 class="align-center amp-tabs-title amp-tab-head"><br />
AMP design<br />
</h3><br />
</div><br />
<div role="tabpanel" class="tab-content"><br />
<div class="container"><br />
<div class="col col-6"><br />
<div class="box-container-w"><br />
<div class="box-txt-2"><br />
<h2>AMP design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<div class="box-txt-2"><br />
<h2>Clean design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<br />
<div class="box-txt-2"><br />
<h2>Mobile friendly</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
</div><br />
</div><br />
<div class="col col-6"><br />
<amp-img alt="" height="1080" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpees6VMeNh0QvSOtV4kIoKTo7y4gZyqkyW51KGbZGB84NqTyLGigPh4Lj9h2P3d8BIb-lrvcsL5sDGlaVwFOCgfTAahRkMs_u4uvwA_JtAT9k0fimrsXx0sybi6cl-sYXz8DBQyiztc4/s1600/amp-html-cover-slider.png" width="1235"></amp-img><br />
</div><br />
</div> <br />
</div><br />
<br />
<br />
<br />
<div role="tab" class="tab-button" option="b"><br />
<h3 class="align-center amp-tabs-title amp-tab-head"><br />
Clean design<br />
</h3><br />
</div><br />
<div role="tabpanel" class="tab-content"><br />
<br />
<div class="container"><br />
<div class="col col-6"><br />
<amp-img alt="" height="670" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__0wHxirl6S_n4UrTyhvTmrhCkGcyDl_pHmODEHrYgCE650xnJkSl0PJAaTswL9FFGQ_qCdhH9_xqIc6nX-hfYYhHa3IcMoCy8PB2jsn27BxHNjhaRAUUHwR8PTOoHN6jF_rBaVd7cBrb/s700/amp-modern-video-premium-blogger-template.png" width="600"></amp-img><br />
</div><br />
<br />
<br />
<div class="col col-6"><br />
<div class="box-container-w"><br />
<div class="box-txt-2"><br />
<h2>AMP design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<div class="box-txt-2"><br />
<h2>Clean design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<br />
<div class="box-txt-2"><br />
<h2>Mobile friendly</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
</div><br />
</div><br />
<br />
</div><br />
</div><br />
<br />
<div role="tab" class="tab-button align-center" option="c"><br />
<h3 class="align-center amp-tabs-title amp-tab-head"><br />
Mobile friendly<br />
</h3><br />
</div><br />
<div role="tabpanel" class="tab-content"><br />
<br />
<div class="container"><br />
<div class="col col-6"><br />
<div class="box-container-w"><br />
<div class="box-txt-2"><br />
<h2>AMP design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<div class="box-txt-2"><br />
<h2>Clean design</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
<br />
<div class="box-txt-2"><br />
<h2>Mobile friendly</h2><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br />
</p><br />
</div><br />
</div><br />
</div><br />
<div class="col col-6"><br />
<amp-img alt="" height="1200" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3dsUsLEH1SNLK9qROOcEvN0sHmS4k6I5SEvOKft2oGk95xPIRMJ2JI_T0XLySlRriEKb28_A6l2t_1EKykrI40snFxpgElH2RaIK7x5T03QCelvot9sc8X-pqTQV6fXDG_RLl7UVzV_c/s1600/amp-fenix-blogger-template-amp-html.png" width="1600"></amp-img><br />
</div><br />
</div><br />
<br />
</div><br />
<br />
</amp-selector><br />
</div><br />
</section><br />
<br />
</body><br />
</html><br />
</div>
</div>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-7359436774937299272018-06-09T13:54:00.004-07:002019-04-17T20:00:38.541-07:00¿Cómo agregar imágenes con Lightboxes y Captions en AMP?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqA2ZQzxW0h65M5pfzAZxkude9K08yMK69h38yMO3MFXJL8rC08uXcB1iSmF7rzrOdoZvlTcCdI3pMBYaytrDuFAF6T8Qjx3526iSk6PDit-me5HP6sEVoUSxQNzG7iyVhwKS1RJuxN1S/s1600/como-agregar-imagenes-con-lightboxes-y-captions-con-amp.jpg" width="490" height="285" alt="¿Cómo agregar imágenes con Lightboxes y Captions en AMP?"/></noscript>
Aprenda a insertar imágenes con Lightboxes y Captions con AMP. Images with Lightboxes and Captions.<br />
<br />
<b>Vamos a utilizar el siguiente componente:</b><br />
<br />
amp-image-lightbox<br />
<br />
<b><u>Images with Lightboxes and Captions</u></b><br />
<br />
Paso 1) Agregar los componentes<br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<script async src='https://cdn.ampproject.org/v0.js'/><br />
<script async custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/><br />
</div>
</div>
<br />
Paso 2 Vamos a insertar un CSS para acoplar este ejemplo, inserte el CSS justo antes de </head><br />
<br />
<a name='more'></a>
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<style amp-custom><br />
.container{position:relative;margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px; overflow: hidden;}@media (min-width:576px){.container{padding-right:15px;padding-left:15px}}@media (min-width:768px){.container{padding-right:15px;padding-left:15px}}@media (min-width:992px){.container{padding-right:15px;padding-left:15px}}@media (min-width:1200px){.container{padding-right:15px;padding-left:15px}}@media (min-width:576px){.container{width:540px;max-width:100%}}@media (min-width:768px){.container{width:720px;max-width:100%}}@media (min-width:992px){.container{width:960px;max-width:100%}}@media (min-width:1200px){.container{width:1140px;max-width:100%}}<br />
<br />
/*! CSS Grid | https://ayudadeblogger.com */<br />
@media screen and (min-width:1024px){.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;margin:8px 0;padding:0}@media screen and (max-width:480px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{padding:0;width:100%}}<br />
</style></div>
</div>
<br />
Paso 3) Agregar el siguiente código después de la apertura <body><br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<section><br />
<br />
<div class="container"><br />
<br />
<div class="col col-6"><br />
<figure><br />
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xWdF9AsnrnANstgTOgDYNZCep9VTMDJOmbQP3z59RzVS7AME_sgoW8zIWYGp4PCHJmERmXdvTSvTx1UZxx7qnj1M_guNWxgbPc-TFElSWyyqTeKgBls0kgJugJZMNcYqPj9e_9PxwxU/s1600/blog-3.jpg</i>" layout="responsive" width="540" height="360" alt="AMP" ><br />
<div placeholder=""><br />
</div></amp-img><br />
<br />
<figcaption><br />
<center><br />
<b><i>Lorem Ipsum Dolor Sit Amet</i></b><br />
</center> <br />
</figcaption><br />
</figure><br />
<br />
</div><br />
<br />
<div class="col col-6"><br />
<figure><br />
<amp-img on="tap:lightbox2" role="button" tabindex="0" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv2rqrF73Uic6PJAPu6xNPblMHfAwyl7EkiTKjhKoJ5x9QOlBHKBq-wnr7lhyphenhyphen1zqJMr2c1_40yMcS5Fp2fKrvdr6wCmzrGpgVN91XQ08oyturYWh2dbQReP3V1JyPlPSosE51NS9tDhw/s1600/funfact.jpg</i>" layout="responsive" height="360" width="539.3258426966293" alt="AMP"><br />
<div placeholder=""><br />
</div></amp-img><br />
<br />
<figcaption><br />
<center><br />
<b><i>Lorem Ipsum Dolor Sit Amet</i></b><br />
</center><br />
</figcaption><br />
</figure><br />
</div> <br />
<br />
</div><br />
<br />
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox2" layout="nodisplay"></amp-image-lightbox><br />
<br />
</section></div>
</div>
<br />
Paso 4) Cambie las URLs de imagenes, también las palabras de ejemplo<br />
<br />
Paso 5) Demostración<br />
<div id="ayudadeblogger">
<a class="adb-slide" href="https://amp-ejemplo.blogspot.com/2018/04/imagen-lightboxes-y-captions.html" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Clic aquí</span>
</a>
</div>
A continuación la estructura completa del ejemplo<br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<!doctype html><br />
<html ⚡><br />
<head><br />
<meta charset="utf-8"><br />
<script async src="https://cdn.ampproject.org/v0.js"></script><br />
<script async custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/><br />
<link rel="canonical" href="https://www.amphtmlenespanol.com/"><br />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><br />
<br />
<style amp-custom><br />
.container{position:relative;margin-left:auto;margin-right:auto;padding-right:15px;padding-left:15px; overflow: hidden;}@media (min-width:576px){.container{padding-right:15px;padding-left:15px}}@media (min-width:768px){.container{padding-right:15px;padding-left:15px}}@media (min-width:992px){.container{padding-right:15px;padding-left:15px}}@media (min-width:1200px){.container{padding-right:15px;padding-left:15px}}@media (min-width:576px){.container{width:540px;max-width:100%}}@media (min-width:768px){.container{width:720px;max-width:100%}}@media (min-width:992px){.container{width:960px;max-width:100%}}@media (min-width:1200px){.container{width:1140px;max-width:100%}}<br />
<br />
/*! CSS Grid | https://ayudadeblogger.com */<br />
@media screen and (min-width:1024px){.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;margin:8px 0;padding:0}@media screen and (max-width:480px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{padding:0;width:100%}}<br />
</style><br />
<br />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><br />
<br />
</head><br />
<br />
<body><br />
<br />
<section><br />
<br />
<div class="container"><br />
<br />
<div class="col col-6"><br />
<figure><br />
<amp-img on="tap:lightbox1" role="button" tabindex="0" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xWdF9AsnrnANstgTOgDYNZCep9VTMDJOmbQP3z59RzVS7AME_sgoW8zIWYGp4PCHJmERmXdvTSvTx1UZxx7qnj1M_guNWxgbPc-TFElSWyyqTeKgBls0kgJugJZMNcYqPj9e_9PxwxU/s1600/blog-3.jpg</i>" layout="responsive" width="540" height="360" alt="AMP" ><br />
<div placeholder=""><br />
</div></amp-img><br />
<br />
<figcaption><br />
<center><br />
<b><i>Lorem Ipsum Dolor Sit Amet</i></b><br />
</center> <br />
</figcaption><br />
</figure><br />
<br />
</div><br />
<br />
<div class="col col-6"><br />
<figure><br />
<amp-img on="tap:lightbox2" role="button" tabindex="0" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv2rqrF73Uic6PJAPu6xNPblMHfAwyl7EkiTKjhKoJ5x9QOlBHKBq-wnr7lhyphenhyphen1zqJMr2c1_40yMcS5Fp2fKrvdr6wCmzrGpgVN91XQ08oyturYWh2dbQReP3V1JyPlPSosE51NS9tDhw/s1600/funfact.jpg</i>" layout="responsive" height="360" width="539.3258426966293" alt="AMP"><br />
<div placeholder=""><br />
</div></amp-img><br />
<br />
<figcaption><br />
<center><br />
<b><i>Lorem Ipsum Dolor Sit Amet</i></b><br />
</center><br />
</figcaption><br />
</figure><br />
</div><br />
<br />
</div><br />
<br />
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox2" layout="nodisplay"></amp-image-lightbox><br />
<br />
</section><br />
<br />
</body><br />
</html></div>
</div>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-74475856933999733012018-06-06T17:08:00.005-07:002019-04-17T20:00:49.081-07:00¿Cómo agregar un Carrusel de ancho completo con imágenes en AMP?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwqeodq4C7ef3bDiEelCkeD3bbc50SOy-YOfMErzoDTw0vjvJNWcDXLaGr3-1s8YPzdeyqYnaGbqK-uIN4DkkrWTo0KRfAKnubQCgMox9PAA5bL7q6zFTW5yOc4TZbqgHHTIz53OWEf8m/s1600/como-agregar-un-carrusel-de-ancho-completo-con-imagenes-en-amp.jpg" width="528" height="334" alt="¿Cómo agregar un Carrusel de ancho completo con imágenes en AMP?"/></noscript>
Aprenda a insertar un Carrusel de ancho completo con imágenes en lightbox con AMP. Full width carousel with images in lightbox.<br />
<br />
<b>Vamos a utilizar los siguientes componentes:</b><br />
<br />
amp-image-lightbox<br />
amp-carousel<br />
<br />
<b><u>AMP Full width carousel with images in lightbox</u></b><br />
<br />
Paso 1) Agregar los componentes<br />
<br />
<a name='more'></a>
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<script async src='https://cdn.ampproject.org/v0.js'/><br />
<script async custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/><br />
<script async custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/></div>
</div>
<br />
Paso 2) Agregar el siguiente código después de la apertura <body><br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<section><br />
<div class="container-fluid"><br />
<div class="slider-box"><br />
<amp-carousel class="carousel" height="300" layout="fixed-height" type="carousel"><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xWdF9AsnrnANstgTOgDYNZCep9VTMDJOmbQP3z59RzVS7AME_sgoW8zIWYGp4PCHJmERmXdvTSvTx1UZxx7qnj1M_guNWxgbPc-TFElSWyyqTeKgBls0kgJugJZMNcYqPj9e_9PxwxU/s1600/blog-3.jpg</i>" on="tap:lightbox1" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
<br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRgswjujamJcz2vDWBcFN1yt2WK8gVJnqMqdTIRihsp6rqW4k9wr2-TSJQQ4iC30ANnYhPP_zpEAMIsJC105aQZmwThyfDLnaMDI0BKm8xVyvn7oySilXlicA0axc2ICAmyEgZMCq3ZM/s1600/amp-i.jpg</i>" on="tap:lightbox2" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv2rqrF73Uic6PJAPu6xNPblMHfAwyl7EkiTKjhKoJ5x9QOlBHKBq-wnr7lhyphenhyphen1zqJMr2c1_40yMcS5Fp2fKrvdr6wCmzrGpgVN91XQ08oyturYWh2dbQReP3V1JyPlPSosE51NS9tDhw/s1600/funfact.jpg</i>" on="tap:lightbox3" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVg5aDyQoJ6DbobqOPMjQrDuO30KW-WnBtsK6kQrxhaToSJZB6bPhOl962TkpTw0v7Vp4XqIzUAbu-v8pUg59lgSEiiwcFr6gDJSS641KUngK4bAf_tKbQk7Bx7ZO2iU_TCSaZ6nwtQEo/s1600/home-bg.jpg</i>" on="tap:lightbox4" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZpCUhBSPwK0zvWypINKibB2GPzO7IBiajidoPzBLuV_aJN0-rtYyIHJUrMhyiohi53mtWqc4m7Nm9WUMDHTFaY2HJu092ECuzVD6hTZv7Ck8q8lVXJR-vDiC0DnzMWiDQFjDwFPw7ZQ/s1600/img-1.jpg</i>" on="tap:lightbox5" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0yJzsjq4xQZsMo0AMZKUO7d7nuDuW829OFS-JK4cvsUCY_IN6mV1cI2w-LXUixJgYv-dueiyvRRCt5rov07G5uuQrdThTAFm3fDSrs8BLSLePyS4dtaoSxsJI2yTfiJ27IfMr0EZIec/s1600/img-2.jpg</i>" on="tap:lightbox6" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
</div> <br />
</amp-img><br />
<br />
</amp-carousel><br />
</div><br />
<br />
</div><br />
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox2" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox3" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox4" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox5" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox6" layout="nodisplay"></amp-image-lightbox><br />
<br />
</section></div>
</div>
<br />
Paso 3) Cambie las URLs de imagenes<br />
<br />
Paso 4) Demostración<br />
<br />
<div id="ayudadeblogger">
<a class="adb-slide" href="https://amp-ejemplo.blogspot.com/2018/04/slider-2.html" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Clic aquí</span>
</a>
</div>
A continuación la estructura completa del ejemplo<br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<!doctype html><br />
<html ⚡><br />
<head><br />
<meta charset="utf-8"><br />
<script async src="https://cdn.ampproject.org/v0.js"></script><br />
<script async custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/><br />
<script async custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/><br />
<link rel="canonical" href="https://www.amphtmlenespanol.com/"><br />
<br />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><br />
<br />
<style amp-custom><br />
<br />
</style><br />
<br />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><br />
<br />
</head><br />
<br />
<body><br />
<br />
<section><br />
<div class="container-fluid"><br />
<div class="slider-box"><br />
<amp-carousel class="carousel" height="300" layout="fixed-height" type="carousel"><br />
<br />
<amp-img class="carousel-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xWdF9AsnrnANstgTOgDYNZCep9VTMDJOmbQP3z59RzVS7AME_sgoW8zIWYGp4PCHJmERmXdvTSvTx1UZxx7qnj1M_guNWxgbPc-TFElSWyyqTeKgBls0kgJugJZMNcYqPj9e_9PxwxU/s1600/blog-3.jpg" on="tap:lightbox1" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
<br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLRgswjujamJcz2vDWBcFN1yt2WK8gVJnqMqdTIRihsp6rqW4k9wr2-TSJQQ4iC30ANnYhPP_zpEAMIsJC105aQZmwThyfDLnaMDI0BKm8xVyvn7oySilXlicA0axc2ICAmyEgZMCq3ZM/s1600/amp-i.jpg" on="tap:lightbox2" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv2rqrF73Uic6PJAPu6xNPblMHfAwyl7EkiTKjhKoJ5x9QOlBHKBq-wnr7lhyphenhyphen1zqJMr2c1_40yMcS5Fp2fKrvdr6wCmzrGpgVN91XQ08oyturYWh2dbQReP3V1JyPlPSosE51NS9tDhw/s1600/funfact.jpg" on="tap:lightbox3" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVg5aDyQoJ6DbobqOPMjQrDuO30KW-WnBtsK6kQrxhaToSJZB6bPhOl962TkpTw0v7Vp4XqIzUAbu-v8pUg59lgSEiiwcFr6gDJSS641KUngK4bAf_tKbQk7Bx7ZO2iU_TCSaZ6nwtQEo/s1600/home-bg.jpg" on="tap:lightbox4" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZpCUhBSPwK0zvWypINKibB2GPzO7IBiajidoPzBLuV_aJN0-rtYyIHJUrMhyiohi53mtWqc4m7Nm9WUMDHTFaY2HJu092ECuzVD6hTZv7Ck8q8lVXJR-vDiC0DnzMWiDQFjDwFPw7ZQ/s1600/img-1.jpg" on="tap:lightbox5" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0yJzsjq4xQZsMo0AMZKUO7d7nuDuW829OFS-JK4cvsUCY_IN6mV1cI2w-LXUixJgYv-dueiyvRRCt5rov07G5uuQrdThTAFm3fDSrs8BLSLePyS4dtaoSxsJI2yTfiJ27IfMr0EZIec/s1600/img-2.jpg" on="tap:lightbox6" role="button" tabindex="0" height="300" width="450" alt=""><br />
<div placeholder=""><br />
</div> <br />
</amp-img><br />
<br />
</amp-carousel><br />
</div><br />
<br />
</div><br />
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox2" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox3" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox4" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox5" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox6" layout="nodisplay"></amp-image-lightbox><br />
<br />
</section><br />
<br />
</body><br />
</html>
</div>
</div>
<br />
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-45124522158476325072018-06-06T15:41:00.002-07:002019-04-17T20:00:57.588-07:00 ¿Cómo agregar un Slideshow con reproducción automática y Lightbox con AMP?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjshRtamP2Rn-A9ZyGqEDgn3aqjOYPYfpKWOykYCDxMTfkDxTxt2SKacqZvn3WLWIEvkmt87WysMhh24ZkYdIpmN6DaIdHPxOuzbYby8UiCs1Z5ctvvnfTfWX05r4DJbzjgkdjzjZyzil_H/s1600/como-agregar-un-slideshow-con-reproduccion-automatica-y-lightbox-con-amp.jpg" width="528" height="320" alt=" ¿Cómo agregar un Slideshow con reproducción automática y Lightbox con AMP?"/></noscript>
Aprenda a insertar un Slideshow con reproducción automática y Lightbox con AMP. Slider With Autoplay And Lightbox.<br />
<br />
AMP lightbox es perfecto para la web moderna, con funciones totalmente dinámicas<br />
<br />
<b>Vamos a utilizar los siguientes componentes:</b><br />
<br />
amp-image-lightbox<br />
amp-carousel<br />
<br />
<b><u>AMP Slider With Autoplay And Lightbox</u></b><br />
<br />
Paso 1 Agregar los componentes<br />
<br />
<a name='more'></a>
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<script async src='https://cdn.ampproject.org/v0.js'/><br />
<script async custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/><br />
<script async custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/></div>
</div>
<br />
Paso 2 Agregar el siguiente código después de la apertura <body><br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<section><br />
<div class="container"> <br />
<div class="slider-box" data-autoplay="true" data-delay="3000"><br />
<amp-carousel class="carousel" height="9" width="16" layout="responsive" type="slides" loop="" autoplay="autoplay" delay="3000"><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xWdF9AsnrnANstgTOgDYNZCep9VTMDJOmbQP3z59RzVS7AME_sgoW8zIWYGp4PCHJmERmXdvTSvTx1UZxx7qnj1M_guNWxgbPc-TFElSWyyqTeKgBls0kgJugJZMNcYqPj9e_9PxwxU/s1600/blog-3.jpg</i>" on="tap:lightbox1" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRLOoZ4ZEPSEMRKoQ83QH04MOLDgP_woJhA-o4-DtlX_mmLy7vZCgZYDms8cF9Xe8JViJCDMNFx9H5VoOvMU7ZL70uuIZIJ9a5hwP3_FDd3ysXZp-UpxAhmN9oam2_-zXv8DnWBgqiDc/s1600/business-1.jpg</i>" on="tap:lightbox2" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
<br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv2rqrF73Uic6PJAPu6xNPblMHfAwyl7EkiTKjhKoJ5x9QOlBHKBq-wnr7lhyphenhyphen1zqJMr2c1_40yMcS5Fp2fKrvdr6wCmzrGpgVN91XQ08oyturYWh2dbQReP3V1JyPlPSosE51NS9tDhw/s1600/funfact.jpg</i>" on="tap:lightbox3" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
<br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVg5aDyQoJ6DbobqOPMjQrDuO30KW-WnBtsK6kQrxhaToSJZB6bPhOl962TkpTw0v7Vp4XqIzUAbu-v8pUg59lgSEiiwcFr6gDJSS641KUngK4bAf_tKbQk7Bx7ZO2iU_TCSaZ6nwtQEo/s1600/home-bg.jpg</i>" on="tap:lightbox4" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
<br />
</div> <br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZpCUhBSPwK0zvWypINKibB2GPzO7IBiajidoPzBLuV_aJN0-rtYyIHJUrMhyiohi53mtWqc4m7Nm9WUMDHTFaY2HJu092ECuzVD6hTZv7Ck8q8lVXJR-vDiC0DnzMWiDQFjDwFPw7ZQ/s1600/img-1.jpg</i>" on="tap:lightbox5" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
<br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0yJzsjq4xQZsMo0AMZKUO7d7nuDuW829OFS-JK4cvsUCY_IN6mV1cI2w-LXUixJgYv-dueiyvRRCt5rov07G5uuQrdThTAFm3fDSrs8BLSLePyS4dtaoSxsJI2yTfiJ27IfMr0EZIec/s1600/img-2.jpg</i>" on="tap:lightbox6" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
<br />
</div><br />
<br />
</amp-img><br />
</amp-carousel><br />
</div><br />
</div><br />
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox2" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox3" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox4" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox5" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox6" layout="nodisplay"></amp-image-lightbox><br />
</section></div>
</div>
<br />
Paso 3 Cambie las URLs de imagenes<br />
<br />
Paso 4 Demostración<br />
<br />
<div id="ayudadeblogger">
<a class="adb-slide" href="https://amp-ejemplo.blogspot.com/2018/04/slider.html" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Clic aquí</span>
</a>
</div>
A continuación la estructura completa del ejemplo<br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<!doctype html><br />
<html ⚡><br />
<head><br />
<meta charset="utf-8"><br />
<script async src="https://cdn.ampproject.org/v0.js"></script><br />
<script async custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/><br />
<script async custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/><br />
<link rel="canonical" href="https://www.amphtmlenespanol.com/"><br />
<br />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><br />
<br />
<style amp-custom><br />
<br />
</style><br />
<br />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><br />
<br />
</head><br />
<br />
<body><br />
<br />
<section><br />
<div class="container"> <br />
<div class="slider-box" data-autoplay="true" data-delay="3000"><br />
<amp-carousel class="carousel" height="9" width="16" layout="responsive" type="slides" loop="" autoplay="autoplay" delay="3000"><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xWdF9AsnrnANstgTOgDYNZCep9VTMDJOmbQP3z59RzVS7AME_sgoW8zIWYGp4PCHJmERmXdvTSvTx1UZxx7qnj1M_guNWxgbPc-TFElSWyyqTeKgBls0kgJugJZMNcYqPj9e_9PxwxU/s1600/blog-3.jpg</i>" on="tap:lightbox1" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRLOoZ4ZEPSEMRKoQ83QH04MOLDgP_woJhA-o4-DtlX_mmLy7vZCgZYDms8cF9Xe8JViJCDMNFx9H5VoOvMU7ZL70uuIZIJ9a5hwP3_FDd3ysXZp-UpxAhmN9oam2_-zXv8DnWBgqiDc/s1600/business-1.jpg</i>" on="tap:lightbox2" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
<br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQv2rqrF73Uic6PJAPu6xNPblMHfAwyl7EkiTKjhKoJ5x9QOlBHKBq-wnr7lhyphenhyphen1zqJMr2c1_40yMcS5Fp2fKrvdr6wCmzrGpgVN91XQ08oyturYWh2dbQReP3V1JyPlPSosE51NS9tDhw/s1600/funfact.jpg</i>" on="tap:lightbox3" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
<br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVg5aDyQoJ6DbobqOPMjQrDuO30KW-WnBtsK6kQrxhaToSJZB6bPhOl962TkpTw0v7Vp4XqIzUAbu-v8pUg59lgSEiiwcFr6gDJSS641KUngK4bAf_tKbQk7Bx7ZO2iU_TCSaZ6nwtQEo/s1600/home-bg.jpg</i>" on="tap:lightbox4" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
<br />
</div> <br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZpCUhBSPwK0zvWypINKibB2GPzO7IBiajidoPzBLuV_aJN0-rtYyIHJUrMhyiohi53mtWqc4m7Nm9WUMDHTFaY2HJu092ECuzVD6hTZv7Ck8q8lVXJR-vDiC0DnzMWiDQFjDwFPw7ZQ/s1600/img-1.jpg</i>" on="tap:lightbox5" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
<br />
</div><br />
</amp-img><br />
<br />
<amp-img class="carousel-img" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0yJzsjq4xQZsMo0AMZKUO7d7nuDuW829OFS-JK4cvsUCY_IN6mV1cI2w-LXUixJgYv-dueiyvRRCt5rov07G5uuQrdThTAFm3fDSrs8BLSLePyS4dtaoSxsJI2yTfiJ27IfMr0EZIec/s1600/img-2.jpg</i>" on="tap:lightbox6" role="button" tabindex="0" height="9" width="12" layout="responsive" alt=""><br />
<div placeholder=""><br />
<br />
</div><br />
<br />
</amp-img><br />
</amp-carousel><br />
</div><br />
</div><br />
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox2" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox3" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox4" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox5" layout="nodisplay"></amp-image-lightbox><br />
<amp-image-lightbox id="lightbox6" layout="nodisplay"></amp-image-lightbox><br />
<br />
<div>
</div>
</section>
<br />
</body><br />
</html></div>
</div>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-23764481438961225422018-06-06T14:01:00.002-07:002019-04-17T20:01:07.507-07:00¿Cómo crear una imagen de página completa con AMP?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrW0s2lh50A5JyEkVyZhwLH4pSs3PtqlU_cndSAKD7BLKDfZqDIQCmlJe07al3chgXYsrE_UrSZTyicTfp8R-wx5jGwFjAcrx6KhW9-5dXzUxozOy4wfX9NK08SIM5cSp23VkhLqbVeof4/s1600/como-crear-una-imagen-de-pagina-completa-con-amp.jpg" width="528" height="332" alt="¿Cómo crear una imagen de página completa con AMP?"/></noscript>
Aprenda a crear una imagen de fondo de página completa con AMP. Learn how to create a full page background image with AMP.<br />
<br />
<b><u>Video Tutorial</u></b><br />
<br />
<b><u>Imagen de página completa con AMP</u></b><br />
<br />
Aprenda a crear una imagen de fondo que cubra toda la ventana del navegador con AMP. El siguiente ejemplo le ayudara a insertar una imagen de fondo receptiva a pantalla completa<br />
<br />
Paso 1 Agregar el compenente<br />
<br />
<a name='more'></a>
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<script async src='https://cdn.ampproject.org/v0.js'/></div>
</div>
<br />
Paso 2 Agregar el siguiente código justo después de la apertura <body><br />
<br />
<div class="amp-example">
<h3>Ejemplo</h3>
<div class="amp-code">
<amp-img alt="AMP" height="320" layout="responsive" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgna6DREWTHFutz3mV-I3UyFo5NcNal54Z-614hcbYofnm6VXhYP6F1HMiLoFJhCif58Cd0HsfPSkaBVksC6CcnObCUCPPVQ3ILN2qcoy0RkfXDnOewkao9HZp7qDFKNqpgRq8FqKegeQ9l/s1600/amp-html.jpg</i>" width="500"></amp-img><br />
</div>
</div>
<br />
Paso 3 Cambie la URL de imagen<br />
<br />
Paso 4 Demostración<br />
<br />
<div id="ayudadeblogger">
<a class="adb-slide" href="https://amp-ejemplo.blogspot.com/2018/06/ejemplo-2.html" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Clic aquí</span>
</a>
</div>
A continuación la estructura completa del ejemplo<br />
<br />
<div class="amp-example">
<h3>Ejemplo</h3>
<div class="amp-code">
<!doctype html><br />
<html ⚡><br />
<head><br />
<meta charset="utf-8"><br />
<script async src="https://cdn.ampproject.org/v0.js"></script><br />
<br />
<link rel="canonical" href="https://www.amphtmlenespanol.com/"><br />
<br />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><br />
<br />
<style amp-custom><br />
<br />
</style><br />
<br />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><br />
<br />
</head><br />
<br />
<body><br />
<br />
<amp-img alt="AMP" height="320" layout="responsive" src="<i>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgna6DREWTHFutz3mV-I3UyFo5NcNal54Z-614hcbYofnm6VXhYP6F1HMiLoFJhCif58Cd0HsfPSkaBVksC6CcnObCUCPPVQ3ILN2qcoy0RkfXDnOewkao9HZp7qDFKNqpgRq8FqKegeQ9l/s1600/amp-html.jpg</i>" width="500"></amp-img><br />
<br />
</body><br />
</html><br />
</div>
</div>
<br />
Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-72057638500041071132018-06-05T15:55:00.003-07:002018-06-16T16:44:37.335-07:00¿Cómo crear un fondo de video en pantalla completa con AMP?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN7A_gZoOTeNwP5TM-p0MOCe6MNsE9OcFf5z2Qf7we7Y7u6k7XicmJ9-w5zrmRpHVpw5dIO1z2h7IJ5UJfYExRd2PthC-tS2SNJFNCTP8jiKEBIxik1HHoqv8KtvV4sOqzHCK8AfZZwUwB/s1600/como-crear-un-fondo-de-video-en-pantalla-completa.jpg" width="601" height="323" alt="¿Cómo crear un fondo de video en pantalla completa con AMP?"/></noscript>
Aprenda a crear un fondo de video de pantalla completa con Amp. Learn how to create a full screen video background with AMP.<br />
<br />
<b><u>Video Tutorial</u></b><br />
<br />
Vamos a utilizar Amp y Youtube para que muestre el video de una forma fácil y segura, también mostrara un título y una descripción con unos simples pasos.<br />
<br />
Paso 1) Agregar los componentes:<br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<script async src='https://cdn.ampproject.org/v0.js'/><br />
<script async custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/></div>
</div>
<br />
Paso 2) Agregar el CSS<br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
section {<br />
background-position: 50% 50%;<br />
background-repeat: no-repeat;<br />
background-size: cover;<br />
}<br />
<br />
/* Video */<br />
<br />
.box-video{<br />
position: relative;<br />
height: 802px;<br />
}<br />
<br />
.opacity-video{<br />
position: relative;<br />
background: #222;<br />
overflow: hidden;<br />
}<br />
.opacity-video:before {<br />
content: &#39; &#39;;<br />
display: block;<br />
position: absolute;<br />
left: 0;<br />
top: 0;<br />
width: 100%;<br />
height: 100%;<br />
z-index: 1;<br />
opacity: 0.6;<br />
background-repeat: no-repeat;<br />
background-position: 50% 0;<br />
-ms-background-size: cover;<br />
-o-background-size: cover;<br />
-moz-background-size: cover;<br />
-webkit-background-size: cover;<br />
background-size: cover;<br />
background-color: rgb(40, 50, 78)<br />
}<br />
<br />
.box-video-container {<br />
position: absolute;<br />
top: 50%;<br />
left: 40%;<br />
margin-left: 10%;<br />
-webkit-transform: translate3d(-50%,-50%,0);<br />
z-index: 4;<br />
}<br />
<br />
.box-video-relative {<br />
color: #fff;<br />
position: relative;<br />
}<br />
<br />
.box-video-txt {<br />
font-size: 46px;<br />
font-weight: bold;<br />
letter-spacing: 2px;<br />
line-height: 50px;<br />
margin: -18px 0 1px 0;<br />
padding-bottom: 41px;<br />
position: relative;<br />
top: 8px;<br />
text-align: center;<br />
color: #fff;<br />
}<br />
.box-video-subtext {<br />
font-size: 21px;<br />
line-height: 29px;<br />
margin: -32px 0 3px 0;<br />
padding: 0 0 41px 0;<br />
position: relative;<br />
top: 6px;<br />
text-align: center;<br />
}<br />
<br />
@media only screen and (max-width: 1024px) {<br />
.box-video {<br />
height: 567px;<br />
}<br />
<br />
}<br />
@media only screen and (max-width: 1006px){<br />
.box-video {<br />
height: 214px;<br />
}<br />
.box-video-container {<br />
position: absolute;<br />
top: 50%;<br />
left: 40%;<br />
margin-left: 10%;<br />
-webkit-transform: translate3d(-50%,-50%,0);<br />
z-index: 4;<br />
width: 100%;<br />
}<br />
.box-video-txt {<br />
font-size: 13px;<br />
line-height: 32px;<br />
letter-spacing: 2px;<br />
margin: 0;<br />
padding-bottom: 4px;<br />
position: relative;<br />
top: 0px;<br />
text-align: center;<br />
color: #fff;<br />
}<br />
.box-video-subtext {<br />
font-size: 12px;<br />
line-height: 24px;<br />
margin: 0;<br />
padding: 0;<br />
position: relative;<br />
top: 0px;<br />
text-align: center;<br />
}<br />
}<br />
<br />
/* End Video */</div>
</div>
<br />
Paso 3) Agregar el siguiente código despues del <body><br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<section><br />
<div class="box-video"><br />
<amp-youtube class="opacity-video" id="video" data-videoid="53mfiKTia-w" height="290" layout="responsive" width="515" data-param-controls="0" data-param-showinfo="0" data-param-mute="1" data-param-rel="0" data-param-autoplay="1" data-param-loop="1" data-param-playlist="53mfiKTia-w" autoplay></amp-youtube><br />
<div class="box-video-container container"><br />
<div class="box-video-relative"><br />
<h1 class="box-video-txt">FULL-SCREEN VIDEO BACKGROUND</h1><br />
<p class="box-video-subtext"><strong>Add breathtaking video background to your website w/o touching the code.</strong></p><br />
</div><br />
</div><br />
</div><br />
</section></div>
</div>
<br />
Paso 4) Mire su funcionamiento<br />
<div id="ayudadeblogger">
<a class="adb-slide" href="https://amp-ejemplo.blogspot.com/2018/06/ejemplo-1.html" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Clic aquí</span>
</a>
</div>
A continuación la estructura completa del ejemplo<br />
<br />
<div class="amp-example">
<h3>
Ejemplo</h3>
<div class="amp-code">
<!doctype html><br />
<html ⚡><br />
<head><br />
<meta charset="utf-8"><br />
<script async src="https://cdn.ampproject.org/v0.js"></script><br />
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script><br />
<br />
<link rel="canonical" href="https://www.amphtmlenespanol.com/"><br />
<br />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><br />
<br />
<style amp-custom><br />
section {<br />
background-position: 50% 50%;<br />
background-repeat: no-repeat;<br />
background-size: cover;<br />
}<br />
<br />
/* Video */<br />
<br />
.box-video{<br />
position: relative;<br />
height: 802px;<br />
}<br />
<br />
.opacity-video{<br />
position: relative;<br />
background: #222;<br />
overflow: hidden;<br />
}<br />
.opacity-video:before {<br />
content: &#39; &#39;;<br />
display: block;<br />
position: absolute;<br />
left: 0;<br />
top: 0;<br />
width: 100%;<br />
height: 100%;<br />
z-index: 1;<br />
opacity: 0.6;<br />
background-repeat: no-repeat;<br />
background-position: 50% 0;<br />
-ms-background-size: cover;<br />
-o-background-size: cover;<br />
-moz-background-size: cover;<br />
-webkit-background-size: cover;<br />
background-size: cover;<br />
background-color: rgb(40, 50, 78)<br />
}<br />
<br />
.box-video-container {<br />
position: absolute;<br />
top: 50%;<br />
left: 40%;<br />
margin-left: 10%;<br />
-webkit-transform: translate3d(-50%,-50%,0);<br />
z-index: 4;<br />
}<br />
<br />
.box-video-relative {<br />
color: #fff;<br />
position: relative;<br />
}<br />
<br />
.box-video-txt {<br />
font-size: 46px;<br />
font-weight: bold;<br />
letter-spacing: 2px;<br />
line-height: 50px;<br />
margin: -18px 0 1px 0;<br />
padding-bottom: 41px;<br />
position: relative;<br />
top: 8px;<br />
text-align: center;<br />
color: #fff;<br />
}<br />
.box-video-subtext {<br />
font-size: 21px;<br />
line-height: 29px;<br />
margin: -32px 0 3px 0;<br />
padding: 0 0 41px 0;<br />
position: relative;<br />
top: 6px;<br />
text-align: center;<br />
}<br />
<br />
@media only screen and (max-width: 1024px) {<br />
.box-video {<br />
height: 567px;<br />
}<br />
<br />
}<br />
@media only screen and (max-width: 1006px){<br />
.box-video {<br />
height: 214px;<br />
}<br />
.box-video-container {<br />
position: absolute;<br />
top: 50%;<br />
left: 40%;<br />
margin-left: 10%;<br />
-webkit-transform: translate3d(-50%,-50%,0);<br />
z-index: 4;<br />
width: 100%;<br />
}<br />
.box-video-txt {<br />
font-size: 13px;<br />
line-height: 32px;<br />
letter-spacing: 2px;<br />
margin: 0;<br />
padding-bottom: 4px;<br />
position: relative;<br />
top: 0px;<br />
text-align: center;<br />
color: #fff;<br />
}<br />
.box-video-subtext {<br />
font-size: 12px;<br />
line-height: 24px;<br />
margin: 0;<br />
padding: 0;<br />
position: relative;<br />
top: 0px;<br />
text-align: center;<br />
}<br />
}<br />
<br />
/* End Video */<br />
</style><br />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><br />
<br />
</head><br />
<br />
<body><br />
<br />
<section><br />
<div class="box-video"><br />
<amp-youtube class="opacity-video" id="video" data-videoid="53mfiKTia-w" height="290" layout="responsive" width="515" data-param-controls="0" data-param-showinfo="0" data-param-mute="1" data-param-rel="0" data-param-autoplay="1" data-param-loop="1" data-param-playlist="53mfiKTia-w" autoplay></amp-youtube><br />
<div class="box-video-container container"><br />
<div class="box-video-relative"><br />
<h1 class="box-video-txt">FULL-SCREEN VIDEO BACKGROUND</h1><br />
<p class="box-video-subtext"><strong>Add breathtaking video background to your website w/o touching the code.</strong></p><br />
</div><br />
</div><br />
</div><br />
</section><br />
<br />
</body><br />
</html></div>
</div>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-87801598829254000152018-04-20T14:07:00.000-07:002018-04-20T14:08:13.522-07:00Flujo de consentimiento de usuario avanzado<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSCV61QEkGozb4vw32uHUx4Qhciu-1IKUnBFKeSUeW21TLfFeMxOoFpyAq-PlYA2Y1DTB_j0Rq68Pc8rWpfdtmc6PgJPM1BB9cm5dICqd-29gdcmQWNXhffWqICNUZLs4BBe9PqwJJZ4_h/s1600/flujo-de-consentimiento-de-usuario-avanzado.jpg" width="590" height="350" alt="Flujo de consentimiento de usuario avanzado"/></noscript>
<br />
Los usuarios de hoy quieren un control adicional sobre su experiencia en línea. Además, los editores se enfrentan a una variedad de demandas diferentes sobre cómo informan y eligen a sus usuarios, desde políticas de proveedores hasta requisitos legales en evolución. El proyecto de fuente abierta AMP está trabajando para brindar a los editores y proveedores de tecnología herramientas para implementar sus controles de usuario preferidos y para respaldar sus variados requisitos de cumplimiento individual en sus páginas de AMP.<br />
<br />
Esta página muestra cómo se puede generar un flujo de consentimiento de bloqueo más avanzado. Mostrará los botones de aceptar y rechazar, que al hacer clic revelarán más información, como una lista de terceros usados sobre la aceptación del usuario, o un aviso de uso de datos generales sobre el rechazo del usuario.<br />
<br />
Importe el componente de consentimiento en el encabezado.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b>Importante</b><br />
<br />
El consentimiento se guarda en el almacenamiento local: después de aceptarlo / rechazarlo, solo volverá a aparecer el diálogo emergente después de eliminar el contenido del almacenamiento local para este host, por ejemplo, a través de <a href="https://developers.google.com/web/tools/chrome-devtools/manage-data/local-storage#local-storage" target="_blank">Herramientas de desarrollo de Chrome.</a><br />
<br />
<b>Uso Básico</b><br />
<br />
El amp-consent componente de consentimiento de amplificador permite especificar el consentimiento del usuario requerido para esta página. Los puntos finales CORS se pueden especificar a través del atributo checkConsentHref. Este punto final se consultará mediante una solicitud POST para determinar si es necesario mostrar la IU de consentimiento especificada. La respuesta debería verse así:<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
{
'promptIfUnknown': boolean (true/false)
}
</pre>
</div>
</div>
<br />
La respuesta indicará si el consentimiento debe mostrarse o no. Si necesita mostrarse, se mostrará el elemento con la ID indicada en promptUI.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<amp-consent id="myConsent"
layout="nodisplay">
<script type="application/json">
{
"consents": {
"consent1": {
"checkConsentHref": "/samples_templates/consent/getConsent",
"promptUI": "consentDialog"
}
},
"postPromptUI": "post-consent-ui"
}
</script>
<div class="lightbox"
id="consentDialog">
<div class="lightbox-content">
<div class="dismiss-button"
role="button"
tabindex="0"
on="tap:myConsent.dismiss">X</div>
<div class="message">
<div class="h2 m1">Headline</div>
<p class="m1">This is an important message requiring you to make a choice.</p>
</div>
<div id="choice">
<button class="ampstart-btn ampstart-btn-secondary caps mx1"
on="tap:choice1.show,choice2.hide">Choice 1</button>
<button class="ampstart-btn ampstart-btn-secondary caps"
on="tap:choice2.show,choice1.hide">Choice 2</button>
</div>
<div id="choice1"
hidden
class="message">
<p class="m1">This is some more information about this choice. Here's a list of items related to this choice.</p>
<amp-list width="auto"
height="132"
layout="fixed-height"
src="/json/consent-items.json"
class="m1">
<template type="amp-mustache">
<li>{{.}}</li>
</template>
</amp-list>
<button on="tap:myConsent.accept"
class="ampstart-btn ampstart-btn-secondary caps m1">Confirm</button>
</div>
<div id="choice2"
hidden
class="message">
<p class="m1">This is some more information about this choice.</p>
<button on="tap:myConsent.reject"
class="ampstart-btn ampstart-btn-secondary caps m1">Confirm</button>
</div>
</div>
</div>
<div id="post-consent-ui">
<button on="tap:myConsent.prompt()"
class="ampstart-btn caps m1">Settings</button>
</div>
</amp-consent>
</pre>
</div>
</div>
<br />
Utilice el data-block-on-consent atributo bloque de datos en el consentimiento para bloquear componentes de AMP hasta que se otorgue el consentimiento. Los componentes individuales de AMP pueden anular el comportamiento de bloqueo e implementar ellos mismos la lógica de bloqueo.<br />
<br />
Aquí hay una imagen que está bloqueada hasta que se dé el consentimiento:<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-img data-block-on-consent
src="https://ampbyexample.com/img/landscape_lake_300x201.jpg"
width="300"
height="201">
</amp-img>
</div>
<amp-img data-block-on-consent
src="/img/landscape_lake_300x201.jpg"
width="300"
height="201">
</amp-img>
</pre>
</div>
</div>
<br />
Este anuncio también se bloqueará hasta que se otorgue el consentimiento:<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-ad data-block-on-consent
data-slot="/30497360/a4a/a4a_native"
height="250"
type="doubleclick"
width="300">
</amp-ad>
</div>
<amp-ad data-block-on-consent
data-slot="/30497360/a4a/a4a_native"
height="250"
type="doubleclick"
width="300">
</amp-ad>
</pre>
</div>
</div>
<br />
<amp-consent id="myConsent"
layout="nodisplay">
<script type="application/json">
{
"consents": {
"consent1": {
"checkConsentHref": "/samples_templates/consent/getConsent",
"promptUI": "consentDialog"
}
},
"postPromptUI": "post-consent-ui"
}
</script>
<div class="lightbox"
id="consentDialog">
<div class="lightbox-content">
<div class="dismiss-button"
role="button"
tabindex="0"
on="tap:myConsent.dismiss">X</div>
<div class="message">
<div class="h2 m1">Headline</div>
<p class="m1">This is an important message requiring you to make a choice.</p>
</div>
<div id="choice">
<button class="ampstart-btn ampstart-btn-secondary caps mx1"
on="tap:choice1.show,choice2.hide">Choice 1</button>
<button class="ampstart-btn ampstart-btn-secondary caps"
on="tap:choice2.show,choice1.hide">Choice 2</button>
</div>
<div id="choice1"
hidden
class="message">
<p class="m1">This is some more information about this choice. Here's a list of items related to this choice.</p>
<amp-list width="auto"
height="132"
layout="fixed-height"
src="/json/consent-items.json"
class="m1">
<template type="amp-mustache">
<li>{{.}}</li>
</template>
</amp-list>
<button on="tap:myConsent.accept"
class="ampstart-btn ampstart-btn-secondary caps m1">Confirm</button>
</div>
<div id="choice2"
hidden
class="message">
<p class="m1">This is some more information about this choice.</p>
<button on="tap:myConsent.reject"
class="ampstart-btn ampstart-btn-secondary caps m1">Confirm</button>
</div>
</div>
</div>
<div id="post-consent-ui">
<button on="tap:myConsent.prompt()"
class="ampstart-btn caps m1">Settings</button>
</div>
</amp-consent>Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-59841152778755911632018-04-20T09:41:00.000-07:002018-04-20T10:31:44.874-07:00Flujo de consentimiento básico del usuario<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Gqb8NSFjc3n2H-hCHLox730mQSMqztnct3rDogvzCjlvQ8h8UvaVdN9GK1uSNd-0x-Rq4NhyphenhyphenpRh9pO3WDRPe-eFsQCI0SAPj598ZIJYLR5D_qepX2_c25gvXsEI9KfZzBcQXBLP6qONg/s1600/flujo-de-consentimiento-basico-del-usuario.jpg" width="590" height="350" alt="Flujo de consentimiento básico del usuario"/></noscript>
<br />
Los usuarios de hoy quieren un control adicional sobre su experiencia en línea. Además, los editores se enfrentan a una variedad de demandas diferentes sobre cómo informan y eligen a sus usuarios, desde políticas de proveedores hasta requisitos legales en evolución. El proyecto de fuente abierta AMP está trabajando para brindar a los editores y proveedores de tecnología herramientas para implementar sus controles de usuario preferidos y para respaldar sus variados requisitos de cumplimiento individual en sus páginas de AMP.<br />
<br />
Esta página muestra cómo se puede generar un flujo de consentimiento de bloqueo básico, que simplemente mostraría un mensaje emergente de bloqueo simple con un botón de aceptar y rechazar. Al rechazar algún contenido en la página se bloqueará.<br />
<br />
Importe el componente de consentimiento en el encabezado.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b>Importante</b><br />
<br />
El consentimiento se guarda en el almacenamiento local: después de aceptarlo / rechazarlo, solo volverá a aparecer el diálogo emergente después de eliminar el contenido del almacenamiento local para este host, por ejemplo, a través de Herramientas de desarrollo de Chrome.<br />
<br />
<b>Uso Básico</b><br />
<br />
El componente de consentimiento de amplificador permite especificar el consentimiento del usuario requerido para esta página. Los puntos finales CORS se pueden especificar a través del atributo checkConsentHref. El componente de consentimiento de amplificador verificará a través de una solicitud POST si es necesario mostrar la IU de consentimiento. La respuesta debería verse así:<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
{
"promptIfUnknown": boolean (true/false)
}
</pre>
</div>
</div>
<br />
Es posible volver a activar el cuadro de diálogo de consentimiento utilizando la acción myConsent.prompt (). Un caso de uso para esto es brindarles a los usuarios la opción de cambiar su configuración después de que se haya descartado el diálogo de consentimiento. Para que esto funcione, la UI posterior al consentimiento debe especificarse en el amp-consent JSON config: "promptUI": "consentDialog".<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<div class="abe-preview fit mb1">
<amp-consent id="myUserConsent" layout="nodisplay"><script type="application/json">{
"consents": {
"consent1": {
"checkConsentHref": "/samples_templates/consent/getConsent",
"promptUI": "consentDialog"
}
},
"postPromptUI": "post-consent-ui"
}</script><div class="popupOverlay" id="consentDialog"><div class="consentPopup"><div class="dismiss-button" role="button" tabindex="0" on="tap:myUserConsent.dismiss">X</div><div class="h2 m1">Headline</div><p class="m1">This is an important message requiring you to make a choice.</p><p class="m1">This is some more information about this choice. Here's a list of items related to this choice.</p><amp-list width="auto" height="132" layout="fixed-height" src="/json/consent-items.json" class="m1"><template type="amp-mustache"><li>{{.}}</li></template></amp-list><button on="tap:myUserConsent.accept" class="ampstart-btn ampstart-btn-secondary caps mx1">Accept</button> <button on="tap:myUserConsent.reject" class="ampstart-btn ampstart-btn-secondary caps">Reject</button></div></div><div id="post-consent-ui"><button on="tap:myUserConsent.prompt()" class="ampstart-btn caps m1">Settings</button></div></amp-consent>
</div>
<amp-consent id="myUserConsent"
layout="nodisplay">
<script type="application/json">
{
"consents": {
"consent1": {
"checkConsentHref": "/samples_templates/consent/getConsent",
"promptUI": "consentDialog"
}
},
"postPromptUI": "post-consent-ui"
}
</script>
<div class="popupOverlay"
id="consentDialog">
<div class="consentPopup">
<div class="dismiss-button"
role="button"
tabindex="0"
on="tap:myUserConsent.dismiss">X</div>
<div class="h2 m1">Headline</div>
<p class="m1">This is an important message requiring you to make a choice.</p>
<p class="m1">This is some more information about this choice. Here's a list of items related to this choice.</p>
<amp-list width="auto"
height="132"
layout="fixed-height"
src="/json/consent-items.json"
class="m1">
<template type="amp-mustache">
<li>{{.}}</li>
</template>
</amp-list>
<button on="tap:myUserConsent.accept"
class="ampstart-btn ampstart-btn-secondary caps mx1">Accept</button>
<button on="tap:myUserConsent.reject"
class="ampstart-btn ampstart-btn-secondary caps">Reject</button>
</div>
</div>
<div id="post-consent-ui">
<button on="tap:myUserConsent.prompt()"
class="ampstart-btn caps m1">Settings</button>
</div>
</amp-consent>
</pre>
</div>
</div>
<br />
Utilice el atributo bloque de datos data-block-on-consent en el consentimiento para bloquear componentes de AMP hasta que se otorgue el consentimiento. Los componentes individuales de AMP pueden anular el comportamiento de bloqueo e implementar ellos mismos la lógica de bloqueo.<br />
<br />
Aquí hay una imagen que está bloqueada hasta que se dé el consentimiento:<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-img data-block-on-consent
src="https://ampbyexample.com/img/landscape_lake_300x201.jpg"
width="300"
height="201">
</amp-img>
</div>
<amp-img data-block-on-consent
src="/img/landscape_lake_300x201.jpg"
width="300"
height="201">
</amp-img>
</pre>
</div>
</div>
<br />
Este anuncio también se bloqueará hasta que se otorgue el consentimiento:<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-ad data-block-on-consent
data-slot="/30497360/a4a/a4a_native"
height="250"
type="doubleclick"
width="300">
</amp-ad>
</div>
<amp-ad data-block-on-consent
data-slot="/30497360/a4a/a4a_native"
height="250"
type="doubleclick"
width="300">
</amp-ad>
</pre>
</div>
</div>
<br />
Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-48384340225706706652018-02-04T13:45:00.000-08:002018-06-07T08:00:18.269-07:00¿Cómo agregar un Scroll to top en AMP?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6ftIwBjx80L93BvP5eMYUL5DKdVOcrcXC_tQkCG978rpnY20pEUI6LyFRVRCRWXWL4Nf_BKsVJQUuzOSFowTRgASg0NAtIkF1UxXIv7ity_Pm_2uCjK4Hr0JovBP-wdTy7uOzL66W4lr/s1600/como-agregar-un-scroll-to-top-en-amp.jpg" width="483" height="301" alt="¿Cómo agregar un Scroll to top en AMP?"/></noscript>
<br />
Al combinar amp-position-observer con amp-animation se puede usar para implementar un botón scroll to top. Este patrón se usa a menudo en páginas de comercio electrónico donde el usuario tiene que desplazarse por una larga lista de artículos.<br />
<br />
Importe la extensión amp-position-observer<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
</pre>
</div>
</div>
<br />
Importe la extensión amp-animation<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b>Estilos</b><br />
<br />
El CSS utilizado para estas muestras se incluye aquí como referencia.<br />
<br />
Estas reglas son simplemente necesarias para que las muestras funcionen, pero no son fundamentales para los conceptos que se tratan aquí.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<style amp-custom>
.scrollToTop {
color: #fafafa;
font-size: 1.4em;
box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12), 0 1px 1px 0 rgba(0,0,0,.24);
width: 50px;
height: 50px;
border-radius: 100px;
border: none;
outline: none;
background: #E91E63;
z-index: 9999;
bottom: 10px;
right: 10px;
position: fixed;
opacity: 0;
visibility: hidden;
}
#marker {
position: absolute;
top: 100px;
width: 0px;
height: 0px;
}
</style>
</pre>
</div>
</div>
<br />
<b>Scroll to top</b><br />
<br />
Agregamos un elemento con id <b>top-page</b> que podemos consultar más adelante para desplazarse.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<div id="top-page"></div>
</pre>
</div>
</div>
<br />
Usamos 2 elementos de animación de amp para activar la visibilidad del botón. El primero es para hacer que el botón sea visible ...<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<amp-animation id="showAnim"
layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "1",
"visibility": "visible"
}]
}]
}
</script>
</amp-animation>
</pre>
</div>
</div>
<br />
... y el segundo es para agregar el botón.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<amp-animation id="hideAnim"
layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [{
"selector": "#scrollToTopButton",
"keyframes": [{
"opacity": "0",
"visibility": "hidden"
}]
}]
}
</script>
</amp-animation>
</pre>
</div>
</div>
<br />
Usamos amp-position-observer para comenzar la animación cuando el usuario comienza a desplazarse.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<div id="marker">
<amp-position-observer on="enter:hideAnim.start; exit:showAnim.start"
layout="nodisplay">
</amp-position-observer>
</div>
</pre>
</div>
</div>
<br />
Usamos la acción scrollTo para desplazar la página cuando se toca el botón.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<button id="scrollToTopButton"
on="tap:top-page.scrollTo(duration=200)"
class="scrollToTop">⌃</button>
</pre>
</div>
</div>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-38077046385635103302018-02-04T11:52:00.000-08:002018-02-04T11:56:02.697-08:00 Conceptos básicos de los efectos scrollbound en AMP<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJyM-O3cUTHBP_1est_t6LYdr_L_4wFdAjSM1UNWl-bFOPeAB2QjjouUdfYCpgKrAhbtK7yTphjUHgEUtDRXGjCfwc64j3svomlN_Va0plZz7IATzcD2OO_t6FM1zca5I-qAb0XaXjwkP/s1600/conceptos-basicos-de-los-efectos-scrollbound-en-amp.jpg" width="482" height="327" alt=" Conceptos básicos de los efectos scrollbound en AMP"/></noscript>
<br />
<a href="https://www.amphtmlenespanol.com/search/label/Efectos%20visuales" target="_blank">Efectos de transición para AMP HTML</a> - El amp-position-observer combinado con la amp-animation es un poderoso elemento básico que puede manejar varios casos de uso, tales como animaciones de desplazamiento hacia un lado, efectos de paralaje y transiciones a medida que los elementos entran y salen de la ventana gráfica.<br />
<br />
<b class="p-large">Puede seguir las instrucciones que se detalla en cada uno de los siguientes tutoriales</b><br />
<br />
<div class="container">
<div class="col col-6">
<div class="box-material-big">
<div class="box-material-small b-m-color">
<h2 class="box-m-s-txt">
<a href="https://www.amphtmlenespanol.com/2018/02/como-insertar-animaciones-scrollbound-en-amp-html.html" target="_blank">¿Cómo insertar animaciones Scrollbound en AMP HTML? </a></h2>
</div>
</div>
</div>
<div class="col col-6">
<div class="box-material-big">
<div class="box-material-small b-m-color">
<h2 class="box-m-s-txt">
<a href="https://www.amphtmlenespanol.com/2018/02/transiciones-de-desvanecimiento-y-deslizamiento-en-amp.html" target="_blank">Transiciones de desvanecimiento y deslizamiento en AMP HTML </a></h2>
</div>
</div>
</div>
<div class="col col-6">
<div class="box-material-big">
<div class="box-material-small b-m-color">
<h2 class="box-m-s-txt">
<a href="https://www.amphtmlenespanol.com/2018/02/como-agregar-un-parallax-en-amp-html.html" target="_blank">¿Cómo agregar un Parallax en AMP HTML? </a></h2>
</div>
</div>
</div>
<div class="col col-6">
<div class="box-material-big">
<div class="box-material-small b-m-color">
<h2 class="box-m-s-txt">
<a href="https://www.amphtmlenespanol.com/2018/02/como-agregar-una-transicion-al-componente-amp-carrusel.html" target="_blank">¿Cómo agregar una transición al componente amp-carrusel?</a></h2>
</div>
</div>
</div>
</div>
<br />
<b class="p-large">Información</b><br />
<br />
<b>amp-position-observer</b> es un componente funcional que supervisa la posición de un elemento dentro de la ventana gráfica a medida que el usuario se desplaza, y distribuye enter, exit y scroll: eventos <Position In Viewport As a Percentage>.<br />
<br />
A cambio, estos eventos se pueden utilizar para reproducir, pausar o buscar líneas de tiempo de animación definidas por amp-animation para crear efectos basados en visibilidad y scrollbound.<br />
<br />
<b>amp-animation</b> es un componente de interfaz de usuario que se basa en la API de animaciones web para definir y ejecutar animaciones de fotogramas clave en documentos de AMP.<br />
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-40063422602933087252018-02-04T11:29:00.002-08:002018-02-04T11:29:38.215-08:00¿Cómo agregar una transición al componente amp-carrusel?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmEAnoaoV-xYeE1zP0-l0-Ktkj7otXWawXSXiafTo10J02-Us71SEcQwB7bgyGL27vmyQmjBtJ9CKRjBc9DSh-MYXqsCYxQ9xi-uQ6Ki1yuKEEmLuYXrSJT5x-3KmOE2uG-ea7fEhGnQ5/s1600/como-agregar-una-transicion-al-componente-amp-carrusel.jpg" width="483" height="307" alt="¿Cómo agregar una transición al componente amp-carrusel?"/></noscript>
<br />
Aprenda a insertar una transición al componente amp-carrusel. También podemos usar estos efectos con otros componentes de AMP.<br />
<br />
<b class="large">Primero deberá insertar los siguientes scripts</b><br />
<br />
Inserte la extencion amp-position-observer<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
</pre>
</div>
</div>
<br />
Importe la extencion amp-animation<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b>Estilos</b><br />
<br />
El CSS utilizado para este ejemplo se incluye aquí como referencia.<br />
<br />
Estas reglas son simplemente necesarias para que las muestras funcionen, pero no son fundamentales para los conceptos que se tratan aquí.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
.carousel-container {
margin-right: -60%;
margin-left: 60%;
}
</pre>
</div>
</div>
<br />
En esta muestra, tenemos un carrusel donde el primer elemento se empuja hacia la derecha y cuando el carrusel se vuelve visible, vuelve a su lugar y proporciona una "hint" visual de que el carrusel se puede desplazar horizontalmente<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-carousel class="carousel-container"
height="300"
layout="fixed-height"
type="carousel">
<amp-position-observer on="enter:carouselTrasnsition.start"
intersection-ratios="0.8"
layout="nodisplay">
</amp-position-observer>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv9t4dajHirdtckp9M0edH8L86Ut1m3nIyl7BcfoTbDTDodWSeonhY_qtvgBam4cp3v-tar1Z_gWmQHPIWiqQ2CB4ivt7x0jr_ZMw-MR1WQLPxvEYQNjDo74MgDOLAtouSRsIIFKAVjYrc/s320/lifestyle-1-750x430.jpg"
width="320"
height="183"
alt="a sample image"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj82SQNW83WPMUNIx900iWSmTVjd835COwDrqkLYEd6l8Gs1XpofdmaR9qLE4qsyNwX0S5tUJxOiM7_XwEA6x5VNOlPHDkIFmOT3d3ppuUPJpEr_8o8HEFL1tkrktuNLJHWcLX8M3sQ_uVd/s320/tech-8-750x430.jpg"
width="320"
height="183"
alt="another sample image"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5R7l21AU4c3_Yhb07x65RyZfQCNzZmRXFdOmIcrvY-MKZNuN_MHqWpTjugk8hcZ0C1yJepntjcFJ9F691rxdIOixSUU_ss0Fx0X3H90MizlR_iPahA2uethh3CbVWjYfExQ2J-KyIWneJ/s320/lifestyle-14-750x430.jpg"
width="320"
height="183"
alt="and another sample image"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ22GwHdxVP9SF7v3StL35MFwKDbaEOM2n0qLhg8OOrjoK6Frv_SfiyGA4NxRyHZdl1iEu2RlLmGIZDGn8op2JlK3_olC7V2Vi_TuufzxfPXxoaJrburCcJBlg9lbdpZ3c9IyIP6TGjvTo/s320/lifestyle-4-750x430.jpg"
width="320"
height="183"
alt="and another sample image"></amp-img>
</amp-carousel>
<amp-animation id="carouselTrasnsition"
layout="nodisplay">
<script type="application/json">
{
"duration": "500ms",
"fill": "both",
"easing": "ease-in",
"delay": "200ms",
"animations": [{
"selector": ".carousel-container",
"keyframes": [{
"transform": "translateX(-60%)"
}]
}]
}
</script>
</amp-animation>
</div>
<amp-carousel class="carousel-container"
height="300"
layout="fixed-height"
type="carousel">
<amp-position-observer on="enter:carouselTrasnsition.start"
intersection-ratios="0.8"
layout="nodisplay">
</amp-position-observer>
<amp-img src="https://unsplash.it/800/600?image=1003"
width="400"
height="300"
alt="a sample image"></amp-img>
</pre>
<pre><amp-img src="https://unsplash.it/800/600?image=1043"
width="400"
height="300"
alt="another sample image"></amp-img>
</pre>
<pre><amp-img src="https://unsplash.it/800/600?image=1032"
width="400"</pre>
<pre> height="300"
alt="and another sample image"></amp-img></pre>
<pre></pre>
<pre></amp-carousel>
</pre>
</div>
</div>
<br />
Aquí definimos nuestra animación de tiempo determinado con un retraso de 200 ms que deslizará el carrusel hacia la izquierda en 500 ms.<br />
<br />
Esta animación solo será activada una vez por el observador de posición como se define arriba.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<amp-animation id="carouselTrasnsition"
layout="nodisplay">
<script type="application/json">
{
"duration": "500ms",
"fill": "both",
"easing": "ease-in",
"delay": "200ms",
"animations": [{
"selector": ".carousel-container",
"keyframes": [{
"transform": "translateX(-60%)"
}]
}]
}
</script>
</amp-animation>
</pre>
</div>
</div>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-48621148073009645382018-02-04T10:19:00.006-08:002018-06-07T08:00:18.272-07:00¿Cómo agregar un Parallax en AMP HTML?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB3tWQV4lDe60Ays_4zDTWpnhHGRm1ESEbUVTCgNJB7e0Jl0MjGL2M10H6eLV8hYWbAv3faUDT-se1gKvuBsvqydTUy0c_s-GQ4zt4rJtwYKe6KUi58Q60AEGh1OhdHAfrRw_LLR9Y37dS/s1600/como-agregar-un-parallax-en-amp-html.jpg" width="523" height="365" alt="¿Cómo agregar un Parallax en AMP HTML?"/></noscript>
<br />
Aprenda a insertar una ventana de imagen Parallax en el formato AMP HTML realizando unos simples pasos, y así optimizar el sitio web que está creando en AMP.<br />
<br />
Parallax es otro efecto que es posible combinando amp-animation y amp-position-observer.<br />
<br />
<b class="large">Primero deberá insertar los siguientes scripts</b><br />
<br />
Inserte la extencion amp-position-observer<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
</pre>
</div>
</div>
<br />
Importe la extencion amp-animation<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b>Estilos</b><br />
<br />
El CSS utilizado para este ejemplo se incluye aquí como referencia.<br />
<br />
Estas reglas son simplemente necesarias para que las muestras funcionen, pero no son fundamentales para los conceptos que se tratan aquí.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
.parallax-image-window {
overflow: hidden;
}
.parallax-image-window amp-img {
margin-bottom: -30%;
}
</pre>
</div>
</div>
<br />
Parallax normalmente implica traducir un elemento en el eje Y a medida que el usuario se desplaza.<br />
<br />
Aquí definimos una escena que tiene una altura menor que la imagen dentro de ella, mientras el usuario se desplaza, movemos la imagen creando una ventana de paralaje en la imagen.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div class="parallax-image-window">
<amp-position-observer on="scroll:parallaxTransition.seekTo(percent=event.percent)"
intersection-ratios="1"
layout="nodisplay">
</amp-position-observer>
<amp-img id="parallaxImage"
width="1600"
height="1083"
layout="responsive"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgna6DREWTHFutz3mV-I3UyFo5NcNal54Z-614hcbYofnm6VXhYP6F1HMiLoFJhCif58Cd0HsfPSkaBVksC6CcnObCUCPPVQ3ILN2qcoy0RkfXDnOewkao9HZp7qDFKNqpgRq8FqKegeQ9l/s1600/amp-html.jpg"
alt="Picture of an elephant"></amp-img>
</div>
<amp-animation id="parallaxTransition"
layout="nodisplay">
<script type="application/json">
{
"duration": "1",
"fill": "both",
"direction": "reverse",
"animations": [{
"selector": "#parallaxImage",
"keyframes": [{
"transform": "translateY(-30%)"
}]
}]
}
</script>
</amp-animation>
</div>
<div class="parallax-image-window">
<amp-position-observer on="scroll:parallaxTransition.seekTo(percent=event.percent)"
intersection-ratios="1"
layout="nodisplay">
</amp-position-observer>
<amp-img id="parallaxImage"
width="1280"
height="873"
layout="responsive"
src="/img/elephant.jpg"
alt="Picture of an elephant"></amp-img>
</div>
</pre>
</div>
</div>
<br />
La animación en sí misma simplemente mueve la imagen a través de "transform": "translateY(-30%)"<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<amp-animation id="parallaxTransition"
layout="nodisplay">
<script type="application/json">
{
"duration": "1",
"fill": "both",
"direction": "reverse",
"animations": [{
"selector": "#parallaxImage",
"keyframes": [{
"transform": "translateY(-30%)"
}]
}]
}
</script>
</amp-animation>
</pre>
</div>
</div>
<br />
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-42255508653201827962018-02-04T09:28:00.002-08:002018-02-04T09:45:45.425-08:00Transiciones de desvanecimiento y deslizamiento en AMP HTML<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK9n-WJBaRQnzu2mMZRA4OTyMqxvqKb2L4wrcRffTu1KvjznSgShf8oXEoLIt15u2Up-ISUWmV1wNEkxPU_d4Xf-_VUHffyPMkxQirjnRUA2W5LWj7FWE8LFCLKQ_NZ0rkwH7vgI0qeZkd/s1600/transiciones-de-desvanecimiento-y-deslizamiento-en-amp.jpg" width="482" height="385" alt="Transiciones de desvanecimiento y deslizamiento en AMP HTML"/></noscript>
<br />
Aprenda a insertar una imagen con un título o descripción deslizante, el mismo puede desplazarse desde la izquierda hacia la derecha y viceversa, todo ello utilizando las técnicas de AMP HTML.<br />
<br />
<b class="large">Primero deberá insertar los siguientes scripts</b><br />
<br />
Inserte la extencion amp-position-observer<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
</pre>
</div>
</div>
<br />
Importe la extencion amp-animation<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
</pre>
</div>
</div>
<br />
Ahora agregue el script amp-fit-text<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b>Estilos</b><br />
<br />
El CSS utilizado para este ejemplo se incluye aquí como referencia.<br />
<br />
Estas reglas son simplemente necesarias para que las muestras funcionen, pero no son fundamentales para los conceptos que se tratan aquí.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<style amp-custom>
.card {
margin: 10%;
position: relative;
}
.card-title {
padding: 5%;
padding-right: 40%;
font-size: 50%;
font-weight: bold;
color: #FAFAFA;
transform: translateX(-100%);
}
</style>
</pre>
</div>
</div>
<br />
Ahora que hemos aprendido los conceptos centrales básicos detrás de <b>amp-position-observer</b> y <b>amp-animation</b>, profundicemos en formas más creativas de combinarlos para crear transiciones interesantes.<br />
<br />
En esta muestra, combinaremos las transiciones timebound y scrollbound juntas para crear un efecto donde la opacidad de la tarjeta esté vinculada a la cantidad de ella visible en la ventana gráfica (scrollbound) y el título de la tarjeta animada in/out (timebound) a medida que la tarjeta ingresa y sale de la ventana gráfica.<br />
<br />
Nuestra escena de cartas está compuesta simplemente por una imagen y un título superpuesto. Aquí definimos dos observadores de posición con diferentes valores de relación de intersección:<br />
<br />
<blockquote>
- El primero controlará la opacidad de la imagen a medida que el usuario se desplaza.<br />
<br />
- El segundo ejecutará una animación de diapositivas de tiempo para el título cuando la escena se vuelva más visible (80%) y la vuelva a ejecutar "en reversa" cuando la escena salga un poco de la ventana gráfica (20%).</blockquote>
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div class="card ampstart-card">
<amp-position-observer on="scroll:fadeTransition.seekTo(percent=event.percent)"
intersection-ratios="0"
layout="nodisplay">
</amp-position-observer>
<amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse"
intersection-ratios="0.8"
layout="nodisplay">
</amp-position-observer>
<amp-fit-text layout="fill">
<div class="card-title">
AMP (Accelerated Mobile Pages) es una iniciativa de código abierto promovida por Google!
</div>
</amp-fit-text>
<amp-img id="cardImage"
width="1600"
height="1083"
layout="responsive"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgna6DREWTHFutz3mV-I3UyFo5NcNal54Z-614hcbYofnm6VXhYP6F1HMiLoFJhCif58Cd0HsfPSkaBVksC6CcnObCUCPPVQ3ILN2qcoy0RkfXDnOewkao9HZp7qDFKNqpgRq8FqKegeQ9l/s1600/amp-html.jpg"
alt="AMP (Accelerated Mobile Pages) es una iniciativa de código abierto promovida por Google"></amp-img>
</div>
<amp-animation id="fadeTransition"
layout="nodisplay">
<script type="application/json">
{
"duration": "1",
"fill": "both",
"direction": "reverse",
"animations": [{
"selector": "#cardImage",
"keyframes": [{
"opacity": "0.3",
"offset": 0
},
{
"opacity": "1",
"offset": 0.4
},
{
"opacity": "1",
"offset": 0.6
},
{
"opacity": "0.3",
"offset": 1
}
]
}]
}
</script>
</amp-animation>
<amp-animation id="slideTransition"
layout="nodisplay">
<script type="application/json">
{
"duration": "500ms",
"fill": "both",
"easing": "ease-out",
"iterations": "1",
"animations": [{
"selector": ".card-title",
"keyframes": [{
"transform": "translateX(-100%)"
},
{
"transform": "translateX(0)"
}
]
}]
}
</script>
</amp-animation>
</div>
<div class="card ampstart-card">
<amp-position-observer on="scroll:fadeTransition.seekTo(percent=event.percent)"
intersection-ratios="0"
layout="nodisplay">
</amp-position-observer>
<amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse"
intersection-ratios="0.8"
layout="nodisplay">
</amp-position-observer>
<amp-fit-text layout="fill">
<div class="card-title">
Organic, fresh tomatos and pasta!
</div>
</amp-fit-text>
<amp-img id="cardImage"
width="1280"
height="898"
layout="responsive"
src="/img/food.jpg"
alt="Picture of food table."></amp-img>
</div>
</pre>
</div>
</div>
<br />
Definamos los fotogramas clave para la transición de entrada/salida de desvanecimiento en espiral.<br />
<br />
Nos dirigimos a #cardImage y definimos keyframes de forma tal que la imagen gana opacidad completa dentro del primer 40% de la línea de tiempo y comienza a desvanecerse en el último 40% de la línea de tiempo.<br />
<br />
Tenga en cuenta que dado que el observador de posición que controla esta animación tiene una relación de intersección establecida en 0, pasamos por la línea de tiempo completa cuando el usuario despliega la cantidad de píxeles de ViewportHeight + 2 * SceneHeight.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<amp-animation id="fadeTransition"
layout="nodisplay">
<script type="application/json">
{
"duration": "1",
"fill": "both",
"direction": "reverse",
"animations": [{
"selector": "#cardImage",
"keyframes": [{
"opacity": "0.3",
"offset": 0
},
{
"opacity": "1",
"offset": 0.4
},
{
"opacity": "1",
"offset": 0.6
},
{
"opacity": "0.3",
"offset": 1
}
]
}]
}
</script>
</amp-animation>
</pre>
</div>
</div>
<br />
Para el efecto de deslizamiento hacia adentro/hacia afuera del título, solo definimos una animación de 500ms que moverá el título a lo largo del eje X.<br />
<br />
Esta animación simplemente se activará (en direcciones normales o inversas) a través del observador de la segunda posición cuando la escena sea mayormente visible/invisible.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<amp-animation id="slideTransition"
layout="nodisplay">
<script type="application/json">
{
"duration": "500ms",
"fill": "both",
"easing": "ease-out",
"iterations": "1",
"animations": [{
"selector": ".card-title",
"keyframes": [{
"transform": "translateX(-100%)"
},
{
"transform": "translateX(0)"
}
]
}]
}
</script>
</amp-animation>
</pre>
</div>
</div>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-77639531453200412402018-02-03T15:04:00.000-08:002018-02-03T15:08:54.522-08:00¿Cómo insertar animaciones Scrollbound en AMP HTML?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5R1aNnYcwBQGqx4sd-5LFVAkeJyCpw8yX3EWX1CI-TOPnwXFfuVYD7CHpxIdMal9DON7KLVhXtL-cFEJqrZpfyWIXqliN6_jUGvgVpnpyDOR2yo0L7nhuQes6HsVGjNXod7OjHbHei6VT/s1600/como-insertar-animaciones-scrollbound-en-amp-html.jpg" width="439" height="310" alt="¿Cómo insertar animaciones Scrollbound en AMP HTML?"/></noscript>
<br />
Fácil y seguro podrá agregar animaciones Scrollbound en el formato AMP HTML, a continuación las siguientes instrucciones<br />
<br />
Inserte la extencion amp-position-observer<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>
</pre>
</div>
</div>
<br />
Importe la extencion amp-animation<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b>Estilos</b><br />
<br />
El CSS utilizado para este ejemplo se incluye aquí como referencia.<br />
<br />
Estas reglas son simplemente necesarias para que las muestras funcionen, pero no son fundamentales para los conceptos que se tratan aquí.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<style amp-custom><br />
/* * Fidget Spinner styles */
.fidget-spinner-scene {
margin: 10px 20%;
}
</style>
</pre>
</div>
</div>
<br />
Vamos a crear una rueda giratoria que gira a medida que el usuario se desplaza por la página.<br />
<br />
Esta muestra el concepto central detrás de la combinación de amp-position-observer y amp-animation: la capacidad de avanzar a través de una línea de tiempo de animación de cuadro clave a medida que un elemento avanza a través de la ventana gráfica mediante el desplazamiento.<br />
<br />
Nuestra escena fidget spinner es un div con una imagen. Agregamos un elemento amp-position-observer como elemento secundario de la escena para monitorear su progreso a través de la ventana gráfica. Echemos un vistazo a los detalles:<br />
<br />
<b>on:scroll:</b> este evento es activado por el observador de posición ya que la posición de la escena cambia cuando el usuario se desplaza. El evento proporciona un valor porcentual (decimal entre 0 y 1) que representa qué tan lejos está la escena entre el inicio y el final de su progreso a través de la ventana gráfica.<br />
<br />
<b>spinAnimation.seekTo(percent=event.percent):</b> Definiremos amp-animation que hará el spinning en el siguiente paso, aquí estamos acoplando amp-position-observer y amp-animation activando una acción seekTo en la animación como eventos de desplazamiento. Así es como especificamos que nos gusta avanzar a través de la línea de tiempo de la animación a medida que la escena avanza a través de la ventana gráfica mediante el desplazamiento.<br />
<br />
<b>intersection-ratios:</b> Define qué parte de la escena debe ser visible en la ventana gráfica antes de que amp-position-observer active cualquiera de sus eventos. Aquí, nos gusta que el spinning suceda solo cuando fidget spinner esté completamente visible, así que lo configuramos en 1.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div class="fidget-spinner-scene">
<amp-position-observer on="scroll:spinAnimation.seekTo(percent=event.percent)"
intersection-ratios="1"
layout="nodisplay">
</amp-position-observer>
<amp-img id="fidgetSpinnerImage"
width="1024"
height="1114"
layout="responsive"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUHDeDpF0cl6rs-x3dc6LmOfAdmt66P8ifpXREvzMiPadfgjRasDq5QQBowvUK7MW4N9RgPq_YWtbVbNwTqJvRT-kYHfHi4YTnr-m0eWrYrpM5FwYO1l5d6uArkPT3bTEOpuL9mjef8wMl/s320/fidget-amp.png"
alt="Picture of a fidget spinner"></amp-img>
</div>
<amp-animation id="spinAnimation"
layout="nodisplay">
<script type="application/json">
{
"duration": "1",
"fill": "both",
"direction": "reverse",
"animations": [{
"selector": "#fidgetSpinnerImage",
"keyframes": [{
"transform": "rotate(360deg)"
}]
}]
}
</script>
</amp-animation>
</div>
<div class="fidget-spinner-scene">
<amp-position-observer on="scroll:spinAnimation.seekTo(percent=event.percent)"
intersection-ratios="1"
layout="nodisplay">
</amp-position-observer>
<amp-img id="fidgetSpinnerImage"
width="1024"
height="1114"
layout="responsive"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUHDeDpF0cl6rs-x3dc6LmOfAdmt66P8ifpXREvzMiPadfgjRasDq5QQBowvUK7MW4N9RgPq_YWtbVbNwTqJvRT-kYHfHi4YTnr-m0eWrYrpM5FwYO1l5d6uArkPT3bTEOpuL9mjef8wMl/s320/fidget-amp.png"
alt="Picture of a fidget spinner"></amp-img>
</div>
</pre>
</div>
</div>
<br />
<b>Ahora tenemos que definir la animación en sí misma:</b><br />
<br />
Bastante sencillo en este caso, queremos que fidgetSpinnerImage gire 360 grados, por lo que solo definimos una "transform": "rotate(360deg)" como el último (y único) fotograma clave. Echemos un vistazo a los detalles:<br />
<br />
<b>id="spinAnimation":</b> Necesitamos darle a la animación un Id para que podamos referenciarlo desde el observador de la posición.<br />
<br />
<b>"duration": "1":</b> el valor de la duración es irrelevante en este caso, ya que avanzamos a través de la línea de tiempo mediante el desplazamiento, así que simplemente lo configuramos en 1<br />
<br />
<b>"direction": "reverse": </b>esto es necesario debido a un error de iOS con Web Animations.<br />
<br />
<b>"animations":</b> aquí podemos definir una o más animaciones basadas en fotogramas clave. En nuestro caso, solo necesitamos uno.<br />
<br />
<b>"selector":</b> "#fidgetSpinnerImage" es el selector que se dirige al agitador fidget para la animación.<br />
<br />
<b>"keyframes":</b> definimos una "transform": "rotate(360deg)" como el último (y único) fotograma clave. Tenga en cuenta que la amp-animation llena automáticamente el primer fotograma clave si no se proporciona.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<amp-animation id="spinAnimation"
layout="nodisplay">
<script type="application/json">
{
"duration": "1",
"fill": "both",
"direction": "reverse",
"animations": [{
"selector": "#fidgetSpinnerImage",
"keyframes": [{
"transform": "rotate(360deg)"
}]
}]
}
</script>
</amp-animation>
</pre>
</div>
</div>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-45345863112069830992018-02-03T14:10:00.002-08:002018-06-07T08:00:18.266-07:00¿Cómo crear un Snackbar animado en AMP HTML?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5gVfA2QCrUhRtcU9CbwwXaVzoQA0NWuIIpvx_5Yi3AybxSN8FHrI9_Do3s81QfEvMd9PKc7JUqlo2fDFvctRSn-UQ7OrEHzBgqbKcXTKvNoPQQ6pui8hcZNCGt_dU9vS6NOiLSI3ugAg-/s1600/como-crear-un-snackbar-animado-en-amp-html.jpg" width="439" height="306" alt="¿Cómo crear un Snackbar animado en AMP HTML?"/></noscript>
<br />
Snackbars animados proporcionan comentarios breves sobre una operación a través de un mensaje en la parte inferior de la pantalla.<br />
<br />
Tendrá que uar amp-bind para activar la Snackbar<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</pre>
</div>
</div>
<br />
y amp-animation para mostrar y ocultar la Snackbar.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b>La animación</b><br />
<br />
Queremos mostrar un snackbar que desaparece después de unos segundos. Esto podría lograrse fácilmente agregando una clase de CSS usando amp-bind para mostrar la barra de Snackbar y luego usar animaciones CSS para ocultar la barra Snackbar después de unos segundos. Sin embargo, con este enfoque no es posible disparar el Snackbar varias veces (la clase CSS recién agregada no desaparece).<br />
<br />
Podemos resolver este problema utilizando la extensión amp-animation, permite ejecutar animaciones repetidamente. Definimos una animación que se deslizará en la barra de snack y luego la esconderá después de unos segundos utilizando el atributo de desplazamiento para sincronizar los diferentes fotogramas clave.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<amp-animation id="snackbarSlideIn"
layout="nodisplay">
<script type="application/json">
[{
"duration": "3s",
"fill": "both",
"easing": "ease-out",
"iterations": "1",
"selector": ".snackbar",
"keyframes": [{
"transform": "translateY(100%)"
},
{
"transform": "translateY(0)",
"offset": 0.1
},
{
"transform": "translateY(0)",
"offset": 0.9
},
{
"transform": "translateY(100%)"
}
]
}]
</script>
</amp-animation>
</pre>
</div>
</div>
<br />
<b>El Snackbar</b><br />
<br />
El snackbar es un div que contiene el mensaje. Desaparecerá después de unos segundos, por lo que no proporcionaremos botones adicionales para ocultar manualmente la barra. El mensaje de texto está vinculado a una variable amp-state para que su contenido sea configurable. Esto no es necesario si siempre debe mostrar el mismo mensaje.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<div class="snackbar"
[text]="message">
Hello World
</div>
</pre>
</div>
</div>
<br />
<b>The Trigger</b><br />
<br />
La animación de la barra de snacks se activa a través de la acción de reinicio "restart": on="tap:snackbarSlideIn.restart". Usamos la acción de reinicio para posibilitar la anulación de una animación ya activa. El campo de entrada simplemente actualiza la variable amp-state que contiene el mensaje de la barra.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-animation id="snackbarSlideIn"
layout="nodisplay">
<script type="application/json">
[{
"duration": "3s",
"fill": "both",
"easing": "ease-out",
"iterations": "1",
"selector": ".snackbar",
"keyframes": [{
"transform": "translateY(100%)"
},
{
"transform": "translateY(0)",
"offset": 0.1
},
{
"transform": "translateY(0)",
"offset": 0.9
},
{
"transform": "translateY(100%)"
}
]
}]
</script>
</amp-animation>
<div class="snackbar"
[text]="message">
Hello World
</div>
<div class="trigger">
<input on="input-debounced:AMP.setState({message: event.value})"
value="Hello World">
<button on="tap:snackbarSlideIn.restart">
Show Snackbar
</button>
</div>
</div>
<div class="trigger">
<input on="input-debounced:AMP.setState({message: event.value})"
value="Hello World">
<button on="tap:snackbarSlideIn.restart">
Show Snackbar
</button>
</div>
</pre>
</div>
</div>
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-49621852924453287352018-01-15T18:31:00.001-08:002018-06-07T08:00:18.276-07:00¿Cómo agregar una URL a una imagen con AMP?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5nseQDhSDFkxYmegQn2cGrw_sAjDBEtarYwR72s6_Pj6B-RfyTSfC3xutNHzE4g0ldp9Sg-zwr3whsAcmo-QpNVTPIq8vDVpOfyxJ5fokkIh4LfSj6fFuDW3Bc2G41VDbqjBcLzio6J_a/s1600/como-crear-una-imagen-con-un-link-en-amp-html.jpg" width="606" height="410" alt="¿Cómo agregar una URL a una imagen con AMP?"/></noscript>
<br />
Con frecuencia se utilizan imágenes con enlaces dirigidas a otras publicaciones, por lo general es fácil de realizarlo en el formato AMP HTML.<br />
<br />
Es tan simple como usar la imagen como contenido del enlace<br />
<br />
A continuación el Ejemplo<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<a href="https://www.amphtmlenespanol.com/2017/08/insertar-videos-de-vine-en-amp-html.html" target="_blank">
<amp-img alt="AQUÍ UNA DESCRIPCION DE LA IMAGEN" height="427" layout="responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiipQGAUNHjTQ5CTc4-LvvbwtyWloGZviDnVHMGkYRI2Cg0Yj5PO11ar-2duDYx3KGd_0HiQQYiDrzEcp2JM_O4q0KBX3GK6i6rI26h1wLmrUkfGy8ghSxRTWUPKnEMAtJDF8P5de2BAt7m/s1600/como-crear-una-imagen-con-un-link-en-amp-html.jpg" width="635"></amp-img></a>
</div>
<a href="INGRESE AQUÍ LA DIRECCIÓN URL DE LA PAGINA POST ETC" target="_blank">
<amp-img alt="AQUÍ UNA DESCRIPCION DE LA IMAGEN" height="320" layout="responsive" src="INGRESE AQUÍ LA DIRECCIÓN URL DE SU IMAGEN" width="500"></amp-img></a>
</pre>
</div>
</div>
<br />
<b class="p-large">Instructivo</b><br />
<br />
<div class="container">
<div class="col col-6">
<div class="box-material-big">
<div class="box-material-small b-m-color">
<h2 class="box-m-s-txt">
width="500" Es su altura </h2>
</div>
</div>
</div>
<div class="col col-6">
<div class="box-material-big">
<div class="box-material-small b-m-color">
<h2 class="box-m-s-txt">
height="320" Es su anchura </h2>
</div>
</div>
</div>
</div>
<br/>
<span class="color-cafe">¡Fácil verdad!</span><br />
<br />
Cualquier pregunta no duden en escribir<br />
<br />
Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-31935813085936680232018-01-09T13:23:00.003-08:002018-01-09T13:23:36.774-08:00Mejora de URL para páginas AMP<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgXOGF2pwr5IeaJC_9jOUqqrORANLNCCNsVeL2rdUcuNV8ZKk7NZVI9xBV2k8jySAZGw1ugJAqQlC440cAzKVR-peDASTr1Vx2QyQUeIaO1qRZ1U1AgqeSb4SJPsjk48wgwFN7QM1ddZu9/s1600/mejora-de-url-para-paginas-amp.jpg" width="698" height="411" alt="Mejora de URL para páginas AMP"/></noscript>
<br />
Estamos haciendo cambios en cómo funciona AMP en plataformas como la Búsqueda de Google que permitirá que las páginas enlazadas aparezcan en las URL de los editores en lugar del espacio URL de google.com/amp mientras se mantienen los beneficios de rendimiento y privacidad de la memoria caché de AMP. .<br />
<br />
Cuando lanzamos AMP en la Búsqueda de Google, hicimos una gran compensación: para lograr la experiencia del usuario que los usuarios nos decían que querían, carga instantánea, necesitábamos comenzar a cargar la página antes de que el usuario hiciera clic. Como detallamos en una publicación de <a href="https://developers.googleblog.com/2017/02/whats-in-amp-url.html" target="_blank">blog</a> profunda el año pasado, las razones de privacidad hacen que sea básicamente imposible cargar la página desde el servidor del editor. Los editores no deberían saber qué les interesa a las personas hasta que accedan activamente a sus páginas. En cambio, las páginas de AMP se cargan desde Google AMP Cache, pero con ese comportamiento las URL se cambiaron para incluir el prefijo de la URL google.com/amp/.<br />
<br />
Somos grandes admiradores de URL significativas y reconocemos que esto no es ideal. Muchos de ustedes están de acuerdo. Sin duda es la pieza número 1 de comentarios que escuchamos sobre AMP. Intentamos asegurarnos de que estas URL aparezcan en el menor número de lugares posible. Con el tiempo, nuestras aplicaciones nativas de Búsqueda de Google en Android e iOS comenzaron a mostrar de manera predeterminada las URL de los editores y trabajamos con los proveedores de los navegadores para compartir la URL del editor de un artículo siempre que fuera posible. Sin embargo, no pudimos corregir el estado de las URL donde más importa: en la web y en la barra de URL del navegador.<br />
<br />
Nos embarcamos en un esfuerzo prolongado de varios meses, y hoy por fin confiamos en que encontramos una solución: como recomienda el <a href="https://www.w3.org/2001/tag/doc/distributed-content/" target="_blank">W3C TAG</a>, tenemos la intención de implementar una nueva versión de AMP Cache basada en el <a href="https://github.com/WICG/webpackage" target="_blank">estándar</a> emergente de <a href="https://github.com/WICG/webpackage" target="_blank">Web Packaging</a>.. Basado en este estándar web, las navegaciones de AMP de la Búsqueda de Google pueden aprovechar la precarga y el rendimiento de los servidores de Google, mientras que las URL permanecen como pretendía el editor y el contexto de seguridad principal de la web, el origen, permanece intacto. Hemos creado un prototipo basado en el navegador Chrome y una versión experimental de la Búsqueda de Google para asegurarnos de que realmente ofrece tanto el UX deseado como el rendimiento en casos de uso real. Este paso nos da la confianza de que tenemos una solución prometedora para este problema difícil y que pronto se convertirá en la forma en que los usuarios se encontrarán con el contenido de AMP en la web.<br />
<br />
Los siguientes pasos se están moviendo hacia la implementación completa del nuevo estándar web en los navegadores web y en Google AMP Cache. Nuestro objetivo es que Web Packaging esté disponible en tantos navegadores como sea posible (después de todo, Web Packaging tiene casos de uso interesantes más allá de AMP, como páginas fuera de línea, carga de módulo ES6 y agrupación de recursos). En particular, pretendemos ampliar el trabajo existente en <a href="http://frederic-wang.fr/amp-and-igalia-working-together-to-improve-the-web-platform.html" target="_blank">WebKit</a> para incluir la implementación de Web Packaging y la implementación del equipo de Google Chrome está comenzando.<br />
<br />
Estamos muy entusiasmados con la puesta en marcha de este trabajo y esperamos que los cambios lleguen a los usuarios por primera vez en la segunda mitad de 2018. Gracias por todos sus comentarios sobre el asunto y los mantendremos informados sobre el progreso aquí en este ¡Blog!<br />
<br />
<a href="https://twitter.com/cramforce" target="_blank">Malte Ubl</a> , Tech Lead para el Proyecto AMP en Google.<br />
<br />
<b>Este artículo fue tomado del siguiente enlace:</b> <a href="https://www.ampproject.org/latest/blog/improving-urls-for-amp-pages/" target="_blank">https://www.ampproject.org/latest/blog/improving-urls-for-amp-pages/</a><br />
<br />Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-33504794379855543602017-08-26T19:08:00.001-07:002018-06-07T08:00:18.259-07:00¿Cómo insertar videos de Vine en Amp HTML?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijohPA0ouVjj-D-ZTWEVvRKs9dHmKqSQRVQ0JZlAeKEY2jODPzt1oBxe0dSknzaejyeWBAkXa4e7V0qmugCdLzo88DaoFeqGZ0-x3nDSoYVmDSC35IJlz-Mzqa7jWtIKwWpYjYXSfvYfPF/s1600/Amp-en-Espanol-Como-insertar-videos-de-Vine-en-Amp-HTML.jpg" width="584" height="359" alt="Amp en Español - ¿Cómo insertar videos de Vine en Amp HTML?"/></noscript>
De una forma fácil y segura podrá implementar los videos de Vine en el formato Amp HTML. Básicamente con la ayuda de unos simples códigos se puede insertar fácilmente los videos de Vine en su sitio web bajo el formato de Amp HTML.<br />
<br />
<b class="color-verde">Puede ver el ejemplo en la siguiente página</b><br />
<div id="ayudadeblogger">
<a class="adb-slide" href="http://www.ayudadeblogger.com/" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Clic aquí</span>
</a>
</div>
<center>
<b class="large">Video tutorial</b><br />
</center>
<br />
<br />
<b class="p-large">Empezamos</b><br />
<br />
Inserte el siguiente script justo después de la apertura <b><head></b><br />
<br />
<div class="amp-example">
<h3>Ejemplo</h3>
<div class="amp-code">
<script async custom-element="amp-vine" src="https://cdn.ampproject.org/v0/amp-vine-0.1.js"></script>
</div>
</div>
<br />
Ahora inserte el siguiente código donde quiera dar a conocer el video<br />
<br />
<div class="amp-example">
<h3>Ejemplo</h3>
<div class="amp-code">
<amp-vine width="400"<br />
height="400"<br />
data-vineid="<b class="fondo-amarillo">MdKjXez002d</b>"><br />
</amp-vine><br />
</div>
</div>
<br />
<b>Realice el siguiente cambio:</b><br />
<br />
Elimine el código ID que está marcado de color amarillo, remplácelo por el Id del video de Vine<br />
<br />
<b class="p-large">Código video de Vine responsive</b><br />
<br />
<div class="amp-example">
<h3>Ejemplo</h3>
<div class="amp-code">
<amp-vine width="1"<br />
height="1"<br />
layout=responsive<br />
data-vineid="<b class="fondo-amarillo">MdKjXez002d</b>"><br />
</amp-vine><br />
</div>
</div>
<br />
Eso es todo<br />
<br />
Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-64341314962351529392017-05-27T13:02:00.003-07:002017-05-27T13:06:23.119-07:00Instrucciones amp-access<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1NS7F3tAra0FZ7nBCREJr4DfVtI9cA2z_Ecxbef8E02J57tNyYGMoLzSyhRXoBix6x5-tSK0QSTse7hV9ymvV8Pgb8Kn2mXaFxBuJrX9iJGPRCInWhNYk-AUwgVXNiMh9fM3BbisAGjQn/s1600/agregar-amp-access.png" width="600" height="350" alt="Instrucciones amp-access"/></noscript>
<br />
<center>
<h2>
<b>amp-access</b></h2>
</center>
<br />
<div class="adb-justificar">
El componente amp-access agrega soporte para los paywalls y suscripciones a AMP, permitiendo al editor controlar qué contenido es accesible por el lector y con qué restricciones.<br />
<br />
Para los puntos finales del servidor amp-access, consulte el proyecto <a href="https://github.com/ampproject/amp-publisher-sample" target="_blank">amp-publisher-sample</a>.<br />
<br />
<b>Agregar</b><br />
<br />
Importe el componente amp-access justo después de la apertura <head><br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>
</pre>
</div>
</div>
<br />
amp-access requiere del componente amp-analytics<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</pre>
</div>
</div>
<br />
Opcionalmente, utilice el componente amp-mustache para mostrar texto con los valores reemplazados de la respuesta de autorización<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</pre>
</div>
</div>
<br />
Agregue la configuración <b>authorization</b>, <b>pingback</b> y los puntos finales de login. Proporcionamos dos puntos finales de inicio de sesión, uno para iniciar sesión y otro para cerrar sesión. También es posible crear una respuesta de fallback que se utilizará si la autorización falla con el atributo <b>authorizationFallbackResponse</b>.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script id="amp-access" type="application/json">
{
"authorization": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
"pingback": "https://ampbyexample.com/components/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
"login": {
"sign-in": "https://ampbyexample.com/components/amp-access/login?rid=READER_ID&url=CANONICAL_URL",
"sign-out": "https://ampbyexample.com/components/amp-access/logout"
},
"authorizationFallbackResponse": {
"error": true,
"access": false,
"subscriber": false
}
}
</script>
</pre>
</div>
</div>
<br />
Esta sección es visible para todos los usuarios. En este caso no se necesita ninguna marca especial.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<section>
<h3>The Article</h3>
<p>
This is a preview of the article.
</p>
</section>
</div>
<section>
<h3>The Article</h3>
<p>
This is a preview of the article.
</p>
</section>
</pre>
</div>
</div>
<br />
Utilice el atributo <b>amp-access</b> para controlar la visibilidad de cada componente. La expresión debe evaluar a un valor booleano. Si se evalúa como <b>TRUE</b>, se mostrará la sección.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<section amp-access="access">
<p>This section is visible to users if the authorization response contains:
<code>"access": true</code>. This is usually the main content of the article.</p>
</section>
</div>
<section amp-access="access">
<p>This section is visible to users if the authorization response contains:
<code>"access": true</code>. This is usually the main content of the article.</p>
</section>
</pre>
</div>
</div>
<br />
Esta sección sólo se muestra si el valor del atributo de <b>access</b> en la respuesta para las solicitudes de autorización se evalúa como <b>FALSE</b><br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<section amp-access="NOT access">
<p>This section is only visible to users if the authorization response does not contain
<code>access</code> or contains
<code>"access": false</code>.</p>
</section>
</div>
<section amp-access="NOT access">
<p>This section is only visible to users if the authorization response does not contain
<code>access</code> or contains
<code>"access": false</code>.</p>
</section>
</pre>
</div>
</div>
<br />
Es posible combinar dos valores en la expresión de evaluación. Revise los documentos para obtener más información sobre la <a href="https://www.ampproject.org/docs/reference/components/amp-access#appendix-a-amp-access-expression-grammar" target="_blank">Gramática de Expresión</a><br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<div amp-access="access AND NOT subscriber">
<p>This section is only visible to users with
<code>"access": true</code> and
<code>"subscriber": false</code>
</p>
</div>
</div>
<div amp-access="access AND NOT subscriber">
<p>This section is only visible to users with
<code>"access": true</code> and
<code>"subscriber": false</code>
</p>
</div>
</pre>
</div>
</div>
<br />
Combine el amplificador <b>amp-access</b> y amp-mustache para mostrar la información devuelta de la solicitud de autorización. En este caso mostraremos el nombre de usuario devuelto en la respuesta de autenticación.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<section amp-access="subscriber">
<template amp-access-template
type="amp-mustache">
Hello {{name}}!
</template>
</section>
</div>
<section amp-access="subscriber">
<template amp-access-template
type="amp-mustache">
Hello {{name}}!
</template>
</section>
</pre>
</div>
</div>
<br />
Use <b>on="tap:amp-access.login-sign-in"</b> para abrir el diálogo de inicio de sesión cuando se hace clic en el elemento.<br />
<br />
<b>amp-access-hide</b> predeterminará el componente que se va a ocultar y habilitará más adelante si la expresión de <b>amp-access</b> amperio se evalúa como <b>TRUE</b><br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<section class="p1"
amp-access="NOT subscriber"
amp-access-hide
role="button"
tabindex="0">
<a class="ampstart-btn caps"
on="tap:amp-access.login-sign-in">Login</a>
</section>
</div>
<section class="p1"
amp-access="NOT subscriber"
amp-access-hide
role="button"
tabindex="0">
<a class="ampstart-btn caps"
on="tap:amp-access.login-sign-in">Login</a>
</section>
</pre>
</div>
</div>
<br />
El enlace de cierre de sesión sólo se mostrará para los suscriptores registrados. Utilizamos un truco aquí: el logout es una acción de inicio de sesión que redirige directamente a la URL original. Esto tiene la ventaja de que la página se actualiza sin ser recargada.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<section class="p1"
amp-access="subscriber"
amp-access-hide
role="button"
tabindex="0">
<a class="ampstart-btn caps"
on="tap:amp-access.login-sign-out">Logout</a>
</section>
</div>
<section class="p1"
amp-access="subscriber"
amp-access-hide
role="button"
tabindex="0">
<a class="ampstart-btn caps"
on="tap:amp-access.login-sign-out">Logout</a>
</section>
</pre>
</div>
</div>
<br />
Compruebe la muestra oficial de <a href="https://rocky-sierra-1919.herokuapp.com/" target="_blank">amp-access</a> para obtener demostraciones de conteo de primer clic y de visualización.<br />
<br />
<br /></div>
Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-8315412509335890792017-05-27T11:02:00.002-07:002017-05-27T11:05:42.059-07:00Instrucciones ¿Agregar amp-accordion?<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPt-PK_ErubtJSJ2Qp6iDIVIQXx7G2LFZVe052Au2dMNaIIOWdOPdgKSEKHsDZnh2sbKLrC2WGCrOfIcAvMt2YgQJJSpWDfBQdYcUb5D3-cliak3UIzrWc-VKQ6FDizz42aTDUoBxPch1I/s1600/agregar-amp-accordion.png" width="600" height="350" alt="Instrucciones ¿Agregar amp-accordion?"/></noscript>
<br />
<center>
<h2>
<b>amp-accordion</b></h2>
</center>
<br />
<div class="adb-justificar">
Un acordeón proporciona una manera para que los espectadores tengan una mirada en el contorno del contenido y salten a una sección o su opción en su voluntad.<br />
<br />
<b>Agregar</b><br />
<br />
Importe el componente amp-accordion justo después de la apertura <head><br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b>Uso básico</b><br />
<br />
Cada uno de los componentes amp-accordion se considera una sección en el acordeón. Cada uno de estos nodos debe ser una etiqueta <b><section></b>. Cada <b><section></b> debe contener sólo dos hijos directos. El primer hijo (de la sección) será considerado como el encabezamiento de la sección. Al hacer clic / pulsar en esta sección, se disparará el comportamiento de expansión / contracción. Utilice el atributo <b>disable-session-states</b> para deshabilitar la preservación del estado de acordeón en una sesión.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-accordion>
<section expanded>
<h4>Section 1</h4>
<p>Bunch of awesome content.</p>
</section>
<section>
<h4>Section 2</h4>
<div>Bunch of even more awesome content. This time in a
<code><div></code>.</div>
</section>
<section>
<h4>Section 3</h4>
<figure>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLKXsj9t1lbfdY9VBBmpqqVOmA3uxTL4urLxm5opNuGxb7s_skxi81OFk200wRA4MaPl_ZV3qOunsQiQVRI0-8bDefxDSJOLGDKe2dbhXjE9pkmpYHbfM28eNvQ02RRvaZgW8D7aqP0XxO/s1600/Proyecto-amp-html-en-espanol.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"></amp-img>
<figcaption>Images work as well.</figcaption>
</figure>
</section>
</amp-accordion>
</div>
<amp-accordion>
<section expanded>
<h4>Section 1</h4>
<p>Bunch of awesome content.</p>
</section>
<section>
<h4>Section 2</h4>
<div>Bunch of even more awesome content. This time in a
<code>&lt;div&gt;</code>.</div>
</section>
<section>
<h4>Section 3</h4>
<figure>
<amp-img src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"></amp-img>
<figcaption>Images work as well.</figcaption>
</figure>
</section>
</amp-accordion>
</pre>
</div>
</div>
<br />
<b>Estilizar el acordeón</b><br />
<br />
amp-accordion añade el atributo <b>expanded</b> a cualquier elemento expandido. Puede utilizar <a href="https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors" target="_blank">selectores de atributos CSS </a>para diseñar una sección de acordeón en función de si se ha expandido o contraído. Utilice la <b>section[expanded]</b> para diseñar el estado expandido y la <b>section:not([expanded])</b> para diseñar el estado de colapsado<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
amp-accordion section[expanded] .show-more {
display: none;
}
amp-accordion section:not([expanded]) .show-less {
display: none;
}
</pre>
</div>
</div>
<br />
Este ejemplo muestra un título diferente basado en si la sección está expandida o no.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-accordion disable-session-states>
<section>
<h4>
<span class="show-more">Show more</span>
<span class="show-less">Show less</span>
</h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
in eu wisi. </p>
</section>
</amp-accordion>
</div>
<amp-accordion disable-session-states>
<section>
<h4>
<span class="show-more">Show more</span>
<span class="show-less">Show less</span>
</h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
in eu wisi. </p>
</section>
</amp-accordion>
</pre>
</div>
</div>
<br />
Aquí hay otro ejemplo, que oculta el botón "Mostrar más" una vez que se ha hecho clic.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-accordion id="hidden-header"
disable-session-states>
<section>
<h4>
<span class="show-more">Show more</span>
</h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
in eu wisi. </p>
</section>
</amp-accordion>
</div>
<amp-accordion id="hidden-header"
disable-session-states>
<section>
<h4>
<span class="show-more">Show more</span>
</h4>
<p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
in eu wisi. </p>
</section>
</amp-accordion>
</pre>
</div>
</div>
<br />
<b>Acordeones anidados</b><br />
<br />
Incluso puede anidar múltiples acordeones. Sólo asegúrese de evitar elementos de estilo basado en el estado expandido del amplificador de acordeón incluido. En particular, evite reglas demasiado genéricas como:<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
section[expanded] h4 {
...
}
</pre>
</div>
</div>
<br />
En lugar de los elementos directamente objetivo:<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
section[expanded] > h4 {
...
}
</pre>
</div>
</div>
<br />
Un acordeón anidado:<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-accordion disable-session-states>
<section>
<h4>Section 1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Section 2</h4>
<amp-accordion class="nested-accordion">
<section>
<h4>Nested Section 2.1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Nested Section 2.2</h4>
<p>Bunch of more content.</p>
</section>
</amp-accordion>
</section>
</amp-accordion>
</div>
<amp-accordion disable-session-states>
<section>
<h4>Section 1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Section 2</h4>
<amp-accordion class="nested-accordion">
<section>
<h4>Nested Section 2.1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Nested Section 2.2</h4>
<p>Bunch of more content.</p>
</section>
</amp-accordion>
</section>
</amp-accordion>
</pre>
</div>
</div>
<br /></div>
Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.comtag:blogger.com,1999:blog-5979800564185403334.post-49473731737290547152017-05-27T10:34:00.003-07:002017-05-27T10:34:43.694-07:00Agregar amp-ad<noscript><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCg-yFV6zeX6KYQa5JrwLDJBvgLYQUhhUQ5ePQoQ0eWApkhEclruHpbVOh7zwt4btzKnVTv19WSkOsGNVRf54k3JlwiCVoyCKZ5RzunpVRwMMsMMSiKvsgKWprXIexZi6twAS37AeDnEG/s1600/agregar-amp-ad.png" width="600" height="350" alt="Agregar amp-ad"/></noscript>
<br />
<center>
<h2>
<b>amp-ad</b></h2>
</center>
<br />
<div class="adb-justificar">
Cómo mostrar anuncios en los archivos HTML de AMP.<br />
<br />
<b>Agregar</b><br />
<br />
Importe el componente amp-ad justo después de la apertura <head><br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre><script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
</pre>
</div>
</div>
<br />
<b>Uso básico</b><br />
<br />
amp-ad requiere valores de width y height. Seleccione una red de anuncios a través del argumento de tipo.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-ad width="300"
height="250"
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
</div>
<amp-ad width="300"
height="250"
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
</pre>
</div>
</div>
<br />
<b>Uso de marcadores de posición</b><br />
<br />
Opcionalmente, <b>amp-ad</b> admite un elemento <b>placeholder</b> con el marcador de posición. Si la red de anuncios lo admite, se muestra este elemento hasta que el anuncio esté disponible para su visualización.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-ad width="300"
height="200"
type="doubleclick"
data-slot="/4119129/doesnt-exist">
<div placeholder>
<b>Placeholder here!!!</b>
</div>
</amp-ad>
</div>
<amp-ad width="300"
height="200"
type="doubleclick"
data-slot="/4119129/doesnt-exist">
<div placeholder>
<b>Placeholder here!!!</b>
</div>
</amp-ad>
</pre>
</div>
</div>
<br />
<b>Uso de alternativas</b><br />
<br />
amp-ad es compatible con un elemento secundario con el atributo <b>fallback</b>. Si está soportado por la red de anuncios, este elemento se muestra si no hay ningún anuncio disponible para esta ranura.<br />
<br />
<div class="abe-code-preview ampstart-card mb1">
<div class="abe-code">
<pre>
Ejemplo
<div class="abe-preview fit mb1">
<amp-ad width="300"
height="200"
type="doubleclick"
data-slot="/4119129/doesnt-exist">
<div fallback>
<p>Thank you for trying AMP!</p>
<p>You got lucky! We have no ad to show to you!</p>
</div>
</amp-ad>
</div>
<amp-ad width="300"
height="200"
type="doubleclick"
data-slot="/4119129/doesnt-exist">
<div fallback>
<p>Thank you for trying AMP!</p>
<p>You got lucky! We have no ad to show to you!</p>
</div>
</amp-ad>
</pre>
</div>
</div>
<br />
Para obtener más muestras de anuncios, consulte la <a href="https://dfp-amp-testing-1185.appspot.com/" target="_blank">página de prueba de anuncios de DFP</a>.<br />
<br />
<br /></div>
Ayudadebloggerhttp://www.blogger.com/profile/06229631744024418938noreply@blogger.com