Merge pull request #299 from gcba/fixes

fixes: correcciones en fichas

src/articles/componentes/banner.mdx

@@ -7,20 +7,11 @@ position: 2
 
 ## Tipos de banner
 
-Las opciones de banner se diferencian por su color y contraste entre fondo y contenido. Existen banner claros y oscuros. En ambos casos la descripción informa a la persona sobre un tema particular y los íconos (relacionado con el mensaje) ayudan a las personas a escanear más rápido el contenido y reforzar el concepto.
-
-### Banner oscuro
-
-Este banner tiene fondo oscuro (Grisulado 90) y letras blancas. Se utiliza mayormente en contextos donde hay mucho texto y fondos claros, para irrumpir con un pleno de color.
-
-### Banner claro
-
-Este banner tiene fondo claro (Grisulado 5) y letras oscuras (Grisulado 90). Se utiliza mayormente en contextos donde hay contaminación visual, para generar una pausa.
+Las variantes de banner se diferencian por su color de fondo y el tipo de llamado a la acción que contienen. 
 
 ### Banner con enlace
 
-En las opciones con enlace la descripción se muestra centrada y no posee ícono.
-En cuanto a la cantidad de texto el banner con enlace no deberá superar una línea en su versión desktop y tres líneas en versión mobile.
+En la variante con enlace la descripción se alinea al centro y no posee ícono. Este es el único banner donde el texto no se trunca y pasa a otra línea, ya que el enlace siempre va al final del contenido.
 
 <div className="content-column">
   <img src="/componentes/banner/banner-link-dark.svg" alt="Banner oscuro con enlace" className="d-sm-inline-block d-none img-fluid" />
@@ -31,8 +22,7 @@ En cuanto a la cantidad de texto el banner con enlace no deberá superar una lí
 
 ### Banner con un botón
 
-En las opciones con un botón la descripción se alinea a la izquierda y lleva un ícono a la izquierda de ser necesario. En este caso lleva un botón secundario para comunicar la acción.
-Si el texto que se incluye en el banner con un botón supera una línea en su versión desktop este se truncará, así como en su versión mobile si supera las 3 líneas.
+En la variante con botón la descripción se alinea a la izquierda y la acompaña un botón secundario como llamado a la acción. 
 
 <div className="content-column">
   <img src="/componentes/banner/banner-button-dark.svg" alt="Banner oscuro con un botón" className="d-sm-inline-block d-none img-fluid" />
@@ -43,8 +33,7 @@ Si el texto que se incluye en el banner con un botón supera una línea en su ve
 
 ### Banner con dos botones
 
-En las opciones con dos botones la descripción se alinea a la izquierda y lleva un ícono a la izquierda de ser necesario. En este caso lleva un botón primario seguido de un secundario. 
-Si el texto que se incluye en el banner con un botón supera una línea en su versión desktop este se truncará, así como en su versión mobile si supera las 3 líneas. 
+En la variante con botón la descripción se alinea a la izquierda y la acompañan un botón primario y secundario como llamado a la acción. El botón primario siempre se encuentra a la izquierda del secundario.
 
 <div className="content-column">
   <img src="/componentes/banner/banner-buttons-dark.svg" alt="Banner oscuro con dos botones" className="d-sm-inline-block d-none img-fluid" />
@@ -57,15 +46,15 @@ Si el texto que se incluye en el banner con un botón supera una línea en su ve
 
 ### Uso de banner en cuerpo de página
 
-Los banners pueden disponibilizarse en cualquier parte de la página y funcionan como un elemento más para mostrar información. Al desplazarse junto a los demás elementos, al *scrollear*, los banners no son descartables. (Ej: “Lanzamos una nueva versión de nuestro sistema de diseño”)
+Los banners pueden disponibilizarse en cualquier parte de la página y funcionan como un elemento más para mostrar información. (Ej: “Lanzamos una nueva versión de nuestro sistema de diseño”)
 
-### Uso de banner fijado
+### Uso de banner con comportamiento fijo (sticky)
 
 Algunos mensajes requieren cierto compromiso del usuario y deben mostrarse hasta que este dé su consentimiento. Estos son métodos de mensajería altamente invasivos, por lo tanto, deben usarse con mesura. Estos mensajes se pueden fijar solo en la parte inferior de la pantalla (EJ: “Aviso de privacidad de Cookies”).
 
 ### Uso de iconografía
 
-El uso de iconografía no es obligatorio, y su utilización debe acompañar conceptualmente cada mensaje. Hay que poner especial atención en no usar íconos de carácter semántico (información, error, advertencia, éxito y similares) que puedan confundir los banners con alertas.
+El uso de iconografía no es obligatorio, y su utilización debe acompañar conceptualmente cada mensaje. Hay que poner especial atención en no usar íconos de carácter semántico (información, error, advertencia, éxito y similares) que puedan confundir los banners con [alertas](https://gcba.github.io/estandares/componentes/alerta/).
 
 <div className="content-column">
   <img src="/componentes/banner/banner.svg" alt="Banner" />
@@ -75,12 +64,14 @@ El uso de iconografía no es obligatorio, y su utilización debe acompañar conc
 
 ### Buenas prácticas
 
-[[si | **Ser conciso y disponer acciones claras.**  Dar un mensaje breve para captar la atención del usuario y proveer acciones claras para que profundice en el tema. ]]
+[[si | Ser conciso y disponer acciones claras. Dar un mensaje breve para captar la atención de la persona usuaria. ]]
 
-[[si | **Ser consciente del uso de la iconografía.** Es muy importante utilizar íconos para anclar conceptualmente el mensaje y prescindir del uso de íconos de contenido semántico. ]]
+[[si | En el caso de utilizar iconografía dentro del banner, elegir un ícono relacionado al mensaje que refuerce su contenido. ]]
 
-[[si | **Considerar los banners como “mensajes no semánticos”.** Este tipo de componentes se caracterizan por poder mostrar diverso contenido y deben poder diferenciarse fácilmente de una alerta de estado del sistema. ]]
+[[si | Utilizar un máximo de 110 caracteres para las descripciones de los banners. El contenido debe ser claro, simple y conciso. En caso de superar el máximo de caracteres, el texto se truncará (a excepción del Banner con enlace, donde el texto no se trunca y pasa a otra línea). ]]
 
 ### Malas prácticas
 
-[[no | **No abusar de fijar banners en la parte inferior.** Este tipo de banners influyen en la navegación del usuario. Un banner que requiere una acción para que desaparezca podría abrumar o molestar. ]]
+[[no | Limitar el uso de banners fijos en la parte inferior de la página, ya que influyen negativamente en la navegación de la persona usuaria. ]]
+
+[[no | No utilizar el banner para brindar información sobre el estado del sistema. Para ese caso, utilizar [alertas](https://gcba.github.io/estandares/componentes/alerta/). ]]

src/articles/componentes/encabezado.mdx

@@ -71,7 +71,7 @@ El header siempre debe mantener los márgenes y espaciados especificados. De est
   <img src="/componentes/encabezado/header_6.svg" alt="Encabezado - Especificaciones" />
 </div>
 
-<h2>Accesibilidad</h2>
+## Accesibilidad
 
 <h3>Enlace «Saltar al contenido principal»</h3>
 

src/articles/componentes/mapa.mdx

@@ -9,7 +9,7 @@ position: 14
 
 ### Mapa lateral
 
-En desktop ocupa 4 columnas y se encuentra a la derecha del cuerpo. Muestra la ubicación de un (1) lugar a remarcar en una página de noticias o en una pagina simple. Puede convivir con un <a href="/componentes/destacado/" rel="noreferrer" title="Enlace a componente destacado" >destacado</a>, ubicándose siempre debajo del mismo. 
+En desktop ocupa 4 columnas y se encuentra a la derecha del cuerpo. Muestra la ubicación de un (1) lugar a remarcar en una página de noticias o en una pagina simple. Puede convivir con un <a href="/estandares/componentes/destacado/" rel="noreferrer">destacado</a>, ubicándose siempre debajo del mismo. 
 
 <div class="content-row">
   <img src="/componentes/mapa/mapa-lateral.svg" alt="Lista de enlaces" class="img-fluid"  />

src/articles/herramientas_y_recursos/ui_kit.mdx

@@ -7,7 +7,7 @@ position: 1
 
 <Row>
   <Col items={2}>
-    <a className="card card-horizontal" href="/estandares/herramientas_y_recursos/UI_KIT_Obelisco.fig" download>
+    <a className="card card-horizontal" href="/estandares/herramientas_y_recursos/UI_KIT_-_Obelisco_1.fig" download>
       <i className="bx bxs-download card-icon-left"></i>
       <div className="card-body">
         <h4 className="card-title">UI KIT en Figma</h4>