{"id":14890,"date":"2020-12-09T12:56:15","date_gmt":"2020-12-09T10:56:15","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/?p=14890"},"modified":"2021-02-09T14:11:16","modified_gmt":"2021-02-09T12:11:16","slug":"alineacion","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/alineacion\/","title":{"rendered":"Alineaci\u00f3n"},"content":{"rendered":"<h2><strong>\u00bfQu\u00e9 es?<\/strong><\/h2>\n<p>La <strong>alineaci\u00f3n<\/strong> se refiere a la colocaci\u00f3n de los elementos de manera que sus lados o sus centros coincidan respecto a un eje. Este eje de alineaci\u00f3n suele ser:<\/p>\n<ul>\n<li><strong>Horizontal<\/strong>, de manera que los elementos forman una fila.<\/li>\n<li><strong>Vertical<\/strong>, de manera que los elementos forman una columna.<\/li>\n<\/ul>\n<div id=\"attachment_118\" style=\"width: 772px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-118\" loading=\"lazy\" class=\"size-full wp-image-118 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/20110_50.jpg\" alt=\"\" width=\"762\" height=\"582\" \/><p id=\"caption-attachment-118\" class=\"wp-caption-text\">En esta litograf\u00eda de finales del siglo XIX, los elementos se alinean respecto a un eje horizontal, formando filas.<br \/>Fuente: <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:The_basic_elements_of_phrenology,_physiognomy_and_palmistry_Wellcome_L0074425.jpg\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/commons.wikimedia.org\/wiki\/File:The_basic_elements_of_phrenology,_physiognomy_and_palmistry_Wellcome_L0074425.jpg<\/a>.<\/p><\/div>\n<div id=\"attachment_119\" style=\"width: 772px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-119\" loading=\"lazy\" class=\"size-full wp-image-119 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/20110_51.jpg\" alt=\"\" width=\"762\" height=\"1188\" \/><p id=\"caption-attachment-119\" class=\"wp-caption-text\">Dise\u00f1o de la portada del primer ejemplar de <em>The New York Times<\/em>. El contenido se ordena en columnas.<br \/>Fuente: <a href=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/8\/86\/The_New-York_Daily_Times_first_issue.jpg\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/upload.wikimedia.org\/wikipedia\/commons\/8\/86\/The_New-York_Daily_Times_first_issue.jpg<\/a>.<\/p><\/div>\n<p>Las alineaciones vertical y horizontal son las m\u00e1s frecuentes, pero en algunas ocasiones encontramos alineaciones basadas en otras formas, como las diagonales, en espiral, irregulares\u2026 Las posibilidades son infinitas, dependiendo de los objetivos del dise\u00f1ador.<\/p>\n<div id=\"attachment_51\" style=\"width: 772px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-51\" loading=\"lazy\" class=\"size-full wp-image-51 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/20110_52.jpg\" alt=\"\" width=\"762\" height=\"493\" \/><p id=\"caption-attachment-51\" class=\"wp-caption-text\">Cartel de Alexander R\u00f3dchenko para <em>El acorazado Potemkin<\/em> (1925), que alinea los elementos a lo largo de ejes diagonales.<br \/>Fuente: <a href=\"https:\/\/c2.staticflickr.com\/6\/5528\/12308077373_d93df0de22_b.jpg\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/c2.staticflickr.com\/6\/5528\/12308077373_d93df0de22_b.jpg<\/a>.<\/p><\/div>\n<h2><strong>Implicaciones en el dise\u00f1o de interfaces<\/strong><\/h2>\n<p>En dise\u00f1o de interfaces es muy recomendable trabajar con ret\u00edculas, que facilitan la alineaci\u00f3n de los elementos incluso cuando un mismo documento es accesible desde diferentes dispositivos.<\/p>\n<div id=\"attachment_52\" style=\"width: 772px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-52\" loading=\"lazy\" class=\"size-full wp-image-52 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/20110_53.jpg\" alt=\"\" width=\"762\" height=\"534\" \/><p id=\"caption-attachment-52\" class=\"wp-caption-text\">Ejemplo de ret\u00edcula para p\u00e1gina web<br \/>Fuente: <a href=\"https:\/\/c1.staticflickr.com\/4\/3721\/8905035966_fd79c66465_b.jpg\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/c1.staticflickr.com\/4\/3721\/8905035966_fd79c66465_b.jpg<\/a>.<\/p><\/div>\n<p>La alineaci\u00f3n en interfaces gr\u00e1ficas debe ser <em>pixel perfect<\/em>: es decir, los lados o los centros de los elementos deben coincidir a nivel de p\u00edxel. Cualquier irregularidad ser\u00e1 visible para el usuario como un problema de dise\u00f1o.<\/p>\n<p>Por otra parte, respecto al texto en pantalla, la alineaci\u00f3n a la izquierda es la m\u00e1s legible, ya que mantiene un punto de referencia fijo como inicio de l\u00ednea y facilita el escaneado visual.<\/p>\n<div id=\"attachment_53\" style=\"width: 530px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-53\" loading=\"lazy\" class=\"size-full wp-image-53 my-image\" src=\"\/wp-content\/uploads\/2020\/12\/20110_54.jpg\" alt=\"\" width=\"520\" height=\"394\" \/><p id=\"caption-attachment-53\" class=\"wp-caption-text\">Alineaci\u00f3n izquierda para el texto de una interfaz<br \/>Fuente: <a href=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2e\/Failed_login_attempt_notification_on_a_different_wiki.png\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2e\/Failed_login_attempt_notification_on_a_different_wiki.png<\/a>.<\/p><\/div>\n<p>Las alineaciones centrada y a la derecha se reservan para textos breves que tengan funciones espec\u00edficas. Por ejemplo, la alineaci\u00f3n centrada suele corresponder a t\u00edtulos o elementos sobre los que se quiera atraer la atenci\u00f3n de manera especial.<\/p>\n<h2>Referencias<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es? La alineaci\u00f3n se refiere a la colocaci\u00f3n de los elementos de manera que sus lados o sus centros coincidan respecto a un eje. Este eje de alineaci\u00f3n suele ser: Horizontal, de manera que los elementos forman una fila. Vertical, de manera que los elementos forman una columna. Las alineaciones vertical y horizontal son [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":18065,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[30,27],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14890\/"}],"collection":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=14890"}],"version-history":[{"count":5,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14890\/revisions\/"}],"predecessor-version":[{"id":17975,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/14890\/revisions\/17975\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18065\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=14890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=14890"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=14890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}