Búsqueda personalizada

Elemento de lista Tutorial sobre HTML Dinámico y Javascript.

Documento HTML.
Tutorial para conocer qué es el HTML Dinámico, qué utilidad tiene y qué tecnologías utiliza estando entre ellas el Javascript. Diferencia entre tecnologías de cliente y de servidor.
Autor: Wmasterfacil www.wmasterfacil.com
En este tutorial voy a explicar qué se entiende por HTML Dinámico, en que se basa y que utilidades tiene, en contraposición al HTML estático.
Lo he colocado en esta sección de Javascript, porque utilizaré este tutorial como entrada para un grupo de tutoriales sobre Javascript, lenguaje de programación que se utiliza para hacer dinámico al HTML, en conjunto con otras herramientas.
También explicaré qué se entiende por 'tecnologías de cliente' y 'tecnologías de servidor'.
HTML estático.
HTML (Hypertext Markup Language), no es un lenguaje de programación, sino un formato de visualización de datos.
El formato HTML permite indicar a los navegadores como queremos que se visualice la información que hemos introducido en la página. Para ello utiliza etiquetas, que a su vez están afectadas por propiedades, y todo ello se almacena en un fichero que es un archivo de texto.
Todos los tutoriales de HTML que ya he hecho en la sección de HTML / CSS son de HTML estático, aunque ya introducen un elemento que servirá para hacerlo dinámico, que son las hojas de estilos CSS.
Cuando un navegador carga un fichero HTML, lee de arriba a abajo y de izquierda a derecha todo el fichero, representando en la pantalla el contenido de las etiquetas y sus propiedades. Cuando el navegador termina de leer el fichero, la página está totalmente cargada y representada en la pantalla, después de lo cual queda estática hasta que cambiemos de página. Eso es HTML estático, aquel que después de cargada la página, permanece inalterable.
HTML dinámico.
Una página web dinámica es aquella cuyo comportamiento cambia con el tiempo.
Es una tecnología de cliente, (navegador), que permite modificar el aspecto de la página web sin necesidad de recargarla. Aquí ya introducimos el término 'tecnología de cliente' para definir aquellas tecnologías que se ejecutan en el ordenador del cliente, en este caso, en el navegador del usuario que carga la página web.
Basándome en estos dos conceptos, podemos decir que el HTML Dinámico consiste en la combinación de una serie de técnicas que se encuentran en los navegadores de los usuarios (clientes), para construir páginas web dinámicas, es decir, que cambian con el tiempo.
Consideramos que se codifica en HTML dinámico cuando, aparte del HTML, se utilizan:

Elemento de lista Hojas de estilo En inglés CSS. Para separar el modo en que se representa la página web, de su contenido y que está explicada en su mayor parte en los tutoriales de HTML / CSS de esta web.
Elemento de lista Javascript Que es un lenguaje de programación interpretado por el navegador, que permite ejecutar instrucciones y manipular los elementos de la página.
Elemento de lista Captura y manejo de eventos Capacidad para asociar funciones Javascript en respuesta a las acciones que realiza el usuario sobre la página Web, es decir, que el usuario interactúa con la página web y esas actuaciones estarán asociadas a código Javascript para producir alguna respuesta a esa acción del usuario.
Elemento de lista Mod. de Objetos de Documento En inglés DOM. Jerarquía de objetos incluida en los navegadores, que estructura los elementos de una página Web de acuerdo a una serie de clases y propiedades, que se puede modificar.

 
Elemento de lista  CONCEPTO:
La aplicación de HTML Dinámico consiste en ejecutar código Javascript, como respuesta a eventos que produce el usuario de la web, con el fin de modificar las propiedades de los objetos DOM definidos mediante etiquetas HTML formateadas visualmente con hojas de estilos (CSS).
 
Algunos ejemplos del uso de HTML Dinámico pueden ser:
Creación de menús, múltiples efectos visuales más potentes que los típicos de HTML / CSS o validación de formularios (punto muy interesante).
Alguno probablemente se preguntará si con HTML dinámico se puede hacer de todo en una página web, es decir, si solo aprendiendo HTML, CSS, Javascript y el DOM (casi nada) podremos programar cualquier cosa para una web, y la respuesta es NO. ¿Por qué? Pues porque con el HTML dinámico solo podremos realizar cambios en una web a nivel de cliente, y no a nivel de servidor. Voy a explicar estos dos conceptos.

^ Inicio de página

Tecnologías de cliente vs. Tecnologías de servidor.
Una página web se encuentra alojada en un servidor web (hosting), que no es otra cosa que un gran ordenador que permite que nuestra web sea accesible desde internet. Este ordenador no tiene por qué tener las mismas características del nuestro, ni a nivel de sistema operativo, ni desde luego, a nivel de hardware. Lo único que a nosotros nos interesa de él, es que nuestra web esté almacenada en él.
Este ordenador se le denomina servidor, y nos permite cosas como almacenar unos ficheros de datos o bases de datos, para mantener, por ejemplo, datos de los usuarios que acceden a nuestra web, o datos de los clientes que compras nuestros productos por internet, por ejemplo.
Pues bien, si yo quisiera, por ejemplo, añadir un nuevo usuario a mi base de datos a través de mi página web, no podría hacerlo con HTML dinámico, pues todo lo que programamos en HTML dinámico se ejecuta en el navegador del ordenador cliente (en el ordenador del usuario que ejecuta nuestra web), y no alcanza a realizar modificaciones o a ejecutar nada en el ordenador servidor (donde está alojada nuestra web).
Es decir, yo podría con HTML dinámico, saber si el correo electrónico que introduce un usuario está bien escrito (xxxxx@yyyy.zz), pero no podría almacenarlo en mi base de datos, pues para eso necesitaría tecnologías de servidor (lenguajes de programación que se ejecuten en el servidor donde está alojada mi página web).
Algunas tecnologías de servidor son:

Elemento de lista CGI. Interfaz de comunicación con programas que se ejecutan en el servidor. Estos programas pueden leer ficheros o bases de datos que están en el servidor. Está ya un poco antiguo.
Elemento de lista ASP. Tecnología de Microsoft que sirve para lo mismo que el CGI.
Elemento de lista JSP. Tecnología de JAVA que sirve para lo mismo que el CGI.
Elemento de lista PHP. Tecnología publicada bajo la PHP License, la Free Software Foundation considera esta licencia como software libre. Es un lenguaje interpretado que se suele utilizar en el lado servidor. Es la versión gratuita y libre de las anteriores. Está muy extendida.
En los siguientes tutoriales de esta sección voy a ir introduciendo el lenguaje Javascript. Lo haré muy lentamente, porque es un lenguaje de programación propiamente dicho (en contraposición al HTML) y veremos conceptos no vistos hasta ahora, y que si los entendéis con Javascript, los podréis adaptar perfectamente a cualquier otro lenguaje de programación.
Esto es todo de momento. Si teneis dudas, exponedlas en el link de debajo.
Comentarios a este tutorial

^ Inicio de página