• viernes, 23 de febrero de 2018

    Google Lanzará AMP Stories, aprende a desarrollarlos



    Entre los muchos increíbles anuncios que se hicieron durante el AMP-Conf 2018 en Amsterdam, se encuentra la presentación de AMP Stories, un nuevo formato orientado a competir con Snapchat e Instagram Stories, implementado a través de un nuevo componente de páginas móviles aceleradas (AMP).

    AMP Stories, a diferencia de Snapchat Stories e Instagram Stories, se encontrará en una página de resultados de Google (SERP). Estos ofrecerán a los usuarios una experiencia de visualización de imágenes enriquecidas con otros elementos digitales como video, audio y texto.

    Para explicarlo mejor, aquí hay un video que explica de una manera muy gráfica, el formato de AMP Stories:



    El componente amp-story aún se encuentra en etapa "experimental" y de desarrollo, y debe estar habilitado para el usuario dentro del canal Dev de AMP para comenzar. Aunque un selecto grupo de editores preaprobados, en los cuales encontramos a Microsoft, Wired y CNN, ya han estado experimentando con el formato para ofrecer una prueba a los usuarios.

    Así que si deseas ver como se verá en un futuro los AMP Stories puedes ingresar desde tu móvil a g.co/ampstories y buscar "Wired" dentro de los resultados se mostrarán una serie de historias de AMP que la revista Wired ha diseñado para su sitio web.



    Si tu también quieres probar AMP Stories para tu web-site, puedes realizar una solicitud aquí y unirte a todos aquellos que ya lo están haciendo.

    Ventajas de AMP Stories


    Hay varias ventajas para AMP Stories en comparación con Instagram y Snapchat:

    • Funcionará con la búsqueda de Google, es decir que probablemente reflejará la intención basada en palabras clave, es decir que tendrán un alcance mucho más grande que en las redes sociales.
    • Es apto para secuencias de comandos, para la creación de historias completas o semi-automatizada.


    Tu primera historia de AMP


    La base de una historia de AMP es, como cabría esperar, una página de AMPHTML.

    <!doctype html>
    <html amp lang="en">
      <head>
        <meta charset="utf-8">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <title>Hello, AMPs</title>
        <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <script type="application/ld+json">
          {
            "@context": "http://schema.org",
            "@type": "NewsArticle",
            "headline": "Open-source framework for publishing content",
            "datePublished": "2015-10-07T12:02:41Z",
            "image": [
              "logo.jpg"
            ]
          }
        </script>
        <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>
      </head>
      <body>
        <h1>Welcome to the mobile web</h1>
      </body>
    </html>
    


    Puedes usar una plantilla repetitiva como la de arriba como punto de partida.

    Como amp-story es un componente extendido de AMP, deberás agregar una línea de javascrpt dentro del :



    En este punto, estamos listos para comenzar a construir realmente el AMP Story.

    Estructura básica de AMP Story


    Hay tres etiquetas principales que componen una historia de AMP, y las empareja para crear una experiencia general:

    1. <amp-story>
    2. <amp-story-page>
    3. <amp-story-grid>


    La etiqueta contenedora es <amp-story>, mientras que <amp-story- page> y <amp-story -grid> harán parte del contenido de la primera etiqueta .Por ende, solo existirá una etiqueta <amp-story> en una página determinada de lenguaje de marcado de hipertexto (HTML).

    Como era de esperar, <amp-story-page> representa una sola historia dentro de AMP Stories, y como probablemente tenga varias historias, entonces tendrás varias etiquetas <amp-story-page>.

    Por último, dentro de cada <amp-story-page> tendrá una o varias etiquetas , una etiqueta basada en diseños de CSS Grid, utilizada para organizar los diversos elementos dentro de cada diapositiva individual.

    Ese es el concepto básico detrás de la construcción de tu primera historia en AMP. Ahora profundicemos un poco más en algunas de las configuraciones y opciones adicionales disponibles.

    <amp-story>


    Comenzamos con un elemento <amp-story> y su etiqueta de cierre <-/amp-story>. Este será el único elemento permitido dentro del de nuestra página HTML.

    Necesitamos agregar el atributo independiente, un requisito de <amp-story> , y luego hay varios atributos opcionales que se pueden agregar además:

    • bookend-config-src: Podemos usar esto para especificar un punto final de notación de objeto JavaScript (JSON) que brinde información sobre las opciones de uso compartido de redes sociales y los enlaces relacionados que se encontrarán en la pantalla final de la historia de AMP.
    • background-audio: Podemos especificar un archivo de audio que se reproducirá durante toda la experiencia de la historia. Esto puede ser un archivo MP3.


    Al final, la etiqueta <amp-story> puede verse más o menos así:



    <página de amp-story>


    Necesitamos una <amp-story-page> para cada historia. Cada elemento tiene un atributo id requerido, que debe tener un valor único para cada página.

    Luego hay dos atributos opcionales que podemos elegir si incluir o no:

    • auto-advance-after: Configuramos una unidad de tiempo, forzando una única historia para avanzar automáticamente. Por ejemplo, si configuramos auto-advance-after = "5s" , después de que hayan transcurrido cinco segundos, la historia de AMP avanzará a la siguiente.
    • background-audio. Podemos establecer un archivo de audio para reproducir mientras vemos esa historia en particular, a diferencia del atributo utilizado en el nivel <amp-story> que se reproducirá durante toda la experiencia de la historia de AMP.


    Eso puede verse así:



    Ahora que tenemos uno o más elementos de <amp-story-page>, podemos comenzar a especificar sus contenidos. Podemos usar otros elementos dentro de <amp-story-page> como <h2>, <p> , y el elemento especial <amp-story-grid> . Estos elementos tienen capas ascendentes, con la primera capa en el modelo de objetos del documento (DOM) en la parte inferior y la última en la parte superior.

    Cada uno de estos elementos dentro de <amp-story-page> tiene la capacidad de tener su propia animación distinta aplicada a él con uno de varios atributos de animación:

    • Anímate-in: Si vas a animar un elemento, esto es obligatorio, ya que representa una animación de entrada. Hay animaciones predefinidas que se pueden especificar como valores.
    • Anímate-in-duration: Puedes indicar una unidad de tiempo y especificar la duración de la animación.
    • animate-in-delay: Puedes detener el inicio de una animación especificando una unidad de tiempo.
    • Anímate-in-delay: Puedes usar esto para indicar el orden de las animaciones en una secuencia dentro de una <amp-story-page>.


    Todo esto se vería así:



    En el ejemplo anterior, estamos utilizando dos elementos de <amp-story-grid> . El primero usa la plantilla de relleno para mostrar una imagen de pantalla completa como fondo. El segundo utiliza la plantilla vertical para apilar un título y un subtítulo en la parte superior de esa imagen. Este es un ejemplo simple, pero definitivamente puedes hacer capas mucho más interesantes y complejas usando <amp-story-grid>.

    El punto final del archivo JSON delimitador


    Lo último que vale la pena mencionar es que podemos crear un punto final JSON, llamado delimitador, que nos permite especificar algún contenido para mostrar en la última historia.

    También se puede usar para especificar qué opciones de Share en redes sociales están disponibles para la historia de AMP. Su configuración es bastante sencilla si estás familiarizado con JSON.

    0 comentarios:

    Publicar un comentario