HTML dinámico (DHTML) le permite crear una experiencia de estilo de aplicación en sus sitios web, lo que reduce la frecuencia con la que las páginas enteras deben cargarse por completo. En las aplicaciones, cuando hace clic en algo, la aplicación cambia inmediatamente para mostrar ese contenido específico o para brindarle su respuesta.
Por el contrario, las páginas web suelen tener que volver a cargarse o se debe cargar una página completamente nueva. Esto puede hacer que la experiencia del usuario sea más inconexa. Sus clientes deben esperar a que se cargue la primera página y luego esperar nuevamente a que se cargue la segunda página, y así sucesivamente.
Uso para mejorar la experiencia del espectador
Con DHTML, una de las formas más fáciles de mejorar esta experiencia es tener div Los elementos se activan y desactivan para mostrar el contenido cuando se solicita. A elemento div define divisiones lógicas en su página web. Piense en un div como un cuadro que puede contener párrafos, encabezados, enlaces, imágenes e incluso otros divs.
Lo que necesitarás
Para crear un div que se pueda activar y desactivar, necesita lo siguiente:
- Un enlace para controlar el div encendiéndolo y apagándolo cuando se hace clic.
- El div para mostrar y ocultar.
- CSS para diseñar el div oculto o visible.
- JavaScript para realizar la acción.
El enlace de control
El vínculo de control es la parte más fácil. Simplemente cree un enlace como lo haría con otra página. Por ahora, deja el atributo href blanco.
Aprender HTML
Coloque esto en cualquier lugar de su página web.
La div para mostrar y ocultar
Crea el elemento div que quieras mostrar y ocultar. Asegúrese de que su div tenga una identificación única. En el ejemplo, la identificación única es aprender HTML.
Esta es la columna de contenido. Comienza en blanco a excepción de este texto explicativo. Elija lo que desea aprender en la columna de navegación de la izquierda. El texto aparecerá a continuación:
Aprender HTML
- Clase HTML gratuita
- Tutorial HTML
- ¿Qué es XHTML?
El CSS para mostrar y ocultar la div
Cree dos clases para su CSS: una para ocultar el div y la otra para mostrarlo. Tiene dos opciones para esto: visualización y visibilidad.
La visualización elimina el div del flujo de la página y la visibilidad simplemente cambia la forma en que se ve. Algunos codificadores prefieren monitor, pero algunas veces visibilidad también tiene sentido. Por ejemplo:
.hidden {pantalla: ninguno; }
.unhidden {pantalla: bloque; }
Si desea utilizar la visibilidad, cambie estas clases a:
.hidden {visibilidad: oculta; }
.unhidden {visibilidad: visible; }
Agregue la clase oculta a su div para que comience como oculta en la página:
JavaScript para que funcione
Todo lo que hace este script es mirar el conjunto de clases actual en su div y lo cambia a no oculto si está marcado como oculto o viceversa.
Estas son solo algunas líneas de JavaScript. Coloque lo siguiente en la cabeza de su Documento HTML (antes de.
Qué hace este script, línea por línea:
Llama a la función mostrar, y divID es la identificación única exacta que desea mostrar u ocultar.
Configura una variable item con el valor de su div.
Realiza una simple verificación del navegador; si el navegador no es compatible getElementById, este script no funcionará.
Comprueba la clase en el div. Si es oculto, lo cambia a desenmascarado. De lo contrario, lo cambia a oculto.
Cierra el Si declaración.
Cierra la función.
Para que el guión funcione, debe hacer una cosa más. Regrese a su enlace y agregue el javascript al atributo href. Asegúrese de usar la identificación única exacta que nombró su div en este href:
Aprender HTML
¡Felicidades! Ahora tiene un div que se mostrará y ocultará cada vez que haga clic en un enlace.
Posibles problemas a tener en cuenta
Este guión no es infalible. Hay algunas situaciones en las que podría causarle problemas:
JavaScript no activado. Si sus lectores no tienen JavaScript o está desactivado, esta secuencia de comandos no funcionará. Los divs ocultos permanecen ocultos sin importar lo que hagan sus lectores. Una forma de solucionar esto es colocar los divs ocultos en un área de noscript, pero tendrás que jugar con eso para que se muestren correctamente.
Demasiado contenido. Esta puede ser una gran herramienta para permitir que sus lectores vean solo el contenido que necesitan, pero si coloca demasiado dentro de los divs ocultos, puede afectar drásticamente la forma en que se carga la página. Recuerde que aunque el contenido no se muestra, el navegador web todavía lo está descargando, así que tenga sentido común en cuanto a la cantidad de contenido que oculta.
Los clientes no entienden. Por último, es posible que los clientes no estén acostumbrados a hacer clic en un enlace que muestra u oculta contenido. Juegue con íconos (los signos más y las flechas funcionan bien) o texto para explicar lo que sucederá con sus clientes. Otra solución es dejar uno de los divs abierto mientras los demás están cerrados. Esto puede transmitir la idea a sus clientes, para que puedan descubrir más rápidamente cómo abrir el contenido restante.
Siempre debe probar HTML dinámico como este con sus clientes. Una vez que se sienta seguro de que pueden entenderlo y usarlo, esta puede ser una excelente manera de obtener una gran cantidad de contenido en sus páginas web sin ocupar mucho espacio visible.