Ediciones ENI Editorial | líder en informática
Los elementos de interacción
Mostrar los detalles
Cuando disponga de poco espacio en una página web, puede ser interesante mostrar una información solo si el visitante lo desea. Para esto, utilizamos el elemento <details>, que es el contenedor general. El elemento <summary> contendrá el texto en el que los visitantes deberán pulsar para mostrar los detalles. Es en el elemento <summary> donde debe situar todos los elementos que desee mostrar.
A continuación se muestra un sencillo ejemplo:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Detalles y sumario</title>
</head>
<body>
<details>
<summary>Muestre la información detallada</summary>
<p>Duis aute irure dolor in reprehenderit...</p>
<p><img src="gutenberg.jpg" alt="Gutenberg" />
</p>
</details>
</body>
</html> A continuación se muestra la visualización obtenida cuando se carga la página. El texto que se debe pulsar va precedido por un triángulo...
Utilizar un cuadro de diálogo
Siempre con el mismo objetivo de ganar espacio en una página web, puede utilizar el elemento <dialog>, que permite mostrar información adicional en un cuadro de diálogo, el cual se abrirá por medio de una acción del usuario.
Para explotar mejor la interacción con los visitantes, vamos a utilizar un pequeño script JavaScript, que permitirá a los visitantes abrir y cerrar el cuadro de diálogo pulsando botones. En efecto: por defecto, el cuadro de diálogo se muestra durante la carga de la página. Es el atributo booleano open el que lo permite.
A continuación se muestra la estructura de este elemento:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Cuadro de diálogo</title>
</head>
<body>
<h3>Mostrar y cerrar el cuadro de diálogo</h3>
<button id="abrir">Abrir</button>
<button id="cerrar">Cerrar</button>
<dialog id="cuadro_dialogo">
<h2>Título del cuadro de diálogo</h2>
<p>Integer posuere erat a ante venenatis...</p>
</dialog>
...Visualizar un valor en un gráfico
1. Con una barra en un intervalo
El elemento <meter> permite visualizar en una barra horizontal un valor dado dentro de un intervalo de valores. Su uso es versátil y puede aplicarse en diversos contextos.
A continuación, se muestra un ejemplo sencillo en el que <meter> representa una nota en una escala de 0 a 20:
<p>La nota obtenida es: <meter min="0" max="20"
value="16">15</meter></p> Los principales atributos de <meter> son:
-
min="X": define el valor mínimo del intervalo. Si se omite este atributo, el valor por defecto es 0.
-
max="Y": define el valor máximo del intervalo. El valor debe ser superior al del atributo <min>. Si se omite este atributo, el valor por defecto es 10.
-
value="Z": es el valor actual para mostrar.
A continuación, se muestra cómo se ve en Google Chrome:
Podemos comprobar que el valor para mostrar no es visible, 16 en este ejemplo. Usted tiene que completar el texto para mostrar este valor.
Observe que no hay propiedades iniciales por defecto y el navegador usa sus propios valores.
2. Con una barra de progreso
El elemento <progress> representa visualmente el avance de una tarea en forma de barra de progreso. Se debe definir un valor máximo y el progreso actual de la tarea. Aquí tenemos un ejemplo donde se ha alcanzado el 75 % de la tarea:...