Guiones de cliente


En la entrega anterior hablamos de los navegadores y del lenguaje de marcas que estos interpretan, HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
, para mostrarnos las páginas en pantalla. Sin embargo, olvidamos mencionar que los lenguajes de marcas no fueron concebidos para dotar a los sitios web del grado de interactividad que hoy exigimos. Para eso se necesita programar, y por eso todo documento web, prácticamente,  además de HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
, suele incluir pequeños programas, denominados guiones de cliente, que se ejecutan en la máquina del internauta. Sobre ellos vamos a tratar en este artículo.

 

JavaScript
JavaScript, el lenguaje de guión más utilizado en la Web
(Fuente: Bo-Yi-Wu. Licencia: CC BY 2.0)

 

Aplicaciones nativas y guiones

Si utilizas un ordenador, ya sabes qué es una aplicación nativa o un ejecutable: ese fichero sobre el que puedes hacer doble clic para arrancar una herramienta, como el navegador web, la hoja de cálculo o el procesador de textos. Estas aplicaciones reciben el calificativo de «nativas» porque, generalmente, aunque hayan sido escritas en algún lenguaje de programación —en esencia, un conjunto de vocabularios y normas para su uso que suele asemejarse en la medida de lo posible a las lenguas humanas, especialmente al inglés— después tienen que ser compiladas, traducidas al código máquina de ceros y unos que una marca y modelo de microprocesador en concreto pueda entender y ejecutar, código que será diferente en cada plataforma informática. Esto hace que las aplicaciones nativas sean muy rápidas, ya que teóricamente aprovechan al máximo las características hardware y software de la máquina de destino, pero también conlleva un defecto: el ejecutable resultante de la compilación no funcionará en otro sistema operativo que aquel para el cual ha sido compilado expresamente. De ahí que existan diferentes versiones para Windows, Mac o Linux, entre otros, de una misma herramienta de software.

Las aplicaciones nativas tienen que ser compiladas antes de su ejecución; los guiones, son interpretados en tiempo real
Debido a que Internet es una red multiplataforma con millones de equipos distintos, utilizar aplicaciones nativas en una página web no es recomendable, pues se reduciría considerablemente el número de potenciales usuarios y, además, sería necesaria la instalación de dichas aplicaciones,  y en la versión adecuada, en los equipos de cada uno de los navegantes. Así que para ofrecer dinamismo e interactividad en la Web se emplean los llamados guiones (scripts), pequeños programas que pueden insertarse directamente en las marcas HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
, de donde procede su nombre. Al igual que el propio HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
, y para garantizar su compatibilidad con este, los guiones no se compilan, nunca dejarán de ser texto, el código fuente escrito, tal cual, por el programador. Pero dado que los ordenadores no pueden ejecutar el texto puro, como ya sabemos, estos programas requieren que un intérprete vaya traduciendo en tiempo real cada instrucción al lenguaje máquina que el procesador del computador necesita. Aquí radica su principal virtud, y también su mayor defecto, pues tiene las siguientes implicaciones:

  • A diferencia de lo que ocurre con el código compilado de las aplicaciones nativas, cualquiera puede inspeccionar y/o modificar un guión, ya que siempre será texto inteligible por cualquier ser humano, lo cual es considerado una ventaja o un inconveniente por distintas personas, según se prime la libertad de los usuarios del software o la protección de la propiedad intelectual de sus autores
  • Puesto que en cada ejecución han de ser interpretados, y la interpretación siempre consume algo de tiempo, los guiones trabajan teóricamente a menor velocidad que las aplicaciones nativas. En la práctica, como pronto veremos, esta característica no es realmente un inconveniente
  • Ofrecen una portabilidad completa, pues un mismo guión puede ser empleado en computadores de cualquier plataforma, sin absolutamente ninguna modificación, siempre que haya instalado en ellos un intérprete capaz de entender el lenguaje que corresponda

 

Debido a que la navegación por la Web consiste en la interacción de navegadores y servidores, los guiones se dividen en dos tipos, con usos y posibilidades diferentes: guiones del lado del servidor (server-side scripts) y  guiones del lado del cliente (client-side scripts), llamados así los primeros porque ejecutan en la máquina del servidor, y los segundos porque funcionan en la de cada internauta o cliente. Para escribir unos y otros se utilizan los llamados lenguajes de guión (scripting languages), que no difieren demasiado de los lenguajes de programación habitualmente empleados para el desarrollo de aplicaciones nativas, excepto porque sabemos que no están destinados a la compilación, sino a la interpretación, y que por tanto no necesitamos de ninguna herramienta especial para usarlos: como con HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
, nos basta un simple procesador de texto.

Dejaremos los guiones de servidor para otro momento, cuando tratemos con más detalle el funcionamiento de los servidores, y dedicaremos el resto de este trabajo a conocer brevemente los guiones del lado del cliente, en concreto el más utilizado hoy día por la mayor parte de las páginas web del mundo.

 

JavaScript

Ya en una entrega anterior hablamos del navegador Netscape. Entonces no mencionamos que incorporaba un lenguaje de programación de guiones denominado en principio Mocha, y que después fue bautizado nuevamente como LiveScript, antes de recibir el nombre, en 1996, que lo haría famoso: JavaScript. Esta denominación a menudo mueve a error por su semejanza con un lenguaje de programación de propósito general, Java, aunque lo cierto es que JavaScript no tiene nada en común con él, salvo parte del nombre. Se dice que llamarlo así fue una estrategia de márketing de Netscape para que el público creyera que se trataba de una prolongación, una versión orientada a guiones de Java, que entonces comenzaba a destacar entre los programadores y usuarios.

El lenguaje de guión más utilizado es JavaScript, creado para el ya casi mítico Netscape Navigator

Hoy en día, JavaScript es una marca registrada de Oracle Corporation, usada con licencia por productos de la compañía Netscape y por otras organizaciones, como la fundación Mozilla. Por su parte, Microsoft creó su propia versión del lenguaje, denominada JScript, para su gama de navegadores Internet Explorer. En 1996 Netscape decidió enviar el borrador de JavaScript a la Asociación de Fabricantes de Computadoras europeos (ECMAOrganización internacional basada en membresías de estándares para la comunicación y la información. Las especificaciones de ECMA son consideradas estándares en las Tecnologías de la Información y las Comunicaciones.
European Computer Manufacturers Association → ECMA
), que comenzó a trabajar en la especificación de ECMA-262, versión estándar que dio origen al nombre de ECMAScript, por el cual es más conocida. Puesto que todos los navegadores interpretan ECMAScript, algunos implementando JavaScript y otros JScript, y ambos están basados hoy en el estándar, suele decirse que todos los navegadores soportan JavaScript, aunque lo cierto es que cada uno añade algunas funcionalidades no previstas en la especificación ECMA. Pero lo importante es que si diseñamos un documento web con guiones que se ciñan a ECMAScript, podemos estar seguros de que todos los navegadores de todos los usuarios podrán interpretarlos.

Veamos una muestra. Si pulsas sobre el siguiente enlace, no saltarás a ningún sitio, pues lo único que hace es ordenar al navegador que abra un cuadro de diálogo:

Haz clic

El lenguaje que hemos usado es JavaScript. Aquí está el código completo del enlace en HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
dentro del cual hemos incluido la instrucción capaz de generar nuestro inútil diálogo de alerta:

<p style="text-align: center;">
<a title="Haz clic"  
href="javascript: alert('Esto es una alerta que no sirve para nada');">
Haz clic</a>
</p>

 

La principal característica de los guiones de cliente es que se ejecutan en el navegador, en la máquina del navegante, una vez se ha descargado en su equipo el documento HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
que los incluye, y que por tanto ya no es necesario mantener la conexión a Internet, puesto que esos guiones ya se encuentran en el disco del usuario. Esto implica que si escribimos una página que utilice JavaScript, o cualquier guión escrito en ECMAScript o en cualquiera de sus variantes, nuestro programa viajará por la Web a los equipos de nuestros visitantes, y puede acabar repartido por miles o millones de ordenadores de todo el mundo, algo que a algunas personas y a ciertas compañías de software no gusta especialmente, porque significa —recuerda que un guión es texto puro— compartir el código fuente. Pero también presenta, a cambio, una gran ventaja: al funcionar en el equipo cliente, incluso sin conexión a ninguna red, los guiones trabajan muy rápido, a pesar del tiempo que se necesita para su interpretación, pues los navegadores no tienen que enviar nada al servidor ni tampoco esperar una respuesta de este para ejecutarlos. Una vez cargados, pueden funcionar una y otra vez, porque en realidad se trata de instrucciones para que el propio navegador realice alguna tarea.

Otro rasgo que caracteriza a los guiones de cliente, por lo general, es  el estar orientados a eventos (events). En otras palabras: se ejecutan al producirse un suceso, como puede ser el empezar o terminar de cargarse la página en el navegador, o también cuando el usuario realiza alguna acción, como mover el ratón, presionar un botón o una tecla, o usar las barras de desplazamiento. En nuestro ejemplo anterior, al hacer clic en un enlace. Pero JavaScript no solo permite la interacción directa navegador-usuario, sino que también puede acceder a las distintas partes de un documento web para modificarlo dinámicamente, a través de lo que se conoce como modelo de objetos del documento (DOMInterfaz de plataforma que proporciona un conjunto estándar de objetos para representar documentos HTML, XHTML y XML y acceder programáticamente a ellos
Document Object Model → DOM
), estándar definido por el Consorcio Web. Por ejemplo, si estamos usando una marca <span> con un texto, podemos cambiar el contenido de dicha marca cuando el internauta realiza alguna acción. Mira este texto que te saluda sin saber cómo te llamas, pulsa sobre el enlace inferior, para abrir una ventana donde poder escribir tu nombre:

 

Hola, desconocid@

 

Preguntar nombre

 

Si todo ha ido bien, ahora el saludo mostrará tu nombre. El código que hace posible esto es, en HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
, el siguiente:

<p>Hola,
<span id="tunombre">desconocido</span>
</p>
<p>

 

En él, simplemente, hemos incluido una marca <span> con un identificador, tunombre, que nos permite acceder a él inequívocamente. Después, el del enlace que pregunta y después modifica el contenido de ese elemento tunombre, escrito en JavaScript, es este:

var nombre= prompt('Introduce tu nombre y pulsa ACEPTAR');
if (nombre != null) {
   document.getElementById('tunombre').innerHTML= nombre;
 }

 

Aquí puedes ver el enlace completo:

<a href="javascript: 
var nombre= prompt('Introduce tu nombre y pulsa ACEPTAR'); 
if (nombre != null) { 
document.getElementById('tunombre').innerHTML= nombre;}
">
Preguntar nombre</a>

 

 

Utilidad de los guiones de cliente

Los guiones del lado del cliente sirven para mostrar mensajes de alerta, animar partes de una página, validar formularios, etc., pero no para recuperar información remota, ya que no tienen acceso a ninguna máquina de la red, sino solo al navegador —a una parte limitada del ordenador, por seguridad— de cada internauta. Por ejemplo, si servimos una página web desde Madrid (España) y quisiéramos mostrar en ella la hora usando un lenguaje de cliente como JavaScript, los visitantes de distintas partes del mundo verían horas diferentes, las que tuvieran configuradas en sus propios computadores, y no la de Madrid, ya que el guión se ejecutaría en el equipo del usuario, que puede estar en Sidney o en cualquier otra parte. De hecho, como hemos dicho, lo cierto es ese guión tiene que descargarse previamente en las máquinas de todos y cada uno de nuestros visitantes para poder ser ejecutado, pues los guiones van incluidos en los archivos .html, dentro de las marcas de este lenguaje, aunque también suelen guardarse en ficheros externos con extensión .js (JavaScript y JScript) que se enlazan a los documentos .html, y que también deben ser descargados en el disco del usuario previamente a su ejecución.

Aunque parezcan algo sencillo, a la vista de nuestros simples ejemplos, los guiones de cliente pueden ser tan complejos como conciban la imaginación y la pericia del programador. Una muestra de ello son las apps de dispositivos móviles. Habrás observado que determinadas aplicaciones que utilizas en tu smartphoneteléfono inteligente (gralm. móvil)
smart telephone → smartphone
o tablet«tableta»: computadora portátil plana, de tamaño algo mayor que un teléfono móvil, con pantalla táctil (se puede interactuar con ella usando los dedos o un estilete)
tablet computer → tablet
pueden funcionar aun cuando no estés conectado a Internet o no tengas cobertura telefónica, al menos la interfaz de usuario, aunque no siempre actualicen los datos inmediatamente. Muchas de ellas están compiladas como aplicaciones nativas para el sistema operativo de tu smartphone, pero la mayoría son lo que llamamos web-apps: en realidad se trata de paginas web, documentos HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
, que contienen JavaScript. De este modo, sus desarrolladores no tienen que escribir tres versiones de la aplicación, una para cada uno de los sistemas móviles más extendidos, como Android, Microsoft o Apple, sino una única web-app que saben funcionará en todos ellos sin hacer ningún cambio. Así puedes navegar por las diferentes ventanas, e incluso consultar datos ya descargados en tu dispositivo en la última conexión, porque cierto número de acciones se ejecutan en tu teléfono. El resto de la funcionalidad de la aplicación se implementa en el servidor web, del que ya hablaremos en otros artículos.

 

Conclusión

En esta entrega de la serie hemos tratado de mostrar que los navegadores no solo interpretan el lenguaje de la Web por antonomasia, HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
, sino también lenguajes de guión, en concreto JavaScript, que nos permiten dinamizar nuestras páginas. No profundicamos en las particularidades de este lenguaje, ni de ningún otro, por supuesto, porque eso nos llevaría demasiado tiempo. Pero al menos sabemos ya que para construir sitios web debemos utilizar también lenguajes de guión del lado del cliente. Y aunque aprender JavaScript es un requisito imprescindible para cualquiera que desee participar en el desarrollo de la Web, la buena noticia es que la inmensa expansión de este lenguaje ha hecho que organismos de toda índole hayan escrito distintas librerías y marcos de trabajo (frameworks), entre los que podemos mencionar AngularJS, AJAX, Backbone.js, Bindows, JQuery, etc.,  que nos permiten olvidarnos de cuestiones ya resueltas y facilitan en gran medida la programación de muchas tareas repetitivas. Cabe indicar que, si bien la mayoría de ellas se ejecutan en el agente de usuario, como ya hemos mencionado, también hay algunas que funcionan en la máquina del servidor, o que combinan ambos entornos de ejecución, como es el caso de AJAX, del cual hablaremos en su momento preciso. Puedes ampliar información sobre estas bibliotecas en la página correspondiente de Wikipedia.

Hablaremos en posteriores ocasiones de otras tecnologías de cliente. Antes, en la próxima entrega, conoceremos el otro lado de la navegación: el servidor web.



Escribe una respuesta o un comentario

Tu dirección de correo no será publicada.