--- schema_version: "1" id: d01e8a5adecf092589e5b45e34e92dfee1a25598b3fb7b5728452e1564fefa2c title: Componentes estándar collection: architect version: next locale: es-mx portal_url: https://docs.salesforce.com/architect/next/es-mx/reference-diagrams/guides/kit-of-parts.md canonical_url: https://staging.architect.salesforce.com/docs/architect/es-mx/reference-diagrams/guide/kit-of-parts.html source_site: staging.architect.salesforce.com content_type: documentation content_hash: 443d08b050620b5df56586e5c7fcc273d6ab6300c5deb77a5f5d96b49d704ba6 products: - Diagramas de referencia - Architect Site Content Repo updated_at: 2024-09-01T00:00:00Z --- ## Componentes estándar Los componentes estándar le facilitan la tarea de crear, personalizar y reutilizar diagramas coherentes de alta calidad. Este estilo profesional se utiliza para todas las plantillas de Diagrama de Salesforce y está disponible en nuestras herramientas de socio para diagramar casos de uso:
Gráfico lúcido Lucidchart Elements.cloud Elementos Miro Miro Diapositivas de Google Diapositivas de Google

Encuentre ejemplos de cómo utilizar componentes en la [Galería de arquitectura](https://architect.salesforce.com/diagrams#reference-architecture-gallery) de referencia ## Mejores prácticas Las siguientes secciones capturan mejores prácticas detalladas para el [Encabezado](#encabezado), las [Tarjetas](#tarjetas), los [Iconos](#iconos) y los [Conectores](#conectores) incluidos en los Componentes estándar. ## Encabezado Encabezado de diagrama El encabezado debe estar presente en todos los diagramas e incluir: - Un título que su audiencia puede comprender rápidamente - Una descripción clara de lo que cubre el diagrama, su propósito e intención - (opcional) su logotipo o nombre de compañía para transmitir el autor - (opcional) a Clave para aclarar iconos, diseños o símbolos utilizados como clasificaciones El tamaño debe ocupar al menos el 10% de la altura del diagrama y el 100% de la anchura. El tamaño de fuente de la descripción debe ser al menos la mitad del tamaño del título. Se debe incluir una Clave cuando se utilizan iconos, conectores, colores, etc. que no están especificados con títulos en el diagrama en sí. La clave debe agruparse en filas pares cuando sea posible. ## Tarjetas Todas las propiedades de su diagrama deben representarse con una tarjeta. Las tarjetas se pueden cambiar de tamaño y pueden tener rellenos transparentes o de color. Existen múltiples secciones de la tarjeta que proporcionan variaciones que puede utilizar para representar diferentes conceptos en su diagrama. ### **Anatomía de tarjeta** A continuación se incluye una tarjeta de ejemplo con las diferentes secciones descritas. El único contenido de Tarjeta requerido es el Título. Las otras secciones están disponibles para utilizar según sea necesario para casos de uso específicos. Anatomía de tarjeta **Icono Tarjeta** Los iconos de tarjeta son activos visuales que representan la propiedad de la tarjeta **Título de tarjeta** El título de la tarjeta es un nombre para tarjeta que se puede comprender rápidamente, capturando qué propiedad, área o concepto representa la tarjeta **Atributos de tarjeta** Los atributos de tarjeta son detalles basados en texto acerca de la propiedad, representados como una lista y utilizados cuando necesita capturar y transmitir múltiples puntos de datos **Pie de tarjeta** El pie de página de la tarjeta proporciona características adicionales de la propiedad. Algunos ejemplos incluyen: Nombres de paquete/objeto/ API, Propiedad, Capacidades, etc. **Iconos de pie de página de tarjeta** La sección Iconos de pie de página es para activos visuales para mostrar información adicional acerca de la propiedad. Algunos ejemplos incluyen: canales, servicios compartidos, funciones, etc. Los iconos de pie de página deben incluirse/explicarse en su clave de diagrama. ### **Variaciones de tarjeta** La utilización de diferentes secciones proporciona diferentes variaciones de tarjeta para diferentes usos. Puede mezclar y comparar la anatomía de la tarjeta según sea necesario para crear estas variaciones en sus diagramas. Consulte ejemplos a continuación: Tarjeta contraída Tarjeta detallada Tarjeta detallada con pie Consulte la [Galería de arquitectura](https://architect.salesforce.com/diagrams#reference-architecture-gallery) para obtener ideas sobre cómo utilizar estas variaciones. Utilice la capacidad de ajustar el tamaño y el color de sus tarjetas según sea necesario para distinguir tipos y crear diagramas claros y comprensibles. ## **Contenedores** Las tarjetas también pueden actuar como contenedores, es decir, agrupaciones para múltiples propiedades. Puede anidar tarjetas dentro de otra tarjeta para representar relaciones jerárquicas o clasificar propiedades relacionadas según sea necesario. Contenedores ## **Iconos** Los diagramas de Salesforce proporcionan un conjunto básico de logotipos de productos de Salesforce así como iconos adicionales para representar propiedades y otras áreas en su diagrama. Iconos Puede encontrar ejemplos de cómo utilizar iconos en la [Galería de arquitectura](https://architect.salesforce.com/diagrams#reference-architecture-gallery) de referencia _Para obtener iconos adicionales, consulte los [iconos Lightning Design System.](https://www.lightningdesignsystem.com/icons/)_ ## Conectores Los conectores siempre deben utilizar líneas de conexión de codo y ser rectos siempre que sea posible para una mayor legibilidad. Conectores y píldoras Los **conectores** representan una relación, integración o paso de proceso entre dos tarjetas. Los estilos de línea indican un tipo de conexión diferente y deben representarse en su clave de diagrama. Los extremos indican la dirección de un conector de integración o proceso. Los extremos también indican cardinalidad y ordinalidad en un conector de relación. Las **píldoras** se utilizan para proporcionar detalles acerca de las conexiones. Consulte los diagramas de [Arquitectura de soluciones](/docs/architect/es-mx/reference-diagrams/guide/section-solution-architecture) y [Flujo de proceso](/docs/architect/es-mx/reference-diagrams/guide/section-interaction-process-flow) de interacción, por ejemplo, usos de píldoras. ## Accesibilidad Alrededor del mundo, aproximadamente [1.300 millones](https://www.salesforce.com/company/legal/508_accessibility/#:~:text=Product%20Accessibility%20Status&text=Around%20the%20world%2C%20approximately%201.3,global%20economy%20that%20includes%20everyone.) de personas viven con algún tipo de discapacidad, lo que representa el 15% de la población mundial. La accesibilidad consiste en hacer que su diagrama sea comprensible para todos sus visores. Existen dos áreas de enfoque concretas que pueden ayudar a que sus diagramas sean más accesibles: la optimización para lectores de pantalla y el uso del contraste de color de forma apropiada. Puede encontrar más recursos sobre el diseño para la accesibilidad en el [blog Salesforce Design](https://medium.com/salesforce-ux/tagged/accessibility). **Lectores de pantalla** Un lector de pantalla es una aplicación de software que lee en voz alta las palabras de un archivo, una aplicación o un sitio web. Un lector de pantalla puede leer diagramas a personas que no pueden verlos claramente. El mejor formato para la compatibilidad del lector de pantalla es PDF (Formato de documento portátil). A diferencia de las imágenes y las aplicaciones no accesibles, los lectores de pantalla pueden acceder a los PDF para leer palabras, formas y colores. La exportación de sus diagramas a formato PDF al compartir con otros usuarios puede potenciar la accesibilidad. **Contraste de color** Aumentar el contraste de color es otra forma de ayudar a que su diagrama sea más accesible. Las personas podrán reconocer y leer mejor sus diagramas cuando cumplan el [contraste de color](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) mínimo de Directrices de accesibilidad de contenido web (WCAG) de tener una relación de 4,5:1 entre el color de fondo detrás del texto y el color del texto en sí. Muestra de paleta de colores para mostrar contraste sugerido Cada color en el [sistema de colores Salesforce](https://medium.com/salesforce-ux/the-salesforce-color-system-c7c6b5b9c577) tiene un número, entre 0 y 100, asociado con él. Cuando seleccione colores para sus diagramas, asegúrese de que el color de fondo detrás del texto es al menos 50 puntos superior o inferior al color del texto. Por ejemplo, si su color de fondo es 80, su color de texto no debe ser superior a 30. Considere utilizar la regla de 50 puntos según sea necesario para bordes y contornos también. **¿Tiene Salesforce Diagrams entrada o preguntas?** Por favor, háganos saber sus opiniones [aquí](https://docs.google.com/forms/d/e/1FAIpQLSe5RmVA2ZtpfGlR2u436FA4QN6QmJGdAWxtZ_AcRLMAH_US9Q/viewform?usp=sf_link).