DHTML

Que es DHTML?

El HTML Dinámico o DHTL designa el conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de lenguaje HTML estático, un lenguaje interpretado en el lado del cliente (como JavaScript), el lenguaje de hojas de estilo en cascada (CSS) y la jerarquía de objetos de un DOM.

Una página de HTML Dinámico es cualquier página web en la que los scripts en el lado del cliente cambian el HTML del documento, después de que éste haya cargado completamente, lo cual afecta a la apariencia y las funciones de los objetos de la página. La característica dinámica del DHTML, por tanto, es la forma en que la página interactúa con el usuario cuando la está viendo, siendo la página la misma para todos los usuarios.

En contraste, el término más general "página web dinámica" lo usamos para referirnos a alguna página específica que es generada de manera diferente para cada usuario, en cada recarga de la página o por valores específicos de variables de entorno. Este término no debe ser confundido con DHTML. Estas páginas dinámicas son el resultado bien de la ejecución de un programa en algún tipo de lenguaje de programación en el servidor de la página web (como por ejemplo ASP.NET, PHP o Perl), el cual genera la página antes de enviarla al cliente, o bien de la ejecución en la parte cliente de un código que crea la página completa antes de que el programa cliente (usualmente, un navegador) la visualice.

En una página DHTML, una vez ésta ha sido cargada completamente por el cliente, se ejecuta un código (como por ejemplo en lenguaje JavaScript) que tiene efectos en los valores del lenguaje de definición de la presentación (por ejemplo CSS), logrando así una modificación en la información presentada o el aspecto visual de la página mientras el usuario la está viendo.

sintaxis Bajo el nombre de HTML Dinámico se engloba un conjunto de técnicas con dos objetivos claros:

proporcionar un control absoluto al diseñador de páginas HTML y romper con el carácter estático de este tipo de documentos. Hasta ahora, una vez mostrado un documento HTML, nada podía hacerse para modificarlo.

Los tres componentes del HTML Dinámico son: Hojas de Estilo Posicionamiento de Contenidos Fuentes Descargables Las hojas de estilo permiten especificar atributos para los elementos de su página web. Con el

posicionamiento de contenidos se puede asegurar que las diferentes partes serán mostradas exactamente donde usted quiera que aparezcan y podrá modificar su aspecto y posicion tras ser mostrada. Con las fuentes descargables podemos asegurar que siempre se utilizara la fuente correcta, pues podemos enviar la fuente junto con la página.

las Hojas de EstilosAntes de la introducción de las hojas de estilo, los creadores de páginas web sólo tenían un control parcial sobre el aspecto final de sus páginas. Por ejemplo, se podía especificar que cierto texto debia verse como una cabecera, pero no se podían colocar márgenes a una página ni escoger un borde decorado para un texto.Las hojas de estilo nos permiten un mayor control sobre el aspecto de nuestros documentos. Con ellas podemos especificar muchos atributos tales como colores, márgenes, alineación de elementos, tipos y tamaños de letras, y muchos más. Podemos utilizar bordes para hacer que ciertos elementos resalten del resto de un documento. Podemos especificar que se utilicen diferentes fuentes para diferentes elementos tales como párrafos o cabeceras. Además podemos emplear hojas de estilo como patrones o páginas maestras de forma que múltiples páginas puedan tener el mismo aspecto.Las hojas de estilo pueden crearse empleando dos tipos de sintaxis, CSS (Cascade Style Sheets) y JavaScript.

Estilos mediante Hojas de Estilo en CascadaUna hoja de estilo consiste en una o más definiciones de estilo. En sintaxis CSS, los nombres de las propiedades y los valores se encierran entre llaves {}.El criterio de selección determina a que elementos se aplica, o es aplicable, el estilo. Si el criterio de selección es un elemento HTML, el estilo es aplicado a todos las instancias de dicho elemento. El criterio de selección también puede ser una clase, un ID o contextual. Cada una de estos criterios de selección se verán a continuación.En una definicion de estilo cada propiedad es seguida por dos puntos y el valor de dicha propiedad. Cada par propiedad/valor está separado del siguiente por un punto y coma (;). Por ejemplo, la siguente hoja de estilo en cascada contiene dos definiciones de estilos. El primero especifica que todos los párrafos, <p>, se veran en negrita y en color blanco. El segundo hará que todas las cabeceras, <h1>, aparezcan centradas.<style type="text/css"> <!-- p {font-weight: bold; color: white;} h1 {text-align: center;} --> </style> La definición de estilos se puede encerrar entre commentarios (<!-- ... -->), de esta forma los navegadores que no reconozcan la etiqueta <style> la ignorarán.Es importante no incluir dobles comillas en la especificacion de valores de atributos en sintaxis CSS.CSS exige un estricto cumplimiento de sus normas de sintaxis. Asegurese de no omitir ningun punto y coma entre los pares nombre/valor. Si lo hace se ignorara por completo la definición de estilo. De igual forma, si accidentalmente se añade un simbolo extraño la definición será ignorada.

Hojas de Estilo con la etiqueta <STYLE>Para definir una hoja de estilo directamente dentro de un documento se utiliza la etiqueta <style> dentro de la sección <head> ... </head>. La etiqueta <style> abre la hoja de estilo, y la etiqueta </style> la cierra. Asegurese de utilizar <style> antes de <body>.Cuando use <style> podrá especificar el atributo type para indicar que tipo de sintaxis se va a emplear. Los dos valores posibles son "text/css" y "text/javascrip". EL valor por defecto es "text/css".El siguiente ejemplo define una hoja de estilo que especifica que todos los titulos de nivel 4 serán en mayúsculas y azules, y todos los bloques en cursiva y rojos:Sintaxis CSS<head> <style type="text/css"> h4 {text-transform: uppercase; color: blue;} blockquote {font-style: italic; color: red;} </style> </head> <body> ... </body> Sintaxis JavaScript<head> <style type="text/javascript"> tags.h4.textTransform = "uppercase" tags.h4.color = "blue" tags.blockquote.fontStyle = "italic" tags.blockquote.color = "red" </style> </head> <body> ... </body> Uso de la hoja de estilo<h4>Este titulo es azul y esta en mayusculas.</h4> <blockquote>Este bloque en cursiva es rojo.<blockquote>

EJEMPLOS:El siguiente ejemplo muestra una hoja de estilo sencilla descrita mediante sintaxis CSS y JavaScript. En ella se especifica que todos los elementos <p> tendran márgenes derecho e izquierdo y que su texto estará centrado. Todos los elementos <h4> estarán subrayados y en verde. Todos los elementos <h5> se mostraran en mayúsculas, tendran un borde con aspecto 3D sobresaliente de 4 puntos de ancho y color rojo. Su texto será rojo y el fondo amarillo. Finalmente, los <blockquote> serán azules y en cursiva, su altura de línea (interlínea) será un 150% mayor que por defecto y su primera línea estará indentado un 10%.Sintaxis CSS<style type="text/css"> p {text-align: center; margin-left: 20%; margin-right: 20%;} h4 {text-decoration: underline; color: green;} h5 { text-transform: uppercase;color:red; border-width: 4pt; border-style: outset; background-color: yellow; padding: 4pt; border-color: red;} } blockquote { color: blue; font-style: italic; line-height: 1.5; text-indent: 10% } </style> Sintaxis JavaScript<style type="text/javascript"> with (tags.p) { textAlign = "center"; marginLeft = "20%"; marginRight = "20%"; } with (tags.h4) {textDecoration = "underline"; color = "green";} with (tags.h5) { textTransform = "uppercase"; color = "red"; borderWidth = "4pt"; borderStyle = "outset"; backgroundColor = "yellow"; paddings("4pt"); borderColor = "red"; } with (tags.blockquote) { color = "blue"; fontStyle = "italic"; lineHeight = "1.5"; textIndent = "20pt"; } </style> Uso de la hoja de estilo<h4>Titulo subrayado</h4> <blockquote> Esto es un bloque. Normalmente los bloques están indentados, pero en este, además, la primera línea tiene una indentación extra. También la interlínea es mayor de lo habitual. </blockquote> <h5>Titulo h5 en mayusculas y con borde</h5> <p>Este párrafo está centrado. También tiene unos amplios márgenes derecho e izquierdo.</p>

Posicionamiento de ContenidosYa no se está restringido al posicionamiento secuencial de los elementos sobre la página. Especificando la posición de los bloques podemos decidir donde se mostrara cada elemento en vez de dejar esta tarea al arbitrio del navegador. Por ejemplo, podemos colocar un bloque en la esquina superior izquierda, y otro en la inferior derecha. También podemos hacer que varios bloques compartan espacio, de forma que se puedan solapar. Ahora se puede decidir la posición exacta de los elementos.Utilizando JavaScript podemos cambiar el aspecto de la página dinámicamente. Podemos hacer que los elementos aparezcan o se desvanezcan, podemos cambiar su color y su posición, etc. Podemos añadir animaciones dentro de nuestras páginas moviendo y modificando ciertas partes de la misma.El uso conjunto las hojas de estilo y el posicionamiento de contenidos nos permite crear páginas web que utilicen diferentes estilos en diferentes partes de la página.Para el posicionamiento de contenidos también podemos utilizar dos tipos de sintaxis: CSS y JavaScript.

Fuentes DescargablesLas fuentes cargables consisten en la posibilidad de incluir en el documento HTML la definición de las fuentes empleadas por si éstas no se encontraran disponibles en el sistema de destino. Dicha definición consiste en un fichero que se debe colocar en la máquina servidora, al igual que el documento o las imágenes.Los ficheros de fuentes, como otros muchos recursos, se pueden conseguir en Internet, pero el usuario no las puede grabar en disco (como puede hacer con el documento o las imágenes). Por otro lado, hay que tener en cuenta que las fuentes están sujetas a las "leyes de derechos de autor", por lo que, antes de utilizarlas dentro de nuestras páginas deberemos asegurarnos de tener permiso para hacerlo.Para que todo funcione correctamente, al servidor habrá que añadirle un nuevo tipo MIME para que reconozca este tipo de archivos. El nuevo tipo es application/font-tdpfr, asociado a la extensión .pfr.Cómo Usar Fuentes Descargables.Una vez se dispone del fichero de definición de fuentes, por ejemplo, fuente.pfr, se pueden asociar al documento a través de un estilo, por medio de la palabra fontdef, por ejemplo:<style type="text/css"> @fontdef "http://www.gutemberg.org/fuente.pfr"; </style> o también con la etiqueta <link>:<link rel=fontdef src="http://www.gutemberg.org/fuente.pfr"> Una vez que el fichero ha sido cargado desde el servidor donde están las páginas, imágenes, fuentes, etc., para utilizar estas fuentes, modificaremos el valor del atributo face de la etiqueta <font>, por ejemplo:<font face = "Gutemberg"> Vamos a probar el tipo de letra Gutemberg </font> o bien definiendo un estilo CSS, utilizando la propiedad font-family:<style type="text/css"> clasico { font-family: Gutemberg, sans-serif } </style> ... ... <div class="clasico">Este tipo de letra es la Gutemberg</div> Este párrafo utilizará el tipo de fuente Gutemberg si está disponible, sino utilizará la sans-serif.Podemos ver algunos ejemplos de fuentes descargables en la página de http://www.myfonts.com/bestsellers.html. En tenemos otros ejemplos de fuentes descargables en la página de TrueDoc. Esta es la fuente EyeBall. He aquí una muestra de la fuente Amelia tomada directamente desde su servidor: ABCDEFGHIJKLMNOPQRSTUVWXYZ

Nuevas etiquetas HTMLEn esta sección se veran las nuevas etiquetas que han sido añadidas para trabajar con estilos.<DIV>Las etiquetas <DIV> y </DIV> se usan para agrupar elementos de bloque y poder aplicarles un cierto estilo que nos interese. Esta etiueta de por sí no produce ningún cambio en el contenido de un documento. Es equivalente a <DIV>, sólo que esta se utiliza con elementos en línea.Ejemplos:<p>Un párrafo normal...</p> <div class="especial"> <p>Un párrafo especial...</p> <p>Otro párrafo especial...</p> </div> <p>Un párrafo normal...</p> <p>Otro párrafo normal...</p><STYLE>Las etiquetas <STYLE> y </STYLE> se usan para crear una hoja de estilo. En su interior podemos especificar estilos para elementos, deficir clases e identificadores y en general establecer los estilos que se utilizaran en todo el documento.Para especificar que tipo de sintaxis se empleara utilizaremos el atributo TYPE. Su valor por defecto es "text/css" y selecciona la sintaxis CSS. Mediante el valor "text/javascript" podemos seleccionar la sintaxis JavaScript.Ejemplos:Sintaxis CSS<style type="text/css"> body {margin-left: 10%; margin-right: 10%;} .limon {color: yellow;} <style> Sintaxis JavaScript<style type="text/javascript"> tags.body.marginLeft="10%"; tags.body.marginRight="10%"; classes.limon.all.color="yellow"; <style>

<LINK>La etiqueta <LINK> sirve para poder utilizar en un documento una hoja de estilo que esta en otro fichero.Sintaxis CSS<html> <head> <title>Titulo</title> <link rel=stylesheet type="text/css" href="http://estilos/mi_estilo.html"> </head> <body> ... </body> </html> Sintaxis JavaScript<html> <head> <title>Titulo</title> <link rel=stylesheet type="text/javascript" href="http://estilos/mi_estilo.html"> </head> <body> ... </body> </html>

<SPAN>Las etiquetas <SPAN> y </SPAN> se utilizan para agrupar una porción de código a la que se le va aplicar un estilo. A diferencia de <DIV>, se utiliza con elementos en línea en lugar de con elementos de bloque.En el siguiente ejemplo se aplica un estilo a una parte del texto:Este texto es normal. <span style="font-weight: bold; color: green;">Este texto es diferente gracias a &lt;span>.</span> De nuevo el texto es normal. El resultado del ejemplo es:Este texto es normal. Este texto es diferente gracias a <span>. De nuevo el texto es normal.Veamos otro ejemplo. Este hace diferentes las letras iniciales:<style type="text/css"> .letron {font-family: times; font-size: 200%; font-weight: bold;} </style> <p><span class="letron">E</span>n un lugar de la Mancha...</p>