ADN SURA

SURA es la marca que acompaña a los latinoamericanos con un portafolio de soluciones en Seguros, Pensiones, Ahorro e Inversión, con presencia en 10 países de la región.

SURA Asset Management El Salvador Crecer

Sitios web

Última actualización : 15 Mayo 2020

Layouts

Grilla

La grilla o retícula con que se diagraman los bloques de contenido en una página están basadas en el estándar de 12 columnas y se compone de contenedores, filas y columnas. Los contenedores contienen filas, y las filas contienen columnas. Una grilla puede ser anidada dentro de una columna, resultando una nueva grilla inferior disponible dentro de un ancho de columna determinado. 

El comportamiento de estas columnas en distintos dispositivos dependerá de las necesidades del diseño y a cómo se deban ajustar según los breakpoints definidos por la herramienta de desarrollo.

La grilla responsive que utilizamos en proyectos digitales SURA es Bootstrap 4: https://getbootstrap.com/docs/4.3/layout/overview/

Breakpoints

Los breakpoints ejecutan un cambio en el comportamiento o distribución de columnas, puede personalizarse en distintos momentos cuando la ventana del navegador tenga un ancho de:

Inferior a 576px (extra small o xs). Adecuado para dispositivos móviles en modo vertical.
Igual o mayor que 576px (small o sm). Adecuado para dispositivos móviles de mayor tamaño o tablets de menor tamaño.
Igual o mayor que 768px (medium o md). Adecuado para tablets.
Igual o mayor que 992px (large o lg). Adecuado para tablets en modo horizontal o monitores desktop de menor tamaño.
Igual o mayor que 1200px (extra large o xl). Adecuado para monitores desktop estándar.
Más información acerca de los breakpoints y sus identificadores de clases para modificar comportamientos en columnas: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

Contenedores

Los contenedores (container) se encargan de contener filas que a su vez contienen columnas. Es necesario definir si el contenedor tendrá un comportamiento fluido (utilizará el ancho completo disponible de la ventana del navegador) o tendrá un comportamiento de ancho fijo (utilizará el máximo ancho disponible dentro del ancho definido del sitio web que corresponde a 1140px en un ancho de ventana de 1200px. En pantallas menores a 1200px utilizará el máximo disponible según el breakpoint que se ejecute.

Las filas (row) son otro tipo de contenedor y permiten anidar columnas en su interior. Las filas tienen un comportamiento de bloque, es decir que ocupan el ancho disponible del contenedor donde se encuentre y no permite tener otros elementos a sus costados.

Las columnas (col) son el principal contenedor de elementos dentro de una grilla, y la cantidad de columnas dentro de una fila dependerá de las necesidades del diseño. Una fila puede contener hasta 12 columnas en una misma fila, si la cantidad de columnas supera esa cantidad, automáticamente se desplazarán hacia una nueva fila. Las columnas se pueden identificar con un valor numérico de 1 a 12 y eso determinará el ancho que tendrá según la división de ese número en 12, por ejemplo si se requiere dividir una fila en dos columnas, se divide 12 en 2 y el resultado es 6, entonces a cada columna se identifica como col-6, eso significa que esa columna utilizará el ancho equivalente a 6 columnas de 12 y la otra también, resultando que cada columna utiliza el 50% del ancho disponible.

Más información acerca de contenedores, filas y columnas en: https://getbootstrap.com/docs/4.0/layout/grid/

Antes de comenzar

¿Qué nos debemos preguntar antes?

Antes de comenzar, es importante identificar el objetivo y reconocer qué tipo de sitio web se orienta mejor al cumplimiento de ese objetivo. Para conocer más revisar tipos de sitios web.

Al tener claro qué tipo de sitio web debemos desarrollar, contaremos con un marco referencial de cómo debería verse y estructurarse el sitio. Este manual, además de definir lineamientos generales de la marca para canales digitales, también busca apoyar a los equipos para que puedan hacer un trabajo más eficiente en el desarrollo de sus proyectos. 

Para web hay muchos elementos que se pueden reutilizar, o al menos construir a partir de algo que podría ya existir. Por lo tanto, la siguiente pregunta sería ¿existe algún sitio web en SURA similar al que estoy considerando desarrollar? Si la respuesta es sí, es conveniente revisarlo en detalle, evaluar la opción de complementar o acoplarse a esta iniciativa, si no aplica, al menos rescatar las buenas prácticas del mismo, sea que estén contenidos ya en este manual, o ponernos en contacto con el equipo a cargo para entender y evaluar el reutilizar parte del conocimiento o material necesario.

A continuación, recomendamos que puedas realizar pruebas de concepto, que permitan validar de forma temprana el proyecto. Tanto desde el punto de vista del negocio/organización, como desde los usuarios.

De igual modo, es necesario que de forma temprana se conforme un equipo de desarrollo y/o consultores de tecnología para evaluar opciones de plataformas, lenguajes de programación, ambientes, entre otros. Considerando estas variables anticipadamente, será más fácil definir el proceso de trabajo, solicitar los apoyos que se requieran desde SURA o terceros, determinar costos del proyecto, identificar con más precisión los plazos asociados, entre otros.

Definición de tecnologías y ambientes

Como mencionamos anteriormente, una buena definición tecnológica permite enfrentar el proyecto con mayor claridad.

Es conveniente determinar, o al menos evaluar, los siguientes temas:

Frameworks, back-end y front-end: 

Dependiendo de las características del proyecto, podría ser una buena idea utilizar algo pre-construido que permita un buen “time to market”, reducción de costos y evitarnos “reinventar la rueda”.

Un caso común es necesitar un sistema de gestión de contenidos. Si realmente no se requiere algo a medida, una buena opción son plataformas como Sharepoint, Drupal o Wordpress, todas autorizadas en SURA para ser utilizadas siguiendo prácticas estándares y seguras para el desarrollo de sitios web. Si el proyecto requiere de funcionalidades que escapan a las consideradas en esos sistemas o se requiere, por alguna razón adicional, un desarrollo a medida, el sistema puede ser desarrollado específicamente para esa finalidad. En cualquier caso, el CMS deberá cumplir con las pruebas de seguridad que nuestras áreas de TI solicitarán.

En términos de lenguajes de programación existe una amplia variedad: PHP, Ruby, Java, C#, por mencionar algunos. Su elección depende directamente del equipo de desarrollo y de las necesidades del proyecto. Adicionalmente, es posible utilizar frameworks de desarrollo como RoR, Angular o React.

Desde el punto de vista del navegador, es necesario que todo desarrollo se haga con los estándares de HTML5. Basado en HTML y CSS, ya sea utilizando librerías de front-end o no, pero siempre generando un resultado de sitios web ordenados, estandarizados y semánticos; tanto en términos de seguir buenas prácticas de etiquetados, accesibilidad, como también un buen comportamiento entre los navegadores más utilizados en el mercado: Safari, Chrome, Firefox y Edge, en sus versiones de escritorio y móviles. Más información sobre navegadores y grillas en la sección de layout.

Motor de base de datos: 

A nivel de base de datos, no hay exigencias entre una tecnología u otra, sin embargo se recomienda que el tratamiento de la información se mantenga con los más altos estándares de seguridad y se procure desde las aplicaciones resguardar el acceso a la misma, tanto para otras aplicaciones, como para evitar ataques que puedan poner en riesgo a la compañía, los usuarios, en términos de acuerdos, regulaciones y contratos vigentes.

Servicios: 

En caso de proveer servicios o establecer interfaces de comunicación con terceros, reiteramos la recomendación de hacerlo de forma segura. En términos concretos, el lineamiento es utilizar APIs con consideraciones de seguridad que permitan acceder solo a quienes estén autorizados para ello y, en términos de tecnología, utilizar arquitecturas de tipo REST (Representational State Transfer) para web services.

Servidores: 

Los proyectos web pueden ser alojados on-premise o mediante servicios de tipo cloud.

El primer caso indica que el proyecto deberá ser alojado en instalaciones de SURA, o en el datacenter de un proveedor externo; normalmente esto eleva los costos asociados a mantenimiento y habilitación. Se recomienda evaluar con mucho cuidado si es pertinente mantener las aplicaciones utilizando este formato, pues SURA ha comenzado a migrar paulatinamente su infraestructura TI hacia la nube, es decir al segundo tipo: cloud.

En cloud, los proveedores que utilizamos de forma habitual son Google Cloud Platform (GCP) y Amazon Web Services (AWS). Estos servicios pueden ser contratados de forma directa o mediante aliados/consultores de desarrollo.

Coordinación con TI

Personas de contacto:

En caso de requerir asistencia o de requerir información adicional sobre tecnología, los encargados por cada compañía son:

Grupo SURA, Fundación SURA
Nombre apellido - Teléfono - Email

Seguros SURA
Nombre apellido - Teléfono - Email

SURA Asset Management
Nombre apellido - Teléfono - Email

Pruebas de seguridad:

Antes de lanzar un nuevo sitio web, se requiere pasar exitosamente las pruebas de seguridad definidas en SURA. Estas pruebas se gestionan mediante el encargado de TI en cada compañía, se agendan con anticipación (1 a 2 meses antes de la salida a producción).

Estas pruebas permiten validar que los sistemas se encuentren en óptimas condiciones para pasar a un ambiente productivo. 

Certificados:

Los certificados de seguridad SSL protegen la confidencialidad de los datos transmitidos a través de la red. Su utilización pasó de ser una recomendación a una exigencia. El no uso o configuración incorrecta es adicionalmente penalizada por los principales motores de búsqueda, y se alerta de forma notoria en los navegadores web modernos.

La recomendación desde SURA es adquirir certificados que permitan proteger el tráfico sobre todo dominio y subdominios hasta un nivel inferior, ejemplo: intranet.gruposura.com. Para ello, la mejor alternativa es adquirir certificados de tipo “wildcard”, los que cubren el dominio principal y todos sus subdominios.

Tipos de sitios web

En SURA desarrollamos y administramos distintos tipos de sitios web. Si bien existen muchas formas de clasificarlos, para efectos de los lineamientos del manual de marca los dividiremos entre públicos (no requieren autenticación) y privados (es necesario un usuario/contraseña, estar conectado desde una red interna SURA o son exclusivamente de uso para colaboradores).

A continuación presentamos sus principales características y consideraciones desde el punto de vista de aplicación de buenas prácticas desde la marca.

Públicos

Corporativos

Los sitios web corporativos, son nuestra cara frente al mundo en internet. En este manual abordaremos con detalle los componentes que permiten construir estos sitios que están compuestos principalmente con fines informativos.

Negocios

Los sitios web de los negocios tienen carácter informativo y eventualmente elementos transaccionales, por lo tanto, siguen el lineamiento de construcción de un sitio web corporativo, pero añaden algunos elementos adicionales como los componentes para autenticarse (login), elementos destacados para acceder a pagos, preguntas frecuentes, datos de contacto, sucursales, entre otros.

Landing pages y campañas

Los sitios web de landing pages y de campaña, como su nombre dice, normalmente solo considera una página de caída. Esta página busca informar brevemente sobre algún tema, para luego capturar los datos de contacto del usuario interesado, mediante un formulario.

Iniciativas y herramientas

Un sitio web para iniciativas o herramientas de una marca, corresponde a un sitio web que no requiere autenticación, además de un conjunto de funcionalidades muy específicas, como este mismo sitio web. Usa patrones de diseño limpios, los colores definidos por la marca y prioriza el uso de espacios destinados al buen uso de cada herramienta.

Aparecen elementos como buscadores, filtros y barras de navegación que no son tan frecuentes ni protagonistas en los otros tipos de sitios web. Dichos elementos se detallan en la sección componentes.

Ecommerce / transaccionales

Los sitios web de ecommerce y/o transaccionales, tienen su foco puesto en la conversión. Por lo tanto, la navegación, la simplicidad de uso y la carencia de elementos distractores se deben alinear con ese fin. A nivel de componentes, se utilizan los mismos que aplican para los sitios ya mencionados.

En estos sitios es prioridad que se realice un trabajo muy al detalle en analítica web, para así poder contar con un detalle y entendimiento acabado sobre el desempeño del sitio y las estrategias de difusión y conversión. Para ello, revisar la sección guía inicial.

Privados

Sucursales virtuales (login cliente)

Los sitios web para sucursales virtuales deben contar con pocos distractores, una barra de navegación directamente asociada a la sesión del usuario y a las opciones desplegadas en el contexto de la navegación privada. No se recomienda replicar el menú de navegación del sitio público desde el cual se accede a la sucursal virtual.

A nivel de componentes, tal como en los sitios de herramientas, acá son protagonistas los formularios, botones, tablas, filtros, gráficos y otros elementos utilizados para el despliegue de información detallada e ingreso de información de parte del usuario.

Debido al aumento en el uso de móviles para acceder a web, estos sitios suponen un desafío adicional en diseño adaptativo, pues dichas interfaces normalmente deben ser ajustadas con una rigurosidad mayor a la de un sitio web informativo, debido a la complejidad y comportamiento de los elementos de interacción. Es por ello que estos sitios pueden tener un comportamiento responsive (la misma interfaz se adapta a la pantalla dependiendo de su tamaño), una versión especial para ciertos “quiebres de pantalla” o definitivamente contar con una versión móvil, ya sea solo web o además una aplicación instalable en teléfonos o tablets.

Colaboradores (Sharepoint)

En el caso de sitios privados, para uso interno, basados en la plataforma Sharepoint de Microsoft se recomienda contar con ciertos resguardos desde el diseño y construcción de estos sitios.

En primer lugar, considerando componentes estándares como la barra de navegación principal, la que se usa de forma transversal entre los sitios SURA.

Colaboradores (no Sharepoint)

En el caso de sitios web nos basados en tecnología Sharepoint, se tiene una mayor flexibilidad, sin embargo, se recomienda homologar la presencia y jerarquía de elementos de autenticación y navegación, de manera que los colaboradores se enfrenten a una experiencia similar entre sistemas internos.