Buscador

La propiedad event y el modelo de objetos de HTML Dinámico III

El Código fuente 1, anula el enlace al sitio web de Grupo EIDOS, mediante la asignación de la secuencia ‘return false’ al evento onclick de la etiqueta <BODY>. El lector puede inferir a partir de aquí las posibles implicaciones dinámicas que esto tiene en la construcción de páginas cuyo comportamiento varíe en función de un nivel de permisos o unas asignaciones de seguridad, por ejemplo: podemos programar situaciones en las que, dependiendo del nivel de acceso, una serie de enlaces permitan o no el acceso a los sitios enlazados.
Ya hemos visto cómo vincular acciones a los elementos mediante la asignación de acciones directas y mediante llamadas a funciones almacenadas en etiquetas <SCRIPT>. Sin embargo, se puede ersonalizar un <SCRIPT> de forma que sus acciones se asocien exclusivamente a un evento de un objeto. Esto se consigue mediante los atributos FOR y EVENT de la etiqueta. Por ejemplo, podemos asignar una acción al evento onclick del botón B1, mediante el Código fuente 2.
<SCRIPT FOR=’B1’ EVENT=’onclick’>
Msgbox “Botón pulsado”
</SCRIPT>
Código fuente 2

La propiedad event y el modelo de objetos de HTML Dinámico II

El modelo de promoción de eventos tiene dos ventajas principales: por un lado permite el tratamiento global de eventos, asociando una misma acción a cualquiera de los contenidos de un elemento. Por ejemplo, cuando asignamos una acción al elemento <BODY>, cualquier elemento contenido en el cuerpo del documento que reciba el evento, desencadena la acción.
También es posible anular los eventos e incluso anular las acciones predeterminadas que tales eventos puedan provocar. Cabría pensar en situaciones en las que una acción predeterminada como el hecho de seguir un vínculo, puede ser anulado por un objeto contenedor de dicho vínculo. Veamos, por ejemplo, el Código fuente 1.
<BODY onclick="return false">
<A name=Enlace_a_EIDOS href="http://www.eidos.es">
<P>Grupo EIDOS</P></A>
</BODY>
Código fuente 1

La propiedad event y el modelo de objetos de HTML Dinámico I

La primera propiedad, event, se relaciona directamente con el llamado Modelo de eventos de HTML Dinámico. Se trata -como ya se ha dicho- de un modelo basado en la construcción dinámica de objetos a partir de etiquetas, y que permite la propagación de éstos eventos a sus elementos superiores, (Sistema de promoción de eventos). O sea que, la respuesta a un evento, de haberla, puede asociarse al objeto que lo recibe o a cualquiera de sus elementos contenedores, pudiendo llegar –si es necesario- al propio objeto document.
Definición: cuando un usuario interactúa con una página o cuando el estado del documento va a cambiar, se activa un evento.
En la práctica, el usuario produce eventos mediante pulsaciones de teclado o de ratón. El sistema puede hacerlo al terminar los procesos de carga de una página, formulario, gráfico y objeto multimedia, pero también mediante un mecanismo de temporización.

Propiedades del objeto window

Hemos visto en el esquema que el objeto window dispone de 6 propiedades:
1) event
2) frames
3) location
4) history
5) navigator
6) screen
7) document
Vamos a revisar algunas de las características de programación más interesantes y utilizadas de estos
objetos.

El objeto window

Ya hemos comentado que todos los objetos de la jerarquía DOM son descendientes del objeto window.
Este objeto nos da acceso a todas las características del navegador, pero, a través de algunas de sus
propiedades, también tenemos acceso a los elementos del documento. Vamos a revisar algunas de sus
propiedades y métodos más interesantes.

Los objetos window y document

Del esquema se deduce que en la jerarquía, algunos objetos pasan a pertenecer a colecciones concretas, como la colección de imágenes (images) o la colección de hojas de estilo (styleSheets).
Otros, por su importancia se transforman en objetos individuales, como body o element, y además existe una colección donde van parar todos los objetos del documento: all (el objeto document es uno sólo, y no una colección, ya que se trata de una interfaz SDI).
Otra característica de la jerarquía de DOM es que en ella encontramos colecciones que deben existir siempre, independientemente de que contengan o no elementos. Por ejemplo, siempre descubrimos una colección images, aunque la página no contenga una sola imagen. Podemos hacernos una idea de la forma en que DOM crea la estructura mediante una jerarquía de tipo árbol, donde cada etiqueta se convierte en un nodo. Algunos nodos serán equivalentes a los troncos y su misión principal (aunque no la única) será contener una serie de nodos hijos (child nodes), como es el caso de las etiquetas contenedoras del tipo <HTML> ó <BODY>, mientras que otros equivaldrán a las hojas del árbol, sirviendo para albergar los contenidos del documento sin incluir otros nodos hijos (el texto que se encuentra entre las etiquetas del tipo <P>, <SPAN>,<H1>, etc).
Otro matiz a tener en cuenta es que el modelo de objetos distingue entre objetos programables mediante eventos y aquellos a los que se puede hacer referencia. Para que un objeto sea programable mediante eventos se requiere un identificador ó ID, mientras que siempre podemos hacer referencia de lectura o asignación de las propiedades de un objeto cualquiera del documento mediante la colección a la que pertenezca.

La jerarquía de objetos de DOM

La Fig. 2 muestra el gráfico correspondiente a la jerarquía de objetos de DOM, en su versión inicial, tal y como se soporta por Internet Explorer 4.0 y posteriores. Podemos apreciar, que como en toda jerarquía dinámica, existe un objeto inicial o raíz del cual penden el resto de objetos: window.
Ese objeto window, tiene, a su vez, propiedades y métodos que suministran el acceso a las distintas características del navegador y de los documentos que se abren en él. La más importante de esas propiedades es document, que hace referencia a la página web abierta en cada momento. Por tanto, podemos resumir esta introducción asumiendo que el objeto window controla todo lo relativo al programa navegador, mientras que el objeto document, maneja todo lo concerniente a la página activa.

Programando los objetos de DOM

Ahora bien, una vez realizada esa labor de conversión, necesitamos un mecanismo de programación, un lenguaje. En el escenario de Internet, a los lenguajes de programación que nos permiten manejar los objetos DHTML, se les denomina Lenguajes de Script, y entre los más popularmente aceptados destacan: Javascript, VBScript, PerlScript y Python, basados los tres primeros, respectivamente, en sus hermanos mayores, Java, Visual Basic y Perl). La forma en que se manipula un objeto DHTML es asignándole un identificador (un valor para su atributo ID ó NAME, lo que lo convierte en objeto programable) y programando una acción escrita en uno de estos lenguajes, que, normalmente, estará asociada con alguno de los eventos de que el objeto disponga.
Es precisamente la definición de ese conjunto de objetos, la que queda establecida mediante DOM, si bien podemos decir que existen dos versiones del modelo. Previamente se definió una normativa basada en colecciones que fue implementada por los navegadores más populares y que se llamó Modelo de Objetos DHTML. Todavía está soportada en las versiones más actuales, con lo que en realidad, la inspección de los modelos de objetos nos muestra mecanismos que pertenecen al modelo antiguo y al nuevo conviviendo y pudiendo ser utilizados desde el mismo documento. En principio, tanto Internet Explorer como Netscape, cumplen con una buena parte de la especificación DOM oficial de W3C, si bien ambos poseen ciertas limitaciones en esa versión, que en el caso de Explorer, han sido mejoradas y completadas en versiones posteriores (la reciente versión Netscape 6.0, propugna un soporte completo de DOM, si bien la forma en que soporta la presentación mediante de Hojas de Estilo en Cascada se limita a la primera especificación, de nombre CSS1 -Cascading Style Sheets Level 1- y a algunas características de la más moderna CSS2). Precisamente por razones de compatibilidad con el estándar, en este curso usaremos genéricamente Internet Explorer para mostrar los resultados de las páginas de ejemplo.

El Modelo de objetos de documento (DOM)

Al modelo de objetos diseñado para convertir el lenguaje HTML en DHTML se le denomina DOM (Modelo de Objetos de Documento). Es algo que debe ser aportado por el propio navegador (generalmente, en forma de una DLL que se carga al abrir el programa explorador) y que modifica la forma en que las páginas web son procesadas.
El esquema que muestra la Figura 1 ilustra la forma en la que viaja la información y se transforma de estática en dinámica.


DOM es lo que convierte el HTML estático en dinámico, y podemos entenderlo como la forma en la que los exploradores interpretan una página desprovista de comportamientos programables, transformando sus elementos en objetos, que, como tales, poseen propiedades, métodos y eventos, y que por lo tanto, se convierten en entidades programables. Esta era la base del dinamismo del nuevo HTML, junto a la incorporación de algunas etiquetas nuevas que permiten aplicar estilos de forma global, como "SPAN" y 2DIV", si bien el tema de los estilos será objeto de un tratamiento independiente en otro apartado.
En el esquema anterior, cuando un usuario solicita una página web (por ejemplo, http://eidos.es) el servidor web busca dicha página, la envía al cliente y allí sufre un proceso de transformación: según se va leyendo el contenido, se construyen tantos objetos en la memoria como etiquetas tenga la página HTML asignando especialmente las que tengan un identificador (ID ó NAME), y finalmente, se da un formato gráfico de salida al documento, al tiempo que el motor del navegador permanece a la escucha de los eventos que el usuario genere al navegar por la página. Cuando se produce uno, (como pasar el cursor por encima de un ítem de menú, o de un gráfico) el navegador invoca al intérprete del lenguaje de script en el que el evento tenga asociada su acción y ésta se ejecuta. Esa es la forma en que los menús cambian de color o de tamaño cuando navegamos por ellos, y también la forma en la que se producen un sinfín de efectos especiales que estamos ya acostumbrados a ver en las páginas web.
Una vez más, es labor del navegador (o de las librerías que realizan la interpretación o rendering) el construir objetos dinámicos a partir de lo que sólo es un documento, evitando así, el envío de componentes a través de la web.

La solución: Los Modelos de Objetos

Así pues, la propuesta de mejora de HTML se basó sobre todo en dos estándares, las Hojas de Estilo en Cascada, al que dedicamos un capítulo más adelante, pero fundamentalmente, en el Modelo de Objetos de DHTML, que posteriormente se estandarizó en el llamado Modelo de Objetos de Documento (DOM), de acuerdo con una especificación oficial de la W3C.
Un Modelo de Objetos es un mecanismo que permite el acceso y la programación de documentos y aplicaciones informáticas. Los modelos de objetos permiten exponer al programador el conjunto de funcionalidades de un programa o de características de un documento en forma de objetos programables.
Por ejemplo, el conjunto de Tablas de un documento de Microsoft Word, aparece en el modelo de objetos de documento de Word como una propiedad colectiva (Collection) del propio documento (la propiedad Tables). Podemos referirnos a cada tabla, a cada celda y cada contenido de celda usando las propiedades de los objetos Table de esa colección. Y lo mismo podemos decir para cada palabra del documento, cada estilo usado en la presentación, o cada ítem de menú o Caja de Diálogo disponible en Word. Decimos, por tanto, que Word ha sido construido de acuerdo con un modelo de objetos programable.

Naturalmente, si hablamos de objetos programables, necesitaremos un lenguaje de programación. En el caso citado, ese lenguaje es VBA (Visual Basic para Aplicaciones), el núcleo de la herramienta Visual Basic que contiene las definiciones básicas del lenguaje y que está disponible como lenguaje de macros, no sólo para toda la “suite” de Office, sino también para otras aplicaciones que han sido proyectadas de ésta forma, como AutoCad, 3D-Studio, Visio, etc.
En general una herramienta que soporte VBA como lenguaje de macros está hecha de tal forma que cualquier característica de la herramienta o de los documentos generados con ella, aparece como un elemento programable y accesible a través de VBA.
Vemos, pues, que los modelos de objetos extienden la funcionalidad de las aplicaciones, pues permiten su ejecución indirecta a través de código fuente. Al conjunto de rutinas de carácter público programadas de ésta forma se le llama conjunto de macros de un documento.

Modelo de objetos DHTML

Es la base de todo el HTML Dinámico, y suministra la interfaz que permite a los lenguajes de script y a los componentes acceder a las características de HTML
Dinámico. A continuación realizamos una explicación más exhaustiva del modelo de objetos en que se basa.

Descarga de Tipos de Letra (Font Download)

Consiste en la capacidad de utilizar tipos de letra descargados dinámicamente.
Mediante el atributo de estilo @font-face, un documento puede hacer referencia a un tipo de letra descargado dinámicamente, y desecharlo inmediatamente después de que el documento sea descartado.

Enlace de Datos (Data Binding)

o Es la característica que permite enlazar elementos individuales de un documento a orígenes de datos provenientes de bases de datos o de ficheros delimitados por comas.

Uno de los usos prácticos de esta posibilidad es la de generar tablas con el contenido de bases de datos de forma automática y dinámica, por ejemplo, enlazando una etiqueta "TABLE" a un origen de datos. Esta función se realiza mediante un objeto DSO (Data Source Object), que sabe como conectarse con el origen de datos
adecuado. Se implementa en forma de un componente ActiveX o un Applet de Java.

Filtros y Transiciones

Por filtros, entendemos ciertos efectos visuales, como las letras con sombreado, y otros similares. Se consideran también como una extensión de CSS. Las transiciones son, así mismo, efectos, que pueden resultar útiles en ciertas presentaciones de información, como las denominadas Slide Shows, o pruebas de muestreo de imágenes
encadenadas.

Posicionamiento y Animación

Entendemos por posicionamiento la capacidad para situar un elemento HTML específico en la ubicación que se desee en la página web, independientemente de la posición del resto de elementos. Esto significa que un elemento puede aparecer situado por delante o por detrás de otro, y que podemos establecer de forma absoluta, mediante coordenadas, su posición en una página, sin dependencia funcional alguna.
Esta capacidad es una extensión de las posibilidades de las Hojas de Estilo, y forma parte de un conjunto de posibilidades: desde programación de rutinas de movimiento y establecimiento de intervalos de ejecución, hasta las nuevas etiquetas como "MARQUEE", o la capacidad de insertar applets de Java o componentes ActiveX en
las páginas.

Lo que aporta el HTML Dinámico: Contenido Dinámico

Contenido Dinámico
o Utilizando el modelo de objetos DHTML, es posible cambiar el contenido de un documento después de que ha sido cargado. Esto incluye la inserción y borrado de elementos, la modificación de elementos existentes, y el acceso y modificación de cualquier atributo individual.

Lo que aporta el HTML Dinámico: Estilos dinámicos

Entre las aportaciones más interesantes ligadas a la propuesta DHTML caben destacar las siguientes:
Estilos dinámicos
o Permiten la definición de características de presentación utilizando un lenguaje de presentaciones estándar definido igualmente por la W3C: Las Hojas de Estilo en Cascada (CSS). Junto con la nueva etiqueta

HTML Dinámico y Modelos de Objetos

Se dice que HTML 4.0 es la última y también la mejor de las especificaciones actuales. No obstante, existe una revisión posterior para problemas menores, llamada HTML 4.01, pero sólo incluye algunas correcciones a la anterior. Data del 24/Dic/1999, y sobre ella se ha basado una nueva especificación, llamada XHTML 1.0, que utiliza sintaxis XML para las etiquetas HTML, pero que no es objeto de este libro. Con esta versión final, se pretenden resolver muchos de los problemas que se presentan hoy en día, extendiendo las capacidades del lenguaje en muchas áreas y añadiendo posibilidades más acordes con las necesidades de mercado. Sin embargo, probablemente, será el último, tras una larga agonía. La razón, es que su sucesor, XML1 resuelve muchos de los problemas insolubles por los anteriores, ofreciendo un auténtico estándar para transporte de información, y para presentaciones sofisticadas, con elementos multimedia, tratamiento de datos, etc.

HTML y la W3C

La primera especificación relevante publicada por la W3C fue la versión HTML 3.2, ya que su primer trabajo fue un intento de poner orden en la situación anterior con una especificación de compromiso que aclarase de alguna forma el caos existente y que se bautizó como HTML 2.0, entendiéndose que todo el desorden anterior a ese momento recibiría genéricamente el nombre de HTML 1.0, aunque nunca hubiera existido tal especificación.
Un tiempo después, se pudo observar que el trabajo que realizaba W3C para la normalización difería notablemente de los planes de Netscape, por lo que hubo de hacer tabla rasa del trabajo anterior y abordar el problema con seriedad, a partir de la situación real. Al conjunto de dicho trabajo se le llama de forma genérica HTML 3.0 ó HTML+. Finalmente, llegó HTML 3.2, que recogía todas las principales características de Netscape y de Internet Explorer, y que es la primera a la que puede
llamársele estándar de facto.

El World Wide Web Consortium

W3C es una entidad de carácter internacional dedicada a la normalización, y creada en 1994, similar en cierto sentido a ISO o ANSI. Sus miembros son más de 400 organizaciones de todo el mundo que corren con los gastos de financiación –aparte de algunos ingresos estatales- y lo componen profesionales de la informática de todos los sectores, cuya misión es la de definir y normalizar la utilización de los lenguajes usados en Internet, mediante un conjunto de Recommendations (recomendaciones) que son publicadas libremente, en su sitio Web (www.w3.org) y aprobadas por comités de expertos compuestos por representantes nominales de la propia W3C y técnicos especializados de las más importantes compañías productoras de software para Internet, distribuidoras y centros de investigación. Baste citar entre sus miembros más destacados a Adobe, AOL, Apple, Cisco, Compaq, IBM, Intel, Lotus, Microsoft, Motorola, Netscape, Novell, Oracle, Sun, y un largo etcétera.
Su Web, la alberga el prestigioso Massachussets Institute of Technology (M.I.T.) a través de su Laboratorio de Informática (http://www.lcs.mit.edu/) en EE.UU., con réplicas en el INRIA (http://www.inria.fr/) en Europa (Francia) y la Universidad de Keio en Japón (http://www.keio.ac.jp/).
Hasta el momento, han desarrollado más de 20 especificaciones técnicas, siendo su mentor principal
Tim Berners-Lee (inventor de la WWW, y accesible en la dirección http://www.w3.org
/People/Berners-Lee) quien hace las funciones de jefe de equipo y trabaja en colaboración con otros
equipos del resto de organizaciones miembro.

¿Por qué HTML Dinámico?

Lo primero que podemos preguntarnos es qué fue lo que llevo a los grandes distribuidores de software a cambiar el HTML de siempre. La respuesta más inmediata la encontramos en la necesidad de separar los datos del contenido. Hasta ese momento, los dos estaban indisolublemente unidos y no podía disponerse de ficheros de presentación independientes que permitieran cambiar un estilo de presentación simultáneamente en todas las páginas de un sitio web. El otro gran problema era la interactividad. La única interactividad que se permitía se reducía a los hipervínculos. El resto no estaba previsto por un lenguaje que sólo se preocupaba de mostrar contenidos.
Además, el mero hecho de hablar de implementaciones suponía problemas, ya que los fabricantes no estaban de acuerdo en la forma de construir los navegadores. Esto, empezó a resolverse cuando apareció en escena un organismo de normalización que pretendía hacerse cargo de la elaboración de los estándares que se utilizasen en Internet. Ese organismo era la World Wide Web Consortium.

Objetivos del Curso

Este curso pretende revisar los aspectos fundamentales de las tecnologías implicadas en la construcción de páginas web de cliente, esto es, de cómo programar su comportamiento en los navegadores, independientemente de los mecanismos implicados en la generación de dichas páginas en los proveedores de contenidos. O dicho de otro modo, lo que una página puede hacer una vez que es cargada y visualizada por un navegador, y que genéricamente se conoce bajo el nombre común de DHTML o HTML Dinámico.
Esto supone –en el estado actual de las tecnologías- que no sea uno sólo el lenguaje o estándar usado en la construcción de páginas, sino un conjunto de ellos, cada uno de los cuales, con su pequeña historia, su especificación oficial y un comportamiento de cara al desarrollador.

HTML Dinámico y Modelos de Objetos

Esta obra asume que el lector conoce, siquiera superficialmente, el lenguaje básico de construcción de páginas Web (HTML), y preferiblemente (aunque esperamos que no resulte imprescindible), algún otro lenguaje de programación orientado a eventos (Visual C++, Visual Basic, Visual FoxPro, Delphi, etc.