¿?        Alojamiento Web
DHTML

DHTML

De TW


   Alojamiento Web
Este artículo ha sido reformateado automáticamente desde http://www.tejedoresdelweb.com/307/article-1058.html y su formato necesita ser revisado
Este artículo es bastante antiguo. Su contenido posiblemente está obsoleto y necesita ser actualizado.

Esta tecnologia permite posicionamiento dinamico de elementos, y es la extension natural de la idea de hojas de estilo.

La manera de utilizar HTML Dinámico es mediante el uso de las marcas DIV para Explorer y Layer para Netscape. Sin embargo, también se puede utilizar la marca DIV en Netscape, ya que ésta es tranformada internamente en un objeto Layer.

Dentro de estas marcas se puede colocar código HTML, como por ejemplo imágenes, tablas o formularios. La característica principal de ambos objetos es que poseen un conjunto de atributos que pueden ser modificables. Esto permite crear una infinidad de efectos como animaciones, menús, etc.

De ahora en adelante, usaremos solamente el objeto DIV, ya que como se dijo anteriormente, este es soportado tanto por Explorer como por Netscape y lo mas importante, soporta hojas de estilo. Para comenzar veamos un pequeño ejemplo. 

<html>
<div id="nombre" style="position:absolute; top:10; left:50; width:200; background-color:#AADDFF; border-color:white; border-width:1">
Hola Mundo!
</div>
</html>

En este ejemplo, podemos ver un objeto DIV el cual esta ubicado 50 pixeles desde el margen izquierdo de la pantalla y 10 pixeles desde la parte superior de la pantalla. También se especifica el color de fondo.

Tabla de contenidos

SPAN

Hay un elemento muy útil llamado SPAN similar a DIV. Su principal utilidad esta asociada al uso de hojas de estilo. Cuando se tiene un documento gobernado por una hoja de estilo, al encerrar una parte del texto con el elemento SPAN, este adopta las características propias del elemento SPAN dadas por su atributo STYLE.

El siguiente ejemplo, muestra el uso del elemento SPAN. En el, el texto encerrado dentro del elemento SPAN adquiere su propio estilo. Para ver el documento haga clic. 

<html>
<style type="text/css">
P {color:red}
A {text-decoration:none; color:orange}
</style>
<body bgcolor=white>
<p>Texto usando la hoja de <a href="">estilo</a>
<span style="position:relative; color:blue">Texto usando SPAN</span></p>
</body>
</html>

Layer

Como vimos anteriormente, Netscape provee un elemento adicional para la creación de elementos posicionables, el cual no es reconocido por Explorer 4.0 o HTML 4.0. Para manipular el elemento Layer, basta con modificar el valor de los atributos en la forma document.myLayer.atributo = valor.

El siguiente código, genera el mismo despliege que en el primer ejemplo. Para ver el documento, haga clic (este código no puede visualizarse en Explorer). 

<html>
<layer id="mylayer" top=10 left=50 width=200 bgcolor=#AADDFF> Hola Mundo! </layer> 
</html>

ILayer

Similar a la marca SPAN, el elemento Ilayer permite tener su propio dise&nacute;o al contenido almacenado en su interior. En el próximo ejemplo, el bloque interior tiene su propio color de fondo y su ubicación esta dada en relación al bloque exterior. Para ver el documento haga clic (este código no puede visualizarse en Explorer). 

<html>
<layer id="mylayer" top=10 left=50 width=200 bgcolor=#AADDFF> Hola Mundo!
<ilayer id="inner" top=30 left=30 bgcolor=#FFFFAA height=50> Texto interior </ilayer>
</layer>
</html>

Atributos CSS-P

A continuación se muestra una lista de atributos de posición a usar dentro de la propiedad STYLE para elementos DIV o SPAN.

Position

Puede ser absolute, relative o static. Para el primer caso, la posición es de acuerdo al inicio (rincón superior izquierdo) del elemento exterior. Si no lo hay, corresponde a la ventana del browser. Para el segundo caso, la posición se establece de acuerdo a la posición final del bloque exterior (rincón superior derecho). La tercera opción indica que el elemento no es posicionable, por lo tanto los atributos top y left no se consideran. Cada elemento se colocará a continuación del otro, como sucede con un texto en HTML.

Left

Se refiere a la distancia entre el borde izquierdo del propio elemento y el borde izquierdo del elemento exterior. Si no hay elemento exterior, corresponde a la distancia entre al borde izquierdo de la pantalla.

Top

Se refiere a la distancia entre el borde superior del propio elemento y el borde superior del elemento exterior. Si no hay elemento exterior, corresponde la distancia entre al borde izquierdo de la pantalla.

Width

El ancho del elemento.

Height

El alto del elemento.

Clip

Corresponde a una región geométrica (generalmente un rectángulo) por la cual se puede ver el contenido de un elemento. Un ejemplo de este atributo es cuando queremos mostrar solo una parte de una imagen. La forma de hacer esto de la siguiente manera: clip:rect(top right bottom left). A modo de ejemplo, si tenemos un imagen de 171x190 pixeles y queremos quitar la parte inferior, anotamos lo siguiente: clip:rect(0 171 190 0). Para ver el ejemplo con y sin efecto, haga clic. 

<html>
<span id="myspan1" style="position:absolute; top:0; left:0; clip:rect(0 171 190 0 )">
<img src="http://www.tn.cl/icn/flab1.jpg">
</span>
<span id="myspan2" style="position:absolute; top:0; left:200; clip:rect(0 171 165 0 )">
<img src="http://www.tn.cl/icn/flab1.jpg">
</span> </html>

Overflow

Esta propiedad se refiere cuando el contenido de un elemento excede el tamaño del elemento. A modo de ejemplo, si tenemos una imagen con 171 pixeles de ancho como la imagen del ejemplo anterior, pero la insertamos dentro de un bloque con un ancho menor, digamos 100, podemos decirle al browser que esconda la parte que provoca el overflow. Para ver este ejemplo, haga clic (esta propiedad no funciona igual para netscape). 

<html>
<span id="myspan1" style="position:absolute; top:0; left:0; width:171">
<img src="http://www.tn.cl/icn/flab1.jpg">
</span>
<span id="myspan2" style="position:absolute; top:0; left:200; width:100; overflow:hidden">
<img src="http://www.tn.cl/icn/flab1.jpg">
</span>
</html>

Visibility

Este atributo permite esconder o mostrar el contenido de un bloque. Puede ser hidden o show.

Z-Index

Usualmente algunos bloques comparten el mismo espacio en la pantalla, por lo que estos se almacenan como en una pila, uno detras de otro, de manera que nosotros vemos solamente el último bloque almacenado. La propiedad Z-Index permite cambiar tal order, desplegando un nuevo elemento y escondiendo otro. A mayor es Z-Index, mas escondido del ojo esta el elemento.

Referencias

La forma de acceder a los valores de los atributos de un elemento depende del browser utilizado. De esta forma, usando por ejemplo código Javasrcipt, podemos modificar esos valores dándole vida al elemento.

Netscape

Para Netscape, la forma de referenciar un atributo es: document.myObject.atribute = value. Si se tienen elementos anidados se deben especificar ambos elementos, como en document.outer.document.inner.left.

Otra forma de acceder a un atributo es utilizando el arreglo de Layers. Así, solo basta conocer el índice adecuado. Consideremos el siguiente código de ejemplo: 

<html>
<div id="outer" style="position:absolute">
<div id="inner" style=""position:absolute; left:50; top:50"> <img src="http://www.tn.cl/icn/flab1.jpg"> </div>
</div> </html>

De esta forma, si queremos modificar la imagen, lo podemos hacer de dos formas: 

document.outer.document.inner.images[0].src = "otro.gif";
document.layers[0].document.layers[0].images[0].src = "otro.gif";

Explorer

Para Explorer, las referencias a los atributos son distintas en sintaxis, pero tienen la ventaja que cuando se tiene bloques anidados, basta solo con especificar el nombre del bloque, sin especificar el o los bloques exteriores. Por ejemplo, si queremos modificar el atributo Left del elemento inner del ejemplo anterior, basta con colocar: 

document.all.inner.style.pixelLeft = 200;

Sobre la propiedad pixelLeft volveremos más tarde. Ahora, si queremos modificar la imagen, solo se referencia al índice del arreglo de im´agenes. 

document.images[0].src = "otro.gif";

Como ven, la sintaxis es mucho más fácil y más flexible que para Netscape.

Definición de DIV

Una forma alternativa de definir los atributos de un elemento DIV (antes de ser modificados) es mediante hojas de estilo. La sintaxis es: 

<html>
<style type="text/css"> #miObj {position: absolute; left:50; background-color:FFFFDD; width:200}  </style>
<body>
<div id="miObj"> Algun Contenido... </div>
</body> </html>

Tabla Resumen

A continuación se muestra una tabla resumen, con las propiedades segun se utilice Netscape o Explorer incluyendo una breve descripción descripción.

Descripción | Explorer
Distancia borde izquierdo | pixelLeft
Distancia borde superior | pixelTop
Altura contenido visible | NA
Ancho contenido visible | NA
Alto del contenido | posHeight
Ancho del contenido | posWidth
Muestra o esconde un objeto (show/hide) | display
Orden de layering del elemento | zindex
Imagen de fondo | background

Programación

En este capítulo nos adentraremos en la creación de documentos con contenido dinámico usando las propiedades anteriores mediante funciones en Javascript. Como vimos en el capitulo anterior, cada browser tiene distintas propiedades y distintas formas de referenciar cada propiedad. Para evitar este problema, es útil construir funciones independientes de cada Browser. Asi, el hecho de mover o modificar un elemento es transparente para el programador.

Metodos Layer

Netscape provee por si mismo un conjunto de funciones predefinidas que son aplicables a objetos Layer. La lista es la siguiente: 

load("filename", y)
moveAbove(layerObj)
moveBelow(layerObj)
moveBy(deltaX, deltaY)
moveTo(posX, posY)
moveToAbsolute(posX, posY)
resizeBy(deltaX, deltaY)
resizeTo(width, height)

La forma de usar estas funciones es: document.myLayer.moveTo(50,30).

Detectar Browser

Antes de comenzar a construir funciones, necesitamos saber que browser esta utilizando el cliente. Para hacer esto, utilizamos en siguiente código en Javascript: 

var isNav, isIE;
var coll = "";
var styleObj = "";
if( parseInt( navigator.appVersion >= 4 ) {
if( navigator.appName == "Netscape" ) {
isNav = true;
} else {
isIE = true;
coll = "all.";
styleObj = ".style"; } }

A modo de ejemplo, si queremos modificar la propiedad Z-Index del elemento myObj (que es una propiedad igual para ambos browsers, en caso contrario, habria utilizar la propiedad adecuada dependiendo del valor de las variables isNav y isIE), sencillamente colocamos: 

var obj = eval("document." + coll + "myObj" + styleObj);
obj.zIndex = 5;

Librería

En esta sección veremos como construir funciones independientes del browser utilizado. Es de mucha utilidad almacenar este conjunto de funciones dentro de una libreria .js. A modo de ejemplo, veamos tres funciones tipicas. Para ver la lista completa haga clic (con el botón derecho, grabar a disco, si no funciona un click simple; esto porque el archivo está en Javascript y algunos browsers intentarán interpretarlo). 

// Convierte un nombre como string de un objeto o una referencia a un objeto
// en un objeto valido, dependiendo del browser
function getObject(obj) {
 var theObj;
 if( typeof obj == "string" ) {
   theObj = eval("document." + coll + obj + styleObj);
 } else {
   theObj = obj;
 }
 return theObj;
}

// Posiciona un objeto en una coordenada dada en pixeles
function shiftTo(obj, x, y) {
 var theObj = getObject(obj);
 if( isNav ) {
  theObj.moveTo( x,y );
 } else {
  theObj.pixelLeft = x;
  theObj.pixelTop = y;
 }
}

// Cambia el color de fondo de un objeto
function setBGColor(obj, color) {
 var theObj = getObject(obj);
 if( isNav ) {
  theObj.bgColor = color;
 } else {
  theObj.backgroundColor = color;
 }
}

La forma de utilizar esta libreria, seria de la forma: 

<script language="Javascript" src="dhtml.js"></script>

Resize y Netscape

Netscape tiene el problema que cuando el usuario modifica el tamano de la ventana del Browser, todo el Layout (esquema) de los elementos se destruye. La solución es recargar la página.

Para evitar este problema, debemos obligar a regargar la pagina cuando el usuario modifique el tamaño de la ventana. Para hacer esto, utilizamos el siguiente código: 

// Funcion que recarga la pagina
function handlerResize() {
 location.reload();
 return false;
}

// primera forma de uso
if( isNav ) {
 window.captureEvents(Event.RESIZE);
 window.onResize = handlerResize();
}

// segunda forma de uso
<body onResize="handlerResize()">

Eventos

Por evento entendemos toda acción producida por el visitante de una página, como por ejemplo, hacer clic, presionar una tecla, mover el mouse, etc.

Eventos Básicos

A continuación presentamos un resumen con los eventos soportados tanto por Netscape como por Explorer.

  • onAbort - El usuario ha interrumpido la transferencia de una imagen
  • onBlur - Un elemento ha perdido la atención (focus) ya sea por que el usuario hizo clic en otro lado o presiono la tecla Tab
  • onChange - Un elemento ha perdido la atención (focus) pero su contenido ha cambiado
  • onClick - El usuario ha hecho clic en el mouse (o teclado) sobre un elemento
  • onDbClickl - El usuario ha hecho clic dos veces seguidas sobre el mouse (o teclado) sobre un elemento
  • onError - Un error ha ocurrido en un script o durante la carga de un dato externo
  • onFocus - Un elemento ha recibido la atención (focus)
  • onKeyDown - El usuario presiona una tecla del teclado
  • onKeyPress - El usuario ha presionado y soltado una tecla del teclado
  • onKeyUp - El usuario suelta una tecla del teclado
  • onLoad - Un documento o un elemento externo ha completa su desacarga dentro del browser
  • onMouseDown - El usuario presiona un boton del mouse
  • onMouseMove - El usuario mueve el mouse
  • onMouseOut - El usuario ha movido el mouse fuera de un elemento
  • onMouseOver - El usuario ha movido el mouse sobre un elemento
  • onMouseUp - El usuario ha soltado un boton del mouse
  • onMove - El usuario ha movido la ventana del browser
  • onReset - El usuario ha hecho clic sobre el boton Reset
  • onResize - El usuario ha cambiado el tamano de la ventana del browser
  • onSelect - El usuario ha seleccionado un texto dentro de un Input o Textarea
  • onSubmit - Un formulario ha sido enviado
  • onUnload - Un documento a ser descargado desde otra ventana o frame

Handlers

Un manejador de eventos o Handler corresponde a una función que dado un conjunto de eventos, realiza una acción especifica.

Un handler se puede asociar como atributo de una marca o como una propiedad de un elemento. Para dar un ejemplo de cada caso, consideremos la siguiente función, que lanza un alert: 

function ver() { alert('Hola'); }

Primer caso: <a href="" onmouseover="ver()">Link</a>

Segundo caso: document.links[0].onmouseover = ver(); <a>Link</a>

Eventos Netscape

En Netscape se debe especificar el elemento, sea window, document o algún layer, que queremos reciba un evento. Para ello Netscape provee un conjunto de eventos predefinidos los cuales son manipulados por una metodo especial llamdo captureEvents().

La lista de eventos aceptados por Netscape en la siguiente: 

Event.ABORT Event.BLUR Event.CHANGE Event.CLICK Event.DBCLICK Event.DRAGDROP Event.ERROR Event.FOCUS
Event.KEYDOWN Event.KEYPRESS Event.KEYUP Event.LOAD Event.MOUSEDOWN Event.MOUSEMOVE Event.MOUSEOUT
Event.MOUSEOVER Event.MOUSEUP Event.MOVE Event.RESET Event.RESIZE Event.SCROLL Event.SELECT
Event.SUBMIT Event.UNLOAD

De esta forma, si queremos que los eventos sean recibidos por todo el documento, escribimos: 

document.captureEvents(Event.MOUSEOVER, Event.MOUSEOUT);

Damos por descontado que debe existir un handler asociado para manipular tales eventos.

A su vez, cada evento Netscape trae consigo ciertas propiedades. La lista es la siguiente:

  • data: La URL de un evento drag and drop
  • layerX, layerY: Las coordenadas horizontal y vertical del evento, relativas al layer que lo contiene modifiers: Un valor entero que representa ya sea que el usuario presiono la tecla Control, Alt o Shift
  • pageX, pageY: Las coordenadas horizontal y vertical relativas a la ventana o frame
  • screenX, screenY: Las coordenadas horizontal y vertical relativas a la pantalla.
  • target: Una referencia al objeto apuntado mediante un evento
  • type: Un string representado el evento. Ej "click"
  • which: Para eventos de mouse, un entero que representa el boton presionado. Para el teclado, la tecla presionada

Eventos Explorer

En Explorer no hay tal problema de especificar que elemento recibira el evento. El browser por defecto, detecta el elemento seleccionado por el usuario y asocia el manejador de eventos correspondiente.

De la misma forma que en Netscape, cada evento trae consigo ciertas propiedades, las cuales enumeramos a continuación:

  • altKey: Un valor booleano que indica si la tecla Alt fue presionada
  • button: Un entero que indica si un botón del mouse fue presionado
  • clientX, clientY: Las coordenadas horizontal y vertical del evento en relación a la ventana del browser
  • ctrlKey: Un valor booleano que indica si la tecla Control fue presionada
  • keyCode: Un entero que representa el código del caracter presionado del teclado
  • offsetX, offsetY: Las coordenadas horizontal y vertical del evento en el espacio de un objeto o elemento
  • screenX, screenY: Las coordenadas horizontal y vertical relativas a la pantalla.
  • shiftKey: Un valor booleano que indica si la tecla Shift fue presionada
  • srcElement: Una referencia al objeto apuntado mediante un evento
  • type: Un string representado el evento. Ej "click"
  • x, y: Las coordenadas horizontal y vertical del evento dentro del elemento BODY o para un elemento dado
Obtenido de "http://www.tejedoresdelweb.com/w/DHTML"