Tip:
Highlight text to annotate it
X
Hola, bienvenido al vídeo “DHTML” del curso “Introducción al desarrollo web”.
Esta es la primera parte de una serie de tres vídeos sobre DHTML.
Mi nombre es Laura Sirvent Collado y soy alumna de ingeniería multimedia en la Universidad
de Alicante.
Puedes contactar conmigo a través del siguiente enlace o enviándome un email.
En este vídeo voy a explicar DHTML, abreviatura de Dynamic HTML, o HTML Dinámino. Esto no
es más que un conjunto de tecnologías ya vistas anteriormente, que son HTML, CSS,
Javascript y DOM, y con las que podremos diseñar páginas web interactivas.
Siguiendo una definición más concreta, podemos decir que una página DHTML es aquella
en la que los scripts en el lado del cliente cambian el HTML de la web, y que afecta a
la apariencia y funcionalidad de los objetos que la componen.
El usuario interactúa con una página web, que es común a todos los usuarios.
Para lograr páginas cuyo contenido sea interactivo y dinámico, utilizaremos la combinación
de, HTML (... leer la diapositiva ...)
Algunos ejemplos de DHTML son: menús desplegables, imágenes que cambian al pasar el cursor,
objetos que se mueven, textos que aparecen al pulsar el cursor en algún elemento, o
textos explicativos que aparecen y se ocultan.
Una explicación más técnica de cómo haremos los elementos de una página dinámicos,
es que a través de Javascript accederemos a los elementos del documento HTML utilizando
las funciones que nos proporciona el DOM, y cambiaremos su apariencia. Veamoslo más
detalladamente:
Para cambiar el estilo de los elementos del documento HTML, accederemos a ellos llamándolos
como atributos del objeto del documento, y cambiando su valor muy fácilmente.
Por ejemplo, para cambiar la clase de un elemento llamaremos al atributo className. Por ejemplo,
aquí cambiamos el nombre de la clase del elemento HTML con identificador p1, y le asignamos
la clase titulo.
Por otra parte, para cambiar el valor de una propiedad CSS de un elemento, lo haremos a
través del objeto Style del DOM. El valor que asignaremos será una cadena de texto.
En este ejemplo, cambiamos el color de texto del elemento HTML con identificador p1. Recordemos
que el valor que asignamos si no es una variable inicializada en otra parte,
Deberemos escribirlo entrecomillado.
Los nombres de las propiedades CSS a las que accedemos por Javascript son los mismos que
en CSS, aunque con una ligera variación por norma general. Esta es, la eliminación
del guión en las propiedades que lo tengan, y en este caso, la palabra siguiente al guión
comienza en mayúsculas.
Veamos algunos ejemplos. Por otra parte existen excepciones en otros
nombres, como por ejemplo
Un enlace al que podemos referirnos para asegurarnos del nombre de alguna propiedad CSS en el objeto
Style, es el de la página de w3 schools:
Veamos algunos ejemplos más para que quede claro el concepto:
Continuamos en la parte dos. Recuerda que este vídeo forma parte del curso “Introducción
al desarrollo web” que está disponible en la dirección idesweb.es.