Introducción a Tarjetas adaptablesAdaptive Cards Overview

Tarjetas adaptables es el formato de intercambio de tarjeta abierta que permite a los desarrolladores intercambiar el contenido de la interfaz de usuario de una manera habitual y coherente.Adaptive Cards are an open card exchange format enabling developers to exchange UI content in a common and consistent way.

Cómo funcionanHow they work

Los autores de las tarjetas describen su contenido como un objeto JSON simple.Card Authors describe their content as a simple JSON object. Ese contenido se puede representar entonces de forma nativa dentro de una aplicación host, adaptándose automáticamente a la apariencia del host.That content can then be rendered natively inside a Host Application, automatically adapting to the look and feel of the Host.

Por ejemplo, Contoso Bot puede crear una tarjeta adaptable mediante Bot Framework y, cuando se entrega a Skype, se verá y se parecerá a una tarjeta de Skype.For example, Contoso Bot can author an Adaptive Card through the Bot Framework, and when delivered to Skype, it will look and feel like a Skype card. Cuando se envía esa misma carga a Microsoft Teams, parecerá de Microsoft Teams.When that same payload is sent to Microsoft Teams, it will look and feel like Microsoft Teams. A medida que más aplicaciones host empiecen a admitir el formato Tarjetas adaptables, esa misma carga útil se activará automáticamente en estas aplicaciones, y seguirán pareciendo completamente nativas de la aplicación.As more host apps start to support Adaptive Cards, that same payload will automatically light up inside these applications, yet still feel entirely native to the app.

Los usuarios ganan porque todo les resulta familiar.Users win because everything feels familiar. Las aplicaciones host ganan porque controlan la experiencia del usuario.Host apps win because they control the user experience. Y los autores de las tarjetas ganan porque su contenido tienen un alcance más amplio sin ningún trabajo adicional.And Card Authors win because their content gets broader reach without any additional work.

ObjetivosGoals

Las tarjetas adaptables tienen que ser:The goals for Adaptive Cards are:

  • Portátiles: para cualquier aplicación, el dispositivo y plataforma de interfaz de usuarioPortable - To any app, device, and UI framework
  • Abiertas: las bibliotecas y el esquema son de código abierto y de uso compartidoOpen - Libraries and schema are open source and shared
  • De bajo costo: fáciles de definir y de consumirLow cost - Easy to define, easy to consume
  • Expresivas: dirigidas a la gran cantidad de contenido que los desarrolladores desean producirExpressive - Targeted at the long tail of content that developers want to produce
  • Estrictamente declarativas: no se necesita ni se permite ningún códigoPurely declarative - No code is needed or allowed
  • Con estilo automáticamente aplicado: para las instrucciones de la marca y la experiencia de usuario de aplicación hostAutomatically styled - To the Host application UX and brand guidelines

Para los autores de tarjetasFor Card Authors

El formato Tarjetas adaptables es excelente para los autores por los siguientes motivos:Adaptive Cards are great for card authors:

  • Un único esquema: se obtiene un formato único, con lo que se minimiza el costo de crear una tarjeta y se maximiza el número de lugares donde se puede usar.One schema - You get a single format, minimizing the cost of creating a card and maximizing the number of places it can be used.
  • Una expresión más rica: el contenido puede alinearse más estrechamente con lo que se quiere decir porque ahora cuenta con una paleta más rica con la que pintar.Richer expression - Your content can more closely align with want you want to say because you have a richer palette to paint with.
  • Un amplio alcance: ese contenido funcionará en un conjunto más amplio de aplicaciones sin que haya que aprender nuevos esquemas.Broad reach - Your content will work across a broader set of applications without you having to learn new schemas.
  • Controles de entrada: la tarjeta puede incluir controles de entrada para recopilar información del usuario que está viendo la tarjeta.Input controls - Your card can include input controls for gathering information from the user that is viewing the card.
  • Mejores herramientas: un ecosistema de tarjetas abierto significa mejores herramientas compartidas por todos.Better tooling - An open card ecosystem means better tooling that is shared by everyone.

Para los propietarios de la experienciaFor Experience Owners

Si es un desarrollador de aplicaciones que quiere aprovechar un ecosistema de contenido de terceros, le encantará el formato Tarjetas adaptables por estos motivos:If you are an app developer who wants to tap into an ecosystem of third-party content you will love Adaptive Cards because:

  • Experiencia de usuario coherente: garantiza una experiencia coherente para los usuarios, porque es el propietario del estilo de la tarjeta representada.Consistent user experience - You guarantee a consistent experience for your users, because you own the style of the rendered card.
  • Rendimiento nativo: obtendrá un rendimiento nativo ya que se dirige directamente a la plataforma de interfaz de usuario.Native performance - You get native performance as it targets your UI framework directly.
  • Seguridad: el contenido se entrega en cargas útiles seguras, por lo que no es necesario abrir la plataforma de la interfaz de usuario para la revisión sin formato y el scripting.Safe - Content is delivered in safe payloads so you don't have to open up your UI framework to raw markup and scripting.
  • Fácil de implementar: obtendrá bibliotecas disponibles para integrarlas fácilmente en cualquier plataforma que admita.Easy to implement - You get off the shelf libraries to easily integrate on any platform you support
  • Documentación gratis: se ahorra tiempo porque no hay que inventar, implementar ni documentar un esquema propietario.Free documentation - You save time because you don't have to invent, implement, and document a proprietary schema.
  • Herramientas compartidas: se ahorra tiempo, ya que no hay que crear herramientas personalizadas.Shared tooling - You save time because you don't have to create custom tooling.

Principios básicos de diseñoCore Design Principles

El formato Tarjetas adaptables se rige por un conjunto de principios fundamentales útiles para mantener el diseño en marcha.Adaptive Cards are driven by a set of guiding principles that have been useful for keeping the design on track.

Semántica en lugar de diseño perfecto de píxelesSemantic instead of pixel-perfect

Nos hemos esforzado tanto como nos ha sido posible por los valores semánticos y los conceptos, en contraposición al diseño perfecto de píxeles puros.We have striven as much as possible for semantic values and concepts as opposed to pure pixel-perfect layout. Los ejemplos de expresión semántica aparecen en colores, tamaños y elementos como FactSet e ImageSet.Examples of semantic expression show up in colors, sizes, and in elements like FactSet and ImageSet. Todo esto permite que la aplicación host tome mejores decisiones sobre el aspecto real.These all allow the host application to make better decisions about the actual look and feel.

Los autores de tarjetas son propietarios del contenido, la aplicación host es propietaria del aspecto.Card Authors own the content, Host App owns the look and feel

Los autores de tarjetas son propietarios de lo que quieren decir, pero la aplicación que la muestra es propietaria del aspecto de la tarjeta en el contexto de la aplicación.The card authors own what they want to say, but the application displaying it owns the look and feel of the card in the context of their application.

Simples, pero expresivasKeep it simple, but expressive

Queremos que el formato Tarjetas adaptables sea expresivo y de propósito general, pero no queremos crear una plataforma de interfaz de usuario.We want Adaptive Cards to be expressive and general purpose, but we don't want to build a UI framework. El objetivo es crear una capa intermedia que sea "suficientemente expresiva" de la misma manera que Markdown lo es para los documentos.The goal is to create an intermediate layer which is "expressive enough" in the same way Markdown is expressive enough for documents.

Al concentrarse en mantenerlo simple y expresivo, Markdown ha creado una descripción fácil y coherente del contenido del documento.By focusing on keeping it simple and expressive, Markdown created an easy and consistent description of document content. De la misma forma, creemos que el formato Tarjetas adaptables puede crear un medio sencillo y expresivo de describir el contenido de la tarjeta.In the same way, we believe that Adaptive Cards can create a simple, expressive means of describing card content.

En caso de duda, dejarlo fueraWhen in doubt, keep it out

Es más fácil agregarlo después que vivir con un error.It is easier to add later than it is to live with a mistake. Si nos encontramos debatiendo si deberíamos agregar algo o no, se opta por dejarlo fuera. Siempre es más fácil agregar una propiedad que vivir con algo heredado que desearíamos no tener que dar soporte.If we found ourselves debating whether we should add something or not, we opted to leave it out. It is always easier to add a property than to live with a legacy we wish we didn't have to support.

Sesión de Build 2019Build 2019 Session

La siguiente sesión en la conferencia de Microsoft Build presenta Tarjetas adaptables en varios casos de uso.The following session at the Microsoft Build conference showcases Adaptive Cards in a variety of use cases.