Indroducción

Javascript es un lenguaje de programación orientado a objetos descendiente de C y su dialecto proviene del estándar ECMAScript; compartiendo parte de la estructura del lenguaje Java aunque con propósitos diferentes. Es utilizado en los sitios Web para dar dinámica a los elementos del HTML; responsable del famoso “HTML dinámico” (darle vida a los elementos de la estructura del DOM de HTML).

Su utilización es principalmente del lado del cliente aunque existen varias implementaciones para utilizar javascript del lado del servidor (SSJS).
Todos los navegadores modernos interpretan el código javascript escrito en las páginas web; es esencial el conocimiento y la integración del conocimiento de HTML y CSS para el posterior trabajo con Javascript, principalmente entender el Document Object Model (Modelo de objetos para la representación de un documento); ya que serán estos elementos a los que javascript intervendrá en su trabajo.

Habiendo realizado una pequeña introducción de las bondades de javascript ahora vamos a enfocarnos en la NO obstrucción del mismo.
El javascript no obstructivo tiene el objetivo de hacer que los sitios web ganan en estética y funcionalidad sin atentar contra la accesibilidad. Se encarga de hacer una separación entre el contenido y los comportamientos del documento HTML.

Frameworks

logos

Sostengo que todas las modas (en este caso Unobtrusive JavaScript) tienen su germen a partir de una necesidad.
Las nuevas capacidades de rendimiento de las computadoras, los nuevos navegadores y las peticiones de información de manera asincrónica, decantaron en la fabricación de entornos de trabajo (frameworks) orientados a objetos para facilitar el trabajo (principalmente repetitivo) de los desarrolladores web. Jquery, prototype y mootools son algunos de los frameworks más conocidos mundialmente.
Los frameworks están construidos a partir de paquetes de clases u objetos que se encargan de resolvernos problemas complejos a partir de algoritmos; animaciones, validaciones de formularios, agregación de contenido, formatos y mucho más.
Sólo tenemos que incluir un archivo en el head del documento, generar instancias de los objetos e implementar las distintas funcionalidades que nos brindan estas aplicaciones.

Lo cierto es que javascript no obstructivo no es una moda sino una manera sapiente de programar para lograr que nuestros sitios sean más accesibles y usables; tiene un propósito y por esta razón es que muchos desarrolladores lo han venido implementando hace mucho tiempo atrás, más del que mucho de nosotros podemos imaginar.

Mala reputación de javascript

Hasta hace un tiempo atrás javascript no gozaba de buena reputación; esto estaba dado principalmente por la cantidad de errores que mostraban los sitios que lo utilizaban y a los problemas de compatibilidad (corss-browser) en las diferentes plataformas de navegación. Por otra parte, la popularidad de flash hacía que todo lo novedoso y dinámico para un sitio web se desarrollara utilizando la potente y famosa herramienta de Adobe (ex Macromedia).

Ahora bien, las nuevas capacidades de los navegadores, la nueva potencia de sus renders (motores de representación) y la llegada masiva de smartphones de Apple (teléfonos inteligentes que por políticas no soportan flash) con procesadores potentes, pantallas con más de 16 millones de colores, tarjetas de red (wifi), conexiones 3G y 4G de Internet; hicieron que la herramienta Flash comenzara paulatinamente a quedar en desuso para la realización de animaciones frontend (lado del cliente) y que javascript empezara a ser el protagonista a la hora de crear movimiento web. Este fenómeno también trajo aparejada la creación de los frameworks mencionados anteriormente; herramientas que respetan la semántica web, optimizan y ordenan el trabajo y por sobre todas las cosas NO obstruyen.

Veamos algunos ejemplos de javascript no obstructivo:

El evento onClick

Tenemos una imagen pequeña en la cual queremos hacer click para abrir una foto grande. En el primer bloque observamos que tenemos el llamado al método onClick de javascript justo como propiedad dentro de la etiqueta img; el cuál llama a una función que al ejecutarse hace la tarea de abrir la imagen grande; puede hacerlo en una ventana modal, mostrarla al costado o ir a una nueva página.

Pero… ¿Cuál es nuestro problema?… El problema radica en que no puedo prescindir de javascript si quiero finalmente ver la imagen en su máxima dimensión; dado que al no funcionar el evento onClick, no pasará absolutamente nada.

foto

El siguiente es un claro ejemplo de como podemos abstraer el código javascript para hacerlo NO obstructivo y en caso de no tener javascript que dicha imagen se pueda abrir en una nueva página.
Ahora tenemos una etiqueta a con un vínculo hacia la imagen grande. Nuestro código javascript está totalmente fuera del cuerpo del HTML, ubicado en el head del documento (abstraído completamente); en caso de no tener javascript funcional, al hacer click en la imagen pequeña se abrirá una nueva página con la imagen mayor. Es importante colocar dentro de la función un retorno (return) false para que al hacer click en el vínculo no nos abra una nueva página con el valor que figura en la propiedad href de la etiqueta.

foto

De esta manera nuestro HTML quedará limpio y el sitio seguirá funcionando, claro que sin las bondades de javascript en caso de no poder ejecutarlo, pero funcionando al fin. Este tipo de prácticas es denominada Graceful Degradation; este concepto explica como un sistema puede seguir funcionando luego de haber ocurrido un error. No voy a ampliar acerca de esto pero el que lo desee puede invstigar.

Otra manera de capturar los eventos de javascript es utilizando oyentes. Para ello, debemos utilizar dos tipos de oyentes según los tipos de navegador desde dónde estamos accediendo. Primero tenemos que condicionar si el oyente existe en el navegador en cuestión y luego adjuntar dicho evento.

Veamos un ejemplo:

if(elemento.addEventListener){ //W3C DOM
      return elemento.addEventListener("click", callBack, useCapture);
}else if(elemento.attachEvent){ //IE DOM
      return elemento.attachEvent("onclick",callBack);
}else{ //En caso de que el navegador en cuestión no logre capturar los eventos
      elemento['onclick'] = function(){ 
          //acciones para cuando se hace click en el elemento
      }
      return false;
}
function callBack(event) {
       //Acciones para cuando se haya capturado el evento
       event.preventDefault(); //Evito que al hacer click, el navegador me redireccione a la URL del href
}

Los parámetros son:

event: El evento que quiero capturar, por ejemplo “onSubmit”, “onclick”, “onload”, etc.
callBack: La función que vamos a ejecutar cuando se captura el evento; en caso que sea un “onSubmit”, de esta manera podríamos crear una función callback para validar el formulario.
useCapture: Este parámetro tiene que ver con el orden de importancia de los parámetros anidados. Si no especifico este parámetro por defecto es false; en caso de ser true, se dispararán los eventos que estén especificados en los elementos del DOM jerárquicamente por encima del elemento en cuestión.

Cómo última condición, para los navegadores que no reconocen los oyentes, lo que hacemos es crear nosotros mismos el evento de javascript; en el ejemplo creamos “onclick”; pudiendo esta cadena ser sustituida por una variable, de esta manera poder utilizar la misma función para distintos eventos.

La función submit

Al igual que cuando abrimos una foto, también podemos hacer que un formulario envíe sus campos elegantemente utilizando javascript, tanto para su validación como para su posterior envío y respuesta de datos.

En el primer ejemplo vemos como nuevamente llamamos a una función javascript desde el DOM (modelo de objeto del documento); o sea que en caso de no tener javascript, nuestro formulario quedará completamente anulado.

//campos del formulario

Buscando una solución al problema de la obstrucción es que lo planteamos de la siguiente manera.
Colocamos en la propiedad action la URL del archivo encargado de procesar los datos, en nuestro caso “procesoDeDatos.php”; aquí tendremos la programación necesaria y a nuestro gusto con el objetivo de enviar un mail con los datos o bien guardarlos en una base de datos.
Del mismo modo que con la imagen anterior, al hacer click en el botón que envía el formulario, se captura el evento onSubmit de javascript o bien en caso de no tener javascript, nuestra página se redirecciona a la URL especificada en el action del formulario; por ende los datos de nuestro form serán enviados de todas maneras.
En caso de funcionar javascript, recordemos colocar retorno (return) false para desestimar el action.

Claro que la programación de las acciones de la validación y posterior envío de datos será algo que quede por nuestra cuenta. Una de las prácticas actuales es validar uno a uno los campos con sus distintas características, tal es el caso del e-mail, asegurarnos de que exista @ (arroba), cantidad de caracteres, dominio, etc; luego de la validación se pueden enviar los datos mediante Ajax sin recargar la página o ir a otra y esperar con una pequeña precarga la notificación de datos enviados.

//campos del formulario

El objetivo fue lograr que entendamos que significa hacer que nuestro javascript no sea obstructivo; aquí no vamos a encontrar ningún ejemplo para descargar ni código para implementar, ya que el javascript no obstructivo es un concepto y está estrechamente relacionado con la accesibilidad de los sitios Web.

Todos los aportes que quieras realizar a este artículo, serán bienvenidos; ¡Hasta pronto!

Categoría: Web

Publicado por: negro

Entradas más populares

Una respuesta para “Javascript no obstructivo”

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>