Jump to content
Sign in to follow this  
AndresJGM

Apariencia del Sistema

Recommended Posts

Apariencia de SiReTT

La apariencia de la plataforma SiReTT se puede personalizar en varios aspectos los cuales vamos a explorar a continuación, y que sería correcto que todo empresario dedique un tiempo para mostrar a los clientes un sitio atractivo e informativo.

Es muy importante que el usuario que vaya a personalizar el sistema tenga el permiso de Diseñador de Interfaz del Sistema. Esto lo encontramos editando el usuario, en la sección de permisos operativos, como se muestra en la imagen.

image.png.b17fe48a5fd4c05675b94260dc6daee8.png

1. Logo de la Empresa (JPG - JPEG - PNG - GIF)

En la parte Superior Izquierda del sistema y justo al lado del buscador del catálogo podemos establecer el logo principal del sistema.

image.png.78354218f29de921a724f11235152635.png

La imagen se establece en el menú Diseño - Logo del Sistema.

image.png.894cedd8b8a0fb72f7aea91891dc2e69.png

Realmente, la imagen puede tener cualquier resolución e inclusive podría aprovechar la transparencia de los PNG. De todas formas, en esa parte superior, el sistema va a limitar su alto a 55 pixeles y proporcionalmente aplicará el ancho. Pueden utilizar esa información para simular resultados finales. Simplemente seleccionen el archivo y luego hagan clic en Guardar.

2. Banner Principal Publicitario (JPG - JPEG - PNG - GIF)

Esta es una imagen que estará fija debajo de la barra superior de búsqueda y se utiliza para destacar el comercio al que se dedica principalmente la empresa. Este banner se desaparece cuando un usuario ingresa al sistema para facilitar el uso de los módulos.

image.thumb.png.a95ec5b35c1b7c215d6b397d1ce26084.png

Se recomienda una imagen de una resolución de 1280 x (300~400) pixeles. Si abusa del Alto de la imagen, se podría volver incómodo utilizar la aplicación. La imagen tiene un comportamiento "Responsive" por lo que se ajustará al tamaño de la pantalla visual.

Puede subir este archivo desde el menú Diseño - Banner Publicitario Principal.

image.png.504211a02191871b49318716ed894fcb.png

Simplemente selecciona el archivo y luego da clic en Guardar.

3. Diapositivas en Presentación

En las secciones de Portada, Artículos Favoritos, Promociones y Novedades, existe un módulo que va cambiando las imágenes cada 15 segundos, y que también cuenta con herramientas manuales de navegación izquierda, derecha o ir a una imagen específica.

image.thumb.png.1a319dcb260ee53409bfabb57b158a9f.png

Estas imágenes se pueden utilizar para presentar marcas, noticias, temporadas próximas y cualquier tipo de publicidad especial. Se recomienda, similar al Banner, que las imágenes sean de 1280 x 300~500 pixeles. Eso si, es muy importante que TODAS las imágenes que vaya a establecer aquí tengan las mismas medidas, pues de no hacerlo, cada salto de imagen va a provocar movimientos no esperados en el contenido de la página.

Estás imágenes se colocan desde el menú Diseño - Diapositivas en Presentación.

image.thumb.png.3cd3e908efdc1ed955f79c21126b1c0e.png

Puedes seleccionar el archivo, agregar un Título y una Descripción si así lo deseas (estas aparecen en la parte inferior de la diapositiva, pero debes considerar que la imagen permita que se lean bien). Luego das clic en Adjuntar Imagen para agregarla a la presentación.

En este mismo módulo, puedes utilizar el navegador de diapositivas y utilizar el botón de Quitar para eliminar alguna de las imágenes.

Share this post


Link to post
Share on other sites

4. Pie de Página

Cualquier persona que visite tu sitio web querrá contactarlos o conocer más información seria sobre la empresa. Para esto está la sección del Pie de Página del sitio, como se muestra en el ejemplo.

image.thumb.png.fd182df91d2f33f49a1d58f5202ba3bc.png

Para modificar tu información, hay 3 diferentes secciones que debes visitar.

4.1 Información General de la Empresa

Este es el paso más importante que inclusive debe hacerse con una nueva instalación de SiReTT. Vas a ir al menú Sistema - Opciones del Sistema - Sección 1, y vas a llenar todo el formulario.

image.thumb.png.a4ae4ba0a45142e95b840733c19e0e8f.png

Llena los formularios de forma correcta, y trata de enfocarte en la ubicación de tu Sucursal principal o centro de distribución. La información de sucursales adicionales será para otra sección de esta guía.

Cualquier dirección web que el formulario pida, requiere que escribas 100% de forma correcta el valor, incluyendo el http:// o https:// seguido de la dirección completa.

En mi ejemplo personal, y aclaro que los valores a continuación son para mi empresa, sería:

Dirección Web Principal: https://foro.sirettonline.net
Dirección Web SiReTT: https://www.sirettonline.net (este valor es MUY importante llenarlo de forma correcta, con la dirección del sistema SiReTT que estás utilizando, para que funcione de forma adecuada la facturación electrónica).

Pagos Aceptados por ahora se utiliza para indicar los que aceptas en tus negocios, pero está previsto para integrar la pasarela de pagos en el Sistema (Futura actualización).

Horarios tienen 3 secciones, para que puedas aprovechar si tienes días con diferentes horas. Utiliza el espacio, no llenes todo en una sola parte para que el pie de página se vea bien.

Socios Comerciales se utiliza por si quieres indicar con que empresas aceptas pagos, depósitos, fletes o brindas tus servicios.

Cuando realices tus cambios, vas a ir a GUARDAR.

4.2 Redes Sociales

En la parte inferior derecha del sistema y del pie de página, aparecen iconos con accesos directos a tus redes sociales, a como vayas indicando cada una.

image.png.5f6b4219654fc871009abb2052538055.png

Para habilitar estos botones, solamente debes ir a Sistema - Opciones del Sistema - Sección 2. Aquí en Redes Sociales, vas a llenar cada espacio con la dirección web completa de tus redes.

image.png.3a628465a185d97c22a16462a60fb8c6.png

Respecto a WhatsApp, este requiere la licencia de conectividad con WhatsApp que se adquiere por separado ($100 USA valor de la licencia). Esta habilita que el sistema de un acceso directo a los clientes para enviar mensajes al número indicado en esta configuración, tanto en el pie de página como en el catálogo de productos.

4.3 Lectura sobre la Empresa

En el pie de página, hay una sección inicial bajo el nombre de la empresa orientada a que el cliente conozca un poco más sobre aspectos importantes de la historia, mercado, objetivos y metas de la empresa.

image.png.930f2823bf6b8bd391419adbbe8145f4.png

Puedes personalizar esta información en el menú Diseño - Edición de Correos y Páginas.

image.png.474d61f8914c11e0b6019f685df3a4ee.png

Aquí vas a ir a Pie del Sistema y en este módulo, junto con las herramientas del editor, vas a personalizar la información detallada de esta sección.

image.png.29b6276cbd129fc0098b603e2c48a974.png

No seas extenso, pero trata de ser preciso e ir al grano con cada punto, ya que un texto muy largo va a ser ignorado. Al final da clic en Guardar.

Share this post


Link to post
Share on other sites

5. Tema de Colores

SiReTT se puede personalizar a nivel de colores. Si no te gusta el tema por Defecto del Sistema, puedes ir probando con combinaciones a gusto o inclusive utilizar algunos de los temas que te mostraremos aquí.

image.png.36010dc1ce4c430057046521732f2438.png

Para modificar los colores de la plataforma, vas a ir al menú Diseño - Temas y Colores.

image.thumb.png.f07422b4c30b9f16939bda305db25c71.png

En la parte de Color para Diseño del Tema, pueden ver que cada sección tiene 2 colores, una para el Fondo y otra para el Texto. Por cada sección, es importante que el color utilizado en el Fondo tenga un contraste alto con el color utilizado para el Texto. Si por ejemplo, pones el color del Fondo Menú y el Texto Menú, ambos iguales, el resultado es que no se va a poner leer el menú.

También es importante que sepas que las primeras 4 secciones se refieren a partes del sistema y no importa si utilizas colores similares, pero lo que si debe tener contraste entre sí, son el Fondo de Título Módulo y el Fondo de Título Tabla, con los siguientes 4 elementos. En SiReTT los 4 elementos son los conocidos 4 diferentes botones que puede tener el sistema, basado en las ideas de 1. Módulo, 2. Herramienta, 3. Aceptar, 4. Cancelar.

image.png.0949a75f571615a83d277852c6690de1.png

Puedes entonces personalizar cada color, dando un clic sobre él y seleccionando alguno de la herramienta que nos muestra el navegador.

image.png.fc889e9b9ee082801f912fba0eaf0cfa.png

La herramienta puede variar de acuerdo al navegador, pero en las últimas versiones se nos presenta un selector avanzado para cualquier experto en diseño, que nos permite tanto buscar un color o escribir un código Hexadecimal para colores Web.

Terminado los colores, da clic en Guardar para que, en tu navegador, el sistema se reinicie con los colores nuevos. Otras personas que tengan el sistema abierto no notarán los cambios hasta que cierren y vuelvan a visitar el sitio del sistema.

Ahora bien, esta misma herramienta tiene una sección llamada Código Tema Actual.

image.png.55e2dfc4f4aee128094885e374c18e80.png

Ese código es el del Tema que está cargado actualmente, ignorando las modificaciones que hayas hecho en la herramienta izquierda. Esto por ejemplo, podrías copiarlo y pegarlo como respaldo en un editor de texto para tener el último tema aplicado en caso de que las modificaciones no te gusten. También podrías por ejemplo crear un Tema y compartirlo con otros sistemas, o crear temas para temporadas (halloween, navidad, independencia...)

Para usuarios expertos que quieran saber que significa ese código, es el Hexadecimal de cada uno de los botones en su Fondo y Texto, exactamente en el orden de la herramienta del lado.

Fondo Superior y Pie
Texto Superior y Pie
Fondo Menú
Texto Menú
Fondo Título Módulo
Texto Título Módulo
Fondo Título Tabla
Texto Título Tabla
Fondo Elemento 1
Texto Elemento 1
Fondo Elemento 2
Texto Elemento 2
Fondo Elemento 3
Texto Elemento 3
Fondo Elemento 4
Texto Elemento 4

Conociendo esto y un poco de diseño web y colores, puedes crear temas de colores de forma directa sin utilizar los botones. Existen páginas interesantes que podrían utilizarse para generar colores, como https://coolors.co/0fa3b1-b5e2fa-f9f7f3-eddea4-f7a072

 

Share this post


Link to post
Share on other sites

5.1 Bonus Extra!!

A continuación dejaré algunos temas de colores con una imagen preliminar y su respectivo código, por si desean explorar el potencial de los colores de SiReTT.

image.thumb.png.b5a92327935f01f6bfd95dee19b67c5d.png

#0074D9
#b3dbff
#7FDBFF
#004966
#001f3f
#80bfff
#FFDC00
#665800
#007bff
#ffffff
#ffc107
#212529
#28a745
#ffffff
#dc3545
#ffffff

image.thumb.png.d34ad081c54b7e27feaa01a70756e3b2.png

#1e212b
#ffffff
#dd1c1a
#ffffff
#98c1d9
#000000
#e0fbfc
#000000
#007bff
#ffffff
#ffc107
#ffffff
#28a745
#ffffff
#dc3545
#ffffff

image.thumb.png.b1b90eaca9218b6678ca6d4d563a70ed.png

#0a100d
#ffffff
#67aaf9
#ffffff
#9bbdf9
#000000
#c4e0f9
#000000
#b95f89
#ffffff
#b95f89
#ffffff
#b95f89
#ffffff
#b95f89
#ffffff

image.thumb.png.cfa1fdf15426db023cbdcf844ad0a679.png

#000000
#ffffff
#fca311
#000000
#14213d
#ffffff
#e5e5e5
#000000
#ffffff
#000000
#ffffff
#000000
#ffffff
#000000
#ffffff
#000000

image.thumb.png.da17635c168722903de4fc477b347552.png

#e63946
#ffffff
#f1faee
#000000
#a8dadc
#000000
#457b9d
#ffffff
#1d3557
#ffffff
#1d3557
#ffffff
#1d3557
#ffffff
#1d3557
#ffffff

image.thumb.png.4fc4d567dfe328f0018c3aac09bc4d35.png

#2e1114
#ffffff
#501b1d
#ffffff
#64485c
#ffffff
#83677b
#ffffff
#adadad
#ffffff
#adadad
#ffffff
#adadad
#ffffff
#adadad
#ffffff

image.thumb.png.6daadf50acc1649e2f90a6db29cadd6b.png

#9a1750
#ffffff
#ee4c7c
#ffffff
#5d001e
#ffffff
#e3e2df
#000000
#e3afbc
#000000
#e3afbc
#000000
#e3afbc
#000000
#e3afbc
#000000

image.thumb.png.eab725777f2b810eedacf9c47d51bd75.png

#1f2605
#ffffff
#1f6521
#ffffff
#53900f
#ffffff
#a4a71e
#000000
#d6ce15
#000000
#d6ce15
#000000
#d6ce15
#000000
#d6ce15
#000000

image.thumb.png.d42dc05f338064aea9097d2ea4338112.png

#802bb1
#ffffff
#2d283e
#ffffff
#564f6f
#ffffff
#4c49d5
#ffffff
#d1d7e0
#000000
#d1d7e0
#000000
#d1d7e0
#000000
#d1d7e0
#000000

 

Share this post


Link to post
Share on other sites

6. Portadas y Artículos

SiReTT cuenta con una Portada, que es la página inicial que se muestra al visitar el sistema. Esta página, a parte de contar con las diapositivas en presentación, tiene una sección para Artículos de Temporada.

image.png.bbe51c21990da5f0bca02e195e15f8a2.png

Como parte de las personalizaciones de SiReTT, este es un tema importante que debes explotar. Pero ¿cómo puedes poner o quitar artículos de portada? Primero que nada, el artículo DEBE tener una fotografía como mínimo y esto lo puedes hacer desde la opción de catálogo. Segundo, debes tener en claro que la portada solamente colocará 30 artículos, pero que si tu tienes más con esta opción, entonces estarán rotando al azar cada vez que se visite el módulo.

A continuación varias maneras de enviar o quitar artículos de portada.

6.1 Editando el artículo

En la pestaña de Catálogo y Portada, en la opción de Catálogo Web, donde puedes ponerlo en Portada, Público (que es la forma normal) o Privado (para que solo lo vean usuarios conectados, no clientes o visitantes).

image.png.4403610fabc4379f4b49316e0468ac92.png

6.2 Ficha del Artículo en Catálogo

En los botones que aparecen debajo de la foto del artículo, un botón intercambia entre "En Portada" o "Normal" con solo darle un clic.

image.png.c6e18ee5f1b861627c03de9999612871.png

6.3 Utilizando el Editor Múltiple

Puedes consultar la guía del editor en el foro de Inventarios y Bodegas.

NOTA: La Licencia de Lo más Vendido ($100 USA), agrega al catálogo las opciones de Artículos Favoritos (lo más vendido de los últimos 45 días de actividad de ventas), Promociones y Novedades a la portada y como páginas separadas.

Share this post


Link to post
Share on other sites

7. Navegador de Familias

La última sección de la portada del sistema muestra un navegador de familias de inventario.

image.png.04d20df3d66b0e48a0b6228bc9f5f4c1.png

Este módulo se genera de forma automática, bajo las siguientes condiciones.

a. Solamente muestra Familias base, no subfamilias. El usuario deberá enfocarse en seccionar bien su inventario.

b. Que la familia o sus subfamilias tenga artículos que el cliente pueda consultar (no depende de existencias).

c. Que la familia tenga una fotografía.

Puede ver como colocar imágenes en familias en la guía correspondiente en el foro, en la sección de Inventarios y Bodegas.

Share this post


Link to post
Share on other sites

8. Fondo de Aplicaciones

La sección donde se muestran las aplicaciones y módulos de SiReTT tiene un fondo que permite ser personalizado. Por defecto para un sistema nuevo, van a ver Hamburguesas, Papas, Refrescos y Donas.

image.png.9e830f45d073ac7dd9954c88208590eb.png

En el menú Diseño - Fondo de Aplicaciones, se puede trabajar con el fondo.

image.png.ab0499a894c88c8f5c05cb94e82142ee.png

Primero se nos mostrará una preliminar de la imagen actualmente instalada. En la parte de Modalidad podemos seleccionar si deseamos que la imagen sea Estirada o en Mosaico. Estirada puede ser utilizada como en la muestra del video juego de Mario, donde el fondo mantendrá la imagen fija y ocupando el máximo de espacio sin deformarse. El modo Mosaico es como el ejemplo de las Hamburguesas, donde se repite sin cambiar su tamaño por toda el área.

Una imagen estirada puede ser un Wallpaper similar a los que ponemos en el escritorio de Windows, con resoluciones de 1280 x 800 (o más de 800).

Una imagen en Mosaico puede tener cualquier tamaño, de pequeño a grandes, ya que no se cambiará su resolución, solo se repetirá.

En la parte de Archivo Imagen es donde vamos a seleccionar la imagen que deseamos, la cual debe estar en nuestro equipo.

La primera opción de Modalidad es Solo Color, y se combina con el parámetro de Color de Fondo, por si solamente deseas un color fijo.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...