| Artículos | 01 JUN 1998

HTML dinámico

Compartir

Faustino Forcén.

Mediante DHTML podrá ajustar el diseño de sus páginas al milímetro, ofrecer nuevas e interesantes opciones de interacción y ganar en riqueza tipográfica . El precio, no obstante, está en la compatibilidad con los diferentes navegadores

Para el tema que nos ocupa, la palabra clave es HTML . Un subconjunto del SGML que fue diseñado por un físico inglés, Tim Berners-Lee, usando una máquina NeXT para darle un poco de ?vida? al servidor de datos científicos del CERN ( Centro Europeo de Investigación Nuclear ) . Después de que unos estudiantes de la Universidad de Illinois creasen su versión para Mac del ?navegador? denominado Mosaic, el termino Web, World Wide Web o páginas web empezó a popularizarse . Uno de esos estudiantes, un tal Marc Andreesen, se asoció con uno de los pioneros de la industria informática para formar una empresa que denominaron Netscape, con el fin crear y distribuir el ?navegador? del mismo nombre . El resto es historia .

Incidentalmente, un poco más arriba en el mapa de Estados Unidos, unos años después, alguien en Redmond se dio cuenta de que eso de los navegadores podría dar dinero y encargó que se crease un navegador llamado Microsoft Explorer . . . El resto es otra historia en sí misma .

De momento nos quedamos en Netscape, al menos para este artículo dedicado a explorar ( ¿ navegar ? ) algunas de las nuevas características que permiten crear páginas web más atractivas y hasta con una cierta gracia . Cada uno de los dos principales navegadores en liza actualmente ( Netscape y Explorer ) ha ido ampliando la cantidad de comandos de HTML que soporta, unas veces a medida que el consorcio encargado del estándar ( W3C ) ha ido creando especificaciones y otras veces por delante, esperando quizás tomar la delantera al forzar la adopción de extensiones propias .

El DHTML, o HTML Dinámico es la gran ventaja que ambos enarbolan, pues aumenta las capacidades de diseño e interactividad del lenguaje . Y aún basándose ambos en un juego similar de características ( hojas de estilo, capas y tipos descargables ) , los dos presentan diferencias . El ejemplo que acompaña a este artículo fue creado para Netscape, por lo que nos ceñiremos a las características concretas de Navigator .

Hojas de estilos

Una de las nuevas características, a la que se ha dado más importancia, son las hojas de estilo . Usando hojas de estilo, los creadores de páginas pueden tener más control sobre el aspecto de las mismas . Hasta ahora en un párrafo de texto sólo se podía cambiar el tamaño, la tipografía, el color y la alineación, pero no se podía tener control sobre aspectos como el interlineado o los márgenes .

Mediante el uso de las hojas de estilo se pueden variar muchos de los atributos de texto: se puede variar la alineación, el color, la familia, el estilo ( Itálica, por ejemplo ) , el peso de la tipografía ( bold, extra, etc ) , el interlineado, los alineamientos horizontales y verticales y la indentación de los párrafos . Incluso se puede especificar un color y una imagen de fondo para cada bloque de texto . Además se pueden indicar márgenes y definir bordes de distintos grosores, colores y estilos para los bloques de texto .

Las hojas de estilo, además, simplifican mucho la gestión de los cambios en servidores con un gran número de páginas . Gracias a la capacidad de Netscape Communicator de acceder a documentos externos a la página que se está viendo ( hasta ahora cada página debía estar contenida en un único documento HTML ) es posible tener un único documento con los estilos que se aplican a todas las páginas . Variando los estilos en ese único documento se puede variar el aspecto de todo el servidor, sin tener que modificar página a página .

Las hojas de estilos se pueden implementar de dos maneras en Communicator: utilizando la sintaxis CSS ( Cascading Style Sheet ) , un estándar del W3C, compatible con ambos navegadores, o usando JavaScript para acceder a cada una de las propiedades de los objetos de la página . La forma más compatible es usar la sintaxis CSS . Una hoja de estilo está formada por una o más definiciones de estilos e indicará cómo se muestran los objetos de determinado tipo .

Este código HTML define que todos los elementos que sean del tipo < P > ( el texto normal en Navigator ) estarán en cuerpo 18, con un margen de 20 puntos a la izquierda . Asimismo, los elementos H1 se mostrarán de color azul .

< STYLE TYPE= " text/css " >

P {font-size:18pt; margin-left:20pt;}

H1 {color:blue;}

< /STYLE >

Para realizar lo mismo en JavaScript, se escribe accediendo directamente a los objetos ?tag? del documento y modificando directamente sus atributos .

< STYLE TYPE = " text/javascript " >

tags . P . fontSize = " 18pt " ;

tags . P . marginLeft = " 20pt " ;

tags . H1 . color = " blue " ;

< /STYLE >

Si en un mismo documento hay varios estilos referidos a un mismo tipo de elemento ( por ejemplo, se hace referencia a un documento de texto externo y se redefinen ciertos estilos dentro de la página que se está mostrando ) las últimas definiciones anulan a las anteriores . Así es fácil tener un estilo común para todo un servidor, pero modificarlo en determinadas páginas .

< HTML >

< HEAD >

< TITLE > Probando las hojas de estilos < /TITLE >

< LINK REL=STYLESHEET TYPE= " text/css " HREF= " estilos1 . html? >

< /HEAD >

Además de poder aplicar estilos a elementos estándar del HTML, también es posible definir nuevos elementos y aplicarles estilos a estos nuevos objetos así creados . Esta es una forma de implementar objetos similares a las capas .

Posicionamiento de objetos

Los documentos HTML se leen de arriba hacia abajo . Es decir, se van creando objetos a medida que el navegador encuentra las marcas oportunas . Por ello, si se quiere que una imagen o un texto ocupen una posición determinada en la página, debe ser especificado antes que los objetos que se dibujen a continuación . Con el soporte de capas ( mediante el comando < LAYER > ) esta ?limitación? desaparece, porque se pueden definir cada uno de los bloques por separado, indicando una posición horizontal y vertical específica para cada uno de ellos . Los bloques se pueden solapar, permitiendo que un texto se muestre sobre una imagen, por ejemplo . El objetivo es que el creador de la página especifica en qué parte de la misma se muestra cada objeto, en lugar de dejar que el navegador la muestre donde corresponda en función de los objetos que se han ido dibujando con anterioridad .

Se puede pensar en las capas como partes del documento que se pueden situar con independencia del resto, de la misma manera que, por ejemplo, una caja de imagen se puede mover libremente en un documento de XPress . El creador de la página decide, al escribir el contenido, qué parte de la misma está contenida en cada capa y cómo se relacionan unas capas con respecto a otras, en cualquiera de los tres ejes ( horizontal, vertical y profundidad ) .

Las capas, además, tienen opciones que hacen que su uso amplie notablemente la versatilidad del HTML, permitiendo nuevos efectos ( para lo que es habitual en una página web ) . En primer lugar, a efectos del gestor de objetos de JavaScript ( la parte del Netscape que permite acceder a distintos objetos, imágenes, ventanas, desde el lenguaje de programación ) las capas se comportan como objetos nuevos . Es decir, se puede acceder a ellas así como obtener y modificar sus características . A

Contenidos recomendados...

Comentar
Para comentar, es necesario iniciar sesión
Se muestran 0 comentarios
X

Uso de cookies

Esta web utiliza cookies técnicas, de personalización y análisis, propias y de terceros, para facilitarle la navegación de forma anónima y analizar estadísticas del uso de la web. Consideramos que si continúa navegando, acepta su uso. Obtener más información