Iconos de punto final de SDK de conector

Iconos de punto final y actividad

La interfaz de usuario de Integration Studio para un conector creado con el SDK de Conector Jitterbit utiliza iconos en la interfaz para representar el punto final y sus actividades.

En la paleta de componentes, los iconos representan tanto el punto final configurado como sus actividades. Esta captura de pantalla del conector de Dropbox muestra cómo se utilizan diferentes iconos:

Un icono (una carpeta) se utiliza para la conexión, con un icono diferente utilizado para las actividades. Es posible tener un icono diferente para cada actividad, aunque se recomienda un tema común de colores y formas para un punto final. Dado que el texto que describe la actividad se superpone al icono, es mejor dejar la mitad inferior del icono de un color sólido para que el texto blanco, que puede ocupar hasta dos líneas, tenga un fondo sólido contra el cual aparecer.

Tenga en cuenta que los puntos finales no configurados están ligeramente atenuados en comparación con los puntos finales configurados. Compare los dos iconos de Amazon S3 en esta imagen:

En una operación, los iconos representan las actividades del conector de Dropbox:

Como se puede ver en el esquema JSON del conector, se pueden definir iconos para la conexión y cada una de las actividades (juntas referidas como un punto final). Los iconos se definen en formato SVG y se proporcionan como una ruta a un archivo SVG.

Para funcionar correctamente en la interfaz de usuario de Integration Studio—tanto gráfica como estéticamente—los iconos deben seguir convenciones específicas en su diseño y creación.

Como se puede ver en estos ejemplos, el patrón de diseño para un icono consiste en un fondo de color contra el cual se aplica un logo blanco. El tipo blanco se agrega por la interfaz de usuario de Integration Studio en tiempo de ejecución para etiquetar las actividades. Por esta razón, se debe dejar espacio en el diseño de un icono para acomodar este texto, que puede ocupar hasta dos líneas.

Tamaños de íconos, tipo de archivo y reglas de color

Se requieren dos íconos: un ícono de punto final y un ícono de actividad.

Ambos íconos son del mismo tamaño (90 píxeles por 90 píxeles), con el logo dentro de un ancho máximo de 74 píxeles y alturas máximas de 38 píxeles (ícono de punto final) y 42 píxeles (ícono de actividad).

Un ícono debe guardarse como un archivo SVG.

Los íconos—para ajustarse a la estética de Integration Studio—deben seguir estas reglas de color:

• Color del logo: Blanco. Sin excepciones.

• Color claro: El color principal de la marca, preferiblemente elegido para que pueda soportar texto blanco encima.

• Color oscuro: Tono más oscuro del color claro. Típicamente, esto significa reducir el brillo al 80% del valor original.

• Degradado: Aplicado al ícono de actividad, con el color claro en la parte superior y el color oscuro en la parte inferior.

• Tamaño: Los íconos deben ajustarse a las pautas como se muestra en las imágenes de ejemplo a continuación.

• Colocación: Centrar los íconos utilizando ya sea el centrado matemático u óptico para el eje horizontal y luego centrados verticalmente en las pautas como se muestra en las imágenes de ejemplo a continuación.

Ícono de punto final

El ícono de punto final consiste en una serie de carpetas con un logo blanco en la parte superior. La carpeta más trasera es del color oscuro y la carpeta más delantera es del color claro. Estos colores se pueden asignar utilizando las diferentes capas de las plantillas.

El logo debe crearse con un fondo transparente para que, al colocarse sobre las imágenes de las carpetas, los colores se muestren alrededor y a través del logo de manera apropiada.

Esta imagen muestra un ícono de punto final con pautas añadidas que muestran los límites para la colocación del ícono:

Ícono de actividad

El ícono de actividad es un degradado sólido, con el color claro en la parte superior y el color oscuro en la parte inferior. El logo puede ser el mismo que el utilizado en el ícono de punto final o uno diferente, según sea apropiado. Sin embargo, en la mayoría de los casos será el mismo que el del ícono de actividad de punto final, pero colocado más arriba, dejando espacio en la parte inferior para las etiquetas de actividad.

El espacio mínimo en la parte inferior debe ser de 40 píxeles (50% de la altura).

Al igual que con el ícono del endpoint, el logo debe ser creado con un fondo transparente para que, al colocarse sobre las imágenes de la carpeta, los colores se muestren alrededor y a través del logo de manera adecuada.

Esta imagen muestra un ícono de actividad con pautas añadidas que muestran los límites para la colocación del ícono:

Badges

Los íconos pueden mostrarse con una insignia beta o deprecated en la esquina superior izquierda. Estas se pueden establecer en los íconos de endpoint y de actividades y se configuran añadiendo propiedades apropiadas a los metadatos de un endpoint o actividad.

• Para añadir una insignia beta, establece la propiedad isPreview en true:

"isPreview": true,

• Para añadir una insignia deprecated, establece la propiedad isDeprecated en true:

"isDeprecated": true,

Por ejemplo, para establecer un endpoint de Dropbox y su Fetch para tener una insignia beta:

{
  "name": "Dropbox",
  "isPreview": true,
  "endpoint": {},
  "activities": {
    "fetch": {
      "displayName": "Fetch File",
      "isPreview": true,
      "properties": []
    }
  }
}

Para establecer un endpoint de Dropbox y su actividad Fetch para tener una insignia deprecated:

{
  "name": "Dropbox",
  "isDeprecated": true,
  "endpoint": {},
  "activities": {
    "fetch": {
      "displayName": "Fetch File",
      "isDeprecated": true,
      "properties": []
    }
  }
}

Working examples

Los ejemplos mostrados arriba están disponibles como archivos SVG:

• Ícono de endpoint: endpoint.svg
• Ícono de actividad: activity.svg

Consulta el archivo adapter.json del conector de Dropbox para un ejemplo funcional utilizando archivos de íconos.

Para ejemplos de diferentes logos y tratamientos de color, consulta la selección actual de conectores disponibles en Integration Studio.