Web Maestro
 
  Web-maestro
  Home
  Comentarios
  Reportar Error
  HTML Basico
  1.-Una pagina basica
  2.-Dando forma al texto
  3.-Enlaces con otras páginas
  4.-Imagenes
  5.-Caracteres especiales
  HTML Intermedio
  6.- Los estándares del HTML
  7.-Fondos
  8.-Alineación de las imágenes
  9.-Formato de las imágenes
  10.-Tablas
  11.-Formularios
  12.-GIFs animados
  13.-Mapas
  14.-Frames
  15.-Sonidos
  16.-Texto en movimiento
  17.-Publicación y promoción de una página
  18.-Contadores de visitas
  19.-Componer con estilo
  Temas avansados
  20.-Applets de Java
  21.-Trucos diversos
  22.-Canales de chat en páginas Web
  23.-Hojas de estilo en cascada.
  24.-Hojas de estilo en cascada.
  25.-Hojas de estilo en cascada.
  En preparacion
  26.-HTML dinámico
Subir | Imprimir | Agregar a favoritos
26.-HTML dinámico
NOTA: Capítulo en fase de preparación

26. HTML dinámico

El HTML dinámico, también conocido por las siglas DHTML (Dynamic HTML) supone una verdadera revolución sobre cómo podemos crear las páginas del Web.

Está basado en una idea de lo más simple: convertir las etiquetas tradicionales del HTML en objetos programables, lo que nos permite poder luego manipularlas a nuestro gusto con JavaScript u otros lenguajes.

Esto supone un gran adelanto. Hasta ahora, el navegador del usuario ejecutaba las etiquetas del HTML una sola vez, en el momento de recibirlas desde el servidor. Su función era única e inmutable: la prevista por las reglas del HTML para esa etiqueta concreta.

Veamos un ejemplo. Si queremos colocar una imagen determinada en una página Web, debemos escribir en el documento HTML la etiqueta <IMG SRC ...> que define cuál es el fichero de imagen, qué atributos va a tener (dimensiones, leyenda, alineamiento, etc.), según se ha visto en los capítulos correspondientes.

El navegador del usuario, al recibir el documento HTML desde el servidor, va interpretando las distintas etiquetas y va formateando la página de acuerdo a ellas. Al llegar a la etiqueta de imagen, la colocará en la página Web en una posición determinada y con los atributos indicados por la propia etiqueta.

Una vez que la imagen esté visible en la pantalla, ya no habrá nada que la haga cambiar... excepto el HTML dinámico. De la manera que se verá más adelante, se pueden conseguir muchas cosas hasta ahora impensables: que al pasar el cursor del ratón por encima de la imagen, o al pulsarla, cambien los atributos de la imagen por otros distintos, o incluso por otra imagen diferente, etc.

Con el DHTML se pueden conseguir otras muchas cosas: texto que cambia de posición, de color o de fuente. Enlaces que cambian de destino, etc.

Pero lo mejor de todo es que estos cambios se producen sin que se tenga que volver a cargar la página desde el servidor, ni tampoco que el servidor deba estar configurado de ninguna manera especial para permitir esto.

Navegadores que utilizan el DHTML

Por desgracia, hay un inconveniente: la implementación de esta técnica por parte de los dos navegadores más importantes, (Netscape, desde su versión 4.0 y Explorer, también desde su versión 4.0), no es la misma.

Se va a ver en este capítulo exclusivamente la técnica que utiliza el Explorer, debido a que Netscape no ha adoptado, al contrario que Microsoft, la norma llamada DOM (Document Object Model) propuesta por el W3C (el comité oficial que regula las normas del HTML)

Esto tiene como consecuencia que con la técnica del Netscape 4.0 sólo se pueden cambiar las propiedades del objeto mientras se está cargando la página, y no después, lo que arruina casi todo el potencial y las ventajas del DHTML.

Por otra parte, la ventaja del método del Explorer no es sólo la indicada, sino que además es más sencilla de utilizar. Por estos dos motivos, se va ver la técnica utilizada por el Explorer, y no la del Netscape.

Es posible que Netscape adopte la norma DOM en versiones posteriores, pero de momento, todo lo que se va a ver a continuación sólo podrá ser apreciado con el Explorer 4.0

Aplicación del DHTML a las imágenes

Una de las cosas más llamativas que se pueden hacer con el DHTML es cambiar el fichero de imagen asociado a una etiqueta de imagen.

Como se vió en el capítulo 4, la etiqueta convencional del HTML para colocar una imagen en una página es de este tipo:

 

<IMG SRC="imagen1.gif">

imagen1.jpg El atributo SRC hace referencia al fichero que contiene la imagen que se quiere mostrar en la pantalla (en este caso imagen1.gif). El resultado es la imagen que se ve a la derecha.

Para convertir esta etiqueta en un objeto al que se pueda hace referencia desde un lenguaje de programación, basta con añadirle el atributo ID, de la siguiente manera:

 

<IMG ID="MiPerro" SRC="imagen1.jpg">

Ahora la etiqueta ya es un objeto programable, cuyo nombre es MiPerro (o el nombre que se le haya querido dar; no hay ninguna regla para ello, puede ser cualquier palabra, como MiPerro, o miperro, o perro, etc.)

Cuando se carga la página, la imagen que se ve en primer lugar es la señalada en la etiqueta (en este caso imagen1.jpg), al igual que en la etiqueta convencional.

Pero si en alguna parte del documento HTML hemos incluido una rutina en JavaScript (o en VBScript) que haga uso del siguiente comando:

 

MiPerro.src="imagen2.jpg"

provocará que, al ejecutarse dicha rutina, la imagen que aparezca ya no será imagen1.jpg, sino imagen2.jpg.

Para comprenderlo mejor, veamos algunos ejemplos:

Cambio de imágenes por medio del cursor del ratón

En el capítulo 21 (Trucos diversos), en la sección Texto fijo de un enlace en la barra de estado, se vió cómo conseguir que al pasar el cursor por encima de un enlace (o al abandonarlo) apareciera un texto fijo en la barra de estado. Esto se conseguía introduciendo dentro de la etiqueta del enlace los comandos de JavaScript onMouseOver y onMouseOut.

Nos vamos a valer de estos mismos comandos, y de otro más: onMouseClick, para cambiar dinámicamente la imagen por la acción del cursor del ratón.

Cambio al pasar por encima el cursor del ratón

Hay que introducir en la etiqueta de la imagen el siguiente comando:

onMouseOver="MiPerro.src='imagen2.jpg';"

con lo que la etiqueta completa quedaría así:

<IMG ID="MiPerro" SRC="imagen1.jpg" onMouseOver="MiPerro.src='imagen2.jpg';">

Inicialmente imagen1.jpg, luego imagen2.jpgComo se puede apreciar en la imagen de la derecha, inicialmente es la misma imagen (imagen1.jpg) que en la etiqueta convencional, pero al pasar el cursor del ratón por encima de ella, cambia por otra imagen distinta (imagen2.jpg)

Se ha hecho que ambas imágenes tengan las mismas dimensiones por motivos estéticos, pero pueden ser de tamaños completamente distintos.
 


 


 

 

Continuará...
Servicio  
  Esta pagina web les enseñara a aprender codigos HTML, esta pagina es para los que estan aprendiendo a usar los codigos.  
Han entrado 20505 visitantes en Web-maestro
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis