CSS. Unidad 3. Aplicando estilos a los enlaces.

Introducción

A la hora de dar estilo a los enlaces, es importante comprender cómo utilizar las pseudoclases para diseñar los estados de un enlace de manera efectiva y cómo diseñar enlaces para su uso en diversas funciones de interfaz comunes, como menús y pestañas de navegación. Veremos todos estos temas en esta unidad.

Los estados de un enlace

Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes pseudoclases):

  • Link (no visitado): El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase :link.
  • Visited: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase :visited.
  • Hover: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase :hover.
  • Focus: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla Tab del teclado o se le da el foco mediante programación usando HTMLElement.focus()); se le aplica un formato diferente con la pseudoclase :focus.
  • Active: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase :active.

Enlaces predeterminados

El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el código CSS simplemente amplía y centra el texto para que destaque más):

p {
  font-size: 2rem;
  text-align: center;
}
<p><a href="https://fernandoruizrico.com">Un enlace simple</a></p>

Un enlace simple

A medida que vayas observando los estilos predeterminados, te darás cuenta de algunas cosas:

  • Los enlaces están subrayados.
  • Los enlaces no visitados se ven de color azul.
  • Los enlaces visitados se ven de color morado.
  • Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano.
  • Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción Acceso total por teclado: Todos los controles presionando Ctrl + F7 para que funcione).
  • Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic).

Ejercicio propuesto: Enlaces más grandes y centrados

Crea una página web con al menos 5 párrafos, cada uno con un enlace diferente a cualquier sitio que te guste. También tienes que estilizar tu página de modo que los enlaces sean el doble del tamaño del resto del texto y estén alineados en el centro, tal como se muestra en el ejemplo anterior.

No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste.

A tener en cuenta…

Curiosamente, los estilos predeterminados son casi los mismos que utilizaban los primeros navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías:

  • Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma.
  • Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan.

Los estilos por defecto se pueden cambiar usando las siguientes propiedades CSS:

  • color para cambiar el color del texto.
  • cursor para cambiar el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo).
  • outline para cambiar el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco.

Aplicando formato a los enlaces

Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos que podemos aplicar a nuestros enlaces.

Para empezar, escribiremos nuestro conjunto de reglas vacío:

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como LoVFears HAte.

Ahora vamos a añadir algo más de información para darles formato:

p {
  font-size: 2rem;
  font-family: sans-serif;
  text-align: center;
}

a:link {
  color: green;
}

a:visited {
  color: olive;
}

a:focus {
  background: orange;
}

a:hover {
  background: yellow;
  text-decoration: underline orange wavy;
}

a:active {
  background: orange;
  text-decoration: underline red wavy;
}

Analicemos el efecto que tendrá el código anterior:

  • Utilizamos los selectores a:link y a:visited para establecer un par de variaciones de color en los enlaces no visitados y visitados respectivamente, para que sean diferentes respecto a los colores por defecto.
  • Las dos reglas siguientes usan a:focus y a:hover para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado diferente para que el enlace destaque aún más.
  • Finalmente, a:active se usa para dar a los enlaces también un esquema de color diferente cuando hacemos clic sobre ellos, para dejar aún más claro que el navegador saltará a una nueva página.

Y para finalizar mostramos un ejemplo de código HTML en el que podemos aplicar el código CSS que hemos sugerido:

<p>
  Dispones de varios navegadores, como <a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank">Mozilla Firefox</a>, <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a> y <a href="https://www.apple.com/safari/" target="_blank">Safari</a>.
</p>

Al utilizar el código HTML junto con el código CSS observamos el siguiente resultado:

Ejercicio propuesto: Aplicando estilos y subrayados

Crea una nueva página web con al menos 5 enlaces que apunten a tus sitios web preferidos. Debes cambiar los colores y subrayados por defecto para que cada posible estado (enlace, visitado, en foco, al pasar el ratón, activo) tenga un color diferente al predeterminado, y también otro subrayado, de forma similar a como hicimos en el ejemplo anterior, donde utilizamos por ejemplo el subrayado rojo ondulado.

Como has visto, puedes cambiar el color del texto utilizando la propiedad color, y el color de fondo utilizando la propiedad background. Puedes echar un vistazo a los diferentes colores aquí. Acerca de la decoración del texto, recuerda que se puede cambiar fácilmente con la propiedad text-decoration.

Incluyendo iconos en los enlaces

Una práctica común es incluir iconos en los enlaces. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos este ejemplo de icons8.com.

Podemos usar el mismo código HTML que en el ejemplo anterior:

<p>
   Dispones de varios navegadores, como <a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank">Mozilla Firefox</a>, <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a> y <a href="https://www.apple.com/safari/" target="_blank">Safari</a>.
</p>

Y ajustaremos el código CSS para incluir el icono en todos los enlaces:

a {
  background: url('https://live.mdnplay.dev/es/docs/Learn/CSS/Styling_text/Styling_links/external-link-52.png') no-repeat 100% 0;
  background-size: 2rem;
  padding-right: 2.5rem;
}

Si aplicamos el código CSS al HTML propuesto, obtendremos el siguiente resultado:

Utilizamos la propiedad abreviada background  y establecemos la ruta a la imagen que queremos insertar, especificamos el valor no-repeat para que solo se inserte una copia, y luego especificamos la posición como al 100% a la derecha del contenido de texto y a 0 píxeles del extremo superior.

También usamos background-size para especificar el tamaño de la imagen de fondo (es útil tener un icono más grande y luego cambiar su tamaño de esta manera, según sea necesario para fines de diseño web adaptativo).

Finalmente, establecemos un área de relleno a la derecha (padding-right) para los enlaces, para crear un espacio en que aparezca la imagen de fondo, de modo que no se superponga con el texto.

Proposed exercise: Links with icons

Crea una nueva página web con al menos 5 enlaces que apunten a tus sitios web preferidos (puedes usar el código que escribiste anteriormente) e incluye un icono al final de cada uno. También cambia algunos otros estilos como el color del texto o la decoración del texto.

Dar aspecto de botón a un enlace

Las propiedades CSS que hemos utilizado hasta ahora en esta unidad también se pueden usar de otras maneras. Por ejemplo, los estados como hover se pueden usar para diseñar muchos elementos diferentes, no solo enlaces. Es posible que desees diseñar un estado que señale el paso del cursor por encima de párrafos, elementos de lista u otras cosas.

Además, suele ser bastante común dar a los enlaces un aspecto y un comportamiento de botón en ciertas circunstancias. Por ejemplo, el menú de navegación de un sitio web generalmente es una lista que contiene enlaces, y es posible aplicarle estilo fácilmente para que se parezca a un conjunto de botones o pestañas que proporcionan al usuario acceso a otras partes de la página web. Vamos a ver cómo.

En primer lugar, partiremos del siguiente código HTML:

<ul class="navbar">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Noticias</a></li>
  <li><a href="#">Sobre nosotros</a></li>
  <li><a href="#">Contactar</a></li>
</ul>

Y sobre ese código HTML aplicamos el siguiente código CSS:

/* Clase general para la barra de navegación */
.navbar {
  font-size: 1.25rem;
  font-family: sans-serif;
  text-align: center;
  background: yellow;
}

/* Selecciona sólo los elementos de lista (li) que se encuentran dentro de la barra de navegación */
ul.navbar li {
  display: inline;
}

/* Selecciona sólo los enlaces (a) que se encuentran dentro de la barra de navegación */
ul.navbar a {
  text-decoration: none;
  display: inline-block;
  padding: 1rem;
}

/* Selecciona sólo los enlaces que se encuentran dentro de la barra de navegación cuando el ratón pase por encima (a:hover) */
ul.navbar a:hover {     
  background: orange;
}

/* Selecciona sólo los enlaces que se encuentran dentro de la barra de navegación cuando hagamos click sobre ellos con el ratón (a:active) */
ul.navbar a:active {
  color: white;
  background: red;
}

Este código nos proporciona el siguiente resultado:

Expliquemos qué está pasando aquí, centrándonos en las partes más interesantes:

  • Una nueva clase para la lista:
    • Hemos creado la clase navbar para que solo los elementos dentro de esa clase tengan el estilo de una barra de navegación.
    • ul.navbar: Al poner esto antes de cualquier selector, las propiedades CSS entre llaves se aplicarán solo a los elementos dentro de una lista no ordenada con clase navbar.
  • Los estilos relacionados con el elemento <ul>:
    • Cambiamos la propiedad font-size para agrandar un poco el texto.
    • Cambiamos la propiedad font-family para que sea diferente al resto del texto.
    • Cambiamos la propiedad text-align para que los enlaces queden centrados.
    • Cambiamos la propiedad background a color amarillo.
    • Los elementos <li> normalmente se comportarán como elementos de bloque (se asientan en sus propias líneas). En este caso, queremos crear una lista horizontal de enlaces, por lo que configuramos la  propiedad display, lo que hace que los elementos de la lista se encuentren en la misma línea uno tras otro (ahora se comportan como elementos en línea).
  • Los estilos relacionados con los elementos <a>:
    • Comenzamos desactivando los valores por defecto de text-decoration (no queremos que estropeen nuestro aspecto).
    • A continuación, configuramos la propiedad display en bloque en línea (esto permitirá dimensionarlos, como explicaremos en otra unidad).
    • Configuramos el valor del padding en 1rem para darle a los botones algo de espacio alrededor del texto (también explicaremos esto en otra unidad).
    • También cambiamos el color de los elementos cuando el puntero del ratón está sobre ellos y al hacer clic.

Ejercicio propuesto: Barra de navegación

Crea una página web con una barra de navegación con tu propio estilo. Puedes cambiar cualquier propiedad que desees (colores, decoración de texto, tamaño de fuente, familia de fuente, etc.). Después de eso, justo debajo inserta algunos otros enlaces. También puedes intentar usar algunas otras reglas de CSS para dar estilo a estos enlaces, como se muestra a continuación:

Algunos de los navegadores que recomendamos son:

Mozilla Firefox

Google Chrome

Apple Safari

Test

Comprueba tus conocimientos con este test sobre estilos de enlaces de texto.

Felicitación navideña con HTML, CSS y JavaScript

Utilizando una combinación de código HTML, CSS y JavaScript vamos a crear una página web de temática navideña con animaciones. Además, el usuario podrá interactuar haciendo clic en las imágenes.

HTML

  • Estructura Básica: El documento HTML comenzará con la declaración <!DOCTYPE html> y utilizará las etiquetas <html>, <head>, y <body> para estructurar el contenido.
  • Metadatos: Dentro de <head>, definiremos el conjunto de caracteres (charset) como ‘utf-8’, y estableceremos la configuración ‘viewport’ para asegurar una correcta visualización en dispositivos móviles.
  • Título: El título de la página será «Felicitación de Navidad».
  • Estilos y Fuentes: Enlazaremos hojas de estilo externas para los estilos CSS y para incluir la fuente «Mountains of Christmas». También incluiremos la librería ‘animate.css‘ para animaciones CSS.
  • Contenido del Cuerpo: Dentro de <body> colocaremos un encabezado <h1> con la frase «¡Feliz Navidad!» y una clase que aplique una animación. A continuación incluiremos un div con la clase ‘contenedor’ que agrupará tres imágenes con animaciones y eventos de clic asociados.
  • Elementos de Audio: Incluiremos tres elementos <audio> para reproducir sonidos para interactuar con las imágenes.
  • JavaScript: Enlazaremos un fichero externo llamado ‘script.js’ que contendrá todo el código JavaScript.

CSS

  • Estilos generales: Estableceremos estilos para html y body, incluyendo márgenes, padding, ancho, fuentes de letra, alineación del texto, color, color de fondo, tamaño de fuente y sombra de texto.
  • Distribución del contenido: Definiremos un layout de tipo flexbox, con un alineamiento central y una disposición en fila por defecto.
  • Media query: Cambiaremos la disposición a columna cuando el ancho de la pantalla sea menor de una resolución específica, lo que mejorará la visualización en dispositivos móviles.
  • Estilo de imágenes: Definiremos la anchura en píxeles, y el máximo ancho relativo a la vista y un filtro de sombra para todas las imágenes.

JavaScript

Desarrollaremos una función que se ejecute al hacer clic en las imágenes. Dicha función realizará tres acciones:

  1. Vibración: Generaremos una breve vibración en dispositivos compatibles.
  2. Reproducción de audio: Reproduciremos un archivo de audio asociado con la imagen en la que hagamos clic.
  3. Cambio de imagen y animación: Actualizaremos cada imagen al hacer clic sobre ella y activaremos una nueva animación.

Imágenes y archivos de audio

A continuación mostramos todas las imágenes y los ficheros de audio que vamos a utilizar en nuestra felicitación. También puedes descargar un ZIP con todos los ficheros (incluido el código fuente).

Las imágenes iniciales

Los archivos de audio

Al hacer clic sobre las imágenes (utilizando JavaScript)

Utilizando código JavaScript cambiaremos las imágenes originales por estas otras, cada vez que hagamos clic en una de ellas:

Cómo colocar las imágenes y los audios, y cómo definir las animaciones

Mediante código HTML crearemos la estructura principal de la felicitación. Incluiremos imágenes y elementos de audio, y estableceremos animaciones para captar la atención del usuario.

Para definir las animaciones utilizaremos la librería animate.css. Para ello deberemos enlazarla primero desde nuestro fichero ‘index.html’:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

Una vez enlazada la librería, ya podemos aplicar animaciones a cualquier elemento añadiendo las clases correspondientes, y opcionalmente, un posible retraso para comenzar la animación, que puede ir de 1 a 5 segundos:

<div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
  ...
</div>

La combinación de imágenes y audio, junto con las animaciones, proporcionarán finalmente un diseño interactivo para nuestra página de temática navideña:

<h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>

<div class="contenedor">
    <div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
      <div id="img-trineo">
        <img src="img/santa-claus.png" alt="Santa Claus">
      </div>
      <audio id="audio-trineo" src="audio/santa-claus.mp3" controls></audio>
    </div>
    <div class="animate__animated animate__backInDown animate__delay-2s">
      <div id="img-campana">
        <img src="img/bola-nieve.png" alt="Bola de nieve">
      </div>
      <audio id="audio-campana" src="audio/campana.mp3" controls></audio>
    </div>
    <div class="animate__animated animate__lightSpeedInRight animate__delay-3s">
      <div id="img-cantando">
        <img src="img/amigos.png" alt="Amigos">
      </div>
      <audio id="audio-cantando" src="audio/musica-fondo.mp3" controls></audio>
    </div>
</div>
  1. Encabezado <h1>:
    • <h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>: Este es un encabezado de nivel 1, utilizado generalmente para el título más importante en la página. Hemos añadido dos clases de CSS para definir la animación:
      • animate__animated: Esta clase indica que el elemento tendrá una animación aplicada.
      • animate__flip: Específica el tipo de animación, en este caso, un efecto de giro (‘flip’).
  2. Div contenedor:
    • <div class="contenedor">: Este div actúa como un contenedor para agrupar los elementos relacionados. La clase ‘contenedor’ se usa para agrupos los elementos de imagen y audio.
  3. Bloques con imágenes y audio:
    • Cada uno de los tres divs internos representa una sección con una imagen y un audio. Hemos añadido clases específicas para definir las animaciones y retrasos:
      • animate__animated: Establece que se va a definir una animación.
      • animate__lightSpeedInLeft, animate__backInDown, animate__lightSpeedInRight: Estas clases definen el tipo de animación. Cada div tiene una animación distinta que describe cómo entra la imagen en la pantalla.
      • animate__delay-1s, animate__delay-2s, animate__delay-3s: Estos retrasos (1s, 2s, 3s) controlan cuándo comienza la animación después de que se carga la página.
    • Dentro de cada div, hay un sub-div con un id único (img-trineo, img-campana, img-cantando) que contiene una imagen (<img>):
      • src: Indica la ruta del archivo de imagen.
      • alt: Proporciona un texto alternativo que describe la imagen. Es útil para accesibilidad y en situaciones donde la imagen pudiera no llegar a cargarse.
    • Después de cada imagen, colocamos un elemento <audio> con un id único para cada uno:
      • src: El archivo de audio a reproducir.
      • controls: Indica que se deben mostrar controles de reproducción (play, pause, volumen) en la interfaz de usuario.

Cómo conseguir una página más interactiva (utilizando JavaScript)

Mediante el atributo ‘onclick’ de las imágenes y el atributo ‘onplay’ de los elementos de audio podemos hacer que nuestra página web sea más interactiva. Si definimos y ejecutamos la correspondiente función JavaScript, podemos actualizar cada imagen sobre la que hagamos clic, y definir a su vez nuevas animaciones, e incluso reproducir al mismo tiempo el audio correspondiente:

<img src="img/santa-claus.png" onclick="anima('trineo', 'shakeX')" alt="Santa Claus">
...
<audio id="audio-trineo" src="audio/santa-claus.mp3" onplay="anima('trineo', 'shakeX')" controls></audio>

El código fuente completo

HTML

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Felicitación de Navidad</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>

<body>
  <h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>

  <div class="contenedor">
    <div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
      <div id="img-trineo">
        <img src="img/santa-claus.png" onclick="anima('trineo', 'shakeX')" alt="Santa Claus">
      </div>
      <audio id="audio-trineo" src="audio/santa-claus.mp3" onplay="anima('trineo', 'shakeX')" controls></audio>
    </div>
    <div class="animate__animated animate__backInDown animate__delay-2s">
      <div id="img-campana">
        <img src="img/bola-nieve.png" onclick="anima('campana', 'swing')" alt="Bola de nieve">
      </div>
      <audio id="audio-campana" src="audio/campana.mp3" onplay="anima('campana', 'swing')" controls></audio>
    </div>
    <div class="animate__animated animate__lightSpeedInRight animate__delay-3s">
      <div id="img-cantando">
        <img src="img/amigos.png" onclick="anima('cantando', 'heartBeat')" alt="Amigos">
      </div>
      <audio id="audio-cantando" src="audio/musica-fondo.mp3" onplay="anima('cantando', 'heartBeat')" controls></audio>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
  1. Doctype e idioma: <!DOCTYPE html> indica al navegador que se trata de un documento HTML5. <html lang="es"> especifica que el contenido del documento está en español.
  2. Etiqueta <head>: Contiene metadatos y enlaces a recursos externos.
    • charset="utf-8": asegura que se usen caracteres Unicode, adecuados para muchos idiomas y símbolos.
    • name="viewport" content="width=device-width": hace que el layout sea responsivo al ancho del dispositivo.
    • <link>: para enlazar hojas de estilo externas y la fuente «Mountains of Christmas».
    • animate.min.css: es una librería de animaciones CSS.
  3. Etiqueta <body>: Define el contenido principal de la página.
    • <h1>: es el encabezado principal, decorado con animaciones de ‘animate.css’.
    • <div class="contenedor">: es un contenedor para las imágenes. Cada <div> hijo tiene un id único y contiene una <img>.
    • Cada imagen tiene clases para animaciones y un evento onclick que llama a la función JavaScript anima().
    • Los elementos <audio> están asociados a cada imagen para reproducir sonidos específicos.

CSS

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;

  font-family: "Mountains of Christmas";
  text-align: center;
  color: #ae2929;
  background-color: #2929ae;
  font-size: 150%;
  text-shadow: 2px 2px 2px black;
}

.contenedor {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

@media (max-width: 900px) {
  .contenedor {
    flex-direction: column;
  }
}

img, audio {
  width: 300px;
  max-width: 100vw;
  margin: 5px; 
  filter: drop-shadow(5px 5px 5px black);
}
  1. Estilos Globales:
    • margin: 0px; padding: 0px; elimina márgenes y rellenos por defecto.
    • width: 100%; establece el ancho del cuerpo y el HTML al 100% del viewport.
    • font-family, text-align, color, background-color, font-size, text-shadow aplican estilos de texto y fondo.
  2. Clase .contenedor:
    • display: flex; activa Flexbox, un método de layout.
    • justify-content: center; centra los elementos hijos horizontalmente.
    • flex-direction: row; coloca los elementos hijos en una fila.
  3. Media Query:
    • @media (max-width: 900px) aplica estilos cuando el ancho de la ventana es menor a 900px, cambiando flex-direction a column para alinear los elementos verticalmente.
  4. Estilo de Imágenes:
    • width: 300px; establece un ancho fijo de las imágenes.
    • max-width: 100vw; establece la anchura máxima de las imágenes para asegurar que no se salen de la pantalla.
    • filter: drop-shadow(5px 5px 5px black); añade una sombra a las imágenes.

JavaScript

function anima(dibujo, animacion) {
  navigator.vibrate(50);

  document.getElementById(`audio-${dibujo}`).currentTime = 0;
  document.getElementById(`audio-${dibujo}`).play();

  document.getElementById(`img-${dibujo}`).innerHTML =
    `<img src="img/${dibujo}.png" 
     class="animate__animated animate__${animacion}"
     onclick="anima('${dibujo}', '${animacion}')">`;
}
  1. Vibración:
    • navigator.vibrate(50): hace que el dispositivo vibre durante 50 milisegundos, en el caso de móviles, tabletas, u otros dispositivos compatibles.
  2. Control de Audio:
    • document.getElementById(audio-${dibujo}): selecciona el elemento de audio correspondiente al dibujo sobre el que hemos hecho clic.
    • .currentTime = 0: para que el audio comience a reproducirse desde el principio.
    • .play(): inicia la reproducción del audio.
  3. Actualización de Imagen y Animación:
    • document.getElementById(img-${dibujo}).innerHTML = ...: actualiza el contenido HTML del div que contiene la imagen sobre la que hemos hecho clic. El nuevo contenido es una imagen con una animación específica.
    • onclick="anima('${dibujo}', '${animacion}')": asegura que al hacer clic en la nueva imagen, se vuelva a llamar a anima() con los mismos parámetros.

El resultado

Puedes comprobar aquí el resultado final al completar esta felicitación de Navidad. También puedes descargar aquí un fichero ZIP con todo el código fuente, imágenes y ficheros de audio.

Programación con JavaScript

JavaScript es un lenguaje de programación esencial en el desarrollo web moderno. Es importante aprenderlo por varias razones:

  1. Multiplataforma: JavaScript se ejecuta en prácticamente todos los navegadores web, lo que lo convierte en uno de los lenguajes más accesibles y utilizados para desarrollar interfaces de usuario web.
  2. Desarrollo Front-End y Back-End: Originalmente diseñado para el front-end (parte del cliente en una aplicación web), JavaScript también se usa ahora en el back-end gracias a entornos como Node.js. Esto permite a los desarrolladores utilizar un solo lenguaje en toda la aplicación.
  3. Amplia variedad de herramientas y recursos: Existe una amplia gama de bibliotecas y frameworks de JavaScript (como React, Angular, y Vue) que facilitan la creación de aplicaciones web robustas y de alta calidad.
  4. Interactividad y dinamismo: JavaScript es clave para añadir interactividad y funciones dinámicas a las páginas web, mejorando la experiencia del usuario.
  5. Demanda en el mercado laboral: La demanda de desarrolladores de JavaScript sigue siendo alta, lo que lo convierte en una habilidad valiosa para carreras en el desarrollo web y tecnología de la información.

En resumen, aprender JavaScript abre puertas a numerosas oportunidades en el desarrollo web y es fundamental para cualquier persona interesada en una carrera en tecnología.

Conceptos importantes

Programación con JavaScript: Objetos

Un objeto es una entidad fundamental en JavaScript que permite almacenar y organizar datos de diferentes tipos en una estructura única. Los objetos se componen de pares clave-valor, donde cada clave es una propiedad y cada valor puede ser cualquier tipo de dato, incluyendo otros objetos. Los objetos en JavaScript son muy flexibles y versátiles, lo que los convierte en una parte esencial de la programación en este lenguaje.

Creación de objetos

Existen varias formas de crear objetos en JavaScript. Una de las formas más comunes es utilizando la sintaxis de llaves {} para definir un objeto literal:

// Creación de un objeto literal
let persona = {
  nombre: "Juan",
  edad: 30,
  casado: false
};

console.log(persona.nombre); // Salida: "Juan"
console.log(persona.edad);   // Salida: 30
console.log(persona.casado); // Salida: false

Acceso a propiedades

Puedes acceder a las propiedades de un objeto utilizando la notación de punto (objeto.propiedad) o la notación de corchetes (objeto['propiedad']):

let libro = {
  titulo: "Alicia en el País de las Maravillas",
  autor: "Lewis Carroll"
};

console.log(libro.titulo);   // Salida: "Alicia en el País de las Maravillas"
console.log(libro['autor']); // Salida: "Lewis Carroll"

Propiedades y métodos

Las propiedades de un objeto pueden contener valores de cualquier tipo, incluyendo otros objetos. Además, los objetos pueden tener funciones asociadas llamadas métodos:

let coche = {
  marca: "Toyota",
  modelo: "Corolla",
  año: 2022,
  obtenerDetalles: function() {
    return `${this.marca} ${this.modelo}, ${this.año}`;
  }
};

console.log(coche.obtenerDetalles()); // Salida: "Toyota Corolla, 2022"

Creación de objetos usando constructores

Los constructores son funciones que se utilizan para crear nuevos objetos. Puedes definir tus propios constructores de objetos o utilizar constructores incorporados, como Object, Array o Date.

// Creación de objetos usando un constructor personalizado
function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

let persona1 = new Persona("Ana", 25);
let persona2 = new Persona("Carlos", 32);

console.log(persona1.nombre); // Salida: "Ana"
console.log(persona2.edad);   // Salida: 32

Iteración a través de propiedades

Puedes recorrer las propiedades de un objeto utilizando bucles for...in.

let fruta = {
  nombre: "Manzana",
  color: "Rojo",
  sabor: "Dulce"
};

for (let propiedad in fruta) {
  console.log(`${propiedad}: ${fruta[propiedad]}`);
}

Métodos incorporados

JavaScript proporciona varios métodos incorporados para trabajar con objetos, como Object.keys(), Object.values(), Object.entries():

let persona = {
  nombre: "María",
  edad: 28,
  casado: false
};

let propiedades = Object.keys(persona);
let valores = Object.values(persona);
let entradas = Object.entries(persona);

console.log(propiedades); // Salida: ["nombre", "edad", "casado"]
console.log(valores);     // Salida: ["María", 28, false]
console.log(entradas);    // Salida: [["nombre", "María"], ["edad", 28], ["casado", false]]

Propiedades y métodos prototipados

En JavaScript, los objetos pueden tener propiedades y métodos que se heredan de un prototipo. Esto permite crear objetos más eficientes y compartir comportamiento común:

// Creación de un objeto prototipo
let personaPrototipo = {
  saludar: function() {
    console.log(`Hola, mi nombre es ${this.nombre}`);
  }
};

// Creación de un nuevo objeto utilizando el prototipo
let persona1 = Object.create(personaPrototipo);
persona1.nombre = "Luis";

persona1.saludar(); // Salida: "Hola, mi nombre es Luis"

Clases en JavaScript

Las clases son una forma más moderna de crear objetos en JavaScript. Proporcionan una sintaxis más clara y orientada a objetos:

class Animal {
  constructor(nombre, especie) {
    this.nombre = nombre;
    this.especie = especie;
  }

  saludar() {
    console.log(`Soy un ${this.especie} llamado ${this.nombre}`);
  }
}

let perro = new Animal("Max", "perro");
perro.saludar(); // Salida: "Soy un perro llamado Max"

Consideraciones adicionales

  • Los objetos en JavaScript son dinámicos, lo que significa que puedes agregar, modificar y eliminar propiedades en cualquier momento.
  • Las funciones que son propiedades de un objeto se llaman métodos.
  • Los objetos también pueden tener propiedades y métodos heredados de su prototipo.
  • Los objetos son fundamentales para trabajar con JSON (JavaScript Object Notation), un formato común para intercambio de datos.

Test

Comprueba tus conocimientos con este test sobre objetos y otros conceptos relacionados con esta unidad.

Programación con JavaScript: Funciones

Las funciones desempeñan un papel esencial en la creación de programas y aplicaciones porque incrementan la eficiencia, la modularidad y la legibilidad del código. En esta unidad abordaremos todo lo relativo a las funciones en JavaScript, desde su definición y tipos hasta parámetros, valores de retorno, ámbito, funciones anidadas, expresiones de función, y más. Además, proporcionaremos numerosos ejemplos para ilustrar cada concepto.

¿Por qué utilizar funciones?

Aquí tienes algunas de las razones por las que las funciones son vitales en el desarrollo de software:

  • Reutilización de código: Las funciones permiten escribir un bloque de código que realiza una tarea específica una vez y luego reutilizarlo en múltiples lugares del programa. Esto reduce la duplicación de código y facilita el mantenimiento y la actualización.
  • Modularidad: Al dividir el código en funciones más pequeñas y autónomas, se crea un enfoque modular en el diseño del programa. Cada función cumple con una tarea específica, lo que facilita la comprensión del código y la identificación de problemas.
  • Abstracción: Las funciones permiten ocultar los detalles internos de cómo se realiza una tarea y ofrecen una interfaz clara y simplificada para su uso. Los detalles de implementación quedan encapsulados dentro de la función, lo que facilita el uso de funciones sin conocer su complejidad interna.
  • Organización: Las funciones ayudan a organizar el código de manera lógica y jerárquica. Esto mejora la legibilidad del código y facilita la navegación y búsqueda de secciones específicas.
  • Resolución de problemas: Dividir un problema complejo en subproblemas más pequeños y abordar cada uno con funciones independientes simplifica la solución general y facilita la identificación y corrección de errores.
  • Colaboración: Las funciones permiten que varios desarrolladores trabajen en diferentes partes de una aplicación de manera simultánea y coordinada. Cada función puede ser implementada y probada por separado, lo que acelera el desarrollo colaborativo.
  • Escalabilidad: Al utilizar funciones para modularizar el código, se crea una base que facilita la adición de nuevas características y la expansión de la aplicación sin afectar otras partes del programa.
  • Mantenibilidad: Las funciones facilitan la identificación y corrección de errores, ya que los problemas suelen estar confinados a una función específica en lugar de afectar todo el programa. Esto reduce el impacto de los cambios y actualizaciones.
  • Pruebas unitarias: Las funciones independientes pueden ser sometidas a pruebas unitarias de manera aislada, lo que simplifica la identificación y resolución de problemas antes de integrarlas en el programa completo.
  • Legibilidad y comprensión: Utilizar nombres descriptivos para las funciones y dividir el código en funciones más pequeñas mejora la legibilidad y facilita la comprensión del flujo del programa.

En resumen, las funciones son una herramienta fundamental para abordar problemas complejos de programación de manera eficiente y estructurada. Su capacidad para modularizar el código, promover la reutilización y facilitar la colaboración hace que sean una parte esencial en la creación de programas y aplicaciones de calidad.

Definición de una función

En JavaScript, una función es un bloque de código reutilizable que realiza una tarea específica. Puedes definir funciones utilizando la palabra clave function, seguida del nombre de la función, paréntesis ( ) y un bloque de código entre llaves { }:

// Definición de una función llamada "saludar"
function saludar() {
  console.log("¡Hola, mundo!");
}

// Llamada a la función
saludar(); // Salida: ¡Hola, mundo!

Parámetros y argumentos

Las funciones pueden recibir valores llamados parámetros o argumentos. Los parámetros son nombres que actúan como variables dentro de la función. Cuando llamas a una función, puedes pasar valores específicos como argumentos que serán asignados a los parámetros:

function saludar(nombre) {
  console.log("¡Hola, " + nombre + "!");
}

saludar("Juan"); // Salida: ¡Hola, Juan!
saludar("María"); // Salida: ¡Hola, María!

Valor de retorno

Las funciones pueden devolver un valor utilizando la palabra clave return. Un valor de retorno permite que la función produzca un resultado que puede ser utilizado en otras partes del programa:

function sumar(a, b) {
  return a + b;
}

let resultado = sumar(3, 5);
console.log(resultado); // Salida: 8

Ámbito de una función

El ámbito (scope) de una función se refiere al alcance en el que las variables dentro de la función son visibles y accesibles. Las variables declaradas dentro de una función tienen un ámbito local y solo son accesibles dentro de esa función.

function multiplicar(a, b) {
  let producto = a * b;
  return producto;
}

// Error: producto no está definido aquí
console.log(producto);

Funciones anidadas

Puedes definir funciones dentro de otras funciones. Las funciones anidadas tienen acceso a las variables de la función exterior:

function operaciones(a, b) {
  function sumar() {
    return a + b;
  }

  function restar() {
    return a - b;
  }

  return `Suma: ${sumar()}, Resta: ${restar()}`;
}

let resultado = operaciones(10, 5);
console.log(resultado); // Salida: "Suma: 15, Resta: 5"

Expresiones de función

Una expresión de función es una forma de definir funciones en una variable. Puede ser anónima (sin nombre) o nombrada:

// Expresión de función anónima
let saludar = function(nombre) {
  console.log("¡Hola, " + nombre + "!");
};

saludar("Elena"); // Salida: ¡Hola, Elena!

// Expresión de función nombrada
let sumar = function suma(a, b) {
  return a + b;
};

console.log(sumar(2, 3)); // Salida: 5

Funciones Flecha

Las funciones flecha son una forma más concisa de definir funciones en JavaScript:

// Sintaxis básica de función flecha
let suma = (a, b) => {
  return a + b;
};

// Si la función tiene una sola línea de retorno, puedes omitir las llaves y el "return"
let resta = (a, b) => a - b;

console.log(suma(4, 2)); // Salida: 6
console.log(resta(8, 3)); // Salida: 5

Ejemplos adicionales

Funciones como argumentos

function operacion(func, a, b) {
  return func(a, b);
}

function suma(a, b) {
  return a + b;
}

function multiplicacion(a, b) {
  return a * b;
}

console.log(operacion(suma, 3, 4)); // Salida: 7
console.log(operacion(multiplicacion, 2, 5)); // Salida: 10

Funciones recursivas

function factorial(n) {
  if (n === 0 || n === 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

console.log(factorial(5)); // Salida: 120

Closure (Clausura)

function contador() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

let incrementar = contador();
console.log(incrementar()); // Salida: 1
console.log(incrementar()); // Salida: 2

Test

Comprueba tus conocimientos con este test sobre funciones y otros conceptos relacionados con esta unidad.

Programación con JavaScript: Tipos de datos básicos

Los tipos de datos son la base fundamental para almacenar y manipular información en cualquier lenguaje de programación. En JavaScript, existen varios tipos de datos básicos que se utilizan para representar diferentes tipos de valores. A continuación veremos los tipos de datos básicos en JavaScript, junto con ejemplos para cada uno de ellos.

Números

Los números representan valores numéricos y pueden ser enteros o decimales:

let edad = 25;
let temperatura = -10;
let precio = 99.99;
let distancia = 1000.75;

Valores booleanos

Los valores booleanos representan solo dos posibles estados: true (verdadero) o false (falso).

let esMayor = true;
let esMenor = false;
let validado = true;
let habilitado = false;

Como veremos en otra unidad, los valores booleanos son útiles para realizar comparaciones y tomar decisiones en el flujo de un programa.

Cadenas de texto

Cadenas de texto simples

Las cadenas de texto representan una secuencia de caracteres y se utilizan para almacenar información textual. En su forma más básica pueden crearse utilizando comillas dobles (") o comillas simples ('):

let nombre = "Juan";
let mensaje = 'Hola, ¿cómo estás?';
let direccion = "Calle 123, Ciudad";

Plantillas de cadenas

La interpolación en JavaScript es una técnica que permite combinar valores y cadenas de texto de una manera más clara y legible. Es una forma conveniente de construir cadenas de texto que incluyan variables y expresiones dentro de ellas. La interpolación se realiza utilizando plantillas de cadenas, también conocidas como «template literals».

Para crear una plantilla de cadena, se utilizan las comillas invertidas (backticks `) en lugar de las comillas simples o dobles que se utilizan para crear cadenas de texto regulares. Dentro de una plantilla de cadena, se pueden incluir expresiones dentro de llaves `${...}`. Cuando la plantilla se evalúa, las expresiones dentro de las llaves se resuelven y se insertan en la cadena final.

En el siguiente ejemplo utilizamos una plantilla de cadena con interpolación para crear la variable mensaje, que incluye las variables nombre y edad dentro de la cadena. Las expresiones ${nombre} y ${edad} se evalúan y se reemplazan con los valores de las variables correspondientes al momento de la creación de la cadena:

// Variables
let nombre = "Juan";
let edad = 25;

// Plantilla de cadena con interpolación
let mensaje = `Hola, mi nombre es ${nombre} y tengo ${edad} años.`;

console.log(mensaje);
// Salida: "Hola, mi nombre es Juan y tengo 25 años."

La interpolación también es útil para realizar cálculos dentro de las plantillas de cadenas:

let a = 5;
let b = 3;

// Plantilla de cadena con interpolación y cálculo
let resultado = `La suma de ${a} y ${b} es igual a ${a + b}.`;

console.log(resultado);
// Salida: "La suma de 5 y 3 es igual a 8."

Además de las variables y expresiones, también podemos incluir cualquier contenido de cadena dentro de las plantillas, e incluso podemos definir la plantilla en varias líneas:

let producto = "manzana";
let cantidad = 3;
let precio = 2.5;

// Plantilla de cadena con contenido adicional
let factura = `
Producto: ${producto}
Cantidad: ${cantidad}
Precio unitario: €${precio}
Total: €${cantidad * precio}
`;

console.log(factura);
/* Salida:
Producto: manzana
Cantidad: 3
Precio unitario: €2.5
Total: €7.5
*/

La interpolación a través de plantillas de cadenas hace que el código sea más legible, más mantenible y menos propenso a errores de concatenación de cadenas. Además, facilita la inclusión de valores dinámicos en las cadenas, lo que es especialmente útil cuando se construyen mensajes personalizados o se generan resultados basados en datos variables.

Es importante destacar que las plantillas de cadenas solo están disponibles a partir de ECMAScript 6 (ES6) y versiones posteriores de JavaScript. Si estás utilizando una versión anterior, es posible que necesites utilizar concatenación de cadenas o métodos como String.prototype.concat() para lograr resultados similares.

Valores "null" y "undefined"

Las palabras clave null y undefined son valores especiales que representan la ausencia de valor:

  • null se utiliza cuando una variable está intencionalmente vacía o cuando queremos establecer un valor nulo.
  • undefined se utiliza cuando una variable ha sido declarada pero no se le ha asignado ningún valor.
let valor1 = null;
let valor2 = undefined;
let edad; // esta variable es undefined ya que no se le ha asignado ningún valor

Conversión de tipos de datos

Las conversiones de tipos de datos son procesos en los que JavaScript cambia temporalmente el tipo de un valor para que pueda ser utilizado en una operación específica. JavaScript realiza conversiones implícitas (o automáticas) y explícitas de tipos de datos para facilitar la manipulación de valores en diferentes situaciones.

Conversiones implícitas o automáticas

JavaScript utiliza conversiones automáticas cuando intentamos realizar operaciones entre diferentes tipos de datos. Esto sucede de forma transparente, sin que el programador tenga que hacer nada explícitamente.

Conversión automática de números a cadenas de texto

En los siguientes ejemplos, la conversión automática de números a cadenas de texto ocurre cuando utilizamos el operador de concatenación (+) para combinar valores numéricos con cadenas de texto. Cuando se realiza una operación aritmética que involucra una cadena de texto y un número, JavaScript convierte automáticamente el número en una cadena de texto para que pueda concatenarse con la otra cadena:

// Conversión automática de números a cadenas de texto en concatenaciones
let num1 = 10;
let num2 = 3.14;
let concatenacion1 = "El número es: " + num1; // "El número es: 10"
let concatenacion2 = "El valor de PI es: " + num2; // "El valor de PI es: 3.14"

// Conversión automática de números a cadenas de texto en operaciones aritméticas
let a = 5;
let b = 2;
let resultado1 = "La suma es: " + (a + b); // "La suma es: 7"
let resultado2 = "El producto es: " + (a * b); // "El producto es: 10"

Es importante tener en cuenta que la conversión automática de números a cadenas de texto solo ocurre cuando se utilizan operadores de concatenación. Si utilizamos operadores aritméticos entre números y cadenas de texto, JavaScript tratará de realizar la operación matemática en lugar de convertir los números en cadenas de texto:

let num = 42;
let texto = "El número es: " + num; // "El número es: 42"

let suma = num + 5; // 47, porque es una operación aritmética
let resultado = "El resultado es: " + (num + 5); // "El resultado es: 47"

Recuerda que, aunque JavaScript realiza la conversión automática de números a cadenas de texto, es recomendable utilizar la interpolación de cadenas con plantillas (${...}) cuando sea posible, ya que hace que el código sea más legible y evita confusiones con el uso de operadores de concatenación. La interpolación de cadenas es una característica introducida en ECMAScript 6 y ofrece una forma más clara y sencilla de incluir valores dentro de cadenas de texto.

Conversión automática de cadenas de texto a números

En el siguiente ejemplo, JavaScript convierte automáticamente las cadenas "5" y "2" en valores numéricos antes de realizar la resta. Como resultado, obtenemos el número 3:

let a = "5";
let b = "2";
let resultado = a - b;
console.log(resultado); // Salida: 3

Conversión automática de valores booleanos a valores numéricos

En el siguiente ejemplo, JavaScript convierte automáticamente los valores booleanos true y false a valores numéricos (1 y 0, respectivamente) antes de realizar la suma. Esta conversión automática ocurre porque en una operación aritmética, JavaScript espera valores numéricos, y los valores booleanos se convierten implícitamente a números para que la operación sea válida:

let verdadero = true; // 1
let falso = false; // 0

let sumaBooleanos = verdadero + falso;
console.log(sumaBooleanos); // Salida: 

Conversión automática de booleanos a cadenas de texto

Cuando utiliza el operador de concatenación + para combinar un valor booleano con una cadena de texto, JavaScript realiza una conversión automática del valor booleano a su representación en forma de cadena de texto. Los valores booleanos true y false se convierten en las cadenas de texto "true" y "false", respectivamente. En el siguiente ejemplo, las variables esVerdadero y esFalso son valores booleanos. Cuando los concatenamos con cadenas de texto utilizando el operador +, JavaScript realiza la conversión automática de estos valores booleanos a sus representaciones de cadena de texto correspondientes:

let esVerdadero = true;
let esFalso = false;

let cadena1 = "El valor es: " + esVerdadero;
let cadena2 = "El resultado es: " + esFalso;

console.log(cadena1); // Salida: "El valor es: true"
console.log(cadena2); // Salida: "El resultado es: false"

Podemos utilizar también la conversión automática de booleanos a cadenas de texto para construir mensajes que contengan condicionales. En el siguiente ejemplo creamos mensajes que informan sobre si una persona es mayor de edad o si puede ingresar a algún lugar.

let edad = 17;
let mensaje1 = "¿Puede trabajar? " + (edad >= 16);
let mensaje2 = "¿Es mayor de edad? " + (edad >= 18);

console.log(mensaje1); // Salida: "¿Puede trabajar? true"
console.log(mensaje2); // Salida: "¿Es mayor de edad? false"

Ten en cuenta que, aunque la conversión automática de booleanos a cadenas de texto es útil en ciertas situaciones, es recomendable ser explícito cuando sea necesario para mejorar la legibilidad del código. Si deseas asegurarte de que la representación en forma de cadena de texto sea más específica, puedes utilizar funciones como toString() o plantillas de cadenas para lograr un resultado más claro:

let esVerdadero = true;
let cadena1 = "Es verdadero: " + esVerdadero.toString(); 
let cadena2 = `Es falso: ${false}`; 

console.log(cadena1); // Salida: "Es verdadero: true"
console.log(cadena2); // Salida: "Es falso: false"

Conversiones explícitas

La conversión explícita de tipos de datos ocurre cuando el programador decide cambiar manualmente el tipo de un valor a otro tipo específico. JavaScript proporciona varias funciones y métodos que permiten realizar estas conversiones explícitas.

Conversión explícita de números a cadenas de texto

En el siguiente ejemplo convertimos números en cadenas de texto utilizando la función String() y también mediante la concatenación con una cadena vacía. Ambos enfoques producen el mismo resultado:

let numero1 = 42;
let numero2 = 3.14;

// Utilizando la función String()
let textoNumero1 = String(numero1); // "42"
let textoNumero2 = String(numero2); // "3.14"

// Utilizando concatenación con una cadena vacía
let textoNumero3 = numero1 + ""; // "42"
let textoNumero4 = "" + numero2; // "3.14"

Conversión explícita de cadenas de texto a números

En el siguiente ejemplo realizamos conversiones explícitas de cadenas de texto a números utilizando la función Number() y el operador unario +. También vemos que al intentar convertir una cadena de texto no numérica, obtenemos NaN:

let textoNumero1 = "123";
let textoNumero2 = "3.14";
let textoNoNumerico = "hola";

// Utilizando la función Number()
let numero1 = Number(textoNumero1); // 123 (número entero)
let numero2 = Number(textoNumero2); // 3.14 (número decimal)
let noEsNumero = Number(textoNoNumerico); // NaN (no es un número)

// Utilizando el operador unario +
let numero3 = +textoNumero1; // 123 (número entero)
let numero4 = +textoNumero2; // 3.14 (número decimal)
let numero5 = +textoNoNumerico; // NaN (no es un número)

Debemos destacar que la función Number() es muy flexible y puede manejar una amplia variedad de tipos de datos, y sólo devolverá NaN si no puede realizar la conversión:

Number("42"); // 42
Number("3.14"); // 3.14
Number("123abc"); // NaN (caracteres no numéricos)
Number("hello"); // NaN (cadena no numérica)
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number(undefined); // NaN

Podemos utilizar además las funciones parseInt() y parseFloat() para convertir una cadena de texto en un número entero o decimal respectivamente:

let cadena1 = "123";
let cadena2 = "3.14";
let cadena3 = "Hola123";
let cadena4 = "123Hola";

let numero1 = parseInt(cadena1); // 123 (número entero)
let numero2 = parseInt(cadena2); // 3 (solo se toma la parte entera)
let numero3 = parseInt(cadena3); // 123 (comienza con un número)
let numero4 = parseInt(cadena4); // NaN (no comienza con un número)

let cadena5 = "3.14";
let cadena6 = "0.12345";
let cadena7 = "3.14Hola";
let cadena8 = "Hola3.14";

let numero5 = parseFloat(cadena5); // 3.14 (número decimal)
let numero6 = parseFloat(cadena6); // 0.12345
let numero7 = parseFloat(cadena7); // 3.14 (comienza con un número)
let numero8 = parseFloat(cadena8); // NaN (no comienza con un número)

Consideraciones adicionales sobre la función Number():

  • No se limita únicamente a conversiones de enteros o decimales, ya que también permite convertir booleanos, nulos o valores no definidos.
  • Genera NaN si encuentra cualquier carácter no numérico en una cadena de texto, aunque esté al final (por ejemplo, «123abc»).

Consideraciones adicionales sobre las funciones parseInt() y parseFloat():

  • Intentarán convertir la parte numérica inicial de la cadena y detendrán la conversión cuando encuentren un carácter no numérico.
  • Si la cadena comienza con un espacio en blanco, también lo ignorarán y comenzarán la conversión desde el primer dígito numérico.
  • Solo convierten la parte inicial numérica de la cadena. Si hay caracteres numéricos después de caracteres no numéricos (por ejemplo, «123abc»), solo se tomará la parte inicial numérica («123» en este caso).
  • Si la cadena no contiene ningún dígito numérico, devolverán NaN.

Conversión explícita de cadenas de texto a booleanos

En el siguiente ejemplo convertimos cadenas de texto en valores booleanos utilizando la función Boolean() y también mediante comparaciones estrictas (===). Es importante destacar que cualquier cadena no vacía se evalúa como true al utilizar la función Boolean():

let cadenaVerdadera = "true";
let cadenaFalsa = "false";
let cadenaNoValida = "hola";

// Utilizando la función Boolean()
let booleano1 = Boolean(cadenaVerdadera); // true
let booleano2 = Boolean(cadenaFalsa); // false
let booleano3 = Boolean(cadenaNoValida); // true (cualquier cadena no vacía se evalúa como true)

// Utilizando comparación estricta (===)
let booleano4 = (cadenaVerdadera === "true"); // true
let booleano5 = (cadenaFalsa === "true"); // false

Conversión explícita de booleanos a cadenas de texto

En el siguiente ejemplo utilizamos las funciones String() y toString() para convertir los valores booleanos true y false en sus representaciones en forma de cadena de texto. Ambos enfoques producen el mismo resultado:

let esVerdadero = true;
let esFalso = false;

// Utilizando la función String()
let cadena1 = String(esVerdadero); // "true"
let cadena2 = String(esFalso); // "false"

// Utilizando el método toString()
let cadena3 = esVerdadero.toString(); // "true"
let cadena4 = esFalso.toString(); // "false"

Conversión explícita de valores no booleanos a valores booleanos

En este caso, utilizamos la función Boolean() y además el doble operador de negación (!!) para obtener los valores booleanos de cada una de las variables:

let valor1 = ""; // valor falso
let valor2 = 0; // valor falso
let valor3 = null; // valor falso
let valor4; // valor undefined, también falso
let valor5 = NaN; // valor falso
let valor6 = 25; // valor verdadero
let valor7 = "Hola"; // valor verdadero

let booleano1 = Boolean(valor1); // false
let booleano2 = Boolean(valor2); // false
let booleano3 = Boolean(valor3); // false
let booleano4 = Boolean(valor4); // false
let booleano5 = Boolean(valor5); // false
let booleano6 = Boolean(valor6); // true
let booleano7 = Boolean(valor7); // true

let booleano8 = !!valor1; // false
let booleano9 = !!valor2; // false
let booleano10 = !!valor3; // false
let booleano11 = !!valor4; // false
let booleano12 = !!valor5; // false
let booleano13 = !!valor6; // true
let booleano14 = !!valor7; // true

Al utilizar !!, el primer operador de negación convierte el valor a su inverso booleano, y el segundo operador de negación invierte nuevamente el resultado, restaurando el valor original como valor booleano. Es decir, la doble negación convierte los valores "", 0, null, undefined y NaN en false, y por otro lado convierte 25 y "Hola" en true:

Consideraciones

Es fundamental comprender las conversiones de tipos de datos en JavaScript para escribir código robusto y evitar resultados inesperados en nuestros programas. No debemos olvidar que JavaScript es un lenguaje de tipado dinámico, lo que significa que las variables pueden cambiar su tipo de dato durante la ejecución del programa.

En general, se recomienda ser explícito en las conversiones y utilizar con mucha precaución funciones y métodos específicos para cada tipo. No olvidemos que si intentamos convertir valores que no son compatibles, como una cadena de texto no numérica a un número, obtendremos NaN como resultado. Por ejemplo, si intentamos convertir la cadena de texto "hola" en un número utilizando la función Number() o el operador unario +, no podremos obtener un valor numérico válido, y ambas conversiones devolverán NaN:

let textoNoNumerico = "hola";

// Utilizando la función Number()
let numero1 = Number(textoNoNumerico);

// Utilizando el operador unario +
let numero2 = +textoNoNumerico;

console.log(numero1); // Salida: NaN
console.log(numero2); // Salida: NaN

O por ejemplo, también podemos obtener resultados inesperados si intentamos convertir una cadena de texto en un valor booleano. En este caso, como cualquier cadena no vacía se evalúa como true, si utilizamos la función Boolean() para convertir "hola" en booleano, el resultado de la conversión es true en lugar de NaN:

let textoNoNumerico = "hola";

// Utilizando la función Boolean()
let booleano = Boolean(textoNoNumerico);

console.log(booleano); // Salida: true (cualquier cadena no vacía se evalúa como true)

Recuerda que NaN (Not-a-Number) es un valor especial en JavaScript que representa el resultado de una operación matemática inválida o indeterminada. Se obtiene cuando intentamos realizar una operación aritmética con valores no numéricos o cuando una operación matemática no tiene un resultado definido, como por ejemplo, la división por cero. Es importante tener en cuenta estas situaciones al trabajar con conversiones explícitas para evitar obtener resultados inesperados.

Debemos considerar además que al trabajar con variables que puedan contener valores tales como una cadena vacía o null, podemos obtener resultados inesperados si intentamos realizar conversiones para obtener un valor numérico o booleano, ya que en vez de obtener NaN, dichas conversiones se realizarán sin generar ningún error:

let cadenaVacia = "";
let nulo = null;

let numero1 = Number(cadenaVacia); // 0 (conversión válida)
let numero2 = Number(nulo); // 0 (conversión válida)

let booleano1 = Boolean(cadenaVacia); // false (cadena vacía se evalúa como false)
let booleano2 = Boolean(nulo); // false (null se evalúa como false)

Test

Comprueba tus conocimientos con este test sobre tipos de datos y otros conceptos relacionados con esta unidad.

Programación con JavaScript: Operadores

Los operadores son elementos fundamentales en cualquier lenguaje de programación, y JavaScript no es una excepción. Los operadores en JavaScript nos permiten realizar diferentes tipos de operaciones con valores, como aritmética, asignación, comparación y lógica, entre otros. A continuación explicaremos los distintos tipos de operadores disponibles en JavaScript, junto con muchos ejemplos para cada uno.

Operadores aritméticos

Los operadores aritméticos se utilizan para realizar operaciones matemáticas con números.

  • Suma (+): Se utiliza para sumar dos valores numéricos.
  • Resta (-): Se utiliza para restar un valor numérico de otro.
  • Multiplicación (*): Se utiliza para multiplicar dos valores numéricos.
  • División (/): Se utiliza para dividir un valor numérico entre otro.
let a = 5 + 3; // 8
let b = a + 10; // 18

let c = 10 - 4; // 6
let d = 8 - 3; // 5

let e = 3 * 4; // 12
let f = 5 * 2; // 10

let g = 15 / 5; // 3
let h = 20 / 4; // 5
  • Módulo (%): Se utiliza para obtener el resto de la división de dos números.
let i = 17 % 5; // 2 (17 dividido por 5 es 3 con un resto de 2)
let j = 8 % 3; // 2 (8 dividido por 3 es 2 con un resto de 2)
  • Incremento (++): Se utiliza para aumentar el valor de una variable en 1.
  • Decremento (--): Se utiliza para disminuir el valor de una variable en 1.
let k = 10;
k++; // k se convierte en 11
let l = 3;
l++; // l se convierte en 4

let m = 7;
m--; // m se convierte en 6
let n = 9;
n--; // n se convierte en 8

Operadores de asignación

Los operadores de asignación se utilizan para asignar valores a variables.

  • Asignación básica (=): Se utiliza para asignar un valor a una variable.
let x = 10;
let y = "Hola";
  • Operadores de asignación combinados (+=, -=, *=, /=): Estos operadores combinan una operación aritmética con una asignación.
let a = 5;
a += 2; // a se convierte en 7 (a = a + 2)

let b = 8;
b -= 3; // b se convierte en 5 (b = b - 3)

let c = 3;
c *= 4; // c se convierte en 12 (c = c * 4)

let d = 20;
d /= 5; // d se convierte en 4 (d = d / 5)

let y = 5;
y += 2; // 'y' se convierte en 7 (y = y + 2)
y -= 3; // 'y' se convierte en 4 (y = y - 3)
y *= 2; // 'y' se convierte en 8 (y = y * 2)
y /= 4; // 'y' se convierte en 2 (y = y / 4)

Operadores de comparación

Los operadores de comparación se utilizan para comparar dos valores y devuelven un valor booleano (true o false).

  • Igualdad (==): Compara si dos valores son iguales, sin considerar el tipo de datos.
let a = 5;
let b = "5";
console.log(a == b); // true (compara solo los valores)

let c = true;
let d = 1;
console.log(c == d); // true (true es igual a 1)
  • Desigualdad (!=): Compara si dos valores no son iguales, sin considerar el tipo de datos.
let e = 10;
let f = "5";
console.log(e != f); // true (los valores son diferentes)

let g = false;
let h = 0;
console.log(g != h); // false (false es igual a 0)
  • Igualdad estricta (===): Compara si dos valores son iguales, considerando también el tipo de datos.
let i = 5;
let j = "5";
console.log(i === j); // false (compara valores y tipos de datos)

let k = true;
let l = 1;
console.log(k === l); // false (true y 1 son diferentes tipos de datos)
  • Desigualdad estricta (!==): Compara si dos valores no son iguales, considerando también el tipo de datos.
let m = 10;
let n = "10";
console.log(m !== n); // true (los valores son iguales, pero los tipos de datos son diferentes)

let o = true;
let p = 1;
console.log(o !== p); // true (true y 1 son diferentes tipos de datos)
  • Mayor que (>): Compara si el valor del operando izquierdo es mayor que el valor del operando derecho.
let a = 5;
let b = 3;
console.log(a > b); // true (5 es mayor que 3)

let c = 10;
let d = 20;
console.log(c > d); // false (10 no es mayor que 20)

let e = "25";
let f = 15;
console.log(e > f); // true (la comparación se realiza mediante la conversión a números, "25" es mayor que 15)

En este ejemplo, la comparación e > f evalúa si "25" es mayor que 15, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "25" se convierte a 25, y la comparación resulta en verdadero (true).

  • Menor que (<): Compara si el valor del operando izquierdo es menor que el valor del operando derecho.
let a = 5;
let b = 10;
console.log(a < b); // true (5 es menor que 10)

let c = 15;
let d = 5;
console.log(c < d); // false (15 no es menor que 5)

let e = "10";
let f = 15;
console.log(e < f); // true (la comparación se realiza mediante la conversión a números, "10" es menor que 15)

En este ejemplo, la comparación e < f evalúa si "10" es menor que 15, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "10" se convierte a 10, y la comparación resulta en verdadero (true).

  • Mayor o igual que (>=): Compara si el valor del operando izquierdo es mayor o igual que el valor del operando derecho.
let a = 5;
let b = 3;
console.log(a >= b); // true (5 es mayor o igual que 3)

let c = 10;
let d = 10;
console.log(c >= d); // true (10 es igual a 10)

let e = "25";
let f = 20;
console.log(e >= f); // true (la comparación se realiza mediante la conversión a números, "25" es mayor o igual que 20)

En este ejemplo, la comparación e >= f evalúa si "25" es mayor o igual que 20, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "25" se convierte a 25, y la comparación resulta en verdadero (true).

  • Menor o igual que (<=): Compara si el valor del operando izquierdo es menor o igual que el valor del operando derecho.
let a = 5;
let b = 10;
console.log(a <= b); // true (5 es menor o igual que 10)

let c = 15;
let d = 15;
console.log(c <= d); // true (15 es igual a 15)

let e = "10";
let f = 20;
console.log(e <= f); // true (la comparación se realiza mediante la conversión a números, "10" es menor o igual que 20)

En este ejemplo, la comparación e <= f evalúa si "10" es menor o igual que 20, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "10" se convierte a 10, y la comparación resulta en verdadero (true).

Operadores lógicos

Los operadores lógicos se utilizan para combinar o negar valores booleanos (true o false).

  • AND lógico (&&): Devuelve true si ambos operandos son true.
let a = true;
let b = false;
console.log(a && b); // false

let c = true;
let d = true;
console.log(c && d); // true
  • OR lógico (||): Devuelve true si al menos uno de los operandos es true.
let e = true;
let f = false;
console.log(e || f); // true

let g = false;
let h = false;
console.log(g || h); // false
  • Negación lógica (!): Devuelve el valor contrario del operando.
let i = true;
console.log(!i); // false

let j = false;
console.log(!j); // true

Otros operadores

Operador ternario

El operador ternario es una forma abreviada de escribir una declaración if...else en una sola línea.

let age = 25;
let result = (age >= 18) ? "Adulto" : "Menor de edad";
console.log(result); // "Adulto"

Operador de concatenación

Los operadores de concatenación se utilizan para unir cadenas de texto.

  • Concatenación básica (+): Une dos cadenas de texto.
let firstName = "John";
let lastName = "Doe";

let fullName = firstName + " " + lastName;
console.log(fullName); // "John Doe"

Operador de tipo

  • Operador typeof: Se utiliza para obtener el tipo de dato de una variable.
let x = 5;
let y = "Hola";
let z = true;

console.log(typeof x); // "number"
console.log(typeof y); // "string"
console.log(typeof z); // "boolean"

Test

Comprueba tus conocimientos con este test sobre operadores y otros conceptos relacionados con esta unidad.

Programación con JavaScript: Variables

Las variables son elementos fundamentales en cualquier lenguaje de programación, ya que nos permiten almacenar y manipular datos de diferentes tipos. En JavaScript, tenemos tres formas principales de declarar variables: var, let, y const. Cada una tiene sus características y usos específicos. A continuación veremos cómo declarar, asignar valores, y usar variables en JavaScript, junto con ejemplos para cada caso.

Declaración de variables con var

La palabra clave var fue la forma tradicional de declarar variables en JavaScript antes de la introducción de let y const. Aunque var sigue siendo compatible en versiones modernas de JavaScript, su uso ha disminuido debido a algunos problemas asociados con su alcance. Sin embargo, es importante comprender cómo funciona var y cuáles son sus características.

Para declarar una variable usando var, simplemente escribimos var seguido del nombre de la variable.

var x;

Asignación de valores a una variable con var

Podemos asignar un valor a la variable en el mismo paso de la declaración o en cualquier otro lugar del código:

var age = 25;
var name;
name = "John";

Alcance de función con var

Una característica importante de var es su alcance de función. Esto significa que la variable declarada con var es visible en toda la función en la que se declara, incluso si es declarada dentro de un bloque.

function exampleScope() {
  if (true) {
    var foo = "bar";
    console.log(foo); // "bar" - La variable es visible dentro del bloque 'if'
  }
  console.log(foo); // "bar" - 'foo' es accesible en toda la función 'exampleScope'
}

Problemas con var

Aunque var puede ser útil, tiene algunos problemas asociados con su alcance que pueden conducir a comportamientos inesperados y errores difíciles de detectar.

Hoisting (Elevación)

Una de las características más sorprendentes de var es el hoisting (elevación). Las declaraciones de variables con var se elevan hasta la parte superior del ámbito actual, lo que significa que la variable es «elevada» antes de su declaración real:

console.log(x); // undefined - La declaración de la variable se eleva, pero aún no tiene valor
var x = 10;
console.log(x); // 10 - Ahora 'x' tiene el valor asignado

El código anterior se interpreta como si hubiera sido escrito de la siguiente manera:

var x; // La declaración de 'x' se eleva
console.log(x); // undefined - 'x' existe, pero aún no tiene valor asignado
x = 10; // Asignamos el valor 10 a 'x'
console.log(x); // 10 - Ahora 'x' tiene el valor asignado

Este comportamiento puede conducir a confusiones, especialmente si se olvida declarar una variable antes de usarla, ya que no se producirá un error, sino que obtendremos undefined.

Reasignación en el mismo ámbito

El alcance de función de var permite que la variable sea reasignada dentro del mismo ámbito, lo que puede llevar a errores difíciles de rastrear. En el siguiente ejemplo el resultado es inesperado, ya que y es reasignada dentro del bloque ‘if’ y su valor cambia fuera del bloque:

var y = 5;
if (true) {
  var y = 10; // Esto reasigna la variable 'y' en el mismo ámbito
  console.log(y); // 10 - La variable 'y' interna tiene precedencia dentro del bloque 'if'
}
console.log(y); // 10 - La variable 'y' externa es reasignada dentro del bloque 'if'

¿Cuándo deberías usar var?

Aunque var tiene algunos problemas y se recomienda evitarlo en la mayoría de los casos, hay situaciones específicas en las que puede ser útil, especialmente en el contexto de versiones antiguas de JavaScript o en ciertos escenarios donde el comportamiento del hoisting es deseado. Sin embargo, en versiones modernas de JavaScript, se prefieren let y const debido a su alcance de bloque y su comportamiento más predecible.

En resumen, var es una palabra clave para declarar variables en JavaScript con alcance de función. Aunque ha sido reemplazado en gran medida por let y const, todavía es importante comprender su funcionamiento y cómo puede afectar el alcance de las variables. Es recomendable utilizar let y const en su lugar, ya que proporcionan un código más seguro y fácil de mantener, pero conocer var te permitirá comprender mejor el código existente y ser más versátil en tu desarrollo.

Declaración de variables con let

Podemos utilizar la palabra clave let para declarar variables con alcance de bloque. Antes solo teníamos var, que tiene un alcance de función y no de bloque. let resuelve algunos problemas asociados con el uso de var y proporciona un alcance más seguro y predecible.

Para declarar una variable usando let, simplemente escribimos let seguido del nombre de la variable. Por ejemplo:

let x;

Alcance de bloque

Una de las principales diferencias entre let y var es su alcance. Las variables declaradas con let tienen un alcance de bloque, lo que significa que solo son visibles dentro del bloque (puede ser un bloque de código dentro de una función, una declaración if, un bucle for, etc.) en el que se han declarado.

function exampleScope() {
  if (true) {
    let foo = "bar";
    console.log(foo); // "bar" - La variable es visible dentro del bloque 'if'
  }
  console.log(foo); // Error: 'foo' no está definido, ya que está fuera del bloque 'if'
}

Evita el problema de «hoisting»

Otro problema que resuelve let es el comportamiento de «hoisting» que se presenta con las variables declaradas con var. En el caso de let, las variables no son «elevadas» (hoisted) hasta la parte superior del bloque, lo que puede ayudar a evitar errores difíciles de detectar.

console.log(x); // Error: 'x' no está definido, no es elevado (hoisted)
let x = 10;

Redefinición de variables

Con let, no puedes redeclarar la misma variable en el mismo alcance, lo que ayuda a evitar errores y mantener un código más limpio:

let y = 5;
let y = 10; // Error: no se permite redeclarar 'y' en el mismo alcance

Ejemplos adicionales

Los siguientes ejemplos te brindan una visión completa del uso de let en JavaScript. Recuerda que let nos permite evitar problemas de alcance y nos ayuda a mantener un código más limpio y seguro:

function loopExample() {
  for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4 - 'i' es visible solo dentro del bucle 'for'
  }
  console.log(i); // Error: 'i' no está definido, está fuera del alcance del bucle 'for'
}

function blockExample() {
  let a = 10;
  if (true) {
    let a = 20;
    console.log(a); // 20 - La variable 'a' interna tiene precedencia dentro del bloque 'if'
  }
  console.log(a); // 10 - La variable 'a' externa no se ve afectada por la interna del bloque 'if'
}

function lexicalScoping() {
  let x = 1;
  {
    let x = 2;
    console.log(x); // 2 - 'x' dentro del bloque tiene precedencia sobre el 'x' externo
  }
  console.log(x); // 1 - 'x' externo no se ve afectado por el 'x' dentro del bloque
}

function temporalDeadZone() {
  console.log(x); // Error: 'x' no está definido debido a la zona temporal de la variable (temporal dead zone)
  let x = 5;
}

function iterationExample() {
  let funcs = [];
  for (let i = 0; i < 5; i++) {
    funcs.push(() => console.log(i)); // Se captura el valor actual de 'i' en cada iteración
  }
  funcs.forEach(func => func()); // 0, 1, 2, 3, 4 - Cada función muestra el valor de 'i' en su iteración correspondiente
}

Declaración de constantes con const

La palabra clave const se utiliza para declarar constantes, es decir, variables cuyo valor no puede cambiar una vez que se hayan inicializado.

Para declarar una constante usando const, simplemente escribimos const seguido del nombre de la constante y luego asignamos un valor:

const pi = 3.14159;

Asignación de valores y reasignación

Una vez que una constante ha sido declarada y se le ha asignado un valor, no se puede cambiar su valor. Intentar reasignar una constante resultará en un error:

const name = "John";
name = "Jane"; // Error: No se puede reasignar una constante

Inmutabilidad de los valores

Es importante tener en cuenta que const solo evita la reasignación de la variable, no la inmutabilidad de los valores a los que hace referencia. Si la constante contiene un objeto, por ejemplo, el objeto en sí puede ser modificado, pero no se puede asignar una nueva referencia a la constante:

const person = { name: "John", age: 30 };
person.age = 31; // Esto es válido, ya que se modifica el objeto al que 'person' hace referencia
person = { name: "Jane", age: 25 }; // Error: No se puede reasignar una constante

Debe inicializarse al declarar

A diferencia de las variables declaradas con let, las constantes deben inicializarse al declararlas. No es posible declarar una constante sin asignarle un valor en el mismo paso:

const x; // Error: Las constantes deben inicializarse al declararlas

Ámbito de bloque

Al igual que let, las constantes también tienen un ámbito de bloque. Esto significa que solo son visibles dentro del bloque en el que se declaran.

function exampleScope() {
  if (true) {
    const foo = "bar";
    console.log(foo); // "bar" - La constante es visible dentro del bloque 'if'
  }
  console.log(foo); // Error: 'foo' no está definido, está fuera del bloque 'if'
}

Ejemplos adicionales

Los siguientes ejemplos te pueden ayudar a comprender cómo usar const en JavaScript. Recuerda que const se utiliza para declarar variables que no cambiarán su valor después de la inicialización, lo que proporciona inmutabilidad y ayuda a escribir un código más seguro y fácil de mantener:

function blockExample() {
  const a = 10;
  if (true) {
    const a = 20; // Es posible tener una constante con el mismo nombre en otro ámbito
    console.log(a); // 20 - La constante 'a' interna tiene precedencia dentro del bloque 'if'
  }
  console.log(a); // 10 - La constante 'a' externa no se ve afectada por la interna del bloque 'if'
}

function iterationExample() {
  const funcs = [];
  for (let i = 0; i < 5; i++) {
    funcs.push(() => console.log(i)); // Se captura el valor actual de 'i' en cada iteración
  }
  funcs.forEach(func => func()); // 0, 1, 2, 3, 4 - Cada función muestra el valor de 'i' en su iteración correspondiente
}

Resumiendo

En versiones modernas de JavaScript, como ES6 y posteriores, se recomienda utilizar let y const en lugar de var debido a los problemas asociados con su alcance y el «hoisting». Las declaraciones con let proporcionan un alcance de bloque más seguro y predecible, mientras que const se utiliza para declarar constantes inmutables. El uso adecuado de let y const mejora la legibilidad, el mantenimiento y la seguridad de tu código.

Recomendación de uso de let y const

let

  • let es preferible sobre var debido a su alcance de bloque, lo que significa que una variable declarada con let solo es visible dentro del bloque en el que se declara.
  • let ayuda a evitar problemas de hoisting y errores relacionados con la reasignación en el mismo ámbito.
  • let proporciona un código más claro y más seguro en comparación con var.

const:

  • Utiliza const para declarar constantes, es decir, valores que no cambiarán después de la inicialización.
  • El uso de const ayuda a que tu código sea más seguro y más fácil de entender, ya que deja claro que el valor no cambiará.
  • Sin embargo, ten en cuenta que const no hace que los objetos sean inmutables, solo evita la reasignación de la variable.

Ejemplo adicional con let y const

function blockExample() {
  let a = 10; // Usa 'let' para evitar problemas con 'var'
  const b = 20; // Usa 'const' para declarar una constante

  if (true) {
    let a = 100; // 'a' tiene un nuevo ámbito dentro del bloque 'if'
    const b = 200; // 'b' tiene un nuevo ámbito dentro del bloque 'if'
    console.log(a, b); // 100, 200
  }

  console.log(a, b); // 10, 20
}

Test

Comprueba tus conocimientos con este test sobre variables y otros conceptos relacionados con esta unidad.

HTML. Unidad 8. Vídeo y audio.

Introducción

Ahora que estamos cómodos añadiendo imágenes simples a una página web, el siguiente paso será empezar a agregar reproductores de audio y video a tu documento HTML. En este artículo veremos cómo hacerlo con los elementos  <video> y <audio>; luego terminaremos viendo como agregar subtítulos a nuestros videos.

Vídeo y audio en Internet

Los desarrolladores web han querido usar audio y video en la web por mucho tiempo, desde comienzos del 2000 cuando empezamos a tener un ancho de banda suficientemente rápido para soportar cualquier tipo de video (los archivos de video son mucho más grandes que texto o imágenes). En los inicios, las tecnologías web nativas como HTML no tenían el soporte para incrustar audio y video en la Web, tecnologías privadas (o basadas en plugins) como Flash (y después, Silverlight) se convirtieron populares para manipular este tipo de contenido. Este tipo de tecnología funcionó bien, pero tenía ciertos problemas, incluídos el no trabajar bien con las características de HTML/CSS, problemas de seguridad y problemas de accesibilidad.

Una solución nativa podría resolver mucho de esto si es implementado correctamente. Afortunadamente, unos pocos años después la especificación HTML5 tenía tales características agregadas, con los elementos <video> y <audio>, y algo nuevo JavaScript APIs para controlar estos. No veremos Javascript aquí — solo los fundamentos básicos que se pueden lograr con HTML.

No te enseñaremos como crear archivos de audio y video — eso requiere un conocimiento completamente diferente. Por el contrario, te proporcionamos archivos de audio y video de muestra con códigos de ejemplo disponibles en «https://fernandoruizrico.com/test-audio-and-video/» para que tu mismo experimentes, en caso de que no puedas conseguirlos por ti mismo.

El elemento <video>

El elemento <video> nos permite incrustar video fácilmente. De la misma manera que para el elemento <img>, el atributo src (source) contiene una ruta al video que deseas incrustar. Funciona de la misma manera. Los usuarios deben ser capaces de controlar la reproducción de video y audio (esto es especialmente crítico en personas que padecen  epilepsia). Se debe utilizar el atributo controls para incluir la interfaz de control del browser, o construir la nuestra utilizando la JavaScript API apropiada. Como mínimo la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen. Un ejemplo muy simple podría ser el siguiente:

<video src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" controls></video>

Podemos insertar un párrafo dentro de la etiqueta  <video> (denominado contenido de reserva) — y será mostrado si el navegador desde el que se está accediendo a la página no soporta el elemento <video>, permitiéndonos proveer un «fallback» para navegadores más antiguos. Se puede elegir cualquier contenido para dicho párrafo; en nuestro caso proporcionamos un enlace directo al archivo de vídeo, para que el usuario pueda al menos acceder de alguna manera, independientemente del navegador que esté usando.

<video src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

Atributos «width» y «height»

Podemos controlar el tamaño del vídeo con estos atributos o con CSS (esta es la opción más recomendable). En ambos casos, los vídeos mantienen su relación anchura – altura nativa. Si la relación de aspecto no se mantiene con los tamaños establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada. Por ejemplo, para establecer la anchura del vídeo a 720px y mantener la relación de aspecto, podemos utilizar un código similar al siguiente:

<video width="720"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" 
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

Ejercicio propuesto: Película de animación «Caminandes»

Crea una página web con el ejemplo anterior y copia el código tres veces para mostrar el mismo vídeo tres veces en total. Cambia el ancho para establecer un valor diferente para cada vídeo (1080, 720 y 480) y cambia también el atributo src para que corresponda con el de cada vídeo. Finalmente, verifica los resultados en tu navegador (actualiza la página web para asegurarte de que el navegador esté mostrando los últimos cambios en tu código). No olvides incluir todas las etiquetas HTML básicas necesarias y validar su código.

Vídeos:

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_480p.mp4

<video width="1080"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" 
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

<video width="720"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" 
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

...

El atributo «poster»

Puedes especificar una URL para mostrar una imagen (atributo poster) hasta que el usuario reproduzca el vídeo. Si este atributo no se especifica, no se muestra nada hasta que el primer fotograma esté disponible, momento en el cual se mostrará esa imagen como póster.

<video width="1080"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg"
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

Ejercicio propuesto: Película de animación «Caminandes»

Modifica el código del ejercicio anterior, donde tienes el mismo vídeo con tres tamaños diferentes. Ahora tiene que usar el atributo poster para configurar tres imágenes diferentes (puede encontrar debajo los enlaces a los carteles, que están disponibles en https://fernandoruizrico.com/test-audio-and-video/, o puedes usar otras imágenes que te gusten). Cuando termines, verifica los resultados en tu navegador (actualiza tu página web para asegurarte de que el navegador esté mostrando los últimos cambios en tu código). No olvides incluir todas las etiquetas HTML básicas necesarias y validar tu código.

Posters:

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png

https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/share.png

<video width="1080"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg"
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

<video width="720"
       src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
       controls>
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

...

Compatibilidad con los navegadores

Normalmente se utilizan algunos códecs para comprimir vídeo y audio para conseguir que los archivos sean más manejables, ya que el audio y el vídeo sin procesar son excesivamente grandes. Cada navegador web admite una variedad de códecs, que se utilizan para convertir el audio y el vídeo comprimidos en datos binarios y viceversa. Cada códec ofrece sus propias características positivas y negativas que afectan a las decisiones sobre cuál utilizar. Para maximizar la probabilidad de que tu sitio web o aplicación funcione en el navegador de un usuario, es posible que debas proporcionar cada archivo multimedia en varios formatos. Si tu página web y el navegador del usuario no comparten un formato en común, los ficheros de audio o vídeo simplemente no se reproducirán.

Debemos tener en cuenta un aspecto adicional respecto a este tema: los navegadores móviles pueden admitir formatos adicionales no admitidos por sus equivalentes de escritorio, al igual que es posible que no admitan los mismos formatos que la versión de escritorio. Además de eso, tanto los navegadores de escritorio como los móviles pueden estar diseñados para gestionar la reproducción de medios (ya sea para todos los formatos o solo para tipos específicos que no pueden gestionar internamente). Esto significa que la compatibilidad con los ficheros depende en parte del software que haya instalado el usuario.

Entonces, ¿cómo gestionamos la compatibilidad de formatos? Echa un vistazo al código actualizado del ejemplo:

<video width="1080"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
       controls>
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
    type="video/webm">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.mp4"
    type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

Aquí hemos quitado el atributo src del elemento <video> y en su lugar incluimos elementos separados <source> que apuntan a sus propias fuentes. En este caso el navegador irá a los elementos <source> y reproducirá el primero de los elementos que soporte. En primer lugar intentará reproducir el vídeo utilizando el formato WebM, y si no lo reconoce como válido, entonces intentará reproducir el formato MP4. Incluir fuentes WebM y MP4 debería bastar para reproducir el video en la mayoría de los navegadores actuales. Pero en cualquier caso, si el navegador no soporta ninguno de los formatos especificados, también hemos incluido el mensaje de aviso con el enlace correspondiente.

Cada elemento  <source>  también tiene un atributo type . Es opcional, pero se recomienda que se incluyan, ya que contienen MIME types (en-US) de los archivos de vídeo y los navegadores pueden leerlos y omitir inmediatamente los vídeos que no soporten. Si no están incluidos, los navegadores cargarán e intentarán reproducir cada archivo hasta que encuentren uno que funcione, lo que llevará aún más tiempo y un consumo de recursos innecesario.

En este artículo sobre soporte de formatos multimedia puedes encontrar algunos de los MIME types (en-US) más comunes.

Ejercicio propuesto: Película de animación «CaminandeS»

Tienes que modificar el código del ejercicio anterior donde tienes tres vídeos que muestran la película animada «Caminandes», cada uno con un tamaño diferente y un póster diferente. Debes insertar ahora un par de elementos fuente para que los tres vídeos contengan enlaces para los códecs webm y mp4 (puedes encontrar los enlaces en el ejemplo que tienes a continuación y también en https://fernandoruizrico.com/test-audio-and -video/). Verifica los resultados en tu navegador y no olvides añadir todas las etiquetas HTML necesarias y validar tu código.

Fíjate que el ancho del vídeo se puede ajustar a través del atributo «width», y también vamos a utilizar el atributo «poster» para establecer la imagen que se mostrará antes de que se reproduzca cada vídeo:
<video width="1080"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
       controls>
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
    type="video/webm">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.mp4"
    type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p> 
</video>

<video width="720"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/share.png"
       controls>
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm"
    type="video/webm">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4"
    type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

...

Ejercicio propuesto: Película de animación «Sintel»

Crea una nueva página web con el siguiente código para mostrar la película animada «Sintel». Después de eso, duplica el código un par de veces para mostrar tres vídeos en total. Cambia el tamaño de los videos a 1080, 720 y 480 y configura los elementos <source> en consecuencia (elimina también el antiguo atributo src, de modo que obtengas un código similar al que se muestra en el siguiente ejemplo). Finalmente, cambia la imagen del póster para que cada vídeo muestre una imagen diferente cuando se acabe de cargar la página. Puedes encontrar los enlaces a los vídeos y carteles en https://fernandoruizrico.com/test-audio-and-video/, y también aquí:

Vídeos (1080 px):

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.mp4

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.ogv

Vídeos (720 px):

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-720p.mp4

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-720p.ogv

Vídeos (480 px):

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-480p.mp4

https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-480p.ogv

Pósters:

https://fernandoruizrico.com/examples/test-media/video/sintel/stills/poster.jpg

https://fernandoruizrico.com/examples/test-media/video/sintel/stills/scales.png

https://fernandoruizrico.com/examples/test-media/video/sintel/stills/dragon.png

<video 
  width="1080" controls
  poster="https://fernandoruizrico.com/examples/test-media/video/sintel/stills/scales.png">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.mp4"
    type="video/mp4">
  <source
    src="https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.ogv"
    type="video/ogg">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

...

Otras funcionalidades del elemento <video>

Hay varias características adicionales que puedes incluir en un vídeo HTML5. Echa un vistazo al ejemplo que aparece a continuación:

<video controls width="720"
       autoplay loop muted preload="auto" 
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

El atributo «autoplay»

Este atributo booleano le indica al navegador que el audio o el vídeo deben empezar a reproducirse de inmediato, mientras se carga el resto de la página. Conviene puntualizar que se desaconseja utilizar la reproducción automática ya que los usuarios pueden encontrarlo un poco molesto. Puedes consultar este enlace (autoplay guide) para obtener información adicional sobre cómo usar este atributo de manera adecuada.

El atributo «loop»

Si lo activamos, el vídeo (o audio) comenzará a reproducirse de nuevo cada vez que se acabe. Esta funcionalidad también puede resultar molesta en ocasiones, por lo que se recomienda utilizarlo solo si es realmente necesario.

El atributo «muted»

Este atributo booleano indica la configuración predeterminada del audio contenido en el vídeo. Si está activado, el audio se silenciará inicialmente. Su valor predeterminado es falso, lo que significa que el audio se reproducirá cuando se reproduzca el vídeo.

El atributo «preload»

El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el desarrollador que resultará en una mejor experiencia para el usuario . Puede tener uno de los siguientes valores:

  • «none»: sugiere bien que el desarrollador cree que el usuario no tendrá que consultar el vídeo, o que el servidor desea minimizar su tráfico; es decir, esta sugerencia indica que el vídeo no se debe almacenar en caché.
  • «metadata»: sugiere que aunque el autor piensa que el usuario no tendrá que consultar este vídeo, es razonable capturar los metadatos (p. ej. longitud).
  • «auto»: sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia indica que, si es necesario, se puede descargar el vídeo completo, incluso aunque el usuario no vaya a usarlo.
  • la cadena vacía: que es un sinónimo del valor «auto».

Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a «metadata».

Ejercicio propuesto: atributos adicionales

Siguiendo los ejemplos anteriores, crea una nueva página web con tres vídeos cualquiera y establece diferentes valores de los siguientes atributos: «loop», «muted» y «preload». También puedes probar el atributo de reproducción automática, aunque debes tener en cuenta que algunos navegadores pueden tener esta función desactivada. Finalmente verifica los resultados en tu navegador y valida el código.

<video controls width="720"
       loop muted
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

<video controls width="720"
       loop preload="metadata"
       poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
  <source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
  <p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>

...

Ejercicio propuesto: Tus 10 vídeos preferidos

Crea una página web para mostrar los diez vídeos que más te gusten. Debes establecer al menos los atributos de «width» y «poster» y también el elemento de <source> para asegurarte de que todos se muestren de la manera correcta, como en los ejemplos anteriores.

Puedes encontrar vídeos de ejemplo en los siguientes enlaces: https://senkorasic.com/testmedia/, https://archive.org/details/BigBuckBunny_124, https://archive.org/download/ElephantsDream/, https://tools.woolyss.com/html5-audio-video-tester/, https://test-videos.co.uk/, http://losplayer.com/?page_id=1880, https://dafftube.org/video-links/, https://github.com/mediaelement/mediaelement-files, http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5, https://sample-videos.com/, http://samples.mplayerhq.hu/, https://www.clipcanvas.com/a/video-clip-formats-and-codec-samples, https://peach.blender.org/download/, https://download.blender.org/peach/bigbuckbunny_movies/, https://orange.blender.org/download/, https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content, etc.

El elemento <audio>

The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It works just like the <video> element, with a few small differences as outlined below. A typical example might look like so:

<figure>
    <figcaption>Trance 2. Instrumental Background Music.</figcaption>
    <audio
        controls
        src="https://fernandoruizrico.com/examples/test-media/audio/Twisterium-Trance2.wav">
        <p>Your browser doesn't support HTML5 audio. Click <a href="https://fernandoruizrico.com/test-audio-and-video/">here</a>  para poder visualizarlo.</p>
    </audio>
</figure>

<figure>
    <figcaption>Space battle. Space Fantasy Spot Effect.</figcaption>
    <audio
        controls
        src="http://bbcsfx.acropolis.org.uk/assets/07042219.wav">
        <p>Your browser doesn't support HTML5 audio. Click <a href="http://bbcsfx.acropolis.org.uk">here</a> instead.</p>
    </audio>
</figure>

The above example shows simple usage of the <audio> element. In a similar manner to the <img> and <video> elements, we include a path to the media we want to embed inside the src attribute. We can include other attributes to specify information such as whether we want it to loop, whether we want to show the browser’s default audio controls, etc.

As with the <video> tag, the content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don’t support the element.

This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:

  • The <audio> element doesn’t support the width/height attributes — again, there is no visual component, so there is nothing to assign a width or height to.
  • It also doesn’t support the poster attribute — again, no visual component.

Ejercicio propuesto: ejemplos de audio

Following the previous example, create a web page to insert at least ten figures containing audio samples. Update the caption of each figure to show a brief description of each audio file, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.

You can find thousands of audio samples at: http://bbcsfx.acropolis.org.uk/

El elemento <iframe>

By now you should really be getting the hang of embedding things into your web pages, including images, video and audio. At this point we will like to take somewhat of a sideways step, looking at an element that allow you to embed a wide variety of content types into your webpages: the <iframe> element.

Incrustar un vídeo de YouTube

In this section we are going to jump straight into an active learning example to immediately give you a real idea of just what embedding technologies are useful for. The online world is very familiar with Youtube, but many people don’t know about some of the sharing facilities it has available. Let’s look at how Youtube allows us to embed a video in any page we like using an <iframe>:

  1. First, go to Youtube and find a video you like.
  2. Below the video, you’ll find a Share button — select this to display the sharing options.
  3. Select the Embed button and you’ll be given some <iframe> code — copy this.
<figure>
    <figcaption>Nyan Cat [original].</figcaption>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</figure>

Ejercicio propuesto: Tus 10 vídeos de YouTube preferidos

Following the previous example, create a web page to insert at least ten figures containing videos from Youtube. Update the caption of each figure to show a brief description of each video, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.

Incrustar un mapa de Google Maps

You will also find quite interesting embedding a Google Map. Let’s see how to do this with an example:

  1. Go to Google Maps and find a map you like.
  2. Click on the «Hamburger Menu» (three horizontal lines) in the top left of the user interface.
  3. Select the Share or embed map option.
  4. Select the Embed map option, which will give you some <iframe> code — copy this.
<figure>
    <figcaption>IES San Vicente.</figcaption>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3126.6024620057733!2d-0.5317505844743932!3d38.4044398796498!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6233fea3991575%3A0xf28fcef8c48c1513!2sIES%20San%20Vicente!5e0!3m2!1ses!2ses!4v1601811180214!5m2!1ses!2ses" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</figure>

Ejercicio propuesto: Tus 10 ubicaciones preferidas

Following the previous example, create a web page to insert at least ten figures containing locations from Google Maps. Update the caption of each figure to show a brief description of each location, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.

Test

Comprueba tus conocimientos con este test sobre audio y vídeo y otros conceptos relacionados con esta unidad.

HTML. Unidad 6. Tablas.

Introducción

Esta unidad te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo en el futuro (utilizando CSS).

¿Qué es una tabla?

Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un horario, o información sobre diversos países, como se muestra en este ejemplo:

Países Capitales Población Idioma
USA Washington, D.C. 309 millones Inglés
Suecia Estocolmo 9 millones Sueco

Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:

Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.

¿Cómo crear una tabla?

Veamos un ejemplo práctico y construyamos una tabla simple.

1. Hola, soy tu primera celda. 2. Soy tu segunda celda. 3. Soy tu tercera celda. 4. Soy tu cuarta celda.
5. Segunda fila, primera celda. 6. Segunda fila, segunda celda. 7. Segunda fila, tercera celda. 8. Segunda fila, cuarta celda.

Construyamos la tabla paso a paso:

  1. El contenido de cada tabla está delimitado por las etiquetas <table> ... </table>:
<table>
    1. Hola, soy tu primera celda.
    2. Soy tu segunda celda.
    3. Soy tu tercera celda.
    4. Soy tu cuarta celda.
    5. Segunda fila, primera celda.
    6. Segunda fila, segunda celda.
    7. Segunda fila, tercera celda.
    8. Segunda fila, cuarta celda.
</table>
  1. El contenedor más pequeño dentro de una tabla es la celda, que se crea utilizando el elemento <td> (‘td’ significa ‘table data’). Pondremos el contenido de cada celda entre estas etiquetas:
<table>
    <td>1. Hola, soy tu primera celda.</td>
    <td>2. Soy tu segunda celda.</td>
    <td>3. Soy tu tercera celda.</td>
    <td>4. Soy tu cuarta celda.</td>
    <td>5. Segunda fila, primera celda.</td>
    <td>6. Segunda fila, segunda celda.</td>
    <td>7. Segunda fila, tercera celda.</td>
    <td>8. Segunda fila, cuarta celda.</td>
</table>
  1. Como se puede observar, las celdas no se colocan unas debajo de las otras, sino que se distribuyen automáticamente en la misma fila. Cada elemento <td> crea una celda individual, que se va colocando al final de la fila, haciendo que cada celda que añadamos incremente el tamaño de la fila. Para conseguir que la fila pare de crecer y las siguientes celdas se coloquen en una segunda fila, debemos usar el elemento <tr> (‘tr’ significa ‘table row’). Vamos a hacer esto ahora (encerraremos cada fila en un elemento <tr>, y dentro tendremos los elementos <td> con los contenidos individuales de cada celda):
<table>
    <!-- Primera fila -->
    <tr>
        <td>1. Hola, soy tu primera celda.</td>
        <td>2. Soy tu segunda celda.</td>
        <td>3. Soy tu tercera celda.</td>
        <td>4. Soy tu cuarta celda.</td>
    </tr>

    <!-- Segunda fila -->
    <tr>
        <td>5. Segunda fila, primera celda.</td>
        <td>6. Segunda fila, segunda celda.</td>
        <td>7. Segunda fila, tercera celda.</td>
        <td>8. Segunda fila, cuarta celda.</td>
    </tr>
</table>

Importante: Bordes de la tabla

Por defecto, el navegador no mostrará los bordes de las tablas. Para conseguir que se muestren los bordes, usaremos un poco de código CSS. De momento insertaremos el siguiente código en la sección <head> de cada fichero html que creemos (aprenderemos el significado de este código en otra unidad):

<head>
    ...
    <style>
        table {
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    ...
</body>

Ejercicio propuesto: Tablas simples

Crea una nueva página web, copia y pega un par de veces la tabla del ejemplo anterior y cambia el contenido para obtener el siguiente resultado:

Importante: no olvides utilizar el código CSS del encabezado del documento para mostrar los bordes de la tabla.
uno dos tres cuatro
cinco seis siete ocho
uno dos tres
cuatro cinco seis
siete ocho nueve

Tablas con imágenes

Puedes insertar cualquier contenido dentro de las celdas de una tabla. Por ejemplo, imágenes:

<table>
    <tr>
        <td><img src="https://picsum.photos/id/10/300/200" /></td>
        <td><img src="https://picsum.photos/id/1000/200/200" /></td>
    </tr>
    <tr>
        <td><img src="https://picsum.photos/id/1003/200/200" /></td>
        <td><img src="https://picsum.photos/id/1011/300/200" /></td>
    </tr>
</table>

Ejercicio propuesto: Imágenes de prueba

Crea una tabla de dos columnas y al menos diez filas, e inserta varias imágenes, como se muestra en el ejemplo anterior (con bordes). Copia la misma tabla en un archivo nuevo y añade el código CSS necesario para observar el resultados ahora sin bordes.

Puedes usar por ejemplo imágenes que aparecen en «https://picsum.photos/images» . Sólo necesitas escoger una imagen y utilizar el «id» y el «size» correspondiente. Por ejemplo, «https://picsum.photos/id/1/200/200» es la imagen #1 (width=200px and height=200px). O «https://picsum.photos/id/103/300/200» es la imagen #103 (width=300px and height=200px).

Añadiendo encabezados con elementos <th>

Ahora prestemos atención a los encabezados de las tablas. Son celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna. Para ilustrar por qué son útiles, primero echemos un vistazo a la siguiente tabla:

Table without headers
Dog name Breed Age Eating Habits
Knocky Jack Russell 12 Eats everyone’s leftovers
Poppy Poodle 9 Nibbles at food
Buddy Streetdog 10 Hearty eater
Bailey Cocker Spaniel 5 Will eat till he explodes

Como podemos observar, aunque se puede distinguir perfectamente el contenido de la tabla, no resulta tan fácil hacer referencias cruzadas. Si los encabezados de columna y fila destacaran de alguna manera, podríamos interpretar más fácilmente el contenido de las celdas.

Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <th> (‘th’ significa ‘table header’, encabezado de tabla). Funciona exactamente igual que un <td>, excepto que denota un encabezado, no una celda normal. Si cambiamos todos los elementos <td> de la tabla por elementos <th>, los datos que contienen se verán resaltados por defecto de alguna forma. Por ejemplo:

Table with headers
Dog name Breed Age Eating Habits
Knocky Jack Russell 12 Eats everyone’s leftovers
Poppy Poodle 9 Nibbles at food
Buddy Streetdog 10 Hearty eater
Bailey Cocker Spaniel 5 Will eat till he explodes

En el futuro cambiaremos los estilos de los elementos <td> y <th> utilizando CSS. Por ahora, concentrémonos en el código HTML:

<table>
    <tr>
        <th>Dog name</th>
        <th>Breed</th>
        <th>Age</th>
        <th>Eating Habits</th>
    </tr>
    <tr>
        <th>Knocky</th>
        <td>Jack Russell</td>
        <td>12</td>
        <td>Eats everyone's leftovers</td>
    </tr>
    <tr>
        <th>Poppy</th>
        <td>Poodle</td>
        <td>9</td>
        <td>Nibbles at food</td>
    </tr>
    <tr>
        <th>Buddy</th>
        <td>Street dog</td>
        <td>10</td>
        <td>Hearty eater</td>
    </tr>
    <tr>
        <th>Bailey</th>
        <td>Cocker Spaniel</td>
        <td>5</td>
        <td>Will eat till he explodes</td>
    </tr>        
</table>

Ejercicio propuesto: Paseador de perros

Crea una página web con una tabla similar a la del ejemplo anterior, para guardar la información de todos los clientes de un paseador de perros. Primero debe agregar tres columnas adicionales (para mantener el nombre de los propietarios, sus números de teléfono y las fotos de los perros). Después de eso, debes insertar varias filas para mostrar los datos de al menos diez perros.

En este caso puedes utilizar otro sitio web para obtener imágenes de prueba sobre perros: «https://placedog.net/images«. Accede a esta URL y sigue las instrucciones que aparecen en la parte superior de la página para insertar cada imagen. Por ejemplo:
Dog name Owner Phone number Breed Age Eating Habits Picture
Knocky Fernando Ruiz 111222333 Jack Russell 12 Eats everyone’s leftovers
Poppy John Doe 222333444 Poodle 9 Nibbles at food
Buddy Peter Stark 333444555 Street dog 10 Hearty eater
Bailey Steve Doe 666777888 Cocker Spaniel 5 Will eat till he explodes

Añadir un título a tu tabla con <caption>

Puedes dar un título a tu tabla colocándolo dentro de un elemento <caption> y anidándolo dentro del elemento <table>. Debes ponerlo justo debajo de la etiqueta de apertura <table>:

<table>
  <caption>Dinosaurios en el período Jurásico</caption>

  ...
</table>

Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.

Ejercicio propuesto: Tabla sencilla con título y encabezados

Crea una página web con una tabla similar a la siguiente e inserta algunas filas adicionales (al menos diez).

Utiliza un elemento <caption> para poner el texto «Tabla simple con encabezados», y utiliza el elemento <th> para los encabezados «Nombre» and «Apellidos» headers.
Tabla simple con encabezados
Nombre Apellidos
John Doe
Fernando Ruiz

Ejercicio propuesto: Lista de países

Crea una tabla con cinco columnas y al menos diez filas, e inserta los datos relacionados con varios países. Puedes enumerar, por ejemplo, los nombres de los países, sus capitales, su población, el idioma y varias imágenes, como hicimos en el ejemplo al principio de la unidad, pero añadiendo una nueva columna para mostrar una imagen. Tienes que usar encabezados de tabla (<th>) y un título (<caption>). Tu tabla se debería parecer a la que se muestra a continuación.

Puedes usar de nuevo la web «https://picsum.photos/images» para coger diversas imágenes que puedan resultar representativas de cada país.
Countries I like
Countries Capitals Population Language Images
USA Washington, D.C. 309 million English
Sweden Stockholm 9 million Swedish

Ampliar las filas y las columnas

Para proporcionar control adicional sobre cómo las celdas se ajustan o se expanden sobre las columnas, podemos usar el atributo colspan en los elementos <th> y <td>. Este atributo nos permitirá especificar cuántas columnas debe ocupar una celda (el valor por defecto es 1). De forma similar, podemos utilizar el atributo rowspan para especificar sobre cuántas filas se extiende una determinada celda.

El siguiente ejemplo muestra una tabla muy sencilla que enumera los nombres de las personas junto con información diversa sobre la membresía en un club. Hay solo cuatro filas (incluida una fila de encabezado), cada una con cuatro columnas (incluida una columna de encabezado):

Name ID Member Since Balance
Margaret Nguyen 427311 0.00
Edvard Galinski 533175 37.00
Hoshi Nakamura 601942 15.00
<table>
  <tr>
    <th>Name</th>
    <th>ID</th>
    <th>Member Since</th>
    <th>Balance</th>
  </tr>
  <tr>
    <td>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>0.00</td>
  </tr>
  <tr>
    <td>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01-13">January 13, 2011</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <td>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>15.00</td>
  </tr>
</table>

Añadamos ahora otra columna que muestre la fecha en que finalizó la membresía de un usuario, junto con un encabezado sobre las fechas de «afiliación» y «cancelada» llamada «Fechas de membresía». Esto implica agregar intervalos de filas y columnas a la tabla, de modo que las celdas de encabezado puedan terminar en los lugares correctos. Veamos primero cómo quedaría la tabla:

Name ID Membership Dates Balance
Joined Canceled
Margaret Nguyen 427311 n/a 0.00
Edvard Galinski 533175 37.00
Hoshi Nakamura 601942 n/a 15.00

Observa que el área de encabezado aquí ocupa en realidad dos filas, una con los encabezados «Nombre», «ID», «Fechas de membresía» y «Saldo», y la otra con los encabezados «Afiliación» y «Cancelado», que son los subtítulos que aparecen debajo de «Fechas de membresía». Esto se logra mediante:

  • Poniendo los encabezados de la primera fila («Name», «ID», y «Balance») en una celda que se expanda a la fila siguiente, utilizando el atributo rowspan, de forma que tengan una altura de dos filas.
  • Poniendo el encabezado «Membership Dates» de la primera fila en una celda que se expanda a la siguiente columna usando el atributo colspan attribute, que provocará que el encabezado tenga una anchura de dos columnas.
  • Creando una segunda fila de elementos <th> que contenga los encabezados «Joined» y «Canceled». Como las otras celdas ya están ocupadas por sus equivalentes en la primera fila, y se expanden a la segunda, las nuevas celdas se deberían colocar correctamente debajo del encabezado «Membership Dates».

El código HTML es similar al del ejemplo anterior, excepto que debemos añadir una nueva columna en cada fila, y también tenemos que cambiar el encabezado, para que quede de la siguiente forma:

<table>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">ID</th>
    <th colspan="2">Membership Dates</th>
    <th rowspan="2">Balance</th>
  </tr>
  <tr>
    <th>Joined</th>
    <th>Canceled</th>
  </tr>
  <tr>
    <th>Margaret Nguyen</td>
    <td>427311</td>
    <td><time datetime="2010-06-03">June 3, 2010</time></td>
    <td>n/a</td>
    <td>0.00</td>
  </tr>
  <tr>
    <th>Edvard Galinski</td>
    <td>533175</td>
    <td><time datetime="2011-01013">January 13, 2011</time></td>
    <td><time datetime="2017-04008">April 8, 2017</time></td>
    <td>37.00</td>
  </tr>
  <tr>
    <th>Hoshi Nakamura</td>
    <td>601942</td>
    <td><time datetime="2012-07-23">July 23, 2012</time></td>
    <td>n/a</td>
    <td>15.00</td>
  </tr>
</table>

Las diferencias que importan aquí (relativas a la expansión de filas y columnas) se encuentran en las primeras líneas del código del ejemplo anterior. Simplemente utilizamos rowspan para conseguir que los encabezados «Name», «ID», y «Balance» ocupen dos filas en vez de una, y usamos colspan para conseguir que el encabezado «Membership Dates» se extienda a lo largo de dos columnas.

Ejercicio propuesto: Tu horario

Crea una página web para mostrar tu horario del instituto. Deberías crear una tabla similar a la que se muestra a continuación.

Se deben utilizar elementos <th> para los encabezados, y el atributo colspan para los recreos. También puedes usar el elemento <strong> para resaltar el nombre de la asignatura de cada celda.
Monday Tuesday Wednesday Thursday Friday
07:55h Computer Safety
Peter Williams
Computer Safety
Peter Williams
Computer Safety
Peter Williams
08:50h Network Services
Samuel Holland
Computer Safety
Peter Williams
Network Services
Samuel Holland
Computer Safety
Peter Williams
09:45h Network Operating Systems
Lucy Scott
Network Services
Samuel Holland
Web Applications
Fernando Ruiz
Network Services
Samuel Holland
Network Services
Samuel Holland
10:40h B R E A K
11:00h Network Operating Systems
Lucy Scott
Network Operating Systems
Lucy Scott
Business and Entrepreneurial Initiative
Rick Harris
Web Applications
Fernando Ruiz
Network Services
Samuel Holland
11:55h Business and Entrepreneurial Initiative
Rick Harris
Network Operating Systems
Lucy Scott
Network Operating Systems
Lucy Scott
Web Applications
Fernando Ruiz
Web Applications
Fernando Ruiz
12:50h B R E A K
13:10h Network Services
Samuel Holland
Business and Entrepreneurial Initiative
Rick Harris
Network Operating Systems
Lucy Scott
Network Operating Systems
Lucy Scott
Web Applications
Fernando Ruiz
14:05h Network Services
Samuel Holland
Web Applications
Fernando Ruiz
Network Operating Systems
Lucy Scott

Estructurar la tabla con <thead>, <tbody> and <tfoot>

A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con <thead><tfoot> y <tbody>, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.

The table header
First cell in the table body Second cell in the table body
<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First cell in the table body</td>
            <td>Second cell in the table body</td>
        </tr>
    </tbody>
</table>

Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.

Para utilizar todos estos elementos solo debes tener en cuenta las siguientes consideraciones:

  • El elemento <thead> debe delimitar el encabezado de la tabla; esta suele ser la primera fila, que contiene los encabezados de las columnas, pero no siempre es así. Si utilizas los elementos <col>/<colgroup>, el encabezado de la tabla debe estar justo debajo.
  • El elemento <tfoot> delimita la parte de la tabla correspondiente al pie de página; esta podría ser una fila final con elementos en las filas anteriores. Puedes incluir el pie de página de la tabla justo en la parte inferior de la tabla, donde esperarías que esté, o justo debajo del encabezado (y el navegador lo mostrará aun así en la parte inferior de la tabla).
  • El elemento <tbody> delimita las otras partes del contenido de la tabla que no están en el encabezado o en el pie de página de la tabla. Aparecerá debajo del encabezado de la tabla o, a veces, en el pie de página, según cómo hayas decidido estructurarlo.

Los elementos <thead> +<tbody>

Añadamos por ejemplo los elementos <thead> y <tbody> a la tabla de los miembros del club:

Name ID Membership Dates Balance
Joined Canceled
Margaret Nguyen 427311 n/a 0.00
Edvard Galinski 533175 37.00
Hoshi Nakamura 601942 n/a 15.00
<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">ID</th>
      <th colspan="2">Membership Dates</th>
      <th rowspan="2">Balance</th>
    </tr>
    <tr>
      <th>Joined</th>
      <th>Canceled</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Margaret Nguyen</td>
      <td>427311</td>
      <td><time datetime="2010-06-03">June 3, 2010</time></td>
      <td>n/a</td>
      <td>0.00</td>
    </tr>
    <tr>
      <th scope="row">Edvard Galinski</td>
      <td>533175</td>
      <td><time datetime="2011-01013">January 13, 2011</time></td>
      <td><time datetime="2017-04008">April 8, 2017</time></td>
      <td>37.00</td>
    </tr>
    <tr>
      <th scope="row">Hoshi Nakamura</td>
      <td>601942</td>
      <td><time datetime="2012-07-23">July 23, 2012</time></td>
      <td>n/a</td>
      <td>15.00</td>
    </tr>
  </tbody>
</table>

Ejercicio propuesto: Miembros de un club

Crea una página web para mostrar una lista con los miembros de un club, tal como lo hemos hecho en el ejemplo anterior. Puede usar el mismo código fuente que se explicó anteriormente, pero debes añadir un par de columnas: una para escribir la dirección de correo electrónico de cada miembro y la otra para mostrar sus fotos. También debes añadir varias filas a la tabla para que contenga al menos diez miembros del club (puede usar nombres, fechas y saldos aleatorios).

Los elementos <thead> +<tbody> +<tfoot>

Ahora vamos a ver todos estos nuevos elementos en acción con otra tabla, donde usaremos todas las secciones posibles (<thead>, <tbody> y <tfoot>). Echa un vistazo al siguiente ejemplo:

How I chose to spend my money
Purchase Location Date Evaluation Cost (€)
SUM 118
Haircut Hairdresser 12/20 Great idea 30
Lasagna Restaurant 12/20 Regrets 18
Shoes Shoeshop 13/20 Big regrets 65
Toothpaste Supermarket 13/20 Good 5

Debemos poner las filas de los encabezados dentro del elemento <thead>, la fila de la suma dentro de un elemento <tfoot>, y el resto del contenido dentro de un elemento <tbody>. Verás que añadiendo el elemento <tfoot> provoca que la fila de la suma se coloque al final de la tabla. Y para acabar, añadiremos el atributo colspan para conseguir que la celda de la suma se expanda por las cuatro primeras columnas. De esta forma, el número aparece debajo de la columna de costes.

<table>
    <caption>How I chose to spend my money</caption>
    <thead>
        <tr>
            <th>Purchase</th>
            <th>Location</th>
            <th>Date</th>
            <th>Evaluation</th>
            <th>Cost (€)</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">SUM</td>
            <td>118</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Haircut</td>
            <td>Hairdresser</td>
            <td>12/20</td>
            <td>Great idea</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Lasagna</td>
            <td>Restaurant</td>
            <td>12/20</td>
            <td>Regrets</td>
            <td>18</td>
        </tr>
        <tr>
            <td>Shoes</td>
            <td>Shoeshop</td>
            <td>13/20</td>
            <td>Big regrets</td>
            <td>65</td>
        </tr>
        <tr>
            <td>Toothpaste</td>
            <td>Supermarket</td>
            <td>13/20</td>
            <td>Good</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

Ejercicio propuesto: Cómo gastar tu dinero

Crea una página web para especificar cómo gastarías tu dinero. Puedes usar el mismo código fuente que en el ejemplo anterior, pero debes realizar los siguientes cambios: agrega varias filas con cualquier cosa que te gustaría hacer (al menos diez filas), y finalmente en la columna «Ubicación» debes usar imágenes en lugar de texto.

Puedes acceder de nuevo a la página web «https://picsum.photos/images» para obtener imágenes de tus sitios preferidos.

Ejercicio propuesto: Títulos

Añade títulos a las tablas que has creado anteriormente y que aún no tienen ningún título. No olvides volver a validar tu código.

Ejercicio propuesto: Estructura de tabla

Añade secciones de encabezado, pie y cuerpo a todas las tablas que hayas creado en ejercicios anteriores y aún no tengan esas secciones. No olvides volver a validar tu código.

Test

Comprueba tus conocimientos con este test sobre tablas y otros conceptos relacionados con esta unidad.