| 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: |
|
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. |
Javascript |
Que es un lenguaje de programación interpretado por el navegador, que permite ejecutar instrucciones y manipular los elementos de la página. |
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. |
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. |
|
| |
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. |
| 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: |
|
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. |
ASP. |
Tecnología de Microsoft que sirve para lo mismo que el CGI. |
JSP. |
Tecnología de JAVA que sirve para lo mismo que el CGI. |
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. |