{"id":35325,"date":"2019-10-31T22:03:38","date_gmt":"2019-10-31T19:03:38","guid":{"rendered":"https:\/\/prohoster.info\/blog\/tyomnye-vremena-nastupayut\/"},"modified":"2019-10-31T22:03:38","modified_gmt":"2019-10-31T19:03:38","slug":"tyomnye-vremena-nastupayut","status":"publish","type":"post","link":"https:\/\/prohoster.info\/es\/blog\/news\/tyomnye-vremena-nastupayut","title":{"rendered":"Se avecinan tiempos oscuros","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

O qu\u00e9 tener en cuenta al desarrollar un modo oscuro para una aplicaci\u00f3n o sitio web<\/h2>\n

<\/p>\n

El a\u00f1o 2018 demostr\u00f3: los modos oscuros est\u00e1n en camino. Ahora que ya estamos a medio camino en 2019, podemos afirmar con confianza: est\u00e1n aqu\u00ed y est\u00e1n en todas partes.<\/p>\n

<\/p>\n

\"SeEjemplo de un viejo monitor \"verde sobre negro\"<\/a><\/noindex><\/em><\/p>\n

Empecemos por aclarar que el modo oscuro no es un concepto nuevo. Se ha utilizado durante bastante tiempo. De hecho, en el pasado solo se usaba eso: los monitores eran del tipo \"verde sobre negro\", pero solo porque el revestimiento fluorescente en su interior emit\u00eda un brillo verdoso cuando era activado por radiaci\u00f3n.<\/p>\n

<\/p>\n

Pero incluso despu\u00e9s de la introducci\u00f3n de monitores en color, el modo oscuro continu\u00f3 existiendo. \u00bfPor qu\u00e9 es eso?<\/p>\n

<\/a><\/noindex><\/p>\n

\"SeHay dos motivos principales que explican por qu\u00e9 hoy en d\u00eda cualquiera se apresura a agregar un tema oscuro a su aplicaci\u00f3n. Primero: las computadoras est\u00e1n en todas partes. Donde quiera que miremos, hay alguna pantalla. Usamos nuestros dispositivos m\u00f3viles desde la ma\u00f1ana hasta casi la medianoche. Tener un modo oscuro reduce la carga en los ojos cuando revisamos la red social \"una \u00faltima vez\" en la cama antes de dormir. (Si eres como yo, entonces \"una \u00faltima vez\" puede significar desplazamiento de 3 horas. R\/EngineeringPorn<\/a><\/noindex>. \u00bfModo oscuro? \u00a1Claro que s\u00ed!<\/p>\n

Otra raz\u00f3n son las nuevas tecnolog\u00edas de fabricaci\u00f3n de pantallas. Los modelos insignia de grandes empresas como Apple, Google, Samsung, Huawei, todos est\u00e1n equipados con pantallas OLED, que, a diferencia de las LCD, no requieren retroiluminaci\u00f3n. Y esta es una gran noticia para la duraci\u00f3n de tu bater\u00eda. Imagina que est\u00e1s viendo una imagen de un cuadrado negro en tu tel\u00e9fono; con una pantalla LCD, la retroiluminaci\u00f3n iluminar\u00e1 toda la pantalla, aunque gran parte de ella sea negra. Pero al ver la misma imagen en una pantalla OLED, los p\u00edxeles de los que se compone el cuadrado negro simplemente se apagan. As\u00ed que, en resumen, no consumen energ\u00eda.<\/p>\n

<\/p>\n

Estos tipos de pantallas hacen que los modos oscuros sean mucho m\u00e1s interesantes. Al usar una interfaz oscura, puedes prolongar significativamente la vida \u00fatil de la bater\u00eda de tu dispositivo. Consulta los hechos y cifras del Android Dev Summit en noviembre del a\u00f1o pasado para comprobarlo por ti mismo.<\/a><\/noindex>. Los modos oscuros, por supuesto, van de la mano con cambios en la interfaz de usuario, as\u00ed que \u00a1refresquemos nuestros conocimientos!<\/p>\n

<\/p>\n

Modos oscuros 101<\/h3>\n

<\/p>\n

Primero que nada: \u00aboscuro\u00bb no es igual a \u00abnegro\u00bb. No intentes reemplazar un fondo blanco por negro, ya que esto har\u00e1 que las sombras sean imposibles de usar. Un dise\u00f1o as\u00ed ser\u00eda s\u00faper plano (en el mal sentido).<\/p>\n

<\/p>\n

Es importante tener en cuenta los principios b\u00e1sicos de sombreado\/iluminaci\u00f3n. Los objetos que est\u00e1n m\u00e1s elevados deben ser m\u00e1s claros en la sombra, imitando la iluminaci\u00f3n y el sombreado reales. De este modo, es m\u00e1s f\u00e1cil distinguir los diferentes componentes y su jerarqu\u00eda.<\/p>\n

<\/p>\n

\"Se<\/p>\n

Dos cuadrados grises iguales con sombra, uno en un fondo negro al 100%, el otro en #121212. Al elevar el objeto, adquiere un matiz de gris m\u00e1s claro.<\/em><\/p>\n

<\/p>\n

En un tema oscuro, a\u00fan puedes trabajar con tu color base habitual, siempre que el contraste sea adecuado. Vamos a explicarlo con un ejemplo.<\/p>\n

<\/p>\n

\"Se<\/p>\n

En esta interfaz, la acci\u00f3n principal es un gran bot\u00f3n azul en el panel inferior. No hay problema en cuanto al contraste al cambiar entre el modo claro o oscuro, el bot\u00f3n sigue atrayendo la atenci\u00f3n, el \u00edcono es n\u00edtido, en general, todo es excelente.<\/p>\n

<\/p>\n

\"Se<\/p>\n

Cuando se utiliza el mismo color de manera diferente, como en el texto, habr\u00e1 problemas. Intenta usar un tono (mucho) menos saturado del color base o busca otras formas de incluir los colores de la marca en la interfaz.<\/p>\n

<\/p>\n

\"Se<\/p>\n

A la izquierda: el rojo sobre negro se ve mal. A la derecha: reducimos la saturaci\u00f3n y todo se ve bien. \u2014 nota del traductor.<\/em><\/p>\n

<\/p>\n

Lo mismo se aplica a todos los dem\u00e1s colores saturados que pudiste haber usado, como los colores de advertencia o error. Google utiliza una superposici\u00f3n de una capa blanca al 40% sobre el color de error predeterminado en sus directrices de Material Design<\/a><\/noindex> al cambiar al modo oscuro. Este es un buen punto de partida, ya que mejorar\u00e1 los niveles de contraste para cumplir con los est\u00e1ndares AA. Por supuesto, siempre puedes ajustar la configuraci\u00f3n a tu gusto, pero no olvides comprobar los niveles de contraste. Por cierto, una herramienta \u00fatil para este prop\u00f3sito es un complemento para Sketch \u2014 Stark<\/a><\/noindex>, que muestra exactamente cu\u00e1nto contraste hay entre 2 capas.<\/p>\n

<\/p>\n

\u00bfQu\u00e9 tal el texto?<\/h4>\n

<\/p>\n

Aqu\u00ed todo es simple: nada debe ser 100% negro sobre 100% blanco y viceversa. El blanco refleja ondas de luz de todas las longitudes, el negro absorbe. Si colocas texto 100% blanco sobre un fondo 100% negro, las letras reflejar\u00e1n la luz, se difuminar\u00e1n y se volver\u00e1n menos legibles, lo que afectar\u00e1 negativamente la legibilidad.<\/p>\n

<\/p>\n

Lo mismo ocurre con un fondo 100% blanco, que refleja demasiada luz como para concentrarse completamente en las palabras. Intenta suavizar un poco el blanco, utiliza un gris claro para los fondos y textos sobre fondos negros. Esto reducir\u00e1 la carga en los ojos, previniendo su sobrecarga<\/a><\/noindex><\/p>\n

<\/p>\n

\"Se<\/p>\n

El modo oscuro aqu\u00ed no se va a ir<\/h3>\n

<\/p>\n

La cantidad de tiempo que pasamos frente a las pantallas va en aumento constantemente, y cada nuevo d\u00eda, nuevas pantallas aparecen en nuestras vidas, desde que nos despertamos hasta que nos dormimos. Este es un fen\u00f3meno bastante nuevo, nuestros ojos a\u00fan no se han acostumbrado a este incremento del tiempo de pantalla por la noche. Aqu\u00ed es donde entra en juego el modo oscuro. Tras la introducci\u00f3n de esta funci\u00f3n en macOS y Material Design (y, probablemente, en iOS), creemos que, tarde o temprano, se convertir\u00e1 en el predeterminado en todas las aplicaciones, tanto m\u00f3viles como de escritorio. Y es mejor estar preparado para ello.<\/p>\n

<\/p>\n

La \u00fanica raz\u00f3n para no implementar el modo oscuro es cuando est\u00e1s absolutamente 100% seguro de que tu aplicaci\u00f3n se utilizar\u00e1 exclusivamente a plena luz del d\u00eda. Esto, la verdad, no ocurre a menudo.<\/p>\n

<\/p>\n

Vale la pena mencionar algunas cosas que requerir\u00e1n atenci\u00f3n especial al implementar el modo oscuro, adem\u00e1s de los principios b\u00e1sicos resumidos anteriormente.<\/p>\n

<\/p>\n

Desde el punto de vista de la accesibilidad, el modo oscuro no es el m\u00e1s conveniente, ya que el contraste, en general, es menor, lo que, a su vez, no mejora la legibilidad.<\/p>\n

<\/p>\n

\"Se<\/p>\n

Fuente<\/a><\/noindex><\/em><\/p>\n

<\/p>\n

Pero, imagina que te est\u00e1s preparando para dormir, tienes mucho sue\u00f1o, pero justo antes de quedarte dormido, recuerdas que tienes que enviar un mensaje s\u00faper importante a alguien que no puede esperar ni siquiera una noche. Tomas tu tel\u00e9fono, lo enciendes y \u00a1AAAAAAH! el fondo claro de tu iMessage no te dejar\u00e1 dormir durante otras 3 horas. Aunque el texto claro sobre un fondo oscuro no se considera el m\u00e1s accesible, tener el modo oscuro en este momento aumentar\u00eda la comodidad al mill\u00f3n. Todo depende de la situaci\u00f3n en la que se encuentre el usuario en ese momento.<\/strong><\/p>\n

<\/p>\n

Por eso creemos\u00a0modo oscuro autom\u00e1tico\u00a0<\/strong>una idea tan genial. Se activa por la noche y se desactiva por la ma\u00f1ana. El usuario ni siquiera tiene que pensar en ello, lo que es muy conveniente. Twitter ha hecho un gran trabajo con la configuraci\u00f3n del modo oscuro. Adem\u00e1s, tienen tanto un modo oscuro simple como un modo a\u00fan m\u00e1s oscuro para todas esas pantallas OLED, ahorro de bater\u00eda y todo lo relacionado. Aqu\u00ed es importante notar: permite al usuario cambiar manualmente cuando lo desee; no hay nada peor que un cambio autom\u00e1tico de la interfaz sin opci\u00f3n de revertir.<\/p>\n

<\/p>\n

\"Se<\/p>\n

Twitter tiene un modo oscuro autom\u00e1tico que se activa por la noche y se desactiva por la ma\u00f1ana.<\/em><\/p>\n

<\/p>\n

Tambi\u00e9n al desarrollar el tema, es importante tener en cuenta que algunas cosas simplemente no se pueden hacer oscuras.<\/p>\n

<\/p>\n

Toma un editor de texto, por ejemplo, Pages. Puedes hacer la interfaz oscura, pero la hoja siempre ser\u00e1 blanca, imitando una hoja de papel real.<\/p>\n

<\/p>\n

\"SePages con el modo oscuro activado<\/em><\/p>\n

Lo mismo ocurre con todos los tipos de editores para crear contenido, como Sketch o Illustrator. Aunque se puede hacer oscura la interfaz, el panel de trabajo con el que trabajas siempre ser\u00e1 blanco por defecto.<\/p>\n

<\/p>\n

\"SeSketch en modo oscuro y a\u00fan as\u00ed con un panel de trabajo blanco brillante.<\/em><\/p>\n

Por lo tanto, independientemente de la aplicaci\u00f3n, creemos que los modos oscuros se volver\u00e1n nativos para el sistema operativo que est\u00e9s usando, as\u00ed que es mejor prepararse para el futuro. ser\u00e1 oscuro.<\/strong>\u00a0<\/p>\n

<\/p>\n

Si deseas saber m\u00e1s sobre el desarrollo de interfaces oscuras, aseg\u00farate de revisar las pautas Material Design<\/a><\/noindex>, esta fue nuestra principal fuente de informaci\u00f3n para este art\u00edculo.<\/p>\n

Fuente: habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"

\u0418\u043b\u0438 \u043e \u0447\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0442\u0451\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 2018 \u0433\u043e\u0434 \u043f\u043e\u043a\u0430\u0437\u0430\u043b: \u0442\u0451\u043c\u043d\u044b\u0435 \u0440\u0435\u0436\u0438\u043c\u044b \u043d\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0435. \u0422\u0435\u043f\u0435\u0440\u044c, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0443\u0436\u0435 \u043d\u0430 \u043f\u043e\u043b\u043f\u0443\u0442\u0438 \u0432 2019, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043a\u0430\u0437\u0430\u0442\u044c: \u043e\u043d\u0438 \u0437\u0434\u0435\u0441\u044c, \u0438 \u043e\u043d\u0438 \u0432\u0435\u0437\u0434\u0435. \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430 \u00ab\u0437\u0435\u043b\u0435\u043d\u044b\u043c-\u043f\u043e-\u0447\u0451\u0440\u043d\u043e\u043c\u0443\u00bb \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0442\u0451\u043c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u2014 \u044d\u0442\u043e \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u043d\u043e\u0432\u0430\u044f \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f. \u0415\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 […]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":26518,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-35325","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47Tiempos oscuros llegan | ProHoster","description":"O sobre qu\u00e9 tener en cuenta al desarrollar un modo oscuro para una aplicaci\u00f3n o sitio web. 2018 mostr\u00f3 que los modos oscuros est\u00e1n en camino.","canonical_url":"https:\/\/prohoster.info\/es\/blog\/news\/tyomnye-vremena-nastupayut","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"es_ES","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u0422\u0451\u043c\u043d\u044b\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0430 \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u044e\u0442 | ProHoster","og:description":"\u0418\u043b\u0438 \u043e \u0447\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0442\u0451\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0436\u0438\u043c\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430 2018 \u0433\u043e\u0434 \u043f\u043e\u043a\u0430\u0437\u0430\u043b: \u0442\u0451\u043c\u043d\u044b\u0435 \u0440\u0435\u0436\u0438\u043c\u044b \u043d\u0430 \u043f\u043e\u0434\u0445\u043e\u0434\u0435.","og:url":"https:\/\/prohoster.info\/es\/blog\/news\/tyomnye-vremena-nastupayut","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-10-31T19:03:38+00:00","article:modified_time":"2019-10-31T19:03:38+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"35325","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-21 22:48:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-03-01 02:06:23","updated":"2026-01-21 22:48:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts\/35325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/comments?post=35325"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/posts\/35325\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/media\/26518"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/media?parent=35325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/categories?post=35325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/es\/wp-json\/wp\/v2\/tags?post=35325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}