Si has le\u00eddo los primeros dos art\u00edculos de esta serie, ya debes de estar entrando en el \u2018groove\u2019 de la mejora progresiva. En este art\u00edculo vamos a discutir como aplicar la filosof\u00eda de mejora progresiva a scripts en el cliente. Como podr\u00e1s ver pronto, todo se trata simplemente de dos cosas: moderaci\u00f3n y planeaci\u00f3n.<\/p>\n\n\n\n
Seguro has escuchado la frase \u2018el poder corrompe\u2019. Tiene otros significados mas profundos, pero para nuestro prop\u00f3sito, vamos a concentrarnos solo en esas tres palabras. Javascript es una herramienta muy poderosa, y por demasiado tiempo fue una fuerza que corromp\u00eda la web. Generaba varios obst\u00e1culos, mensajes de error y demasiadas ventanas pop-up a aquellos que navegaban la web. Tambi\u00e9n era altamente incomprendido, lo cual probablemente contribu\u00eda a su abuso, y en pr\u00e1ctica era parecido a un arte oscuro.<\/p>\n\n\n\n
No solo Javascript hac\u00eda mas mal que bien, si no que tambi\u00e9n se convirti\u00f3 en algo indomable. Debajo de su caparaz\u00f3n, el c\u00f3digo era un nido de ratas que causaba que hasta los mas determinados salieran corriendo gritando; el mantenimiento era una pesadilla debido a la propagaci\u00f3n de c\u00f3digo enredado y cr\u00edptico a trav\u00e9s del forking.<\/p>\n\n\n\n
En esos tiempos, Javascript era realmente desagradable por necesidad: los navegadores a\u00fan ten\u00edan que implementar est\u00e1ndares decentes de soporte y los desarrolladores estaban ocupados escribiendo c\u00f3digo HTML complejo y confuso. Javascript ten\u00eda que saltar muchos obst\u00e1culos para lograr cualquier forma de compatibilidad entre navegadores, incluso en algo tan simple como un rollover sobre una imagen.<\/p>\n\n\n\n
Por suerte, estamos en un mejor lugar ahora en ambas areas y finalmente podemos implementar un Javascript mucho m\u00e1s limpio. Sin embargo, tenemos que respetar su poder y actuar responsablemente. Necesitamos enfocarnos tanto en como Javascript debe de ser usado as\u00ed como en lo que puede hacer \u2014 tal vez un incluso un poco m\u00e1s. Necesitamos practicar moderaci\u00f3n. La mejora progresiva nos ayuda a hacer eso porque nos fuerza a concentrarnos en el contenido y construir a partir del mismo.<\/p>\n\n\n\n
Con la mejora progresiva, construimos sitios con una fundaci\u00f3n de c\u00f3digo usable. Un concepto clave de Javascript que hay que tener en mente es que cualquier contenido que los usuarios necesiten para comprender el prop\u00f3sito de la p\u00e1gina debe de existir en la p\u00e1gina aun en la ausencia de scripts del lado de cliente. Punto.<\/p>\n\n\n\n
Un ejemplo: Tal vez el contenido en cuesti\u00f3n es una tabla de comparaci\u00f3n para los productos que vendes. Si los requerimientos del sitio dictan que los datos puedan ser reordenados por columna, puedes considerar cargando la tabla en la p\u00e1gina via Ajax, para que puedas reorganizarla en el servidor en cualquier momento. Suena perfecto, no crees?<\/p>\n\n\n\n
Incorrecto.<\/p>\n\n\n\n
Que pasa cuando posibles clientes visitan la p\u00e1gina sin Javascript disponible? Si el contenido es cargado en la p\u00e1gina usando Javascript, no tendr\u00e1n acceso al contenido en lo absoluto, incluso en su estado desordenado. Que tan posible crees que sea que completen una compra si no pueden si quiera ver los productos?<\/p>\n\n\n\n
El caso anterior ni siquiera toca el tema de las ramificaciones para la b\u00fasqueda. Las ara\u00f1as de los buscadores no ejecutan Javascript, as\u00ed que si lo usas para cargar contenido en tu p\u00e1gina, nunca van a leer o a catalogar tu contenido. Cuantos posibles clientes vas a perder si la informaci\u00f3n de tu producto no puede ser encontrada y catalogada por Google, Microsoft o Yahoo?<\/p>\n\n\n\n
Considerando tales requerimientos con mejora progresiva en mente, deber\u00edas de incluir tu tabla b\u00e1sica en el markup. En la mayor\u00eda de los casos podr\u00eda seguir siendo generada por el servidor, pero estar\u00eda incluida directamente en la p\u00e1gina en vez de cargada via Ajax. Podr\u00edas escribir un script que encuentre la tabla en el DOM y la haga interactiva, generando links para reordenarla y conectando los eventos onclick<\/strong> a llamadas Ajax para conseguir una version de la tabla reordenada.<\/p>\n\n\n\n Al completar el reto de esta manera, no solo has cumplido los requerimientos, tambi\u00e9n haz proporcionado una experiencia \u2018lo-fi\u2019 para la ara\u00f1as de los buscadores y los usuarios sin Javascript.<\/p>\n\n\n\n Llev\u00e1ndolo un paso m\u00e1s lejos, podr\u00edas incluso agregar los links para reordenar a la cabeza de cada columna y hacer que actualicen la p\u00e1gina, pasando las variables necesarias para reorganizar la tabla. Eso podr\u00eda lograr que usuarios sin JS puedan reordenar la informaci\u00f3n tambi\u00e9n, d\u00e1ndoles una versi\u00f3n un poco menos responsiva pero aun con el funcionamiento \u2018hi-fi\u2019 completo.<\/p>\n\n\n\n Unos peque\u00f1os cambios en tus scripts pueden ayudarte a conseguir que los links completen tus llamadas Ajax como antes, entregando la mejor experiencia a las usuarios con mas capacidad. Al final, tendr\u00edas un ejemplo perfecto de mejora progresiva en acci\u00f3n.<\/p>\n\n\n\n Ahora que tienes un conocimiento fundamental sobre lo que es la mejora progresiva, podemos discutir algunas t\u00e9cnicas que puedes usar para comenzar.<\/p>\n\n\n\n Una de las claves para efectivamente integrar la mejora progresiva es establecer un plan para manejar tus scripts. Para hacerlo, hay que primero familiarizarse con el concepto de discreci\u00f3n en Javascript. Este es la base para la mejora progresiva para el mundo de scripts en el cliente.<\/p>\n\n\n\n El significado mas obvio de \u201cdiscreci\u00f3n\u201d es deshacerse todo los manipuladores de eventos ya que f\u00e1cilmente pueden ser registrados via el DOM:<\/p>\n\n\n\n El pr\u00f3ximo paso es mover todos tus scripts a archivos externos ligados, en lugar de implementarlos directamente usando elementos <script>:<\/p>\n\n\n\n Esto va a hacer mas sencillo el mantenimiento y te da algunos beneficios en cuanto a econom\u00eda para el crecimiento. (Siendo honestos, estos cambios pueden tomar algo de tiempo, ya que tantos editores WYSIWYG ( Lo que ves es lo que hay) y librer\u00edas para desarrollo de aplicaciones web generan Javascript estorboso desde un inicio. Sin embargo, hay algunos patches y herramientas agregadas que puedes usar en varios de estos sistemas para sobrellevar cualquiera de sus malos h\u00e1bitos.)<\/p>\n\n\n\n El pr\u00f3ximo paso en hacer mas discretos tus scripts es decidiendo cuando y como incluirlos. En el sentido mas sencillo, esto significa asegurar que realmente puedas correr el script en el navegador del usuario probando la disponibilidad de un m\u00e9todo antes de ejecutarlo:<\/p>\n\n\n\n Tambi\u00e9n vas a necesitar probar cualquier objeto que necesites, e incluso deber\u00edas probar si existen los elementos identificados que necesitas para ligar tus scripts. Siguiendo este proceso con cada script que usas vas a crear una experiencia de interacci\u00f3n a la medida en donde solo los scripts que el navegador de un usuario puede manejar \u2014 y que pueden correr encima del markup de la p\u00e1gina actual \u2014 van a ser ejecutados.<\/p>\n\n\n\n Para m\u00e1s informaci\u00f3n sobre Javascript discreto, visita el art\u00edculo de Jeremy Keith sobre el tema.<\/a><\/p>\n\n\n\n Javascript no existe en un vac\u00edo, as\u00ed que tal como debes de mantener alguna separaci\u00f3n entre tus scripts y tu markup (como discutimos anteriormente), debes mantener alguna separaci\u00f3n entre tus scripts y tus estilos.<\/p>\n\n\n\n Principalmente, debes de evitar agregar estilos directamente en l\u00ednea cuando creas o manipulas elementos en el DOM. Mejor aplica nombres de clases que se relacionan con tus hojas de estilo globales o espec\u00edficas para cada script:<\/p>\n\n\n\n Una hoja de estilo espec\u00edfica para cada script es una buena opci\u00f3n si tus scripts requieren de muchos estilos para habilitar su interactividad. Configur\u00e1ndolos en su propio archivo te permite mantenerlos independientemente del resto de los estilos en el sitio. Tambi\u00e9n te da la capacidad de ligar a tal hoja de estilo solo cuando un script es ejecutado, as\u00ed reduciendo el tiempo de descarga en p\u00e1ginas que no usan tal script o en navegadores que tienen la capacidad de correrlo.<\/p>\n\n\n\n Si acaso decides incluir tus estilos en una de tus hojas de estilo principales, aseg\u00farate de escribirlas de tal manera que solo sean aplicadas cuando el script haya sido ejecutado exitosamente.<\/p>\n\n\n\n Para m\u00e1s informaci\u00f3n en la relaci\u00f3n de estilos y scripts, lee el art\u00edculo \u00abKeeping the hot side hot and the cold side cold\u00bb del n\u00famero de lanzamiento de Scroll<\/a> (actualmente solo disponible en papel).<\/p>\n\n\n\n Hemos revisado la mentalidad necesaria para implementar la mejora progresiva en Javascript y discutimos varias t\u00e9cnicas de implementaci\u00f3n. Tambi\u00e9n hemos discutido los conceptos de scripts discretos y hemos aprendido un poco sobre como manejar la relaci\u00f3n entre CSS y Javascript.<\/p>\n\n\n\n Este art\u00edculo completa nuestra serie introductoria en mejora progresiva y las formas en que puede realizarse en tus implementaciones de CSS y Javascript. Esperamos que haya contribuido a tu proceso y te haya inspirado a comenzar a usar mejora progresiva en tu propio flujo de trabajo.<\/p>\n\n\n\n Nuestra serie introductoria sobre la mejora progresiva y las formas en que puede implementarse concluye con una mirada a la mentalidad necesaria para implementar PE en JavaScript, y un estudio de las mejores pr\u00e1cticas para hacerlo.<\/p>\n","protected":false},"author":601,"featured_media":155,"comment_status":"open","ping_status":"closed","template":"","categories":[20,25],"tags":[],"coauthors":[49],"class_list":["post-154","article","type-article","status-publish","has-post-thumbnail","hentry","category-html","category-javascript"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/article\/154","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=154"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/media\/155"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/tags?post=154"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/es\/wp-json\/wp\/v2\/coauthors?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Mant\u00e9n tus scripts bajo control<\/h2>\n\n\n\n
<a href=\"http:\/\/msdn.com\"> newWin(this.href);\"<\/del>><\/code><\/pre>\n\n\n\n<script type=\"text\/javascript\">\n \/\/ my script\n<\/script><\/del>\n<script type=\"text\/javascript\" src=\"myscript.js\"><\/script><\/ins><\/code><\/pre>\n\n\n\nif( document.getElementById ){
scriptUsingGetElementById();
}<\/code><\/pre>\n\n\n\nMant\u00e9n separados tus estilos<\/h2>\n\n\n\n
var el = document.getElementById( 'message' );\n<del>el.style.color = '#f00';\nel.style.backgroundColor = '#ffcfcf';<\/del>\n<ins>el.className = 'highlighted';<\/ins><\/code><\/pre>\n\n\n\nEs tiempo de ser progresivos<\/h2>\n\n\n\n
*Traducido al espa\u00f1ol por Julio Gudi\u00f1o<\/a>.<\/em><\/h5>\n","protected":false},"excerpt":{"rendered":"