Tecnologías del lado del cliente: HTML Dinámico (DHTML)

viernes, 7 de marzo de 2008

A medida que vamos avanzando en la programación de páginas web nos vamos fijando nuevos objetivos para crear cada día webs más excitantes. Siguiendo este camino, llega un momento que el lenguaje HTML se nos queda corto y tenemos que servirnos de alguna tecnología superior, que nos permita realizar esos desarrollos más complejos y dinámicos. DHTML no es precisamente un lenguaje de programación. Más bien se trata de una nueva capacidad de la que disponen los navegadores modernos, por la cual se puede tener un mayor control sobre la página que antes. Cualquier página que responde a las actividades del usuario y realiza efectos y funcionalidades se puede englobar dentro del DHTML, pero en este caso nos referimos más a efectos en el navegador por los cuales se pueden mostrar y ocultar elementos de la página, se puede modificar su posición, dimensiones, color, etc. DHTML nos da más control sobre la página, gracias a que los navegadores modernos incluyen una nueva estructura para visualizar en páginas web denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc. Para realizar las acciones sobre la página, como modificar la apariencia de una capa, seguimos necesitando un lenguaje de programación del lado del cliente como Javascript o VBScript. Estos lenguajes no permiten el desarrollo de cualquier proyecto en Internet, ya que al ser ejecutados en el navegador del cliente, no tienen acceso a todos los recursos del sistema del usuario, para evitar agujeros de seguridad, ni a los recursos del servidor donde están alojadas las páginas. Esta limitación, añadida a la ya comentada de su dependencia del navegador, los hace insuficientes para desarrollos avanzados, siendo más bien un complemento de programación que el núcleo de verdaderas aplicaciones en el web. Hojas de estilo (CSS) Dentro del concepto de DHTML se engloban también las Hojas de Estilo en Cascada o CSS (Cascade Style Sheets) CSS, es una tecnología que nos permite crear páginas web de una manera más exacta. Gracias a las CSS somos mucho más dueños de los resultados finales de la página, pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML, como incluir márgenes, tipos de letra, fondos, colores, etc. Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, en algunos casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo. Una de las características más potentes de la programación con hojas de estilo consiste en definir los estilos de todo un sitio web. De este modo, todas las páginas comparten una misma declaración de estilos y, por tanto, si la cambiamos, cambiarán todas las páginas. Ejemplos Podemos ver un ejemplo a continuación:

P { font-size : 12pt; font-family : arial,helvetica; font-weight : normal; } H1 { font-size : 36pt; font-family : verdana,arial; text-decoration : underline; text-align : center; background-color : Teal; } BODY { background-color : #006600; font-family : arial; color : White; }
Veamos una página web entera que enlaza con la declaración de estilos anterior
<html> <head> <link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>Página que lee estilos</title> </head> <body> <h1>Página que lee estilos</h1> <p> Esta página tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. </p> </body> </html>
Las Hojas de Estilo en Cascada son un estándar muy amplio, con unas especificaciones y posibilidades muy grandes. Sin embargo, lo mejor para trabajar con esta tecnología es conocerla bien, gracias a ello, los resultados serán mucho más sorprendentes. No podemos hablar de DHTML sin tocar el tema de los lenguajes de script que veremos en el próximo capítulo.

Artículos relacionados


0 comentarios: