<!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=ed5b394c598c7c1a832f83e265fca937" /><a href="http://concreta.uy/cursos-en-linea/?utm_source=elastic&utm_medium=mailing&utm_campaign=PSUX20210120&utm_content=Tres modos de diseño: hoy Bloques." style="color: #2BA6CB;"> </a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td align="center" style="padding:10px;" width="600">
<p>En 2023 subí un escalón en el conocimiento de tu profesión<br />
<a href="https://concreta.uy/calendario-cursos-2023/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Tres modos de diseño: hoy Bloques."><strong>Calendario de cursos 2023</strong></a><br />
Para conocer más sobre las distintas opciones, <span style="font-size: 16px; margin-top: 24px"><a href="https://concreta.uy/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Tres modos de diseño: hoy Bloques.#contactenos">contactá a 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"><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">Tres modos de diseño: afiche, formato y bloque</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">Entender la forma en que se diseña la interfaz es relevante tanto para distribuir el esfuerzo, como para determinar qué libertades y qué limitaciones tendrán los usuarios a la hora de generar y cargar el contenido.</p>
<p><a href="https://concreta.uy/biblioteca/tres-modos-de-diseno-afiche-formato-y-bloque/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO2023&utm_content=Tres modos de diseño: hoy Bloques."><img src="https://concreta.uy/wp-content/uploads/afiche-bauhaus-1923600.png" alt="Afiche Bauhaus 1923" 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"><a href="https://concreta.uy/biblioteca/tres-modos-de-diseno-afiche-formato-y-bloque/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO2023&utm_content=Tres modos de diseño: hoy Bloques.">Las dos notas anteriores abarcaron el diseño en modo afiche y en modo formato.</a> Hoy toca el último nivel.</p>
<h2 style="font-size: 30px;margin-top: 1.625em;margin-bottom: .25em;line-height: 1.25;font-weight: 500;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif">Diseño en modo bloques</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Podríamos pensar los bloques como micro-formatos: formatos que cubren solamente una parte de la pantalla. En este modo, las pantallas y diálogos se componen de una sucesión de bloques. De nuevo el contenido “llena los huecos”, pero ahora la relación entre los distintos contenidos es libre. No es más como en el modo formato, donde una nota tiene título, texto destacado, foto principal, cuerpo y firma. Ahora una nota es un conjunto de bloques en el orden y con la combinación que el usuario elija. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Para que el diseño en modo bloques funcione es necesario tener tres tipos de bloques: </p>
<ul>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"><strong>Bloques de contenido</strong>: son los que, como su nombre indica, despliegan el contenido: títulos, párrafos, imágenes, galerías, videos, campos, botones, redes sociales incrustadas, y cualquier otro contenido que la interfaz deba representar debería tener un bloque. </li>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"><strong>Bloques de estructura</strong>: son bloques invisibles que van por debajo de los de contenido y definen cómo se organizan éstos: columnas, tablas, pestañas, espaciadores y separadores, son probablemente los más comunes, pero en una interfaz de gran porte es de esperar que se requiera definir otros. </li>
<li style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"><strong>Bloques de navegación</strong>: son los bloques que permiten mostrar una interfaz como un todo, unificando las distintas páginas y diálogos: menús, paginadores, filtros, selectores, separadores y otros bloques de navegación componen el inventario de las herramientas que cierran el círculo del diseño en modo bloques.</li>
</ul>
<p><img src="https://concreta.uy/wp-content/uploads/seleccionar-bloques-en-Wix600.png" alt="seleccionar bloques en Wix" style="margin-top: 0.7rem;margin-bottom: 0.7rem;border: 0;width: 100%"></p>
<p><img src="https://concreta.uy/wp-content/uploads/seleccionar-bloques-en-WordPress600.png" alt="seleccionar bloques en WordPress" 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">Tanto Wix (arriba) como WordPress (abajo) son buenos ejemplos de manejadores de contenido que migraron de formatos a bloques</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Diseñar en modo bloques es muy potente, porque delega en el usuario la definición de la estructura de los contenidos dándole una enorme libertad, a la vez que garantiza que la relación entre los bloques va a mantener un estilo uniforme y que el comportamiento del propio bloque va a ser estable y consistente a lo largo y ancho de la interfaz. </p>
<p class="destaque" style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px;font-weight: 600;padding: 1.5em;background-color: #E9E9E9">El costo de diseñar en modo bloques es grande: enfrentarse a la creación de los bloques de navegación es un enorme desafío.</p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Pero el costo es grande: enfrentarse a la creación de los bloques de navegación es un enorme desafío, porque a partir de los bloques se pueden crear todo tipo de páginas y diálogos, y concebir una navegación que los una de forma razonable, que funcione en todas las circunstancias es difícil. </p>
<h2 style="font-size: 30px;margin-top: 1.625em;margin-bottom: .25em;line-height: 1.25;font-weight: 500;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif">El secreto está en la mezcla</h2>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Como en casi todas las cosas de la vida, la búsqueda de la pureza conceptual no es una gran amiga de las soluciones prácticas. Llevar a un extremo cada uno de los modos trae aparejado proponer soluciones para situaciones de borde que a la vez que se tornan difíciles muchas veces no tienen gran relevancia en el conjunto de la interfaz. </p>
<p style="font-size: 20px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px">Lo más razonable es definir una linea base, y complementarla con las otras cuando es necesario: por ejemplo crear un sitio Web donde una plantilla determina el cabezal, el sistema de navegación y el pie, y en medio de estos componentes se crean las páginas con bloques. Y la página principal y alguna otra página relevante se diseñan en modo afiche, una a una para darles un toque especial. </p>
<p style="font-size: 16px;font-family: Montserrat,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin-bottom: 20px"><a href="https://concreta.uy/biblioteca/tres-modos-de-diseno-afiche-formato-y-bloque/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO2023&utm_content=Tres modos de diseño: hoy Bloques.">Acceder al artículo completo en la Biblioteca Concreta.</a> </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-2023/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Tres modos de diseño: hoy Bloques.">Calendario de cursos 2023 </a></h3>
<p style="margin-bottom: 8px;font-weight: normal;font-size: 18px;line-height: 1.6;">Ya están las fechas de los cursos para el próximo año:</p>
<ul>
<li style="margin-bottom: 8px; font-weight: normal; font-size: 18px; line-height: 1.6;"><a href="https://concreta.uy/curso-psicologia-cognitiva-y-experiencia-de-usuario/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Tres modos de diseño: hoy Bloques.">Psicología Cognitiva y Experiencia de Usuario</a></li>
<li style="margin-bottom: 8px; font-weight: normal; font-size: 18px; line-height: 1.6;"><a href="https://concreta.uy/taller-intensivo-de-diseno-de-la-interaccion/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Tres modos de diseño: hoy Bloques.">Taller Intensivo de Diseño de la Interacción</a></li>
<li style="margin-bottom: 8px; font-weight: normal; font-size: 18px; line-height: 1.6;"><a href="https://concreta.uy/curso-accesibilidad-herramientas-de-evaluacion-wcag-2-2/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Tres modos de diseño: hoy Bloques.">Accesibilidad: Herramientas de evaluación WCAG 2.1</a></li>
</ul>
<p style="margin-bottom: 8px;font-weight: normal;font-size: 18px;line-height: 1.6;">Si querés conocer más detalles, o hablar con los docentes, <a href="https://concreta.uy/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Tres modos de diseño: hoy Bloques.#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-2023/?utm_source=elastic&utm_medium=mailing&utm_campaign=CALENDARIO202112&utm_content=Tres modos de diseño: hoy Bloques." 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;">Calendario 2023</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=RsdZkWcc-4z4_1k9-rqFgvdNACQUZA3cAmsnu9E5anu7p99YMI1yCdzxEWHAFU3s3zlYP-4jLXFTsa2yEoxS4h3MIicWPTbq58Ie6WiCohDOROsis52bMIK0M1EdkjMmxXPzSa1bNdXPYNef_jAFCfqXBdVCW7tZ_iGGGimEXJ-7ql40W2WiJHWJwGyw79AuVJo5ByqO9u7dbegCPb73dzumQ5aVjb2BTvRDyEV7sdnhUln4RBKKJS_qZITp9NFyyJqDr-qSr_ppAzUKrOICK9zLbTr-2rauIam6Re2DsNuTZ_oCchN0gSkJ6W4YVyVjjkH9T4xCEaZncM-4C1QeM2jCc24JGDyVwaGg1Pgkl1Ru-LUUUpqW2XO3dYmD8uTR_dzesoJ8-mxkunjV8x80Dis1" 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.1434188060&t=event&ec=ElasticEmail&ea=Tres+modos+de+dise%C3%B1o%3A+hoy+Bloques.&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>