[vc_row][vc_column][vc_column_text]Desde la primera pagina web en 1990, el dise\u00f1o web ha innovado continuamente, incluyendo cada vez mas funcionalidades y mejoras en la interacci\u00f3n con el usuario, atendiendo tanto a estructura como apariencia.
\nAquella primera pagina era un texto negro sobre fondo blanco. Ahora, el Big Tech se ha sumado a una nueva tendencia. En cada vez m\u00e1s Apps e Interfaces podemos elegir entre un modo claro y un modo oscuro. Y con estos componentes, podemos desarrollar nuestras propias interfaces, permitiendo a nuestros usuarios elegir el modo que mas les conviene en cada momento.<\/p>\n
25 a\u00f1os de dise\u00f1o web<\/a><\/p>\n Dark \/ Light mode, en espa\u00f1ol modo oscuro \/ claro, es un concepto que hace referencia a una de las \u00faltimas tendencias en lo que respecta a los sistemas operativos y dispositivos m\u00f3viles. Consiste en seleccionar (por parte del usuario) el tipo de modo por defecto que tendr\u00e1 el fondo de las aplicaciones.\u00a0<\/span> Tanto el modo claro como el modo oscuro presentan caracter\u00edsticas propias. En lo que respecta al modo claro, \u00e9ste se impuso de manera arrolladora en el momento en el que las empresas de desarrollo de software comenzaron a desarrollar interfaces gr\u00e1ficas. Adem\u00e1s, al modo claro siempre le han acompa\u00f1ado letras negras.\u00a0<\/span><\/p>\n El modo oscuro, que est\u00e1 disponible en macOS Mojave o versiones posteriores, ofrece un nuevo y espectacular aspecto que resulta menos agresivo para la vista y te ayuda a concentrarte en el trabajo A continuaci\u00f3n, se muestra un listado de aplicaciones que a d\u00eda de hoy ofrecen la posibilidad de elegir el modo oscuro a sus usuarios:<\/span><\/p>\n Descubre qu\u00e9 es el dark \/ light mode, cu\u00e1les son las caracter\u00edsticas que presentan ambos modos y algunos ejemplos de aplicaciones que lo implementan.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[23],"tags":[],"class_list":{"0":"post-17912","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-diseno-web"},"_links":{"self":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/17912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/comments?post=17912"}],"version-history":[{"count":0,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/posts\/17912\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/media?parent=17912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/categories?post=17912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.conectasoftware.com\/magazine\/wp-json\/wp\/v2\/tags?post=17912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Dark \/ Light Mode, \u00bfqu\u00e9 es?<\/b><\/h2>\n
\nEl tipo de modo puede ser dark (traducido como oscuro) o light (traducido como claro) siendo el modo light el que ha venido predefinido como formato est\u00e1ndar tanto en los sistemas operativos, los sitios webs y en las aplicaciones m\u00f3viles durante todos estos a\u00f1os.\u00a0<\/span>
\n <\/p>\nCaracter\u00edsticas de ambos modos<\/b><\/h2>\n
\nApple<\/a><\/p><\/blockquote>\n
\nA finales del 2019, empresas como Google<\/a>, Facebook o Apple, comenzaban a incluir el modo oscuro en sus aplicaciones. Este modo, al contrario que el modo claro, ofrece el fondo negro y las letras blancas lo cual, ofrece grandes ventajas a los usuarios. El modo oscuro ofrece una menor demanda de consumo energ\u00e9tico por parte de las pantallas, (seg\u00fan Google, la reducci\u00f3n se encuentra entre un 14% y un 60%), lo que se traduce en ahorro de bater\u00eda (sobre todo en las pantallas <\/span>OLED<\/span><\/a>, ya que son capaces de iluminar cada p\u00edxel de manera independiente) y por consiguiente, un buen efecto colateral en lo que respecta a la salud de los usuarios, ya que reduce la fatiga visual.\u00a0<\/span>
\n <\/p>\nAplicaciones que implementan el modo oscuro<\/b><\/h2>\n
\n
Normas y especificaciones de Google en relaci\u00f3n con el modo oscuro<\/b><\/h2>\n
\nSeg\u00fan las normas y especificaciones de Google, la mayor\u00eda de interfaces de usuario que vayan a ser desarrolladas haciendo uso del modo oscuro, deben hacer uso de <\/span>tonos negros degradados con grises<\/b>, <\/span>colores acentuados<\/b> que destaquen, <\/span>ahorro de energ\u00eda<\/b>, y la <\/span>mejora de la accesibilidad<\/b>.\u00a0<\/span>
\nPara lograr estos objetivos, se deben tener en cuenta las propiedades de <\/span>contraste<\/b>, <\/span>profundidad<\/b>, la <\/span>desaturaci\u00f3n del color<\/b> y la <\/span>limitaci\u00f3n de colores<\/b>. Cabe destacar que Google tiene en cuenta las normas y pautas que define la WCAG, es decir, las directrices de accesibilidad web que han sido publicadas por la Iniciativa de Accesibilidad Web.\u00a0<\/span>
\n
\nEn cuanto al contraste, los fondos oscuros requieren el uso de tipograf\u00edas blancas ya que contrastan correctamente. Adem\u00e1s, para que la aplicaci\u00f3n cumpla con las normas y requisitos de la WCAG, concretamente la normativa AA, el nivel de contraste debe encontrarse al menos a 15.8: 1 entre el texto y el fondo.\u00a0<\/span>
\nEn cuanto a la profundidad, el modo oscuro hace uso de un gris oscuro y no del negro directamente, que ser\u00e1 el tono de la superficie de los elementos, ofreciendo la posibilidad de visualizar elementos de manera que parezca que se encuentran flotando.\u00a0<\/span>
\nEn cuanto a la limitaci\u00f3n de colores, se deben utilizar colores desaturados, evitando en la medida de lo posible los colores saturados ya que \u00e9stos \u00faltimos, cuando hay una superficie oscura, no pasar\u00e1n el est\u00e1ndar de accesibilidad de 4.5: 1, provocando fatiga visual. Google, dentro de su paleta de colores, ofrece diferentes tonalidades de un mismo color enumer\u00e1ndolas a trav\u00e9s de rangos. Los rangos recomendados fluyen entre el 50 y el 200.<\/span>
\nEn cuanto al mantenimiento de la identidad de la marca, se recomienda hacer uso del color primario saturado en uno o dos elementos, pudiendo verse reflejado en ciertos elementos como los botones. Junto con esta norma, se debe implementar el resto de la interfaz con el mismo color primario pero en el tono 200.\u00a0<\/span>[\/vc_column_text][\/vc_column][\/vc_row][ut_content_block id=\u00bb17679″][\/ut_content_block]<\/p>\n","protected":false},"excerpt":{"rendered":"