AndresJGM Posted June 23, 2020 Share Posted June 23, 2020 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. 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. La imagen se establece en el menú Diseño - Logo del Sistema. 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. 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. 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. 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. 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. Quote Link to comment Share on other sites More sharing options...
AndresJGM Posted June 23, 2020 Author Share Posted June 23, 2020 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. 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. 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. 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. 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. Puedes personalizar esta información en el menú Diseño - Edición de Correos y Páginas. 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. 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. Quote Link to comment Share on other sites More sharing options...
AndresJGM Posted June 23, 2020 Author Share Posted June 23, 2020 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í. Para modificar los colores de la plataforma, vas a ir al menú Diseño - Temas y Colores. 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. Puedes entonces personalizar cada color, dando un clic sobre él y seleccionando alguno de la herramienta que nos muestra el navegador. 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. 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 Quote Link to comment Share on other sites More sharing options...
AndresJGM Posted June 23, 2020 Author Share Posted June 23, 2020 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. #0074D9 #b3dbff #7FDBFF #004966 #001f3f #80bfff #FFDC00 #665800 #007bff #ffffff #ffc107 #212529 #28a745 #ffffff #dc3545 #ffffff #1e212b #ffffff #dd1c1a #ffffff #98c1d9 #000000 #e0fbfc #000000 #007bff #ffffff #ffc107 #ffffff #28a745 #ffffff #dc3545 #ffffff #0a100d #ffffff #67aaf9 #ffffff #9bbdf9 #000000 #c4e0f9 #000000 #b95f89 #ffffff #b95f89 #ffffff #b95f89 #ffffff #b95f89 #ffffff #000000 #ffffff #fca311 #000000 #14213d #ffffff #e5e5e5 #000000 #ffffff #000000 #ffffff #000000 #ffffff #000000 #ffffff #000000 #e63946 #ffffff #f1faee #000000 #a8dadc #000000 #457b9d #ffffff #1d3557 #ffffff #1d3557 #ffffff #1d3557 #ffffff #1d3557 #ffffff #2e1114 #ffffff #501b1d #ffffff #64485c #ffffff #83677b #ffffff #adadad #ffffff #adadad #ffffff #adadad #ffffff #adadad #ffffff #9a1750 #ffffff #ee4c7c #ffffff #5d001e #ffffff #e3e2df #000000 #e3afbc #000000 #e3afbc #000000 #e3afbc #000000 #e3afbc #000000 #1f2605 #ffffff #1f6521 #ffffff #53900f #ffffff #a4a71e #000000 #d6ce15 #000000 #d6ce15 #000000 #d6ce15 #000000 #d6ce15 #000000 #802bb1 #ffffff #2d283e #ffffff #564f6f #ffffff #4c49d5 #ffffff #d1d7e0 #000000 #d1d7e0 #000000 #d1d7e0 #000000 #d1d7e0 #000000 Quote Link to comment Share on other sites More sharing options...
AndresJGM Posted June 23, 2020 Author Share Posted June 23, 2020 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. 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). 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. 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. Quote Link to comment Share on other sites More sharing options...
AndresJGM Posted June 23, 2020 Author Share Posted June 23, 2020 7. Navegador de Familias La última sección de la portada del sistema muestra un navegador de familias de inventario. 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. Quote Link to comment Share on other sites More sharing options...
AndresJGM Posted July 1, 2020 Author Share Posted July 1, 2020 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. En el menú Diseño - Fondo de Aplicaciones, se puede trabajar con el fondo. 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.