Post on 12-Jun-2015
DTHML
HTML Dinámico
Franklin Espitia AmayaHarold Tamayo Acosta
DHTML
Dynamic Html DHTML abarca muchas áreas con respecto al diseño de páginas, al hablar de html dinámico ó DHMTL, decimos que es un conjunto de tecnologías aplicadas al diseño de páginas, cuyo contenido sea lo más dinámico posible, en donde se refleje lo interactivo y las animaciones web, combinando lenguajes que van aportando a la construccion del html dinámico tales como: HTML, JAVASCRIPT, seguido de las CSS y finalmente el DOM.
El HTML dinámico no es realmente una nueva especificación de HTML, pero contiene nuevos caminos de mirar y controlar los códigos y comando estandar de HTML. Cuando pensamos en HTML dinámico, es necesario recordar la calidad del estándar HTML, especialemente la forma como las páginas son cargadas desde el servidor, y que a la hora de implementarlo no es necesario tener muchos requerimientos para poderlo manejar mediante el servidor. El DHTML proporciona mas control sobre los elementos html, y me permite realizar cambios en cuanlquier momento.
PARTES DEL DHTML
Estas son las cuatro partes del html dinamico:
1. DOM (Document Object Model)2. SCRIPTS3. CSS (Hojas de estilo en Cascada4. XHTML
DOM (Document Object Model)
El DOM es aquello que permite un acceso más fácil a cualquier parte de la página web permitiendo así hacer cualquier cambio utilizando DHMTL. Cada parte de la página web está especificada por el DOM y usando sus consitencias y convenciones, se puede acceder y cambiar cualquier propiedad de la página.
Gracias al DOM se hace más fácil la construcción de documentos web, se puede navegar con mayor facilidad debido a la estructura con la que esta hecha, y hacer las debidas modificacions o adiciones de una manera mas sencilla.
El objetivo principal del DOM es generar un estilo estándar de diseño que permita la utilización en diferentes entornos y aplicaciones.
EJEMPLO
<html><body>
<h1 id="header">Old Header</h1>
<script type="text/javascript">document.getElementById("header").innerHTML="New Header";</script>
</body></html>
SCRIPTS
Los scripts están escritos en dos formas o tipos, JavaScripts y Activex y son las secuencias de comandos más comunes que se utilizan para la activación del DHMTL.
Puede utilizar un lenguaje SCRIPTING para controlar los objetos que se especifican a través del DOM.
EJEMPLO
<html><body>
<script type="text/javascript">document.write(Date());</script>
</body></html>
CSS (Hojas de Estilo en Cascada)
Las CSS son usadas en DHTML para controlar el aspecto de las páginas web. Las hojas de estilo definen el color y la forma de los textos, el color de los fondos y las imágenes, y la ubicación de los objetos en la pagina web. Por medio de los SCRIPTS y del DOM podemos cambiar el estilo de varios elementos.
Son un simple mecanismo para adicionar estilos para documentos web en HTML y XHTML, como por ejemplo adicionar estilos en fuentes colores, espacios y otros aspectos en la presentación del documento.
Esta diseñado primordialmente para habilitar la separación del contenido de los documentos. Esta separación puede ayudar a tener una mejor accesibilidad, flexibilidad y un control en la especificación de las características de la presentación.
EJEMPLO
<html><body>
<h1 id="header" onclick="this.style.color='red'">Click ME!</h1>
<p>If you click the header above, it turns red.</p>
</body></html>
<html><body>
<p id="p1">hello world.<br />again HELLO WORLD'</p>
<input type="button" value="Hide text"onclick="document.getElementById('p1').style.visibility='hidden'" /><input type="button" value="Show text"onclick="document.getElementById('p1').style.visibility='visible'" />
</body></html>
XHTML
XHTML o HTML es usado para crear las páginas propias y construir los elementos para las CSS y el DOM a trabajar. No hay nada en especial acerca de XHTML dirigido a DHTML, pero teniendo valido el XHTML es más importante, a raíz de que hay más opciones de trabajo aparte de las que me ofrece el navegador.
CARACTERISTICAS DEL DHTML
Estas son las características principales del HTML dinámico:
1. Cambio de etiquetas y propiedades2. Posicionamiento en tiempo real3. Fuentes dinámicas (Netscape Comunicator)4. Enlace de datos (Internet Explorer)
EJEMPLO DE DHTML
<html><head>
<script type="text/javascript">function bgChange(bg){document.body.style.background=bg;}</script></head>
<body>
<b>Mouse over the squares and the background color will change!</b>
<table width="300" height="100"> <tr> <td onmouseover="bgChange('red')" onmouseout="bgChange('transparent')" bgcolor="red"> </td> <td onmouseover="bgChange('blue')" onmouseout="bgChange('transparent')" bgcolor="blue"> </td> <td onmouseover="bgChange('green')" onmouseout="bgChange('transparent')" bgcolor="green"> </td></tr></table>
</body></html>
EJEMPLO
<html><head><script>function startEQ(){richter=5;parent.moveBy(0,richter);parent.moveBy(0,-richter);parent.moveBy(richter,0);parent.moveBy(-richter,0);timer=setTimeout("startEQ()",10);}function stopEQ(){clearTimeout(timer);}
</script></head><body>
<form><input type="button" onclick="startEQ()" value="Start an earthquake"><br /><br /><input type="button" onclick="stopEQ()" value="Stop the earthquake"></form>
</body></html>
CONCLUSIONES
Gracias a las diferentes herramientas que nos ofrece el HTML dinamico, podemos obtener en
el momento de la creación de sitios web o aplicaciones resultados sorprendentes. Podemos
implementar todas las herramientas que nos ofrece y construir un sitio dinámico, que motive al usuario a explorar y explorar utilizando cada
espacio del sitio.