API: integración y personalización de la web

API: integración y personalización de la web

Introducción

Con el término "WebAPI", estamos hablando de diferentes módulos que se integran en el código de una página web para permitir que se muestre como un widget web:

  • La afluencia en tiempo real de la institución (índice de ocupación o tiempo de espera)
  • Las horas de apertura de la institución

Ejemplo : web de la Pontificia de Salamanca: https://biblioteca.upsa.es/bibliotecas-y-horarios/


Todas las WebAPI tienen un módulo automático que se actualiza cada 5 minutos.
Cada WebApi tiene un diseño llamado "responsive": se adapta a los elementos que la contienen y, por lo tanto, ofrece una consulta cómoda incluso para diferentes medios.

Para encontrar las WebAPI de su institución, hay que ir al portal de administración en la sección "WebApi".
Si la institución tiene varias divisiones, se seleccionan en el menú desplegable arriba a la izquierda para acceder a la API de cada una de ellas.

Integración

Etiquetas HTML

Las WebAPI están compuestas por etiquetas HTML que pueden ser integradas fácil y rápidamente en una página web:

  • Una etiqueta <script> que permite cargar el código JavaScript necesario para que el módulo funcione correctamente.
    • Esta etiqueta debe ser integrada en el código de la página entre las etiquetas <head>.
    • Hay una etiqueta <script> por tipo de módulo a mostrar (tiempo de espera, índice de ocupación u horas de la institución).
  • Una etiqueta de visualización WebAPI que es diferente según la información que se vaya a mostrar (tiempo de espera, índice de ocupación u horarios, etc.).

Esta etiqueta debe estar integrada en el código de la página donde se va a mostrar el WebAPI.

El código que se integrará en la página HTML se puede recuperar para cada institución en el Portal de administración en la pestaña de Administración bajo la pestaña WebAPI.

Es posible integrar estos webAPI en una aplicación móvil siempre y cuando la aplicación pueda mostrar una vista de la web (véase la documentación de iOS o Android).

Código de muestra
A continuación un ejemplo de código HTML que resultará en la visualización de un webAPI de índice de ocupación.

  1. <html>
  2.     <head>
  3.         <script charset="UTF-8" src="https://webapi.affluences.com/js/webapi_latest.min.js%22></script>
  4.     </head>
  5.     <body>
  6.         <div class="affluences-counter" data-token="TST0T0t0TT0TTT"></div>
  7.     </body>
  8.  </html>

Personalización

Los WebAPI pueden ser personalizados añadiendo atributos en la etiqueta <div>.
En el cuadro que figura a continuación se enumeran los atributos disponibles y los diferentes valores posibles.

WebAPI

Attribut

Valeurs possibles

Description

Horas de apertura

data-hide-navigation

true/false

Permite que no se vean los botones de los cambios de semana

days-number

número de 1 à 7

Permite hacer aparecer algunos días de la semana

lang

eng, deu

Permite cambiar el idioma en inglés o alemán

Afluencia en tiempo real (espera u ocupación)

forecasts-count

número de 1 à 5

Permite mostrar previsiones de horas concretas

greyscale ou grayscale

true/false

Permite de mostrar la información en matices de gris

lang

de, en, es, fr, it

Permite cambiar el idioma en inglés o alemán

data-title-override

cadena de carácter

Permite modificar el nombre de la institución en la WebAPI.

Por defecto, aparece el nombre principal en el portal Affluences

Comunicación

Algunos consejos para usar los webAPI:

  • Introducir los webAPI (o widgets web) a su webmaster
  • Dejar claro al público que la transmisión de datos es en tiempo real.
  • Añadir un título y un pie de foto, por ejemplo: “Ocupación actual de la sala".