{"id":175,"date":"2017-11-12T17:54:00","date_gmt":"2017-11-12T17:54:00","guid":{"rendered":"https:\/\/alistapart.com\/es\/?post_type=article&p=175"},"modified":"2021-04-03T18:03:59","modified_gmt":"2021-04-03T18:03:59","slug":"entendiendo-la-mejora-progresiva","status":"publish","type":"article","link":"https:\/\/alistapart.com\/es\/article\/entendiendo-la-mejora-progresiva\/","title":{"rendered":"Entendiendo la Mejora Progresiva"},"content":{"rendered":"\n

Desde 1994, la comunidad de desarrollo web se ha llevado al comp\u00e1s de la promoci\u00f3n a la degradaci\u00f3n agraciada<\/a>. Como resultado de una adaptaci\u00f3n del mundo de la ingenier\u00eda, el concepto fue, en su n\u00facleo, sobre ir ofreciendo a los \u00faltimos y mejores navegadores una experiencia de cena completa mientras se le arrojaban unas pocas sobras a las tristes gentes lo suficientemente desafortunadas como para estar utilizando Netscape 4. Funcion\u00f3, seguro, pero no se correspondi\u00f3 realmente con la visi\u00f3n original de Tim Berners-Lee de una web universalmente accesible.<\/p>\n\n\n\n

Una d\u00e9cada m\u00e1s tarde, algunos ingeniosos comenzaron a cuestionar a la degradaci\u00f3n agraciada y encontraron que fallaba en muchos niveles. Relacionado con disponibilidad de contenido, accesibilidad general y funcionalidades en navegadores m\u00f3viles, buscaron una nueva forma de tratar el desarrollo web \u2014 una forma que se enfocara en el contenido e hiciera m\u00e1s que solo murmurar a viejos dispositivos.<\/p>\n\n\n\n

En la SXSW del 2003, Steve Champeon y Nick Finck hicieron una presentaci\u00f3n titulada \u201cInclusive Web Design For The Future<\/a>\u201d (Dise\u00f1o de Web Inclusiva para el Futuro). All\u00ed, develaron un anteproyecto para su nueva forma de tratar el desarrollo web. Steve adem\u00e1s la nombr\u00f3: mejora progresiva<\/a>.<\/p>\n\n\n\n

Hay una (sutil) diferencia<\/h2>\n\n\n\n

En caso de que est\u00e9s rompi\u00e9ndote la cabeza, tratando de ver en qu\u00e9 difieren la degradaci\u00f3n agraciada y la mejora progresiva, dir\u00e9: es una cuesti\u00f3n de perspectiva. Ambas, degradaci\u00f3n agraciada y mejora progresiva, consideran cu\u00e1n bien funciona un sitio sobre una variedad de navegadores en una variedad de dispositivos. La clave es d\u00f3nde se enfocan y c\u00f3mo ello afecta al flujo de trabajo.<\/p>\n\n\n\n

La perspectiva de la Degradaci\u00f3n agraciada<\/h3>\n\n\n\n

La Degradaci\u00f3n agraciada se enfoca en construir el sitio web para los navegadores m\u00e1s avanzados\/capaces. Probarlo en navegadores juzgados \u201cenvejecidos\u201d o menos capaces usualmente toma lugar durante el \u00faltimo cuarto del ciclo de desarrollo y es a menudo restringido a la liberaci\u00f3n anterior de los navegadores principales (IE, Mozilla, etc.).<\/p>\n\n\n\n

Bajo este paradigma, los navegadores envejecidos se espera que ofrezcan una experiencia pobre pero aceptable. Podr\u00edan hacerse peque\u00f1os arreglos para acomodar a un navegador en particular. Debido a que no son el foco principal, se presta poca atenci\u00f3n fuera de los errores m\u00e1s eminentes.<\/p>\n\n\n\n

La perspectiva de la mejora progresiva<\/h3>\n\n\n\n

La Mejora progresiva se enfoca en el contenido. N\u00f3tese la diferencia: Ni siquiera he mencionado a los navegadores.<\/p>\n\n\n\n

Para empezar, el contenido es la raz\u00f3n por la que creamos los sitios web. Algunos sitios lo divulgan, otros lo recopilan, algunos lo solicitan, otros lo manipulan, y algunos incluso hacen todo eso, pero todos lo requieren. Eso es lo que hace que la mejora progresiva sea un paradigma m\u00e1s apropiado. Es la raz\u00f3n por la cual Yahoo! r\u00e1pidamente la adopt\u00f3 y la utiliz\u00f3 para crear su estrategia Graded Browser Support<\/a>.<\/p>\n\n\n\n

Entonces, \u00bfc\u00f3mo funciona?<\/h2>\n\n\n\n

Meterse dentro de la mentalidad de la mejora progresiva es simple: solo piensa desde el contenido hacia afuera. El contenido forma la base s\u00f3lida en que t\u00fa solapas tu estilo e interactividad. Si eres un fan de las golosinas, piensa en ello como un M&M de Man\u00ed:<\/p>\n\n\n\n

\"\"
Las Capas de Chocolate de la Mejora Progresiva<\/figcaption><\/figure><\/div>\n\n\n\n

Comenzando con tu contenido de man\u00ed, marcado con sem\u00e1ntica (X)HTML enriquecida. Reviste ese contenido con una capa de rico y cremoso CSS. Finalmente, a\u00f1ade JavaScript como una c\u00e1scara de caramelo duro para provocar una sabrosa delicia (y evitar que se derrita en tus manos).<\/p>\n\n\n\n

Si est\u00e1s familiarizado con el mantra del movimiento de los est\u00e1ndares web \u2014 separaci\u00f3n, separaci\u00f3n, separaci\u00f3n \u2014 esto tiene total sentido. El desarrollo basado en est\u00e1ndares web ha menudo se ha comparado con un pastel y sus capas<\/a> (o, si quieres ponerlo realmente elegante, un trifle<\/a>).<\/p>\n\n\n\n

Yo prefiero la analog\u00eda del M&M de Man\u00ed, porque en ella, las capas envuelven el contenido completamente, muy similar a la forma en la que nuestros estilos y scripts circundan nuestro contenido.<\/p>\n\n\n\n

Si vas a degustar mi analog\u00eda comestible un poco m\u00e1s (espero no te est\u00e9 dando hambre), te explicar\u00e9 por qu\u00e9 este enfoque es mejor y c\u00f3mo las capas interact\u00faan dentro de este paradigma.<\/p>\n\n\n\n

El man\u00ed<\/h3>\n\n\n\n

A algunas personas les gusta el man\u00ed; de hecho, algunas personas prefieren el man\u00ed que los M&Ms de man\u00ed. De la misma forma, alguna gente (y cosas como robots de motores de b\u00fasquedas) quieren solo el contenido.<\/p>\n\n\n\n

Tambi\u00e9n hay gente que no puede lidiar con el chocolate y las capas de caramelo encima del man\u00ed (diab\u00e9ticos, por ejemplo). Como ellos, personas en dispositivos m\u00f3viles o viejos navegadores podr\u00edan no estar habilitados para ver tu lindo dise\u00f1o o interacci\u00f3n con tu sofisticada interfaz basada en Ajax.<\/p>\n\n\n\n

Para ofrecer una experiencia b\u00e1sica a esos usuarios es esencial asegurarse que tu markup transmite el mayor nivel de detalle sobre el contenido que encapsula.<\/p>\n\n\n\n

La cobertura de chocolate<\/h3>\n\n\n\n

Luego, puedes sumergir delicadamente tu contenido en un ba\u00f1o tibio de CSS suculento \u2014 pero antes de que pases a la c\u00e1scara dura de caramelo, hay algunas consideraciones adicionales.<\/p>\n\n\n\n

Hay gente que adora las coberturas de chocolates de los man\u00eds. Esa gente es como la capa media de usuarios que tienen alg\u00fan nivel de soporte de CSS, pero pueden no tener soporte decente para JavaScript. O pueden trabajar en una compa\u00f1\u00eda donde los de seguridad IT est\u00e1n m\u00e1s que un poco f\u00f3bicos con JavaScript. Para ellos, JavaScript deber\u00eda ser deshabilitado completamente.<\/p>\n\n\n\n

As\u00ed sean fan\u00e1ticos de Goober<\/a> o no, esa gente merece ser tenida en cuenta. Hay varias formas en la mejora progresiva de aplicar estilos a tu contenido, y ser\u00e1n asunto del segundo art\u00edculo en esta serie.<\/p>\n\n\n\n

La c\u00e1scara de caramelo duro<\/h3>\n\n\n\n

Finalmente, puedes introducir JavaScript en la mezcla. Con las posibilidades de interacci\u00f3n enriquecidas que provee, as\u00ed como la habilidad de manipular e interactuar con las capas de contenido y presentaci\u00f3n, JavaScript es verdaderamente el ingrediente que puede impulsar un sitio hacia una \u201cexperiencia\u201d.<\/p>\n\n\n\n

No estoy seguro exactamente c\u00f3mo la c\u00e1scara dura de caramelo es adicionada a un M&M (supongo que se sumergen de alguna forma), pero se puede adicionar funcionalidad e interactividad basada en JavaScript a tus sitios web en un abrir y cerrar de ojos cuando piensas en mejora progresiva. Y, similar a los M&Ms; que est\u00e1n disponibles en variedad de colores, la experiencia JavaScript puede variar basada en las capacidades del navegador o dispositivo que est\u00e1 intentando usarlo.<\/p>\n\n\n\n

Como probablemente sepas, este tipo de desarrollo es llamado JavaScript no intrusivo. Cubrir\u00e9 esas t\u00e9cnicas y pr\u00e1cticas en el tercer y final art\u00edculo de esta serie.<\/p>\n\n\n\n

Junt\u00e1ndolo todo<\/strong><\/h2>\n\n\n\n

Desarrollar con mejora progresiva es de verdad muy simple una vez que entiendes el concepto y comienzas a ponerlo en pr\u00e1ctica; quiz\u00e1s mucho m\u00e1s simple que elaborar caramelo. Los pr\u00f3ximos dos art\u00edculos en esta serie te ayudar\u00e1n a perfeccionar tus habilidades en la mejora progresiva con CSS y JavaScript, y te ense\u00f1ar\u00e1n como la filosof\u00eda se traduce a c\u00f3digo.<\/p>\n\n\n\n

*Traducido al espa\u00f1ol por Nils Teller\u00eda<\/a>.<\/em><\/h5>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Steven Champeon dio un vuelco al desarrollo web y cre\u00f3 una mejor pr\u00e1ctica instant\u00e1nea de dise\u00f1o basado en est\u00e1ndares, cuando introdujo la noci\u00f3n de dise\u00f1ar para el contenido y la experiencia en lugar de dise\u00f1ar para los navegadores. En la primera parte de esta serie, Gustafson de ALA nos refresca los principios de la mejora progresiva. Las pr\u00f3ximas entregas traducir\u00e1n la filosof\u00eda en un dise\u00f1o y un c\u00f3digo sofisticados y orientados al futuro.<\/p>\n","protected":false},"author":601,"featured_media":176,"comment_status":"open","ping_status":"closed","template":"","categories":[43,24,37,20,36,25,19,22],"tags":[],"coauthors":[49],"class_list":["post-175","article","type-article","status-publish","has-post-thumbnail","hentry","category-arquitectura-de-informacion","category-css","category-estado-de-la-web","category-html","category-industria","category-javascript","category-navegadores","category-usabilidad"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/article\/175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/users\/601"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/comments?post=175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/media\/176"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/media?parent=175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/categories?post=175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/tags?post=175"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/coauthors?post=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}