Guía Completa de Navidrome - Instalación y Primeros Pasos

 

Introducción: En este tutorial, aprenderás cómo crear un sitio web moderno y adaptable utilizando HTML, CSS y JavaScript. Te guiaré paso a paso para implementar un diseño con modo claro/oscuro y un menú adaptable que se transforma en un icono de hamburguesa en dispositivos pequeños.

Paso 1: Preparación del proyecto Antes de comenzar, asegúrate de tener configurado un proyecto básico de HTML y CSS. También necesitarás incluir la biblioteca de Font Awesome en tu proyecto para acceder a los iconos que utilizaremos más adelante.

El HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Alternar Modo Claro/Oscuro</title>

  <link rel="stylesheet" href="styles.css">

  <script src="script.js" defer></script>

</head>

<body>

  <div class="container">

    <h1>Modo Claro/Oscuro</h1>

    <button id="toggle-btn">

      <i class="fas fa-sun"></i>

      <i class="fas fa-moon"></i>

    </button>

  </div>

</body>

</html>

El CSS:

body {

  background-color: #f0f0f0; /* Color de fondo predeterminado (modo claro) */

  color: #333; /* Color de texto predeterminado (modo claro) */

}

.dark-mode {

  background-color: #333; /* Color de fondo para modo oscuro */

  color: #f0f0f0; /* Color de texto para modo oscuro */


}

Asegúrate de tener los archivos de Font Awesome (CSS y fuentes) incluidos en tu proyecto para que los iconos funcionen correctamente. 

Para ello incluye ésta línea antes de </head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Además, este ejemplo solo cambia los colores de fondo y texto, pero podrías ajustarlo para cambiar otros estilos según tus necesidades.

Paso 2: Creación del esqueleto HTML Diseñaremos la estructura básica de nuestra página web, que incluirá un encabezado con un botón para alternar entre el modo claro y oscuro, y un menú de navegación con tres enlaces.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Menú con Icono de Hamburguesa</title>

  <link rel="stylesheet" href="styles.css">

  <script src="script.js" defer></script>

</head>

<body>

  <nav class="navbar">

    <div class="container">

      <div class="menu-toggle" id="menu-toggle">

        <i class="fas fa-bars"></i>

      </div>

      <ul class="menu" id="menu">

        <li><a href="#">Inicio</a></li>

        <li><a href="#">Acerca</a></li>

        <li><a href="#">Contacto</a></li>

      </ul>

    </div>

  </nav>

</body>

</html>

Paso 3: Estilos CSS Aplicaremos estilos CSS para darle un aspecto atractivo a nuestro sitio web. Configuraremos los colores y las disposiciones para el modo claro y oscuro, así como para el menú de navegación.

.navbar {

  background-color: #333;

  color: #fff;

  padding: 10px 0;

}

.container {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.menu-toggle {

  display: none; /* Por defecto oculto en pantallas grandes */

  cursor: pointer;

}

.menu {

  list-style: none;

  padding: 0;

  margin: 0;

}

.menu li {

  display: inline-block;

  margin-right: 20px;

}

.menu li:last-child {

  margin-right: 0;

}

.menu a {

  text-decoration: none;

  color: inherit;

}

@media screen and (max-width: 768px) {

  .menu {

    display: none; /* Ocultar menú en pantallas pequeñas por defecto */

  }

  .menu-toggle {

    display: block; /* Mostrar icono de hamburguesa en pantallas pequeñas */

  }

  .menu.active {

    display: block; /* Mostrar menú cuando se hace clic en el icono de hamburguesa */

  }

}

Paso 4: Funcionalidad del modo claro/oscuro Agregaremos funcionalidad con JavaScript para permitir que los usuarios cambien entre el modo claro y oscuro con un solo clic. Utilizaremos localStorage para recordar la preferencia del usuario incluso después de recargar la página.

document.addEventListener('DOMContentLoaded', function() {

  const toggleBtn = document.getElementById('toggle-btn');

  const sunIcon = document.getElementById('sun-icon');

  const moonIcon = document.getElementById('moon-icon');

  const body = document.body;

  const menuToggle = document.getElementById('menu-toggle');

  const menu = document.getElementById('menu');

  // Verificar si hay una preferencia de modo almacenada en localStorage

  const mode = localStorage.getItem('mode');

  if (mode === 'dark') {

    enableDarkMode();

  }

  toggleBtn.addEventListener('click', () => {

    if (body.classList.contains('dark-mode')) {

      disableDarkMode();

    } else {

      enableDarkMode();

    }

  });

  menuToggle.addEventListener('click', () => {

    menu.classList.toggle('active');

  });

  function enableDarkMode() {

    body.classList.add('dark-mode');

    sunIcon.style.display = 'none';

    moonIcon.style.display = 'inline';

    // Almacenar preferencia de modo en localStorage

    localStorage.setItem('mode', 'dark');

  }

  function disableDarkMode() {

    body.classList.remove('dark-mode');

    sunIcon.style.display = 'inline';

    moonIcon.style.display = 'none';

    // Eliminar preferencia de modo de localStorage

    localStorage.setItem('mode', 'light');

  }

});

Conclusión: ¡Felicidades! Has creado con éxito un sitio web moderno con modo claro/oscuro y un menú adaptable. ¡Ahora puedes personalizarlo aún más y desplegarlo para que el mundo lo vea!