HTML DINAMICO

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>

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.

HTML DINAMICO

Technology

Transcript of HTML DINAMICO