Lección 11: Interactivos

Como hemos visto en las lecciones anteriores, el objetivo primordial de HTML es proporcionar una estructura sólida del contenido tanto para el visitante humano como los robots (buscadores, lectores de pantallas, etc). Sin embargo en HTML existen unas micro-sintáxis que se encuentran en un terreno particular. Por un lado, sin utilizar JavaScript (o programación), podemos construir elementos dinámicos. Un ejemplo, que ya hemos utilizado, es el desplegable <select> que hemos utilizado dentro del formulario. Sin programar hemos creado un campo especial con el cual podemos interactuar utilizando el teclado y el ratón.

En resumen, los elementos interactivos nos proporciona herramientas que nos facilitarán las tareas más recurrentes, como pueden ser los modales, autocompletadores o acordeones. Enriquecen la sintaxis HTML, mejora el contexto del contenido y crean elementos dinámicos para los visitantes humanos.

Abreviatura

Etiqueta <abbr>
Descripción Representa abreviación o acrónimo.
Atributos title: Descripción
Tipo En línea
<p>Estoy aprendiendo <abbr title="Hypertext Markup Language">HTML</abbr> por las mañanas.</p>

Estoy aprendiendo HTML por las mañanas.

Desplegable

Etiqueta <details>
Descripción Crea un widget donde el contenido queda oculto salvo cuando su controlador es activado. Debe estar utilizarse junto al hijo <summary>
Atributos open Marca su disposición de encontrarse abierta. En caso contrario estará cerrada.
Tipo Bloque
Etiqueta <summary>
Descripción Especifica el contenido visible de la etiqueta <details> independientemente de si esta abierta o cerrada. Debe estar envuelta por <details>.
Atributos Globales
Tipo Bloque
<details>
	<summary>Factura</summary>
	<ul>
		<li>Vino blanco: 12€</li>
		<li>Aceitunas: 3€</li>
	</ul>
	<p>Total: 15€</p>
</details>
Factura (Pulsa aquí para desplegar)
  • Vino blanco: 12€
  • Aceitunas: 3€

Total: 15€

Mensaje emergente

Etiqueta <dialog>
Descripción Representa una caja informativa, alerta, de diálogo o cualquier otro elemento temporal.
Atributos open Marca su disposición de encontrarse visible. En caso contrario se presupondrá que estará oculta.
Tipo Bloque
<dialog open>¡Has sido registrado con éxito!</dialog>
¡Has sido registrado con éxito!

Autocompletador

Etiqueta <datalist>
Descripción Contenedor de opciones que pueden ser utilizadas para realizar sugerencias en un <input>. Cada elemento para sugerir estará envuelta en <option>.
Atributos Globales
Tipo En línea
<label>¿Cual es tu personaje favorito de Harry Potter?:
    <input list="personajes-harry-potter" type="text" name="personaje-favorito">
</label>

<datalist id="personajes-harry-potter">
    <option value="Harry Potter"></option>
    <option value="Ron Weasley"></option>
    <option value="Hermione Granger"></option>
    <option value="Lord Voldemort"></option>
    <option value="Albus Dumbledore"></option>
</datalist>

Barra de progreso

Etiqueta <progress>
Descripción Representa una gráfica horizontal para informar al visitante del estado de un progreso.
Atributos max: Valor máximo.
value: Longitud del porcetaje.
Tipo En línea
<progress max="100" value="30">30%</progress>
30%

Medidor

Etiqueta <meter>
Descripción Representa una gráfica horizontal de un valor cuyo rango o valor son desconocidos.
Atributos min: Valor mínimo.
max: Valor máximo.
low: Medida más baja.
high: Medida más alta.
optimum: Valor óptimo, el navegador debería pintarlo de otro color.
value: Valor entre min y max.
Tipo Bloque
<label id="temperature">Temperatura</label>
<meter 
    id="temperature"
    min="-275"
    max="100"
    value="28"
>
28
</meter>
28
<label id="battery">Batería</label>
<meter 
    id="battery"
    min="0"
    max="100"
    low="60"
    high="80"
    optimum="85"
    value="65"
>
Entre 60 y 80
</meter>
Entre 60 y 80
Actividad 1

El museo del Prado te han encargado realizar una página para responder los detalles más importantes sobre un cuadro famoso que le pertenece (cualquiera a tu elección). Utiliza algunos details para resolver las dudas más comunes.

Por ejemplo: ¿Cómo se llama? ¿Quién es el autor? ¿Cuando fue pintado?...

Intenta incluir algunas abreviaturas con su explicación.

Actividad 2

Crea un buscador de smartphones donde incluya un autocompletador para seleccionar la marca y un select con rangos de precios.

Actividad 3

Crea un perfil propio, como si fuera un Curriculum Vitae, con barras para marcar las siguientes características sobre ti.

  • Nivel de conocimiento en HTML
  • Conocimiento sobre Photoshop/Gimp
  • Belleza
  • Hambre
  • Salud

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se liquida 1 mes del Servidor Web.
  • 3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario