Diseño Portal

Owned by Fernando Rudilla García (Unlicensed)
Last updated: Sept 27, 2021
7 min read

Disponible con el módulo Octopus Guest.

 

Dentro del apartado Configuración > Splash portal > Diseño portal, se puede gestionar el diseño de los portales cautivos de todos los clientes. 

Listado portales

El contenido de cada columna es: 

  • Tipo: Imagen en miniatura que muestra el tipo de portal

  • Nombre: Identificador del Portal

  • Propietario: Campo en el que indica en que Organización, Grupo de localizaciones o localización esta asociado al portal.

  • WLANs asociadas: Numero de WLANs a las cuales esta asociado el portal. Presionando el enlace, también permite asignar el portal a las WLANs de manera sencilla y masiva. 

  • Operaciones individuales

    • Delete: Borrar el portal cautivo de la base de datos, está opción solo aparece disponible si no hay ninguna WLAN asociada al portal.

    • Clonar: Clona el portal cautivo indicado y es posible modificar su configuración y guardarlo con otro nombre.

    • Editar: Permite modificar la configuración del portal.

Es posible filtrar en el listado por los campos de Tipo, Nombre, Propietario, WLANs y fecha de creación

Añadir o editar portal cautivo

Cuando se crea un portal cautivo, aparecerá un portal cautivo con los siguientes parámetros de configuración:

  • Nombre: Identificativo del portal.

  • Propietario: Organización, grupo de localización o localización a las que estará asociado el portal.

  • Template: Diseño del cual partiremos para realizar la configuración. Existen 4 templates diferentes:

    • Simple: Es el más simple de configurar si se quiere implementar un portal de manera rápida.

    • Fullscreen: Template más customizable, con lo cual el más aconsejable en caso de querer un diseño más personalizado.

    • Social: Aspecto basado en el muro de las redes sociales. 

    • Wifi4EU: Cumple todos los requerimientos de la iniciativa Wifi4EU, promovida por la comisión europea para ofrecer Wifi a los municipios.

 

Posteriormente, o cuando pulsamos en editar un portal ya creado, se puede ver el entorno de configuración:

 

  • Área de Trabajo: Permite seleccionar el área de configuración del portal cautivo, además de observar cómo quedaría la apariencia del portal según los cambios realizados. 

  • Barra de Herramientas. Se podrán seleccionar los diferentes parámetros de configuración. 

  • Opciones de Herramientas: Dentro de cada parámetro de configuración se observan las diferentes opciones de edición.

  • Opciones generales: Son comunes para todos los templates: 

    • Preview: Muestra una vista previa del resultado de la edición del portal. Permite simular el aspecto final que visualizará el cliente, pudiendo seleccionar los métodos de acceso, el idioma y el tipo de dispositivo (desktop o smartphone)

    • Guardar: Guarda los cambios introducidos sin abandonar la ventana de edición.

    • Eliminar: Borra el portal de la base de datos. Esta opción solo aparece disponible si no hay ninguna WLAN asociada al portal.

    • Validar: Salva el portal con los cambios introducidos y regresa al listado de portales.

    • Descartar: Descarta los cambios y vuelve al listado de portales. Si se han efectuado cambios sin guardar, aparecerá una ventana de confirmación.

 

A continuación se describen las diferentes opciones de configuración del portal dependiendo de la opción seleccionada en la barra de herramientas:

  • Móvil/PC: Cambio de vistas mobile y desktop en el área de edición de portales. Algunos parámetros de configuración como la imagen de backgroud difiere y es necesario configurarlo en ambas vistas. El portal es responsive, pero dependiendo de los pixeles de la pantalla del dispositivo del cliente aplicará una u otra.



  • Idioma: Permite seleccionar el idioma que se muestra en el área de configuración. Las opciones que se muestran serán las configuradas en el parámetro Idiomas de la pestaña Datos generales.

 

  • Datos generales:

    • Nombre: Se indicará el nombre que se va a asignar al portal

    • Propietario: Se deberá seleccionar una Organización, Grupo de localizaciones o localización al que se atribuirá el portal.

    • Idiomas: Se marcarán los idiomas que se desean que aparezcan en el portal. El idioma inglés está configurado automáticamente y dentro de los idiomas seleccionados se podrá configurar cual carga por defecto, en caso de que el idioma configurado en el navegador del dispositivo del usuario no esté en el listado. Tener e cuenta:

      • El portal cautivo siempre cargará automáticamente el idioma que tenga el cliente en el navegador del dispositivo y, en caso de no estar en el listado, el marcado por defecto. 

      • Todos los textos editables del portal (título, subtítulo, footer, …) habrá que traducirlos en los idiomas configurados. De igual manera es muy importante tener en cuenta estos idiomas en la parte de configuración de textos legales y campañas.

 

  • Estilos generales: Posibilidad de modificar los estilos de los diferentes elementos como los botones, cajas y texto del portal.

    • Fondo: Selección del color que se quiere establecer para el fondo del portal.

    • Errores: Selección del color que se vaya a aplicar en los errores de validación que se puedan mostrar.

    • Radio bordes: Mediante una barra horizontal se puede seleccionar el radio de los bordes de las cajas de texto y botones.

    • Texto Font: Selección de fuente en la que se desea mostrar el texto del portal.

    • Texto Color: Selección del color de texto.

    • Botones Normal: En la paleta de colores de la izquierda se puede seleccionar el color del texto en los botones y el color del botón en sí.

    • Botones Seleccionado: Permite seleccionar el color del texto en los botones, y el color del botón cuando esté seleccionado.

    • Cajas de texto/Color de texto: Selección del color de texto en las cajas de formulario.

    • Cajas de texto/Color de fondo: Selección del color de fondo de las cajas de formulario.

  • Título: En cuanto a estilos es seleccionable el color, fuente, alineación, tamaño de letra e incluso y sombreado del título. También es configurable el texto de cada uno de los idiomas seleccionados en el portal.

 

  • Subtítulo: En cuanto a estilos es seleccionable el color, fuente, alineación, tamaño de letra y el sombreado del título. También es configurable el texto de cada uno de los idiomas seleccionados en el portal.

 

  • Logo: Se deberá de seleccionar la imagen que se quiera poner como logo y que se haya subido previamente, Para subir una imagen nueva simplemente se debe que pulsar con el ratón sobre la imagen que haya actualmente o sobre el icono , en caso de no tener ninguna imagen subida. Se abrirá una galería de imágenes donde se podrán ver todas las que tenemos subidas actualmente . Con el botón de la papelera  se podrán borrar las imágenes que deseemos. Con el botón es posible subir nuevas imágenes.

 

  • Imagen: Se deberá seleccionar la imagen que se quiera y que se haya subido previamente, Si no se desea poner ninguna imagen, es posible seleccionar un color de fondo. Es posible aplicar transparencia a la imagen sobre un color de fondo, muy útil en caso de querer resaltar el formulario de autenticación y textos. El proceso para seleccionar imágenes, subir nuevas o borrarlas es igual que en la sección "Logo". Para que la imagen se vea correctamente es conveniente configurarla con los siguientes formatos:

    • Desktop: JPG/PNG | 1024px × 512px

    • Mobile: JPG/PNG | 375px × 518px

 

  • Cabecera: Es posible seleccionar un color de fondo en la cabecera, al cual también se puede aplicar transparencia. También se puede elegir el color de texto que aplicará al selector de idioma.

 

  • Pie de página: Posibilidad de seleccionar un color de fondo al footer o pie de página, al cual también se puede aplicar transparencia, también el color de texto y tipo de fuente que aplicará al texto. El texto también se podrá traducir en cada uno de los idiomas seleccionados en el portal.

 

Para mayor claridad, en la sección Videotutoriales es posible visualizar un ejemplo de configuración del portal.