View Categories

Santoral

Este servicio permite obtener el santoral del día actual.

La URL de este servicio es la siguiente:

https://muralelectronico.cl/services/santoral

La respuesta debería ser un RSS (archivo plano XML) con solo un ítem de resultado:

  • [Title]: El día que se obtiene
  • [description]: Nombre

Agregando a una Diapositiva #

Para configurar este servicio, debemos ingresar un «TICKER» en nuestra diapositiva, como se indica en esta sección. Una vez agregado, se debe configurar la URL del canal que sería la descrita en el inicio y luego en número de elementos se escribe «1», ya que solo regresa un ítem este servicio:

Con esta configuración, ahora pasaremos a la sección de «Plantillas», para poder darle estilo a la respuesta que entrega el servicio.

Visualización #

Una vez en el menú de «Plantillas» de la configuración, en preset seleccionamos «sobrescribir preset» y pasamos al sub menú «Principal», mostrándonos un código HTML similar a este:

<p><span class="title"><strong>[Title]</strong></span></p>

Si ingresamos los otros parámetros que nos entrega el servicio de la misma forma que «Title», nos quedará este código:

<p><span class="title"><strong>[Title]: [Description]</strong></span></p>

Presionamos «Guardar» y luego en la visualización deberían aparecer los datos de la siguiente forma:

Como es código HTML, se puede editar de la forma que más sea conveniente para la visualización. Ahora dejamos un ejemplo de como se podría desplegar esta información.

HTML #

Primero modificamos el código HTML por el siguiente:

<section id="container">
<div>
<p>Felicidades en tu día </p>
<p class="nombre">[Description]</p>
</div>
</section>

CSS #

Para dar un estilo a la visualización, se debe ingresar al submenú «Hojas de estilo». En nuestro ejemplo borraremos el actual e ingresaremos lo siguiente:

#container {
font-size: 2rem;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif
}
#container > div{
  padding: 10px;
  background-color: #005c7b;
  color: white;
  max-width: 350px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#container > div > p.nombre{
    font-size: 2rem;
    
  }

Una vez editada la hoja de estilo, se presiona el botón «Guardar» y se desplegará lo siguiente en la visualización:

Scroll al inicio