{"id":24118,"date":"2026-03-30T10:30:32","date_gmt":"2026-03-30T08:30:32","guid":{"rendered":"https:\/\/www.ideat.net\/site\/marketing-digital\/marketing-digital2\/por-que-son-importantes-los-estilos-alternativos-en-una-pagina-web\/"},"modified":"2026-03-30T10:30:32","modified_gmt":"2026-03-30T08:30:32","slug":"por-que-son-importantes-los-estilos-alternativos-en-una-pagina-web","status":"publish","type":"post","link":"https:\/\/www.ideat.net\/site\/marketing-digital\/marketing-digital2\/por-que-son-importantes-los-estilos-alternativos-en-una-pagina-web\/","title":{"rendered":"\u00bfPor qu\u00e9 son importantes los estilos alternativos en una p\u00e1gina web?"},"content":{"rendered":"<p><a href=\"https:\/\/accesibilidadenlaweb.blogspot.com\/\" target=\"_blank\">https:\/\/accesibilidadenlaweb.blogspot.com\/<\/a><\/p>\n<div>\n<p>\u00a0<\/p>\n<p><iframe loading=\"lazy\" title=\"\u00bfPor qu\u00e9 son importantes los estilos alternativos en una p\u00e1gina web?\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/F1ZhedCgPQg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a hablar de la importancia de ofrecer estilos alternativos en una p\u00e1gina web.<\/p>\n<p>Si se les pregunta a los usuarios de la Web c\u00f3mo es una p\u00e1gina web \u201cbuena\u201d, probablemente la mayor\u00eda pensar\u00e1 en un dise\u00f1o visual atractivo, con colores arm\u00f3nicos, tipograf\u00edas modernas y animaciones, muchas animaciones. Y no les faltar\u00eda raz\u00f3n. Pero \u00bfqu\u00e9 pasa cuando este dise\u00f1o, pensado para la mayor\u00eda, no funciona para todos?<\/p>\n<p>A las p\u00e1ginas web acceden miles de millones de usuarios, muchos de ellos con necesidades, preferencias y contextos de uso diferentes. En especial, las personas con discapacidad muchas veces experimentan problemas, barreras, al navegar por las p\u00e1ginas web.<\/p>\n<p>Por ejemplo, este art\u00edculo del prestigioso peri\u00f3dico The New York Times tiene un importante problema de contraste en el t\u00edtulo del art\u00edculo y en la entradilla. [P] Una persona sin discapacidad seguramente leer\u00e1 con algunos problemas el t\u00edtulo y la entradilla. Pero una persona con discapacidad visual o discapacidad cognitiva quiz\u00e1s sea incapaz de leerlo y entenderlo.<\/p>\n<p>Este problema es muy f\u00e1cil de resolver.<\/p>\n<p>Los dise\u00f1adores web del peri\u00f3dico The New York Times podr\u00edan simplemente a\u00f1adir un fondo semitransparente al t\u00edtulo y a la entradilla que aumentase el contraste entre el texto y la fotograf\u00eda de fondo.<\/p>\n<p>\u00bfY esto c\u00f3mo se hace? Seguramente pensar\u00e1s que es dif\u00edcil o requiere mucho tiempo y por eso no lo han hecho. Bueno, en realidad, en lo que he tardado en sacarme un moco de la nariz he a\u00f1adido el c\u00f3digo necesario para resolver este problema.<\/p>\n<p>Y entonces, \u00bfpor qu\u00e9 no lo han hecho? Bueno, podemos pensar en muchas razones, pero por mi experiencia, normalmente, el propietario o el dise\u00f1ador del sitio quiere que su sitio web se vea exactamente de una forma concreta, aunque eso sea negativo para muchos usuarios.<\/p>\n<p>La soluci\u00f3n a esta situaci\u00f3n es sencilla, podemos dise\u00f1ar nuestro sitio web con un estilo principal y con todas las mierdas que queramos, aunque nos estemos pegando un tiro en el pie.<\/p>\n<p>Pero a la vez, tambi\u00e9n debemos ofrecer estilos alternativos para desarrollar una web verdaderamente universal y robusta.<\/p>\n<p>Los estilos alternativos son versiones de nuestra hoja de estilos principal que ofrecen una experiencia de usuario diferente. No son un sitio web nuevo, sino una adaptaci\u00f3n del mismo contenido. Los m\u00e1s comunes son:<\/p>\n<p>Estilo oscuro: para reducir la fatiga visual en entornos con poca luz o por preferencia personal.<\/p>\n<p>Estilo de alto contraste: para usuarios con baja visi\u00f3n.<\/p>\n<p>Estilo texto grande: para usuarios con baja visi\u00f3n.<\/p>\n<p>Estilo daltonismo: que ajusta la paleta de colores para garantizar que la informaci\u00f3n se perciba correctamente.<\/p>\n<p>Estilo de lectura: que elimina elementos superfluos como men\u00fas y publicidad para concentrarse en el contenido principal.<\/p>\n<p>Estilo para impresi\u00f3n: elimina elementos superfluos como men\u00fas y adapta el contenido al tama\u00f1o de una hoja de papel.<\/p>\n<p>Hoy en d\u00eda, muchos sitios web ofrecen algunos de estos estilos alternativos. Por ejemplo, en mi sitio web sobre accesibilidad web ofrezco una opci\u00f3n de configuraci\u00f3n que permite que el usuario seleccione un estilo que se adapte mejor a sus necesidades: el estilo principal, dos estilos de alto contraste (amarillo sobre negro y verde sobre negro), colores de bajo contrate y estilos con diferentes tipos de letra.<\/p>\n<p>Aqu\u00ed tenemos otro ejemplo, la web de La Moncloa, que por defecto aparece con el modo claro, pero que tiene una opci\u00f3n para cambiar al modo oscuro.<\/p>\n<p>\u00bfY c\u00f3mo se ofrecen los estilos alternativos en un sitio web? Existen varias formas, en el v\u00eddeo \u201cCSS: definici\u00f3n y uso de estilos alternativos\u201d te explico una forma que se puede emplear en Mozilla Firefox, de forma nativa, y en otros navegadores web con alguna extensi\u00f3n. Pero en la mayor\u00eda de los casos, tendr\u00e1s que proporciona un selector de estilos como el que hemos visto en la web de La Moncloa.<\/p>\n<p>Sobre el estilo para impresi\u00f3n te recomiendo los siguientes v\u00eddeos. Por un lado, te recomiendo que veas el v\u00eddeo \u201cCSS: hoja de estilo para impresi\u00f3n\u201d, del estudiante Samuel L\u00f3pez Brufal. En este v\u00eddeo se ense\u00f1a a crear un CSS correcto para imprimir las p\u00e1ginas web.<\/p>\n<p>Muchos dise\u00f1adores no optimizan las p\u00e1ginas web para impresi\u00f3n, lo que genera confusi\u00f3n al imprimir.<\/p>\n<p>Samuel propone los siguientes consejos para una correcta hoja de estilo para impresi\u00f3n:<\/p>\n<p>Dise\u00f1o adaptativo para impresi\u00f3n.<\/p>\n<p>Uso de tonos blancos y negros (o colores originales si es necesario).<\/p>\n<p>Incluir las URLs visibles para referencia posterior.<\/p>\n<p>Y aplicar filtros CSS para mejorar los resultados.<\/p>\n<p>En el v\u00eddeo de Samuel tambi\u00e9n se explica que se deben evitar las divisiones en tablas y listas con las siguientes propiedades de CSS: page-break-inside, page-break-before y page-break-after.<\/p>\n<p>En realidad, estas propiedades de CSS est\u00e1n obsoletas y en su lugar se deben emplear las propiedades break-after, break-before y break-inside.<\/p>\n<p>El tema de evitar las divisiones en tablas y listas lo tienes desarrollado con m\u00e1s profundidad en los siguientes v\u00eddeos. \u201cCSS: c\u00f3mo controlar los puntos de corte cuando se imprime una p\u00e1gina\u201d, parte 1 y parte 2. Y con esto finaliza este v\u00eddeo en el que te he explicado la importancia de los estilos alternativos en las p\u00e1ginas web.<\/p>\n<p>Recuerda que este v\u00eddeo forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d que est\u00e1 disponible en la direcci\u00f3n idesweb.es.<\/p>\n<p>Muchas gracias por tu atenci\u00f3n.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/accesibilidadenlaweb.blogspot.com\/ \u00a0 Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a hablar de la importancia de ofrecer estilos alternativos en una p\u00e1gina web. Si se les pregunta a los usuarios de la Web c\u00f3mo es &#8230; <a title=\"\u00bfPor qu\u00e9 son importantes los estilos alternativos en una p\u00e1gina web?\" class=\"read-more\" href=\"https:\/\/www.ideat.net\/site\/marketing-digital\/marketing-digital2\/por-que-son-importantes-los-estilos-alternativos-en-una-pagina-web\/\" aria-label=\"Leer m\u00e1s sobre \u00bfPor qu\u00e9 son importantes los estilos alternativos en una p\u00e1gina web?\">Leer m\u00e1s<\/a><\/p>\n","protected":false},"author":1,"featured_media":24119,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-24118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing-digital2"],"_links":{"self":[{"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/posts\/24118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/comments?post=24118"}],"version-history":[{"count":0,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/posts\/24118\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/media\/24119"}],"wp:attachment":[{"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/media?parent=24118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/categories?post=24118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ideat.net\/site\/wp-json\/wp\/v2\/tags?post=24118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}