<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head><meta name="viewport" content="width=device-width,initial-scale=1.0" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Concreta Capacitación</title>
</head>
<body bgcolor="#FFFFFF" style="cursor: auto;margin: 0 auto;padding: 0;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust: none;height: 100%;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height: 1.65; "><!-- HEADER --><!--header-->
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="left" style="border-bottom: solid #FFA73B 1px;" width="600"><img alt="Concreta Capacitación" height="64" src="http://concreta.uy/image/pepe.jpg?id=f2862e99f42de0c02e0e42dc3b89bcc9" /><a href="http://concreta.uy/cursos-en-linea/?utm_source=elastic&utm_medium=mailing&utm_campaign=PSUX20210120&utm_content=Construyendo la interfaz" style="color: #2BA6CB;"> </a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center" style="padding:10px;" width="600">
<p>Un curso profundo y abarcativo:<br />
<strong><a href="https://concreta.uy/curso-accesibilidad-herramientas-de-evaluacion-wcag-2-2/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Construyendo la interfaz">Curso de accesibilidad: Herramientas de evaluación WCAG 2.1</a></strong><br />
Próximo Comienzo: <strong>Febrero </strong>- <span style="font-size: 16px; margin-top: 24px"><a href="https://concreta.uy/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Construyendo la interfaz#contactenos">Hablá con un docente</a></span></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<!--contendio-->
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 0.2;"> </p>
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="left" width="600"><div class="newsletters_content"><br />
<h1 class="Landing-title" style="font-size: 36px;margin-top: .25rem;margin-bottom: .25em;line-height: 1.15;letter-spacing: -1px;font-weight: 500;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;text-transform: none;text-align: center">Construyendo la interfaz</h1>
<p class="Landing-description" style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 1.5rem;line-height: 1.5;font-weight: 400;color: #333;text-align: center">Construir la interfaz es una tarea metódica, que tiene como eje implementar la funcionalidad garantizando un comportamiento homogéneo a lo ancho y largo de la interfaz. Evitar la implementación página a página es casi un imperativo.</p>
<p><a href="https://concreta.uy/biblioteca/construyendo-la-interfaz/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Construyendo la interfaz"><img src="https://concreta.uy/wp-content/uploads/construyendo-una-casa-ilustracion600.png" alt="construyendo una casa ilustracion" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></a></p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Utilizaremos en este apartado la terminología<span id="retNota1"> </span>introducida por el diseñador Brad Frost, en su artículo Diseño Atómico [1].</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Dar vida a la interfaz utilizando un lenguaje de interacción supone definir en orden:</p>
<ol type="1">
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"><strong>Los átomos</strong>, elementos indivisibles de la interfaz, como botón, etiqueta, campo, título, subtítulo, párrafo, vínculo, imagen, ícono, etc.
<p><img src="https://concreta.uy/wp-content/uploads/atomos-brad-frost600.png" alt="atomos según brad frost" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%">
</li>
</ol>
<ol start="2">
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"><strong>Las moléculas</strong>, combinaciones de dos o tres átomos de uso frecuente en el sitio, como por ejemplo etiqueta y campo; foto y pie de foto; título, subtítulo y copete.
<p><img src="https://concreta.uy/wp-content/uploads/moleculas-brad-frost600.png" alt="Moléculas según Brad Frost" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%">
</li>
</ol>
<ol start="3">
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"><strong>Los organismos</strong>, componentes de la interfaz que cumplen una función simple: formulario con etiquetas, campos y botones, el cabezal, la caja de búsqueda o el pie.
<p><img src="https://concreta.uy/wp-content/uploads/organisimos-brad-frost600.png" alt="Organismos según Brad Frost" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%">
</li>
</ol>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">A partir de allí con esos elementos se construyen los diálogos, páginas y flujos que constituirán la interfaz completa del sistema.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Es importante garantizar que <strong>los componentes de la interfaz son únicos y siempre tienen el mismo comportamiento</strong>, independientemente de que en un diálogo puedan tener unas propiedades destacadas y otras deshabilitadas, mientras que en el siguiente diálogo suceda exactamente al revés. Debe ser obvio para el usuario que se trata del mismo elemento, comportándose de acuerdo a las necesidades del contexto y la función ejecutada.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">También es importante que toda la funcionalidad de un elemento esté disponible cada vez que se despliega en la interfaz, ya sea de forma directa o indirecta. La única excepción es aquella que debe ser excluida por alguna otra razón válida, como por ejemplo la seguridad.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Los objetos que conforman el sistema se representan de diversas formas en la pantalla en base a dos dimensiones fundamentales: el tamaño que ocupan en la pantalla y la posibilidad de editarlos / modificarlos. Una consecuencia de un lenguaje de interacción correctamente concebido, tal vez la principal, es que todas estas representaciones expresan al mismo objeto de forma obvia para el usuario, independientemente de su tamaño y de si están en modo lectura o edición.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Desde el punto de vista del tamaño, ya sea que el objeto se exprese como un ícono, una fila en una tabla, un diálogo de resumen o una ficha de pantalla completa, sigue siendo el mismo objeto y permite el acceso a las mismas funciones: no todas a un click de distancia, sino dentro de lo que razonablemente se podría considerar manipulación directa. Dicho de otra forma: no importa cómo está representada la factura en la pantalla, si la estoy viendo tengo que poder eliminarla sin necesidad de ir al menú principal y navegar hasta la opción Clientes -> Cuentas Corrientes -> Facturación -> Eliminar Factura.</p>
<figure class="wp-block-image size-large"><img src="https://concreta.uy/wp-content/uploads/los-componentes-de-la-interfaz-deben-tener-un-comportamiento-homogeneo600.png" alt="los componentes de la interfaz deben tener un comportamiento homogeneo" class="wp-image-4741" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></p>
<p class="has-small-font-size has-text-align-center" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;text-align: center">Independientemente del tamaño y el contexto, siempre se representa el mismo elemento</p>
</figure>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Si la interfaz está basada en un lenguaje de interacción será homogenea a lo largo y a lo ancho, será capaz de crear la experiencia de usuario para las funcionalidades actuales y futuras, generando una interacción consistente y fácil de usar, que sus clientes y usuarios apreciarán.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Tips:</p>
<ul>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">¿Cuántos tipos distintos de botones, campos, títulos, íconos y otros elementos se utilizan en la interfaz? ¿Está justificado?<br />(Si tiene dudas, pida que se realice un inventario: lleva una mañana y es tan útil como sensiblizador)</li>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Los elementos de la interfaz, ¿se comportan siempre igual, además de verse siempre igual?</li>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">A lo largo de todo el sitio o aplicación, ¿los problemas de interacción similares se resuelven de forma similar?</li>
</ul>
<p></p>
<p class="has-small-font-size" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">___</p>
<p class="has-small-font-size" style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">[1] Brad Frost – Atomic Design – https://bradfrost.com/blog/post/atomic-web-design/<br />
Las tres imágenes que ilustran los conceptos de átomo, molécula y organismo son tomadas del artículo.</p>
</div></td>
<td> </td>
</tr>
</tbody>
</table>
<!--inscripcion-->
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 1.6;"> </p>
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="left" width="600">
<table align="left" class="column" style="background-color: #ebebeb; float: left;min-width: 279px;">
<tbody>
<tr>
<td style="padding: 15px;">
<h3 style="font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height: 1.1;margin-bottom: 8px;margin-top: 18px;color: #000;font-weight: 400;font-size: 27px;"><a href="https://concreta.uy/calendario-cursos-2022/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Construyendo la interfaz">Calendario de cursos 2022 </a></h3>
<p style="margin-bottom: 8px;font-weight: normal;font-size: 18px;line-height: 1.6;">Ya están disponibles las fechas de los <strong>cursos de Experiencia de Usuario y Accesibilidad de 2022</strong>, para que puedas planificar con tiempo tu formación. Podés <a href="https://concreta.uy/cursos-en-linea/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Construyendo la interfaz">consultar las características y programas</a> de cada curso y elegir el que más se adapte a tus necesidades. Y si querés saber más, o hablar con los docentes, <a href="https://concreta.uy/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Construyendo la interfaz#contactenos">no dudes en contactarnos</a>.</p>
<p style="margin-bottom: 20px;font-weight: normal;font-size: 18px;line-height: 1.6;"><span style="font-size:14px;">(Ahora pagos en pesos argentinos para Argentina)</span></p>
</td>
</tr>
</tbody>
</table>
<table cellpadding="10" cellspacing="20" style="background-color: #ebebeb; width: 100%;">
<tbody>
<tr>
<td align="center" bgcolor="#1947a1" height="27" style="padding:10px; -webkit-border-radius: 27px; -moz-border-radius: 27px; border-radius: 27px; color: #1947a1; display: block;" width="250"><a class="concreta" href="https://concreta.uy/calendario-cursos-2022/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Construyendo la interfaz" style="color: #FFFFFF;font-size: 18px;font-weight: bold;font-family: sans-serif;text-decoration: none;line-height: 27px;width: 100%;display: inline-block;background-color: #1947a1!important;">IR AL CALENDARIO </a></td>
</tr>
</tbody>
</table>
</td>
<td> </td>
</tr>
</tbody>
</table>
<!--desuscribirse-->
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 1.6;"> </p>
<table style="margin:0 auto" width="100%">
<tbody>
<tr>
<td> </td>
<td align="center" width="600">
<p style="margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.25;"><a href="http://tracking.concreta.uy/tracking/unsubscribe?d=uSqUTx9n4N743ViptdRDE6VUsZyPTjcMZz3usw7-JERRsIkdyIhcevVA2BtMwWuWkDgpL7z-Qf-8kBV3EBxmJR4zEf74Pl2fhTrd7LbDHKeCGWeNjs9P17uVj1yrh10F9xaYPbVKk6sKZScdrkZpeqO-Tk0qU71BnsVyRq-lh_v7Lj2nnn-p4hjpUsuAOjrnOMem6n1QnZGKxClRA69ZzFRrCOZqqTuuuEdFllX23JQoCWFYhaq-WlDbrbvhcq5vGP3SJQD2CjcWKAKQ1eCixY-mzvIudLyWdM48T3SFpzr7rOzCDxna9UVxkTbNwtnG3y9BMxQxamDUmNLGoYkgvXr82oHmVJTumUMdyhZtSKFNhYj3w2nQ7S2UvaC8svl0XA2" style="color:#666666;">No quiero recibir información sobre cursos de Concreta<br />
<img alt="" src="https://www.google-analytics.com/collect?v=1&tid=UA-88473526-1&cid=698082699.1439398855&t=event&ec=ElasticEmail&ea=Construyendo+la+interfaz&el=698082699.1434050727&cs=newsletter&cm=email&cn=062413&cm1=1" style="width: 1px; height: 1px;" /></a></p>
</td>
<td> </td>
</tr>
</tbody>
</table>
<p style="margin-bottom: 10px;font-weight: normal;font-size: 18px;line-height: 1.6;"> </p>
<div style="text-align:center; background-color:#fff;padding-top:10px;padding-bottom:10px;font-size:8pt;font-family:sans-serif;"><p style="text-align:center;text-decoration:none;color:#666;">Concreta, Soriano 903 of 501, Montevideo, Montevideo, 11100, Uruguay, concreta.com.uy</p></div></body>
</html>