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€

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. `popover` Indica que se trata de un diálogo emergente. `popovertarget` Indica el ID del elemento que lo activa.
Tipo	Bloque

<dialog open>¡Has sido registrado con éxito!</dialog>

Si quieres que el diálogo se muestre al pulsar un botón, puedes utilizar el atributo popovertarget con el ID del botón y popover para indicar que se trata de un diálogo emergente.

<button popovertarget="dialogo-emergente" popover>Mostrar diálogo</button>
<dialog popover id="dialogo-emergente">
    <p>¡Has sido registrado con éxito!</p>
    <button popovertarget="dialogo-emergente">Cerrar</button>
</dialog>

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>

¿Cual es tu personaje favorito de Harry Potter?:

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>
    Temperatura
    <meter
        id="temperature"
        min="-275"
        max="100"
        value="28"
    >
        28
    </meter>
</label>

Temperatura 28

<label>
    Batería
    <meter
        id="battery"
        min="0"
        max="100"
        low="60"
        high="80"
        optimum="85"
        value="65"
    >
        Entre 60 y 80
    </meter>
</label>

Batería 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 header que contenga un título y un botón de hamburguesa (☰) que al pulsarlo muestre un menú de navegación con enlaces a las siguientes hipervínculos: Inicio, Servicios, Contacto y Sobre nosotros.

Utiliza un dialog para mostrar el menú utilizando los atributos popover y popovertarget.

Actividad 4

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 invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Escribe el primer comentario