Programación con JavaScript: Cuadros de diálogo con SweetAlert

SweetAlert es una popular librería de JavaScript que permite crear cuadros de diálogo más atractivos y funcionales que los cuadros de diálogo nativos de JavaScript (alert, confirm, prompt). Ofrece una amplia gama de opciones personalizables, como iconos, botones, animaciones, y más, lo que la convierte en una excelente opción para mejorar la interacción del usuario en aplicaciones web modernas.

Cómo Comenzar con SweetAlert

Primero, necesitas incluir SweetAlert en tu proyecto. Puedes hacerlo de varias maneras, pero la forma más sencilla es mediante la inclusión directa de la librería desde un CDN (Content Delivery Network) en tu archivo HTML. Aquí mostramos cómo hacerlo:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Asegúrate de incluir esta línea en la sección <head> o al final del cuerpo (<body>) de tu archivo HTML, antes de usar las funciones de SweetAlert.

Ejemplos Básicos de Uso

Mostrar un Alerta Simple

Swal.fire('Hola mundo!');

Este código mostrará un cuadro de diálogo simple con el mensaje «Hola mundo!».

Mostrar un Alerta con Título y Texto

Swal.fire({
  title: '¡Error!',
  text: 'Algo salió mal.',
  icon: 'error',
});

Este ejemplo muestra un cuadro de diálogo con un título, un mensaje y un ícono que indica un error.

Confirmación

SweetAlert también puede usarse para crear un cuadro de diálogo de confirmación similar al confirm() nativo de JavaScript, pero con una apariencia mucho más atractiva y opciones de personalización.

Swal.fire({
  title: '¿Estás seguro?',
  text: "¡No podrás deshacer esta acción!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Sí, bórralo'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      '¡Borrado!',
      'Tu archivo ha sido borrado.',
      'success'
    )
  }
});

Este código muestra un cuadro de diálogo de confirmación con botones personalizados. Si el usuario confirma la acción, se muestra otro cuadro de diálogo indicando el éxito de la operación.

Prompt Personalizado

Para crear un cuadro de diálogo que solicite información al usuario, similar a prompt(), puedes usar SweetAlert de la siguiente manera:

(async () => {
  const { value: nombre } = await Swal.fire({
    title: 'Introduce tu nombre',
    input: 'text',
    inputLabel: 'Tu nombre',
    inputPlaceholder: 'Escribe tu nombre aquí'
  });

  if (nombre) {
    Swal.fire(`Tu nombre es: ${nombre}`);
  }
})();

Este fragmento abre un cuadro de diálogo que solicita al usuario su nombre y luego muestra un saludo personalizado con el nombre introducido.

Ventajas de Usar SweetAlert

  • Personalización: SweetAlert permite personalizar completamente los cuadros de diálogo, desde el texto y los botones hasta los colores e iconos, adaptándose así a la estética de tu aplicación web.
  • Facilidad de uso: A pesar de su riqueza en características, SweetAlert es muy fácil de usar, con una API clara y documentación extensa.
  • Mejora la experiencia del usuario: Los cuadros de diálogo creados con SweetAlert son visualmente atractivos y pueden mejorar significativamente la experiencia del usuario en comparación con los cuadros de diálogo nativos.

Consejos para principiantes

  • Practica: Experimenta con las diferentes opciones que ofrece SweetAlert. Prueba diferentes combinaciones de configuraciones para ver cómo afectan a la apariencia y el comportamiento de los cuadros de diálogo.
  • Lee la documentación: SweetAlert tiene una documentación extensa y ejemplos que pueden ayudarte a entender todas sus capacidades y cómo utilizarlas eficazmente.
  • Considera la accesibilidad: Asegúrate de que tus cuadros de diálogo sean accesibles, proporcionando una buena experiencia de usuario para todas las personas, incluidas aquellas que utilizan tecnologías de asistencia.

Conclusión

SweetAlert es una herramienta poderosa y flexible para mejorar las interacciones con el usuario en tus aplicaciones web. Con una amplia gama de opciones personalizables y una API fácil de usar, puedes crear cuadros de diálogo atractivos y funcionales que mejoren la experiencia del usuario y hagan que tu aplicación web se destaque.

Programación con JavaScript: Cuadros de diálogo

Los cuadros de diálogo en JavaScript se utilizan para interactuar con los usuarios mediante mensajes emergentes, solicitando información o simplemente notificando algo. JavaScript ofrece tres métodos principales para este propósito: alert(), confirm(), y prompt(). Estos métodos son bastante simples de usar y son fundamentales para la interacción básica en páginas web.

Alert

El método alert() se utiliza para mostrar un mensaje al usuario. Este método pausa la ejecución del script hasta que el usuario cierra el cuadro de diálogo. No retorna ningún valor.

Ejemplo de código:

alert("Hola, bienvenido a nuestra página web!");

Cómo funciona:

  • Cuando este código se ejecuta, aparece un cuadro de diálogo con el mensaje «Hola, bienvenido a nuestra página web!».
  • El usuario debe hacer clic en «Aceptar» para cerrar el cuadro de diálogo y continuar.

Confirm

El método confirm() se utiliza para mostrar un mensaje y dos botones, «Aceptar» y «Cancelar». Este método es útil cuando necesitas que el usuario confirme una acción. Devuelve un valor booleano: true si el usuario hace clic en «Aceptar» y false si el usuario hace clic en «Cancelar».

Ejemplo de código:

if (confirm("¿Estás seguro de que quieres eliminar este elemento?")) {
    // El usuario hizo clic en "Aceptar", pon aquí el código para eliminar el elemento
    alert("Elemento eliminado.");
} else {
    // El usuario hizo clic en "Cancelar", puedes manejar esta acción aquí
    alert("Operación cancelada.");
}

Cómo funciona:

  • Este código muestra un cuadro de diálogo con el mensaje «¿Estás seguro de que quieres eliminar este elemento?» y dos botones.
  • Si el usuario hace clic en «Aceptar», se muestra un nuevo cuadro de diálogo que dice «Elemento eliminado.».
  • Si el usuario hace clic en «Cancelar», se muestra un cuadro de diálogo que dice «Operación cancelada.».

Prompt

El método prompt() se utiliza para solicitar al usuario que introduzca algún texto. Aparece un cuadro de diálogo con un campo de texto y dos botones, «Aceptar» y «Cancelar». Devuelve el texto introducido si el usuario hace clic en «Aceptar» y null si el usuario hace clic en «Cancelar».

Ejemplo de código:

let nombre = prompt("¿Cuál es tu nombre?", "Escribe tu nombre aquí");
if (nombre) {
    alert("Hola, " + nombre + "!");
} else {
    alert("No has introducido tu nombre.");
}

Cómo funciona:

  • Este código muestra un cuadro de diálogo pidiendo al usuario su nombre, con un campo de texto que contiene el texto «Escribe tu nombre aquí» por defecto.
  • Si el usuario escribe su nombre y hace clic en «Aceptar», se muestra un saludo personalizado.
  • Si el usuario hace clic en «Cancelar», se muestra el mensaje «No has introducido tu nombre».

Buenas Prácticas

  • Usabilidad: Aunque los cuadros de diálogo son útiles, su uso excesivo puede ser molesto para los usuarios. Úsalos solo cuando sea necesario.
  • Claridad: Asegúrate de que los mensajes en los cuadros de diálogo sean claros y directos para evitar confusiones.
  • Accesibilidad: Considera la accesibilidad y la experiencia del usuario en dispositivos móviles.

Conclusión

Los cuadros de diálogo son herramientas sencillas y muy útiles para la interacción básica en JavaScript. Permiten obtener confirmaciones, mostrar alertas informativas y solicitar datos de los usuarios de manera efectiva. Experimentar con estos métodos te ayudará a entender mejor cómo y cuándo utilizarlos para mejorar la experiencia del usuario en tus aplicaciones web.

Programación con JavaScript: Almacenamiento de datos

En esta unidad hablaremos de localStorage, un mecanismo de almacenamiento muy versátil y sencillo. Se trata de una herramienta diseñada para mejorar la experiencia del usuario al permitir que las aplicaciones web guarden y recuperen datos directamente en el navegador de manera eficiente y sin necesidad de una constante comunicación con el servidor.

A diferencia de las cookies, los datos almacenados a través de localStorage son específicos para el protocolo, el dominio y el puerto del sitio web, y no se envían al servidor en cada solicitud HTTP. Esto lo hace ideal para almacenar información que no necesita ser enviada al servidor, como preferencias del usuario o datos de estado de la aplicación.

localStorage vs cookies

El uso de localStorage frente a cookies para almacenar datos en el navegador web tiene varias ventajas que lo hacen más conveniente en muchas situaciones. A continuación, se detallan las principales razones:

Capacidad de Almacenamiento

  • localStorage: Ofrece una capacidad de almacenamiento mucho mayor que las cookies. Mientras que localStorage puede almacenar hasta 5MB o más de datos por origen en la mayoría de los navegadores, las cookies están limitadas a aproximadamente 4KB por cookie. Esta diferencia de capacidad hace que localStorage sea mucho más adecuado para almacenar grandes cantidades de datos, como preferencias del usuario, datos de estado de la aplicación, y más.

Rendimiento

  • Envío al servidor: Las cookies se envían con cada solicitud HTTP al servidor, lo que puede aumentar innecesariamente el tráfico de red y afectar el rendimiento, especialmente en aplicaciones web con mucho tráfico o que realizan muchas solicitudes al servidor. localStorage, por otro lado, solo almacena datos en el lado del cliente y no afecta el tráfico de red, ya que los datos no se envían al servidor con cada solicitud.

Facilidad de Uso

  • API simple: localStorage proporciona una API simple y fácil de usar para almacenar y acceder a los datos, basada en el sistema clave-valor. Las cookies, aunque no son especialmente difíciles de usar, requieren un manejo más cuidadoso, especialmente cuando se trata de establecer parámetros como fechas de expiración, dominios, y caminos, así como la codificación y decodificación de sus valores.

Persistencia

  • Duración: Los datos almacenados en localStorage persisten hasta que se eliminan explícitamente mediante código o se limpia el almacenamiento del navegador. Las cookies, sin embargo, tienen una fecha de expiración y se eliminan automáticamente cuando alcanzan esa fecha. Esto hace que localStorage sea más conveniente para almacenar datos que deben persistir a largo plazo o indefinidamente.

Seguridad

  • Acceso a datos: Mientras que localStorage no es inherentemente más seguro que las cookies en términos de vulnerabilidades a ataques como XSS (Cross-Site Scripting), el hecho de que no se envíe con cada solicitud HTTP reduce la superficie de ataque para ciertos tipos de ataques (como CSRF, Cross-Site Request Forgery), ya que los datos almacenados en localStorage no se incluyen automáticamente en cada solicitud.

Uso Específico

  • Sin Interferencia con el servidor: Dado que localStorage está diseñado para el almacenamiento exclusivo del lado del cliente, es ideal para casos de uso donde los datos no necesitan ser enviados al servidor con cada solicitud. Esto lo hace adecuado para aplicaciones web ricas en clientes (SPA, Single-Page Applications), donde se necesita mantener el estado de la aplicación o almacenar grandes cantidades de datos del lado del cliente.

Conclusión

localStorage ofrece ventajas significativas sobre las cookies en términos de capacidad de almacenamiento, rendimiento, facilidad de uso, y persistencia de datos. Estas características lo hacen más conveniente para almacenar datos del lado del cliente en muchas aplicaciones web modernas. Sin embargo, es importante tener en cuenta que tanto localStorage como las cookies tienen sus roles y casos de uso específicos, y la elección entre uno u otro debe basarse en los requisitos específicos de la aplicación y las consideraciones de seguridad.

Cómo Funciona localStorage

localStorage proporciona un almacenamiento clave-valor simple, donde tanto las claves como los valores son cadenas de texto. Cada origen (es decir, combinación de protocolo, dominio y puerto) tiene su propio espacio de almacenamiento, limitado generalmente a 5MB por origen, aunque este límite puede variar según el navegador.

Métodos Principales

  • setItem(key, value): Permite almacenar un valor, identificado por una clave. Si la clave ya existe, el valor anterior se reemplaza.
  • getItem(key): Devuelve el valor asociado a una clave. Si la clave no existe, retorna null.
  • removeItem(key): Elimina el par clave-valor especificado.
  • clear(): Elimina todos los pares clave-valor almacenados por el dominio.
  • key(index): Devuelve el nombre de la clave en la posición dada.

Ejemplos con Código

Guardar Datos

Para guardar datos en localStorage, se utiliza el método setItem, especificando una clave y un valor:

localStorage.setItem('usuario', 'Juan');
localStorage.setItem('tema', 'oscuro');

Leer Datos

Para leer datos de localStorage, se utiliza el método getItem, pasando la clave del dato que se desea recuperar:

let usuario = localStorage.getItem('usuario'); // 'Juan'
let tema = localStorage.getItem('tema'); // 'oscuro'

Eliminar Datos

Para eliminar un dato específico, se utiliza removeItem, proporcionando la clave del dato a eliminar:

localStorage.removeItem('usuario');

Eliminar Todos los Datos

Para eliminar todos los datos almacenados por el dominio en localStorage, se utiliza el método clear:

localStorage.clear();

Almacenar Objetos

localStorage solo puede almacenar cadenas de texto. Para almacenar objetos, es necesario convertirlos a una cadena JSON usando JSON.stringify antes de guardarlos, y luego convertirlos de nuevo a un objeto usando JSON.parse al recuperarlos:

let usuario = { nombre: 'Juan', edad: 30 };

// Guardar el objeto como una cadena JSON
localStorage.setItem('usuario', JSON.stringify(usuario));

// Leer la cadena JSON y convertirla de nuevo a objeto
let usuarioGuardado = JSON.parse(localStorage.getItem('usuario'));

console.log(usuarioGuardado.nombre); // 'Juan'

Uso Práctico

localStorage es útil para guardar todo tipo de preferencias y datos de usuario que deben persistir entre sesiones del navegador. Algunos ejemplos incluyen:

  • Preferencias de tema (claro/oscuro)
  • Información de sesión de usuario (no sensible)
  • Datos de formularios autocompletados
  • Estados de la interfaz de usuario (por ejemplo, si un menú lateral está expandido o no)

Limitaciones y Consideraciones

  • Seguridad: No se debe almacenar información sensible como contraseñas o datos personales debido a que la información está accesible desde el cliente.
  • Compatibilidad: Aunque ampliamente soportado, es buena práctica verificar la disponibilidad de localStorage antes de usarlo.
  • Límite de almacenamiento: Generalmente limitado a 5MB por origen, puede variar según el navegador.
  • Origen específico: Los datos almacenados son accesibles solo por páginas del mismo origen.

Vídeos increíbles de Realidad Virtual

La tecnología nos ofrece formas increíbles de explorar el mundo sin salir de casa. A través de vídeos en 360° y realidad virtual, podemos experimentar desde emocionantes montañas rusas hasta tranquilos paisajes naturales. Esta colección de enlaces te llevará en un viaje virtual inmersivo, ofreciéndote experiencias únicas desde diferentes rincones del planeta y más allá. Prepárate para sumergirte en aventuras visuales y auditivas como nunca antes.

Canales de YouTube y Vimeo sobre Realidad Virtual

  • 360: Descubre maravillas del mundo en vídeos de 360°.
  • AirPano VR: Experimenta vistas aéreas espectaculares en realidad virtual.
  • VR Planet: Viaja a destinos exóticos con contenido VR único.
  • Vicinity360: Experiencias únicas de realidad virtual en 360º.
  • mvr: Diversidad de experiencias en realidad virtual.
  • Black Studios XR: Sumérgete en experiencias inmersivas en XR.
  • VR360 Cinema: Disfruta de películas y cortometrajes en formato 360°.
  • 360 Horizons: Explora paisajes y horizontes impresionantes en 360°.
  • Virtual Reality 360 Video Channel: Una variedad de contenido emocionante en 360°.
  • Vimeo 360 VR: Una plataforma con vídeos creativos y artísticos en formato 360° y VR.

Naturaleza y paisajes

  • China: Ver vídeo. Te muestra la cultura y tradiciones milenarias de China. Recorre sus ciudades vibrantes, monumentos históricos y paisajes impresionantes.
  • Paisajes del mundo: Ver vídeo. Te presenta una selección de los paisajes más impresionantes del planeta. Déjate sorprender por la belleza natural de nuestro mundo.
  • Pandemia alrededor del mundo: Ver vídeo. Documenta el impacto global de la pandemia de COVID-19. Conoce las diferentes medidas tomadas por los países para combatir el virus.
  • Isla Hamilton: Ver vídeo. Te invita a descubrir la belleza natural de la isla Hamilton en Australia. Disfruta de sus playas paradisíacas, arrecifes de coral y exuberante vegetación.
  • Cascada del Salto del Ángel: Ver vídeo. Visión panorámica del Salto Ángel, la cascada más alta del mundo. Hasta este momento, nadie había podido capturar el Salto Ángel en formato de vídeo 360°.
  • Formaciones rocosas de Manpupuner: Ver vídeo. Rusia ofrece una gran variedad de magníficos monumentos naturales, como las formaciones rocosas de Manpupuner, los ídolos de piedra en el distrito Troitsko-Pechorsky de la República de Komi. En 2008, las formaciones fueron reconocidas como una de las Siete Maravillas de Rusia.
  • Cueva Chauvet: Ver vídeo. Te invita a explorar las pinturas rupestres de la Cueva Chauvet en Francia. Admira estas impresionantes obras de arte prehistórico.
  • África: Ver vídeo. Te lleva a un safari por las vastas llanuras de África. Observa la increíble diversidad de animales salvajes que habitan este continente.
  • Antártida: Ver vídeo. Explora una colonia de pingüinos y focas mientras se aproxima una tormenta.
  • Polo Sur: Ver vídeo. Te lleva a un viaje al Polo Sur, el lugar más austral de la Tierra. Experimenta la inmensidad y el frío extremo de este continente helado.
  • Mago David Blaine vuela a 7.500m.: Ver vídeo. Muestra el proceso de preparación para conseguir realizar tal hazaña. Percibirás los riesgos que implica y apreciarás la increíble satisfacción de Blaine al conseguir superar este reto ascendiendo a esa increíble altitud.
  • Escalada: Ver vídeo. Serás consciente de la preparación física y mental necesaria para la escalada. Además experimentarás las dificultades y peligros a los que se enfrentan los escaladores, y también serás partícipe de la emoción de llegar a la cima.
China
Paisajes del mundo
Pandemia alrededor del mundo
Isla Hamilton
Formaciones rocosas de Manpupuner
Cueva Chauvet
África
Antártida
Polo Sur
Mago David Blaine vuela a 7.500m
Escalada

Animales

  • Tiburones: Ver vídeo 1 | Ver vídeo 2. Sumérgete en el fascinante mundo de los tiburones. Conoce diferentes especies, sus características y su papel en el ecosistema marino.
  • Leones: Ver vídeo. Crecer es una lucha, especialmente si eres un joven león. En esta película de realidad virtual de National Geographic, te encontrarás cara a cara con Gibson y su madre, mientras luchan contra el macho alfa de su manada. ¿Dejar la seguridad de la manada es la única esperanza de supervivencia de Gibson?
  • Tiburón martillo: Ver vídeo. Sumérgete en este video de 360° y enfréntate cara a cara con un curioso tiburón martillo gigante.
  • Ballenas: Ver vídeo. Te presenta la majestuosidad de las ballenas, los animales más grandes del planeta. Observa estos increíbles cetáceos en su hábitat natural.
  • Criaturas marinas: Ver vídeo. Descubre las increíbles criaturas que habitan en las profundidades del océano.
  • Monstruos del océano: Ver vídeo. Explora diferentes zonas del océano, desde la superficie hasta la fosa abisal, mostrando una gran variedad de animales poco conocidos, como el pez ojo de barril, el calamar gigante y el tiburón duende.
  • Oso perezoso: Ver vídeo. Explora la jungla costarricense mientras una perezosa de tres dedos se abre camino desde el suelo hasta el dosel de la selva.
Tiburones
Tiburones
Leones
Tiburón martillo
Ballenas
Criaturas marinas
Monstruos del océano
Oso perezoso

Espacio

  • Paseo espacial: Ver vídeo. Lánzate al vacío desde 400 kilómetros sobre la Tierra con este galardonado paseo espacial en realidad virtual, inspirado en el programa de entrenamiento de la NASA y las asombrosas experiencias de sus astronautas.
  • Viaje por el universo: Ver vídeo. Te embarca en una fascinante aventura espacial. Explora las estrellas, planetas y galaxias que conforman nuestro universo.
  • Eclipse solar desde el espacio: Ver vídeo. Te ofrece una vista única del eclipse solar desde la perspectiva de la Estación Espacial Internacional.
  • Alunizaje: Ver vídeo. Sumérgete en la misión espacial Apolo 11 de la NASA en 360 grados. Experimenta el lanzamiento del cohete y el alunizaje en realidad virtual.
  • Sonda de la NASA en Saturno: Ver vídeo. Te muestra las imágenes y descubrimientos de la sonda Cassini durante su viaje a Saturno.
  • Agujero de gusano: Ver vídeo. Explora la posibilidad de la existencia de agujeros de gusano, como atajos a través del espacio-tiempo.
Paseo espacial
Viaje por el universo
Eclipse solar desde el epacio
Alunizaje
Sonda de la NASA en Saturno
Agujero de gusano

Parques de atracciones

  • Montaña rusa real: Ver vídeo. Te lleva a través de las subidas, bajadas, giros y vueltas de la montaña rusa, permitiéndote sentir la adrenalina y la emoción de la experiencia.
  • Montaña rusa virtual: Ver vídeo. Te lleva a un emocionante viaje a través de una montaña rusa. Siente la adrenalina mientras subes, bajas y giras en este trepidante recorrido.
  • Parque acuático: Ver vídeo. Un tobogán a gran velocidad en una isla tropical llena de sorpresas.
  • Montaña rusa virtual de Bob Esponja: Ver vídeo. Montaña rusa en 360 grados con el mundo submarino temático de Bob Esponja de Nickelodeon, inspirado en el nuevo juego Battle for Bikini Bottom Rehydrated.
Montaña rusa real
Montaña rusa virtual
Parque acuático
Montaña rusa Bob Esponja

Experiencias musicales

  • Banda sonora de Avatar: Escuchar. La Orquesta Sinfónica Nacional Danesa te presenta la Suite Avatar en VR y con audio espacial en el concierto Galaxymphony.
  • Ópera de Sídney: Escuchar. La Ópera de Sídney es un ícono australiano y uno de los centros de artes escénicas más activos del mundo. Encontrarás actuaciones, contenido detrás de escena e historias de los espacios bajo las velas. Con más de 40 espectáculos a la semana en la Ópera de Sídney, hay algo para todos los gustos.
  • Quinta sinfonía de Beethoven: Escuchar. Una experiencia filarmónica con la Orquesta Filarmónica de Róterdam, Países Bajos. Te ofrece 6 puntos de vista diferentes, tanto para tus ojos como para tus oídos, situándote en el centro de la orquesta, como si fueras uno de los músicos. Cada ubicación cuenta con un paisaje sonoro único, lo que convierte esta experiencia de la famosa Quinta de Beethoven en algo completamente nuevo.
  • Novena sinfonía de Beethoven: Escuchar. Ludwig van Beethoven, Sinfonía n.° 9 (1.er movimiento) / Director: Sir Simon Rattle, Orquesta Filarmónica de Berlín / Ensayo grabado en vídeo de 360 grados en la Filarmónica de Berlín.
  • Orquesta BBC: Escuchar. Siente toda la emoción con una vista de 360° de la Orquesta Sinfónica BBC interpretando «En la gruta del Rey de la montaña» de Edvard Grieg, grabada en los estudios Maida Vale de Londres.
  • Mahler No. 9: Escuchar. Orquesta Sinfónica de Aachen, dirigida por Kazem Abdullah. Sinfonía No. 9 de Gustav Mahler. Eurogress Aachen.
  • Orquesta de Filadelfia: Escuchar. La Orquesta de Filadelfia interpreta «En la gruta del rey de la montaña» de la Suite No. 1 de Peer Gynt de Edvard Grieg, bajo la dirección del Director Musical Yannick Nézet-Séguin en el Auditorio Stern / Escenario Perelman del Carnegie Hall.
  • Take on me, de a-ha: Escuchar. Grupo de música «a-ha» inmortalizado a través de la realidad virtual, en esta grabación de la última parte de su gira en Oslo Spektrum.
Banda sonora de Avatar
Ópera de Sídney
Quinta sinfonía de Beethoven
Novena sinfonía de Beethoven
Orquesta BBC
Mahler No. 9
Orquesta de Filadelfia
Take on me, de a-ha

Videojuegos e ilusiones ópticas

  • Ilusiones ópticas (en español): Ver vídeo. Te sorprenderá con una colección de ilusiones que desafiarán tu percepción. Prepárate para ver cosas que no son lo que parecen.
  • Spiderman gameplay: Ver vídeo. Gameplay del videojuego de Spiderman – Lejos de casa.
  • Mario Kart: Ver vídeo. Super Mario es una serie de juegos de plataforma creada por Nintendo y protagonizada por su mascota, Mario.
  • Subway surfers: Ver vídeo. Animación en 360° de Subway Surfers.
  • Among US: Ver vídeo. Gameplay del videojuego Among US.
  • Bob Esponja: Ver vídeo. Disfruta de los primeros 13 minutos del nuevo juego de Bob Esponja en 360 grados.
  • Dinosaurio de Google Chrome: Ver vídeo. El juego del dinosaurio de Google Chrome, también conocido como «Chrome Dino Run» o «T-Rex Run», es un juego simple pero desafiante que se encuentra oculto en el navegador Chrome. Se activa cuando no hay conexión a internet o cuando se produce un error de red.
  • Fortnite (evento Galactus): Ver vídeo. Revive el épico evento Galactus en Fortnite, donde los jugadores se unieron para luchar contra una amenaza cósmica.
Ilusiones ópticas
Gameplay de Spiderman
Gameplay de Super Mario Kart
Subway surfers
Gameplay de Among US
Videojuego de Bob Eponja
Dinosaurio de Google Chrome
Fornite

Otros

  • Vuelo visto desde la cabina: Ver vídeo. Acompaña al Capitán Joe, al Primer Oficial Dean y al videógrafo Swayne en este video totalmente interactivo. La Isla North Eleuthera nunca había recibido un avión tan grande, por lo que este vuelo vacío le dio a los equipos de tierra la oportunidad de trabajar con el nuevo E-175 por primera vez antes del servicio regular de pasajeros.
  • Bob Esponja en el Crustáceo Crujiente: Ver vídeo. Ahora puedes entrar al Crustáceo Crujiente en el primer video oficial de 360° de Bob Esponja. Experimenta cómo es la vida de los habitantes de Fondo de Bikini, e intenta encontrar todos los objetos escondidos de tus episodios favoritos de Bob Esponja.
  • Espantapájaros: Ver vídeo. Crea una atmósfera de suspense y terror mediante efectos de sonido espeluznantes en una situación en la que te sientes atrapado.
  • Sala de cine con formatos de sonido: Ver vídeo. Te permite experimentar los diferentes formatos de sonido en las salas de cine, pudiendo percibir cómo impactan en la experiencia del espectador.
Vuelo visto desde la cabina
Bob Esponja
Espantapájaros
Sala de cine con formatos de sonido

Conclusión

Este viaje virtual a través de videos en 360° y realidad virtual te ha llevado desde las profundidades del océano hasta el espacio exterior, desde emocionantes aventuras hasta serenas experiencias musicales. La tecnología de realidad virtual nos permite explorar mundos de manera que antes solo podíamos imaginar. Esperamos que hayas disfrutado de estas experiencias inmersivas tanto como nosotros.

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: Condicionales

Los condicionales son estructuras esenciales en programación que dirigen la ejecución de código según situaciones específicas. Actúan como puntos de bifurcación en el flujo del programa, permitiendo que se ejecuten diferentes secciones de código en función de si se cumple o no una evaluación lógica. Estas estructuras son fundamentales para la toma de decisiones automatizadas y la adaptación del comportamiento del programa a distintos escenarios.

Estructura «if»

El condicional if se utiliza para ejecutar un bloque de código si una condición es verdadera. La condición es una expresión que se evalúa como true o false. Si la condición es verdadera, el bloque de código dentro de las llaves {} se ejecuta. Si es falsa, el bloque se omite:

if (condición) {
  // Código a ejecutar si la condición es verdadera
}

Por ejemplo, con el siguiente código podemos verificar si una persona es mayor de edad:

let edad = 20;

if (edad >= 18) {
  console.log("Eres mayor de edad.");
}

Estructura «if…else»

La estructura if...else se utiliza para ejecutar un bloque de código si la condición es verdadera y otro bloque si es falsa:

if (condición) {
  // Código a ejecutar si la condición es verdadera
} else {
  // Código a ejecutar si la condición es falsa
}

Por ejemplo, podemos decidir cómo saludar a alguien en función de la hora que sea:

let hora = 20;

if (hora < 12) {
  console.log("Buenos días.");
} else {
  console.log("Buenas tardes o noches.");
}

Estructura «if…else if…else»

En bloque if...else if...else se usa para manejar múltiples condiciones en secuencia. Si la primera condición es falsa, se evalúan las condiciones siguientes en orden.

Supongamos que tenemos diferentes condiciones y queremos ejecutar un bloque de código específico dependiendo de cuál de esas condiciones sea verdadera. En lugar de usar varios bloques if independientes, podemos usar la estructura if...else if...else para hacerlo de manera más organizada:

if (condición1) {
  // Código a ejecutar si condición1 es verdadera
} else if (condición2) {
  // Código a ejecutar si condición2 es verdadera
} else if (condición3) {
  // Código a ejecutar si condición3 es verdadera
} else {
  // Código a ejecutar si ninguna condición es verdadera
}

Esta sería la descripción paso a paso de cómo se ejecuta esta estructura:

  1. El programa evalúa la condición1. Si es verdadera, ejecuta el bloque de código dentro de ese if y luego sale del bloque if...else if...else.
  2. Si condición1 es falsa, pasa a evaluar condición2. Si es verdadera, ejecuta el bloque de código dentro de ese else if y luego sale del bloque if...else if...else.
  3. Si tanto condición1 como condición2 son falsas, pasa a evaluar condición3. Si es verdadera, ejecuta el bloque de código dentro de ese else if y luego sale del bloque if...else if...else.
  4. Si ninguna de las condiciones anteriores es verdadera, se ejecuta el bloque de código dentro del else.

Por ejemplo, podemos utilizar el siguiente código para evaluar el trabajo de un estudiante:

let puntuacion = 8;
let calificacion;

if (puntuacion >= 9) {
  calificacion = "Sobresaliente";
} else if (puntuacion >= 7) {
  calificacion = "Notable";
} else if (puntuacion >= 6) {
  calificacion = "Bien";
} else if (puntuacion >= 5) {
  calificacion = "Suficiente";
} else {
  calificacion = "Suspenso";
}

// Salida: "Calificación: Notable"
console.log(`Calificación: ${calificacion}`);

Estructura «switch»

El switch es una estructura de control en JavaScript que se utiliza para tomar decisiones basadas en múltiples casos posibles. A diferencia de las estructuras if...else if...else, el switch se utiliza cuando necesitamos realizar diferentes acciones dependiendo del valor de una única expresión. Resulta especialmente útil cuando tenemos muchos posibles valores y queremos evitar una serie larga de else if:

switch (expresión) {
  case valor1:
    // Código a ejecutar si la expresión coincide con valor1
    break;
  case valor2:
    // Código a ejecutar si la expresión coincide con valor2
    break;
  // Más casos...
  default:
    // Código a ejecutar si ningún caso coincide
}
  • expresión: Una expresión cuyo valor se comparará con los diferentes casos.
  • valor1, valor2, etc.: Los posibles valores que puede tener la expresión.
  • break: Esta palabra clave es importante. Cuando se encuentra un break, el programa sale del bloque switch y continúa con el código después del bloque.

Por ejemplo, podemos utilizar el siguiente código para imprimir el día de la semana partiendo de un número del 1 al 7:

let dia = 3;
let nombreDia;

switch (dia) {
  case 1:
    nombreDia = "Lunes";
    break;
  case 2:
    nombreDia = "Martes";
    break;
  case 3:
    nombreDia = "Miércoles";
    break;
  // ...
  default:
    nombreDia = "Día no válido";
}

// Salida: "Hoy es Miércoles"
console.log(`Hoy es ${nombreDia}`);

En el ejemplo anterior, el programa compara el valor de dia con cada caso dentro del switch y asigna el nombre del día correspondiente. Si dia es igual a 3, se ejecuta el bloque de código bajo case 3.

Operador ternario

El operador ternario nos permite compactar la forma de escribir condicionales. La idea principal es que, en lugar de usar un bloque if...else para asignar valores a una variable en función de una condición, usemos el operador ternario para lograrlo con menos código mediante la siguiente sintaxis:

variable = condición ? valorSiVerdadero : valorSiFalso;
  • condición: Una expresión que se evalúa como verdadera o falsa.
  • valorSiVerdadero: El valor que se asignará a la variable si la condición es verdadera.
  • valorSiFalso: El valor que se asignará a la variable si la condición es falsa.

Por ejemplo, podemos utilizar el siguiente código para verificar si un número es par o impar:

let numero = 7;
let esPar = numero % 2 === 0 ? "Es par." : "Es impar.";
console.log(esPar);

En el ejemplo anterior utilizamos la condición numero % 2 === 0 para verificar si el número es par. Si la condición es verdadera, se asigna el valor "Es par." a la variable esPar; si la condición es falsa, se asigna el valor "Es impar.".

Operadores de comparación

Los operadores de comparación son símbolos especiales que se utilizan para comparar dos valores y determinar la relación entre ellos, evaluando si una condición es verdadera o falsa. En esencia, nos permiten hacer preguntas sobre los valores para tomar decisiones basadas en comparaciones numéricas, de cadenas de texto y otros tipos de datos.

Operador de igualdad (==)

El operador de igualdad == se utiliza para comparar si dos valores son iguales. Realiza una conversión de tipo antes de realizar la comparación, lo que significa que puede comparar valores de diferentes tipos.

Por ejemplo, en el siguiente código comparamos dos valores: numero1 es un número y numero2 es una cadena de texto que representa el número 5. Aunque los tipos son diferentes, el operador == realiza una conversión de tipo y considera que son iguales, por lo que se imprimirá «Los números son iguales»:

var num1 = 5;
var num2 = "5";

if (num1 == num2) {
  console.log("Los números son iguales.");
} else {
  console.log("Los números son diferentes.");
}

Operador de igualdad estricta (===)

El operador de igualdad estricta === se utiliza para comparar si dos valores son iguales y del mismo tipo. No realiza conversión de tipo antes de la comparación.

En el siguiente ejemplo, aunque los valores son iguales, el operador === tiene en cuenta el tipo de dato y no realiza conversión de tipo. Dado que numero1 es un número y numero2 es una cadena de texto, la comparación devuelve falso y se imprimirá «Los números son diferentes»:

var num1 = 5;
var num2 = "5";

if (num1 === num2) {
  console.log("Los números son iguales.");
} else {
  console.log("Los números son diferentes.");
}

Operador de desigualdad (!=)

El operador de desigualdad != se utiliza para comparar si dos valores son distintos. Realiza una conversión de tipo antes de la comparación.

En el siguiente ejemplo comparamos el valor de la variable edad con la cadena de texto «18». Aunque los tipos son diferentes, el operador != realiza una conversión de tipo y considera que son iguales, por lo que se imprimirá «La edad es 18»:

var edad = 18;
if (edad != "18") {
  console.log("La edad es diferente de 18.");
} else {
  console.log("La edad es 18.");
}

Operador de desigualdad estricta (!==)

El operador de desigualdad estricta !== se utiliza para comparar si dos valores son diferentes o no son del mismo tipo. No realiza conversión de tipo antes de la comparación.

En el siguiente ejemplo, aunque los valores son iguales, el operador !== tiene en cuenta el tipo de dato y no realiza ninguna conversión. Dado que numero es un número y la cadena de texto «10» es de un tipo diferente, la comparación devuelve verdadero y se imprimirá «El número no es igual a 10 o no es del mismo tipo»:

var num = 10;
if (num !== "10") {
  console.log("El número no es igual a 10 o no es del mismo tipo.");
} else {
  console.log("El número es igual a 10 y del mismo tipo.");
}

Operadores de comparación numérica

Los operadores de comparación numérica (<, >, <=, >=) se utilizan para comparar valores numéricos.

En el siguiente ejemplo comparamos dos valores numéricos: x e y. El primer if verifica si x es mayor que y, el segundo if verifica si x es menor que y, y si ninguna de estas condiciones es verdadera, se asume que x es igual a y:

var x = 10;
var y = 5;

if (x > y) {
  console.log("x es mayor que y.");
} else if (x < y) {
  console.log("x es menor que y.");
} else {
  console.log("x es igual a y.");
}

Operadores de comparación de cadenas de texto

Los operadores de comparación también se pueden utilizar para comparar cadenas de texto alfabéticamente.

En el siguiente ejemplo comparamos dos cadenas de texto (palabra1 y palabra2), utilizando la posición alfabética para determinar el orden. Si palabra1 viene antes en el diccionario que palabra2, se imprimirá «palabra1 viene antes en el diccionario»; si es lo contrario, se imprimirá «palabra2 viene antes en el diccionario»; y si ambas palabras son iguales, se imprimirá «Las palabras son iguales»:

var palabra1 = "manzana";
var palabra2 = "banana";

if (palabra1 < palabra2) {
  console.log("palabra1 viene antes en el diccionario.");
} else if (palabra1 > palabra2) {
  console.log("palabra2 viene antes en el diccionario.");
} else {
  console.log("Las palabras son iguales.");
}

Operadores lógicos

Los operadores lógicos son herramientas esenciales en programación utilizadas para combinar y evaluar condiciones booleanas. Estos operadores, como AND, OR y NOT, permiten construir expresiones más complejas al unir o negar condiciones simples. AND devuelve verdadero si dos condiciones son verdaderas, OR devuelve verdadero si al menos una condición es verdadera, y NOT invierte el valor de una condición verdadera o falsa. Estos operadores son fundamentales para controlar cómo se ejecuta el código en función de condiciones múltiples y permiten tomar decisiones condicionales más avanzadas:

if (condición1 && condición2) {
  // Bloque de código si ambas condiciones son verdaderas
}

if (condición1 || condición2) {
  // Bloque de código si al menos una de las condiciones es verdadera
}

Operador && (AND)

El operador lógico &&, también conocido como AND, se utiliza para evaluar si dos condiciones son verdaderas al mismo tiempo. Devuelve true solo si ambas condiciones son true.

Por ejemplo, con el siguiente código podemos verificar al mismo tiempo si una persona tiene al menos 18 años y si además tiene carnet de conducir. Si ambas condiciones son verdaderas, se imprimirá «Puedes conducir»; de lo contrario, se imprimirá «No puedes conducir»:

var edad = 25;
var tieneCarnet = true;

if (edad >= 18 && tieneCarnet) {
  console.log("Puedes conducir.");
} else {
  console.log("No puedes conducir.");
}

Operador || (OR)

El operador lógico ||, también conocido como OR, se utiliza para evaluar si al menos una de las dos condiciones es verdadera. Devuelve true si al menos una condición es true.

Por ejemplo, con el siguiente código podemos verificar si una persona es estudiante o empleado. Si al menos una de las condiciones es verdadera, se imprimirá «Tienes acceso al edificio»; de lo contrario, se imprimirá «No tienes acceso al edificio»:

var esEstudiante = false;
var esEmpleado = true;

if (esEstudiante || esEmpleado) {
  console.log("Tienes acceso al edificio.");
} else {
  console.log("No tienes acceso al edificio.");
}

Operador ! (NOT)

El operador lógico !, también conocido como NOT, se utiliza para negar una condición. Si la condición es verdadera, ! la convierte en falsa, y si es falsa, la convierte en verdadera.

Por ejemplo, con el siguiente código verificamos si una persona está autenticada o no. Si la condición es verdadera (es decir, no está autenticada), se imprimirá «Debes iniciar sesión»; de lo contrario, se imprimirá «Bienvenido».

var estaAutenticado = false;

if (!estaAutenticado) {
  console.log("Debes iniciar sesión.");
} else {
  console.log("Bienvenido.");
}

Combinando operadores

Podemos combinar diferentes operadores para formar condiciones más complejas. Es importante tener en cuenta el orden de evaluación y usar paréntesis para agrupar condiciones cuando sea necesario.

Prioridad de los operadores

La prioridad de los operadores en JavaScript determina el orden en que se evalúan las expresiones. Los operadores de mayor prioridad se evalúan antes que los de menor prioridad. Si necesitamos cambiar este orden, podemos usar paréntesis para agrupar las expresiones. A continuación mostramos la prioridad de algunos operadores (los de igualdad o comparación se evaluarán antes que los lógicos):

  1. Operadores de comparación: ==, !=, ===, !==, <, >, <=, >=
  2. Operadores lógicos: &&, ||

Por ejemplo, con el siguiente código evaluamos la temperatura y si hace un día soleado. Si ambas condiciones son verdaderas, se imprimirá «Hace calor y está soleado». Si al menos una de las condiciones es verdadera, se imprimirá «Hace calor o está soleado». Si ninguna de las condiciones es verdadera, se imprimirá «No hace calor y no está soleado»:

var temperatura = 28;
var estaSoleado = true;

if (temperatura > 25 && estaSoleado) {
  console.log("Hace calor y está soleado.");
} else if (temperatura > 25 || estaSoleado) {
  console.log("Hace calor o está soleado.");
} else {
  console.log("No hace calor y no está soleado.");
}

A continuación exponemos otro ejemplo para determinar en este caso el tipo de un triángulo. Supongamos que tenemos las longitudes de los lados del triángulo y debemos decidir si es equilátero, isósceles o escaleno. Para ello podemos combinar operadores de comparación y lógicos para implementar las siguientes condiciones:

  • Si todos los lados son iguales, el triángulo es equilátero.
  • Si todos los lados son diferentes, el triángulo es escaleno.
  • Si ninguna de las condiciones anteriores se cumple, el triángulo es isósceles.
var ladoA = 5;
var ladoB = 5;
var ladoC = 6;

if (ladoA === ladoB && ladoB === ladoC) {
  console.log("El triángulo es equilátero.");
} else if (ladoA !== ladoB && ladoB !== ladoC && ladoA !== ladoC) {
  console.log("El triángulo es escaleno.");
} else {
  console.log("El triángulo es isósceles.");
}

Uso de paréntesis

A continuación vamos a mostrar un ejemplo en el que resulta necesario utilizar paréntesis para agrupar las condiciones. Supongamos que estamos desarrollando una aplicación que requiere contraseñas seguras. Para ello todas la contraseñas deben tener al menos 8 caracteres de longitud y deben contener al menos uno de los caracteres especiales «@» o «#». Si ambas condiciones se cumplen, la contraseña se considera segura:

var contraseña = "P@ssw0rd";

if ((contraseña.length >= 8) && (contraseña.includes("@") || contraseña.includes("#"))) {
  console.log("Contraseña segura.");
} else {
  console.log("La contraseña no cumple con los requisitos de seguridad.");
}

Vamos a desglosar el ejemplo para entenderlo mejor. Comenzaremos matizando los dos requisitos que se deben cumplir para que una contraseña sea segura:

  1. La longitud de la contraseña debe ser al menos 8 caracteres.
  2. La contraseña debe contener al menos uno de los caracteres especiales «@» o «#».

Ahora, veamos cómo los paréntesis ayudan a controlar el orden de evaluación:

  1. (contraseña.length >= 8) evalúa si la longitud de la contraseña es al menos 8 caracteres.
  2. (contraseña.includes("@") || contraseña.includes("#")) evalúa si la contraseña contiene al menos uno de los caracteres especiales «@» o «#».

Ambas condiciones deben cumplirse para que la contraseña sea segura. Sin embargo, si no usáramos paréntesis para agrupar estas condiciones, podríamos tener problemas con el orden de evaluación. Veamos el ejemplo sin paréntesis:

if (contraseña.length >= 8 && contraseña.includes("@") || contraseña.includes("#")) {
  // ...
}

En este caso, JavaScript evaluaría primero contraseña.length >= 8 && contraseña.includes("@"), y luego evaluaría contraseña.includes("#"), lo cual no es lo que deseamos.

Al usar paréntesis para agrupar las condiciones relacionadas, aseguramos que se evalúen como una unidad coherente. Esto nos garantiza que se cumplan ambos requisitos para considerar la contraseña segura.

En resumen, los paréntesis son esenciales para controlar el orden de evaluación y garantizar que las condiciones se combinen de la manera correcta, especialmente cuando estamos combinando operadores lógicos (&& y ||) con operadores de comparación en condiciones más complejas.

Test

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

Programación con JavaScript: Arrays

Un array es una estructura de datos que permite almacenar y organizar múltiples elementos relacionados bajo un solo nombre. Los elementos dentro de un array pueden ser de cualquier tipo de dato, como por ejemplo números, cadenas, objetos y funciones. Los arrays son una parte esencial de la programación, ya que permiten manejar y manipular colecciones de datos de manera eficiente.

Elementos e índices

Podemos imaginar un array como una caja con compartimentos numerados, donde cada compartimento puede contener un valor. Cada valor se llama «elemento» y se almacena en una posición específica identificada con un «índice». Los índices comienzan desde 0, lo que significa que el primer elemento tiene un índice de 0, el segundo tiene un índice de 1, y así sucesivamente.

Creación de arrays

Podemos crear un array utilizando la sintaxis de corchetes [], dentro de los cuales colocamos los elementos separados por comas:

let numeros = [1, 2, 3, 4, 5];
let colores = ["rojo", "verde", "azul"];
let mixto = [10, "texto", true, null, { nombre: "Juan" }];

Acceso a elementos

Podemos acceder a los elementos de un array utilizando su índice, que comienza desde 0. Por ejemplo, con el código que mostramos a continuación, en el array frutas, el elemento en el índice 0 es «manzana», el elemento en el índice 1 es «pera», y así sucesivamente:

let frutas = ["manzana", "pera", "naranja", "sandía"];

console.log(frutas[0]); // Salida: "manzana"
console.log(frutas[1]); // Salida: "pera"
console.log(frutas[2]); // Salida: "naranja"

Propiedad length

Cada array tiene una propiedad length que indica la cantidad de elementos que contiene:

let colores = ["rojo", "verde", "azul"];

console.log(colores.length); // Salida: 3

Modificación de elementos

Podemos modificar elementos de un array asignando nuevos valores a sus índices. Por ejemplo, a continuación mostramos el código necesario para cambiar el valor del segundo elemento en el array colores:

let colores = ["rojo", "verde", "azul"];

colores[1] = "amarillo";

console.log(colores); // Salida: ["rojo", "amarillo", "azul"]

Métodos de arrays

JavaScript proporciona una gran variedad de métodos incorporados para trabajar con arrays. Estos métodos nos permiten realizar operaciones como añadir, eliminar, filtrar, mapear y más, de manera muy eficiente y legible. A continuación enumeramos algunos de los métodos más importantes.

push() y pop()

  • push(): Agrega elementos al final del arreglo.
  • pop(): Elimina el último elemento del arreglo.
let colores = ["rojo", "verde"];

colores.push("azul");
console.log(colores); // Salida: ["rojo", "verde", "azul"]

colores.pop();
console.log(colores); // Salida: ["rojo", "verde"]

shift() y unshift()

  • unshift(): Agrega elementos al inicio del arreglo.
  • shift(): Elimina el primer elemento del arreglo.
let numeros = [2, 3, 4];

numeros.unshift(1);
console.log(numeros); // Salida: [1, 2, 3, 4]

numeros.shift();
console.log(numeros); // Salida: [2, 3, 4]

splice()

  • Permite agregar, eliminar o reemplazar elementos en una posición específica.
let numeros = [1, 2, 3, 4, 5];

// Reemplaza 2 y 3 con 6 y 7
numeros.splice(1, 2, 6, 7);

console.log(numeros); // Salida: [1, 6, 7, 4, 5]

slice()

  • Retorna una copia superficial de una porción del arreglo, sin modificar el arreglo original.
let colores = ["rojo", "verde", "azul"];

let subColores = colores.slice(1, 3);

console.log(subColores); // Salida: ["verde", "azul"]

Iteración a través de arrays

Podemos recorrer elementos de un array utilizando bucles como for, while, forEach, for...of, etc.:

let numeros = [1, 2, 3, 4, 5];
for (let i = 0; i < numeros.length; i++) {
  console.log(numeros[i]); // Imprime cada número
}

let colores = ["rojo", "verde", "azul"];
colores.forEach(function(color) {
  console.log(color); // Imprime cada color
});

Métodos de búsqueda y manipulación

indexOf() y lastIndexOf()

  • indexOf(): Encuentra la primera posición de un elemento en el arreglo.
  • lastIndexOf(): Encuentra la última posición de un elemento en el arreglo.
let numeros = [1, 2, 3, 2, 4, 5];

console.log(numeros.indexOf(2));      // Salida: 1
console.log(numeros.lastIndexOf(2));  // Salida: 3

includes()

  • Verifica si un elemento existe en el arreglo.
let colores = ["rojo", "verde", "azul"];

console.log(colores.includes("verde")); // Salida: true
console.log(colores.includes("amarillo")); // Salida: false

join()

  • Combina todos los elementos de un array en una cadena utilizando un separador:
let colores = ["rojo", "verde", "azul"];

let cadena = colores.join(", ");

console.log(cadena); // Salida: "rojo, verde, azul"

concat()

  • Combina dos o más arreglos en uno nuevo.
let numeros = [1, 2, 3];
let otrosNumeros = [4, 5, 6];

let combinados = numeros.concat(otrosNumeros);

console.log(combinados); // Salida: [1, 2, 3, 4, 5, 6]

Ordenamiento de arrays

sort()

  • Ordena los elementos de un arreglo en su lugar, utilizando la conversión a cadenas y la comparación de Unicode.
let frutas = ["naranja", "manzana", "plátano"];

frutas.sort();

console.log(frutas); // Salida: ["manzana", "naranja", "plátano"]

reverse()

  • Invierte el orden de los elementos en el arreglo.
let numeros = [1, 2, 3, 4, 5];

numeros.reverse();

console.log(numeros); // Salida: [5, 4, 3, 2, 1]

Creación y manipulación funcional

map()

  • Crea un nuevo arreglo con los resultados de aplicar una función a cada elemento del arreglo original.
let numeros = [1, 2, 3];

let duplicados = numeros.map(function(numero) {
  return numero * 2;
});

console.log(duplicados); // Salida: [2, 4, 6]

filter()

  • Crea un nuevo arreglo con todos los elementos que pasen una prueba (función proporcionada).
let numeros = [1, 2, 3, 4, 5, 6];

let pares = numeros.filter(function(numero) {
  return numero % 2 === 0;
});

console.log(pares); // Salida: [2, 4, 6]

reduce()

  • Aplica una función a un acumulador y a cada elemento en el arreglo (de izquierda a derecha) para reducirlo a un solo valor.
let numeros = [1, 2, 3, 4, 5];

let suma = numeros.reduce(function(acumulador, numero) {
  return acumulador + numero;
}, 0);

console.log(suma); // Salida: 15

Arreglos multidimensionales

Los arrays en JavaScript pueden contener otros arrays, lo que se conoce como arrays multidimensionales. Esto es útil cuando necesitamos trabajar con estructuras de datos más complejas, como por ejemplo matrices:

let matriz = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matriz[1][2]); // Salida: 6

Copia de arrays

La asignación directa de un array a otra variable simplemente copia la referencia, no los valores. Para crear una copia independiente, podemos utilizar el operador de propagación ..., el método slice() o concat().

let original = [1, 2, 3];
let copiaSpread = [...original];
let copiaSlice = original.slice();
let copiaConcat = original.concat();

console.log(copiaSpread); // [1, 2, 3]
console.log(copiaSlice);  // [1, 2, 3]
console.log(copiaConcat); // [1, 2, 3]

Consideraciones adicionales

  • Los arrays en JavaScript son dinámicos, lo que significa que puedes agregar o eliminar elementos en cualquier momento.
  • Los índices negativos no están permitidos en arrays (a diferencia de algunos lenguajes de programación como python).

Conclusión

Los arreglos en JavaScript son herramientas fundamentales para trabajar con colecciones de datos de manera organizada y eficiente. Puedes acceder, modificar y utilizar los elementos de un arreglo a través de índices, y aprovechar los métodos integrados para realizar operaciones comunes. Los arreglos te permiten gestionar datos de manera más estructurada, lo que es esencial para desarrollar aplicaciones más robustas y funcionales.

Test

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

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.