Historias web (Google Web Stories)
Actualizado: 13 de diciembre del 2023 a las 03:30
Por: Norfi Carrodeguas
Por: Norfi Carrodeguas
Lista de las páginas en formato de historias para el móvil, creadas con contenido de amor, religioso o técnico, enlazadas a las páginas más populares.
Esta página contiene el índice con los enlaces a las historias que se van creando en este sitio con contenido relacionado.
El formato de historias web es creado para simplificar el facilitar el consumo de contenido, adaptado a dispositivos móviles.
Las historias publicadas en este sitio usan el formato de Google Web Stories, similares a las de Instagram, Pinterest y otras redes sociales.
Lea más abajo sobre las Google Web Stories y si es un emprendedor conozca como puede crear las suyas propias, usando un software o manualmente editando el código. También comparto el código HTML para crear una Web Storie de ejemplo, solo copiando pegando texto y un tutorial más completo.
Historias
Mensajes de saludo
❀ Mensaje de saludo para un nuevo día
❀ Mensaje de buenos días para la distancia
❀ Mensaje de buenas noches
❀ Buenos días amor, mensaje para mi pareja
❀ Mensaje de buenos días para la distancia
❀ Mensaje de buenas noches
❀ Buenos días amor, mensaje para mi pareja
Mostrar historias
Historias de amor
Mostrar historias
Cristianas
🙏 Historia del nacimiento de Jesús
🙏 Oración a la Virgen de Guadalupe
🙏 Oración a la Inmaculada Concepción
🙏 Oración a Santa Bárbara
🙏 Que Dios te bendiga - Mensaje de amor cristiano
🙏 Oración a la Virgen de la Medalla Milagrosa
🙏 Oración a la Virgen de Chiquinquirá
🙏 Oración a la Virgen de Guadalupe
🙏 Oración a la Inmaculada Concepción
🙏 Oración a Santa Bárbara
🙏 Que Dios te bendiga - Mensaje de amor cristiano
🙏 Oración a la Virgen de la Medalla Milagrosa
🙏 Oración a la Virgen de Chiquinquirá
Mostrar historias
¿Qué son las Google Web Stories?
Las Web Stories son páginas web que se reproducen a pantalla completa en móviles y que pueden incluir imágenes, videos, audio y texto.Usan el formato AMP, con una plantilla diseñada para ver a pantalla completa su contenido y facilitar la navegación entre las distintas páginas.
¿Como crear las Web Stories?
Hay varias formas de crear una historia web de Google, hay bastante información en las Herramientas para creadores de Google.La primera de ellas es usar programas que facilitan su creación, edición y distribución.
Es imprescindible un editor visual.
Las tres alternativas más populares son las siguientes:
1- El plugin Web Stories de Wordpress. Posee plantillas y facilita la creación arrastrando y soltando elementos.
2- MakeStories, de pago (https://makestories.io/).
3- NewsroomAI, de pago (https://www.nws.ai/)
El segundo método es hacerlo manualmente, editando el código HTML con un editor de texto plano como Notepad++
Si desea probar el funcionamiento de una Web Storie, le ofrezco un código para copiar y pegar, que le permite crear una sencilla y probar su funcionamiento.
Si se anima, le comparto el enlace de un archivo que contiene varios elementos para crear una Web Storie más compleja, pero más completa y funcional.
Siga leyendo.
Plantilla para crear una Web Storie de Google
Con el siguiente código de ejemplo se puede crear un archivo html en formato AMP, que funciona como una historia web de 3 páginas.Simplemente copie el código y péguelo en un archivo de texto que puede crear en el escritorio.
Guarde los cambios, dele cualquier nombre, pero con la extensión de archivo .HTML, en vez de la tradicional TXT.
Mostrar código
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Historia</title>
<link rel="canonical" href="historia.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
amp-story {font-family: sans-serif;color: #fff;}
amp-story-page {background-color: #000;}
h1 {font-weight: bold;font-size: 2.875em;font-weight: normal;line-height: 1.174;}
p {font-weight: normal;font-size: 1.3em;line-height: 1.5em;color: #fff;}
amp-story-grid-layer.centertext{align-content: center;}
</style>
<script async custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
</head>
<body>
<amp-story standalone
title="Historia"
publisher="Norfipc"
publisher-logo-src="https://ruta/logo.png"
poster-portrait-src="https://media.norfipc.com/img/historia1.jpg"
>
<amp-story-page id="pagina1" auto-advance-after="12s">
<amp-story-grid-layer template="fill">
<amp-img src="https://media.norfipc.com/img/historia1.jpg"
width="640" height="853" layout="responsive"
>
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Historia</h1>
<p>Pantalla de inicio de la historia con una imagen de ejemplo que se carga desde la web y texto encima. Se puede pasar manualmente a la siguiente página deslizando o presionando en el borde derecho de la pantalla. Además, se ha establecido el avance automático en 12 segundos.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="pagina2" auto-advance-after="12s">
<amp-story-grid-layer template="fill">
<amp-img src="https://media.norfipc.com/img/historia2.jpg"
width="640" height="853">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical" class="centertext">
<h2>Página 2</h2>
<p>Se le puede agregar cualquier cantidad de páginas duplicando el elemento "amp-story-page", pero agregando un identificador diferente. En cada página se pueden cargar imágenes, videos, audio o texto.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="pagina3">
<amp-story-grid-layer template="vertical" class="centertext">
<h2>Página 3</h2>
<p>Página final, en este ejemplo sin imágenes con el color negro de fondo. Al final un enlace externo, el único que se puede poner que abra una dirección externa directamente.
Ojo, el estilo css inline "style amp-custom", se puede personalizar editando o agregando reglas.
</p>
</amp-story-grid-layer>
<amp-story-page-outlink layout="nodisplay">
<a href="https://norfipc.com/">Texto enlace externo</a>
</amp-story-page-outlink>
</amp-story-page>
<!-- Antes del cierre de la etiqueta amp-story poner otros scripts de analytics, facebook, adsense, etc
Autor: Norfi Carrodeguas
Más información: https://hoy.norfipc.com/historias-web-google-web-stories -->
</amp-story>
</body>
</html>
La página carga dos imágenes de ejemplo desde este sitio web, pero se pueden sustituir y editar todos los parámetros completamente.
Todas las instrucciones se encuentran en el código y se muestran al cargar la página.
No obstante, algunas aclaraciones.
El código del archivo HTML se puede modificar libremente.
Leer más
El estilo se personaliza agregando reglas CSS dentro de la etiqueta <style amp-custom>
Se puede agregar cualquier cantidad de páginas duplicando el elemento "amp-story-page", pero agregando un identificador diferente. En cada página se pueden cargar imágenes, videos, audio o texto, todo con animaciones.
Para videos, publicidad, analítica, botones sociales se requieren scripts adicionales.
En las paginas AMP solo se pueden cargar scripts desde la biblioteca del CDN.
Importante la validación de AMP
Para que una historia u otra página en formato AMP aparezca en la búsqueda de Google, es imprescindible que valide correctamente.Además de hacerlo en el Validador de ampproject.org, debe de hacerlo en el Validador de Search Console.
Siempre asegúrase que el archivo HTML este codificado como UTF-8 (sin BOM).
Crear una historia AMP visual
El sitio de AMP.dev proporciona una plantilla para crear una historia más completa que la elemental que comparto en este artículo, que incluye elementos de imagen, audio, video y efectos, todo documentado en un tutorial.Accede al tutorial en Crear una historia AMP visual o descarga el archivo con los elementos, que está comprimido en un archivo ZIP de 1.4MB, desde la siguiente URL: Archivos de la historia
Extrae y descomprime el contenido del archivo ZIP.
En el directorio amp-pets-story se encuentran los archivos de imagen, vídeo, audio y datos que usaremos para crear nuestra historia, con el archivo pets.html como punto de partida.
La versión completa de la historia se puede encontrar en el archivo pets-completed.html.
Gracias por leer hasta aquí y suerte.