EcoMove Template

EcoMove Template es una extensión para Visual Studio Code que permite crear rápidamente la estructura inicial de un proyecto web con archivos HTML, CSS y JS listos para usar. Ideal para iniciar proyectos con el estilo de la plantilla EcoMove.
Features

Copia automáticamente los archivos de plantilla a tu proyecto actual:
- index.html
- login.html
- main.css
- login.css
- main.js
Evita sobrescribir archivos existentes para proteger tu trabajo.
Funciona directamente desde el Command Palette de VS Code (Ctrl+Shift+P) con el comando:
EcoMove: Crear plantilla del proyecto
Compatible con cualquier carpeta de proyecto abierta en VS Code.
🚲🌱 Ideal para desarrolladores que quieren iniciar proyectos web de manera rápida y organizada.
Requirements

Visual Studio Code 1.70.0 o superior.
Node.js para empaquetar o desarrollar la extensión (opcional si solo se usa la versión .vsix).
How to Use

Abre la carpeta de tu proyecto en VS Code.
Presiona Ctrl+Shift+P (o Cmd+Shift+P en Mac).
Escribe y selecciona:
Los archivos de la plantilla se copiarán automáticamente en la carpeta abierta.
Extension Settings

Esta extensión no tiene configuraciones adicionales.
Known Issues

Si la carpeta de proyecto está vacía, la extensión solicitará abrir una carpeta antes de crear la plantilla.
No sobrescribe archivos existentes; si un archivo con el mismo nombre ya existe, será ignorado.
Release Notes

0.0.1

Primera versión de EcoMove Template.
Comando funcional para crear plantilla con HTML, CSS y JS.
Validación de workspace antes de copiar archivos.
index.html

Archivo principal de la landing page, donde se define la estructura básica y los elementos principales como encabezados, secciones y botones de acción.
<!DOCTYPE html>
<html lang="es">
<head>
  <!-- =====================
       METADATA / SEO
       👉 Cambia title, description y keywords según tu proyecto
  ====================== -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="EcoMove integra movilidad sostenible en Lima mediante bicicletas y scooters eléctricos.">
  <meta name="keywords" content="movilidad sostenible, bicicletas eléctricas, scooters, Lima">
  <meta name="author" content="TU-CODIGO-DE-ESTUDIANTE">
  <title>EcoMove | Movilidad Sostenible</title>

  <!-- =====================
       FUENTES
       👉 Si cambias de tipografía, hazlo aquí
  ====================== -->
  <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=Roboto:wght@500;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

  <!-- =====================
       CSS PRINCIPAL
       👉 Todos los colores y layout se controlan desde main.css
  ====================== -->
  <link rel="stylesheet" href="main.css">
</head>

<body>

  <!-- =====================================================
       HEADER / NAVBAR
       👉 Logo, menú horizontal y botón hamburguesa
       👉 Si quieres cambiar enlaces del menú, edita ambos nav
  ====================================================== -->
  <header class="main-header" role="banner">
    <div class="header-container">

      <!-- LOGO
           👉 Cambia la imagen PNG por tu logo
      -->
      <div class="brand">
        <img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/logo-ecomove.png" alt="Logo EcoMove">
        <span>EcoMove</span>
      </div>

      <!-- MENÚ DESKTOP
           👉 Visible solo en pantallas grandes
      -->
      <nav class="main-nav" role="navigation" aria-label="Navegación principal">
        <ul>
          <li><a href="#inicio">Inicio</a></li>
          <li><a href="#servicios">Servicios</a></li>
          <li><a href="#impacto">Impacto</a></li>
        </ul>
      </nav>

      <!-- BOTÓN HAMBURGUESA
           👉 Solo visible en mobile
           👉 Controlado con JS (main.js)
      -->
      <button class="hamburger" aria-label="Abrir menú">
        <span></span>
        <span></span>
        <span></span>
      </button>

    </div>

    <!-- MENÚ MÓVIL
         👉 Aparece sobre el contenido
         👉 Mantén los mismos links que el menú desktop
    -->
    <nav class="mobile-nav" aria-label="Menú móvil">
      <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#servicios">Servicios</a></li>
        <li><a href="#impacto">Impacto</a></li>
      </ul>
    </nav>
  </header>

  <!-- =====================================================
       HERO / MENSAJE PRINCIPAL
       👉 Texto principal + botones
       👉 Puedes cambiar el mensaje sin afectar el layout
  ====================================================== -->
  <section class="hero-intro" role="region" aria-labelledby="intro-title">
    <h2 id="intro-title">Movilidad sustentable para un futuro más limpio</h2>

    <div class="hero-buttons">
      <button class="btn-primary">Acceder a la app</button>
      <button class="btn-secondary">Ver servicios</button>
    </div>
  </section>

  <!-- Separador visual -->
  <div class="section-divider" role="separator" aria-hidden="true"></div>

  <!-- =====================================================
       CONTENIDO PRINCIPAL (GRID)
       👉 Dos columnas en desktop
       👉 Una columna en mobile
  ====================================================== -->
  <section class="main-grid" role="region" aria-label="Contenido principal">

    <!-- =====================
         COLUMNA IZQUIERDA
         👉 Estadísticas + servicios visuales
    ====================== -->
    <div class="left-column">

      <!-- INICIO / STATS
           👉 Cambia números o textos sin afectar estilos
      -->
      <div id="inicio" class="left-box hero-box">
        <h1>Inicio</h1>

        <div class="stats-grid">
          <div class="stat-item">
            <span class="stat-number">120</span>
            <span class="stat-label">viajes hoy</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">32</span>
            <span class="stat-label">estaciones activas</span>
          </div>
          <div class="stat-item">
            <span class="stat-number">1,8 t</span>
            <span class="stat-label">CO₂ ahorrado</span>
          </div>
        </div>

        <p class="inicio-footer-text">Servicios</p>
      </div>

      <!-- SERVICIOS VISUALES
           👉 Cada feature-box es independiente
           👉 Puedes eliminar o duplicar sin romper el grid
      -->
      <div class="features-grid">

        <div class="feature-box">
          <img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/bike.png" alt="Bicicletas eléctricas" class="feature-icon">
          <h3>Bicicletas Eléctricas</h3>
          <p>Alquiler urbano con estaciones estratégicas.</p>
        </div>

        <div class="feature-box">
          <img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/scooter.png" alt="Scooters eléctricos" class="feature-icon">
          <h3>Scooters Eléctricos</h3>
          <p>Movilidad rápida, segura y ecológica.</p>
        </div>

        <div class="feature-box">
          <img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/route.png" alt="Rutas ecológicas" class="feature-icon">
          <h3>Rutas Eco-Friendly</h3>
          <p>Trayectos optimizados con menor impacto ambiental.</p>
        </div>

        <div class="feature-box">
          <img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/education.png" alt="Educación y testimonios" class="feature-icon">
          <h3>Educación y Testimonios</h3>
          <p>Historias reales y contenido educativo sostenible.</p>
        </div>

      </div>
    </div>

    <!-- =====================
         COLUMNA DERECHA
         👉 Texto + video
    ====================== -->
    <div class="right-column">

      <!-- SERVICIOS (LISTA) -->
      <section id="servicios" class="section">
        <h2>Servicios</h2>
        <ul class="services-list">
          <li>Alquiler de bicicletas y scooters</li>
          <li>Rutas ecofriendly optimizadas</li>
          <li>Eventos de educación ambiental</li>
        </ul>
      </section>

      <!-- IMPACTO
           👉 Puedes cambiar el video MP4 sin tocar CSS
      -->
      <section id="impacto" class="section impact">
        <h2>Impacto Ambiental</h2>
        <p>EcoMove promueve una ciudad más limpia mediante tecnología y educación.</p>

        <video controls>
          <source src="images/video-ecomove.mp4" type="video/mp4">
        </video>
      </section>

    </div>
  </section>

  <!-- =====================================================
       FOOTER
       👉 Iconos PNG reemplazables
       👉 Texto editable sin afectar diseño
  ====================================================== -->
  <footer class="main-footer">

    <!-- Redes sociales
         👉 Reemplaza icon1.png, icon2.png, etc.
    -->
    <div class="footer-social">
      <a href="#"><img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/icon1.png" alt="Instagram"></a>
      <a href="#"><img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/icon2.png" alt="Facebook"></a>
      <a href="#"><img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/icon3.png" alt="Twitter"></a>
    </div>

    <!-- Enlaces decorativos -->
    <div class="footer-links">
      <a href="#">Términos y condiciones</a>
      <span>|</span>
      <a href="#">Privacidad</a>
    </div>

    <!-- Dominio -->
    <p class="footer-site">http://www.ecomove.com</p>
  </footer>

  <!-- =====================
       JS
       👉 Controla menú hamburguesa
  ====================== -->

  <script src="main.js"></script>
</body>
</html>

---

### **2. login.html**

```markdown
### login.html
Página de inicio de sesión donde el usuario puede acceder a su cuenta.

```html
<!DOCTYPE html>
<html lang="es">
<head>
  <!-- =====================
       METADATA BÁSICA
       =====================
       Si cambias el título o descripción, no afecta el diseño,
       solo SEO y el texto del navegador
  -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EcoMove | Login</title>

  <!-- FUENTES (puedes cambiar familias sin romper layout) 
  <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=Roboto:wght@500;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

  -->
  <!-- CSS PRINCIPAL -->
  <link rel="stylesheet" href="login.css">
</head>

<body>

<!-- =====================
     CONTENEDOR GENERAL
     =====================
     👉 Si quieres centrar todo vertical u horizontalmente,
     eso se controla desde .login-wrapper en el CSS
-->
<div class="login-wrapper">

  <!-- =====================
       TARJETA DE LOGIN
       =====================
       👉 Si quieres que el login sea más ancho o más angosto,
       cambia max-width en .login-card
  -->
  <div class="login-card">

    <!-- =====================
         LOGO Y TÍTULO
         =====================
         👉 Puedes mover esta sección arriba o abajo
         sin afectar el resto
    -->
    <div class="login-logo">
      <!-- Cambia solo el src si usas otro logo -->
      <img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/logo-ecomove.png" alt="EcoMove logo">
      <h1>EcoMove</h1>
    </div>

    <!-- =====================
         BOTONES LOGIN
         =====================
         ⚠️ NO MODIFICAR CLASES
         👉 Si quieres agregar otro método (Apple, GitHub),
         copia un botón y cambia solo el texto
    -->
    <div class="login-buttons">
      <button class="btn-login">Sign in / Login with Facebook</button>
      <button class="btn-login">Sign in / Login with Google</button>
      <button class="btn-login">Sign in / Login with Email</button>
    </div>

        <!-- =====================
         BOTÓN HOME
         =====================
         👉 Este botón regresa al index.html
         👉 Puedes eliminarlo sin afectar el login
    -->
    <a href="index.html" class="home-btn">Home</a>

    <!-- =====================
         PANEL DE IMAGEN
         =====================
         👉 Este bloque es decorativo
         👉 Puedes quitarlo si no deseas imagen
         👉 La imagen se ajusta automáticamente
    -->
    <div class="panel-section">
      <p class="panel-title">PANEL DE RUTAS Y ESTACIONES</p>

      <!-- Solo cambia el src por tu PNG -->
      <img
        src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/panel.png"
        alt="Panel de rutas y estaciones"
        class="panel-img"
      >
    </div>

    <!-- =====================
         REDES SOCIALES
         =====================
         👉 Iconos pequeños (PNG)
         👉 Puedes quitar uno o todos sin romper layout
    -->
    <div class="login-social">
      <img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/icon1.png" alt="Instagram">
      <img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/icon2.png" alt="Facebook">
      <img src="https://github.com/Franz2308/ecomove-template/raw/HEAD/assets/images/icon3.png" alt="Twitter">
    </div>

  </div>
</div>

</body>
</html>


---

### **3. main.css**

```markdown
### main.css
Estilos principales para la landing page, incluyendo tipografía, colores y espaciado.

```css
/* =====================
   VARIABLES ECO MOVE
===================== */
:root {
  --color-background: #E6F4EA;
  --color-primary: #2E7D32;
  --color-title: #1B5E20;
  --color-text: #1F3D2B;
  --color-white: #ffffff;
}

/* =====================
   RESET
===================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================
   GLOBAL
===================== */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
  color: var(--color-title);
}

a {
  text-decoration: none;
  color: inherit;
}

/* =====================
   HEADER
===================== */
.main-header {
  background-color: var(--color-white);
  border-bottom: 3px solid var(--color-primary);
  padding: 1rem 2rem;
  position: relative; /* 🔴 CLAVE: referencia para menú móvil */
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.brand img {
  width: 42px;
}

.brand span {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-title);
}

/* =====================
   NAVIGATION DESKTOP
===================== */
.main-nav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.main-nav a {
  font-weight: 600;
  color: var(--color-title);
}

.main-nav a:hover {
  color: var(--color-primary);
}

/* =====================
   HERO INTRO
===================== */
.hero-intro {
  padding: 4rem 2rem 3rem;
  text-align: center;
}

.hero-intro h2 {
  font-size: 2rem;
  max-width: 700px;
  margin: 0 auto 2rem;
}

/* =====================
   HERO BUTTONS
===================== */
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.btn-primary,
.btn-secondary {
  padding: 0.8rem 1.6rem;
  border-radius: 6px;
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
  cursor: pointer;
}

.btn-primary:hover,
.btn-secondary:hover {
  opacity: 0.85;
}

/* =====================
   SECTION DIVIDER
===================== */
.section-divider {
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
}

/* =====================
   MAIN GRID
===================== */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 3rem 2rem;
}

/* =====================
   LEFT COLUMN
===================== */
.left-column {
  display: flex;
  flex-direction: column;
}

.hero-box {
  padding: 2rem;
  border: 2px solid var(--color-primary);
  border-bottom: none;
}

/* =====================
   STATS
===================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.5rem 0;
  text-align: center;
}

.inicio-footer-text {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.stat-label {
  font-size: 0.9rem;
}

/* =====================
   FEATURES GRID
===================== */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.feature-box {
  padding: 1.5rem;
  text-align: center;
  border: 2px solid var(--color-primary);
}

/* =====================
   RIGHT COLUMN
===================== */
.right-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.section {
  padding: 0.8rem 0;
}

/* =====================
   IMPACT
===================== */
.impact video {
  margin-top: 1rem;
  width: 100%;
  max-width: 520px;
  border-radius: 8px;
}

/* =====================
   FOOTER
===================== */
.main-footer {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.footer-social {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
}

.footer-links span {
  margin: 0 0.5rem;
}

/* =====================
   HAMBURGER BUTTON
===================== */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: var(--color-title);
  border-radius: 2px;
}

/* =====================
   MOBILE NAV (OCULTO POR DEFECTO)
   ⚠️ IMPORTANTE:
   - NO debe verse al cargar la página
   - Solo aparece cuando JS agrega la clase .active
===================== */
.mobile-nav {
  position: absolute;
  top: 100%;        /* Justo debajo del header */
  right: 2rem;      /* Alineado al botón hamburguesa */
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  padding: 1rem;
  display: none;    /* 🔴 OCULTO SIEMPRE */
  z-index: 2000;    /* Por encima de todo */
}

/* 🔴 CLASE ACTIVADA POR JAVASCRIPT */
.mobile-nav.active {
  display: block;
}

.mobile-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-nav a {
  font-weight: 600;
  color: var(--color-title);
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 900px) {
  .main-grid {
    grid-template-columns: 1fr;
  }

  .hero-box,
  .feature-box {
    border: none;
  }
}

@media (max-width: 768px) {
  .main-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }
}

---

### **4. login.css**

```markdown
### login.css
Estilos específicos para la página de login, enfocándose en formularios y elementos interactivos.

```css
/* =====================================================
   VARIABLES ECO MOVE
   👉 Cambia aquí la paleta de colores completa
===================================================== */
:root {
  --bg: #E6F4EA;        /* Fondo general de la página */
  --primary: #2E7D32;  /* Verde principal (botones, bordes) */
  --title: #1B5E20;    /* Color de títulos */
  --text: #1F3D2B;     /* Texto normal */
  --white: #ffffff;   /* Blanco puro */
  --gray: #e0e0e0;     /* Gris suave (fondos secundarios) */
}

/* =====================================================
   RESET
   👉 Elimina estilos por defecto del navegador
===================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================================================
   ESTILOS GLOBALES
   👉 Fuente, fondo y color base del texto
===================================================== */
body {
  font-family: 'Open Sans', sans-serif;
  background-color: var(--bg);
  color: var(--text);
}

/* =====================================================
   CONTENEDOR PRINCIPAL
   👉 Centra el login vertical y horizontalmente
===================================================== */
.login-wrapper {
  min-height: 100vh;              /* Ocupa toda la pantalla */
  display: flex;
  justify-content: center;        /* Centrado horizontal */
  align-items: center;            /* Centrado vertical */
  padding: 1rem;
}

/* =====================================================
   TARJETA DEL LOGIN
   👉 Tamaño, sombra y espaciado del cuadro principal
===================================================== */
.login-card {
  background-color: var(--white);
  width: 100%;
  max-width: 380px;               /* Ancho máximo del login */
  border-radius: 18px;            /* Bordes redondeados */
  padding: 1.8rem;                /* Espacio interno */
  display: flex;
  flex-direction: column;
  gap: 1.2rem;                    /* Separación entre bloques */
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* =====================================================
   LOGO Y TÍTULO
   👉 Logo superior del login
===================================================== */
.login-logo {
  text-align: center;
}

.login-logo img {
  width: 60px;                    /* Tamaño del logo */
}

.login-logo h1 {
  font-family: 'Roboto', sans-serif;
  color: var(--title);
  margin-top: 0.4rem;
}

/* =====================================================
   BOTONES DE LOGIN
   👉 Facebook, Google, Email
===================================================== */
.login-buttons {
  display: flex;
  flex-direction: column;         /* Botones en columna */
  gap: 0.6rem;                    /* Separación entre botones */
}

.btn-login {
  padding: 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--gray);  /* Borde gris */
  background-color: #f5f5f5;      /* Fondo del botón */
  font-size: 0.85rem;
  cursor: pointer;
}

/* Hover de botones login */
.btn-login:hover {
  background-color: #ebebeb;
}

/* =====================================================
   BOTÓN HOME
   👉 Regresa a index.html
===================================================== */
.home-btn {
  display: block;
  width: 100%;
  padding: 0.8rem;

  background-color: var(--white);   /* Fondo blanco */
  color: var(--primary);            /* Texto verde */

  text-align: center;
  border-radius: 6px;
  font-weight: 600;

  border: 2px solid var(--primary); /* Borde verde */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover del botón Home */
.home-btn:hover {
  background-color: var(--primary); /* Todo verde */
  color: var(--white);              /* Texto blanco */
}

/* =====================================================
   PANEL DE IMAGEN (RUTAS / ESTACIONES)
   👉 Imagen decorativa central
===================================================== */
.panel-section {
  text-align: center;
}

.panel-title {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--title);
}

.panel-img {
  width: 100%;
  max-height: 140px;              /* Altura máxima de la imagen */
  object-fit: contain;            /* Mantiene proporción */
  border-radius: 8px;
  background-color: var(--gray);  /* Fondo si la imagen no carga */
}

/* =====================================================
   REDES SOCIALES
   👉 Iconos inferiores
===================================================== */
.login-social {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.login-social img {
  width: 26px;                    /* Tamaño de iconos */
  height: 26px;
  cursor: pointer;
}

/* =====================================================
   RESPONSIVE
   👉 Ajustes para pantallas bajas
===================================================== */
@media (max-height: 700px) {
  .login-card {
    gap: 0.8rem;                  /* Menos separación */
    padding: 1.2rem;              /* Menos padding */
  }

  .panel-img {
    max-height: 110px;            /* Imagen más pequeña */
  }
}


---

### **5. main.js**

```markdown
### main.js
Script principal para agregar interactividad, como mensajes en consola y control de eventos.

```javascript
const hamburger = document.querySelector('.hamburger');
const mobileNav = document.querySelector('.mobile-nav');

hamburger.addEventListener('click', () => {
  mobileNav.style.display =
    mobileNav.style.display === 'block' ? 'none' : 'block';
});




### sustento guia

El diseño de la landing page se basa en principios clave de diseño visual que buscan asegurar una experiencia de usuario atractiva y fácil de navegar. Se ha trabajado en la jerarquía visual para que el usuario pueda identificar rápidamente lo más importante, como los botones de llamada a la acción (CTA) y la propuesta de valor. Se eligió una paleta de colores equilibrada que destaca sin ser abrumadora, y se utilizó un espaciado generoso entre los elementos para que el contenido sea claro y legible. La tipografía fue seleccionada con cuidado para garantizar que el texto sea fácil de leer en cualquier dispositivo, y el diseño es responsivo, adaptándose bien tanto a móviles como a escritorio. Todo esto se combinó para crear una experiencia visualmente coherente y funcional.

En cuanto a las heurísticas de usabilidad de Nielsen, se aplicaron las siguientes para mejorar la interacción con el usuario:

Visibilidad del estado del sistema: Aseguramos que el usuario siempre sepa en qué estado se encuentra, desde la carga de la página hasta la confirmación de una acción, como cuando envían un formulario. Los botones tienen feedback visual inmediato para que el usuario sepa que su acción fue registrada.

Correspondencia entre el sistema y el mundo real: Se usaron términos claros y comprensibles en la interfaz. En lugar de jerga técnica, se emplearon palabras familiares para que el usuario no se sienta confundido o perdido, facilitando la navegación.

Control y libertad del usuario: Se proporcionaron opciones para que el usuario pueda deshacer o corregir acciones fácilmente, como en los formularios donde se puede editar o eliminar información sin complicaciones. Esto da al usuario control sobre lo que está haciendo.

Consistencia y estándares: Se siguieron convenciones comunes de diseño web, como el uso de iconos universales y botones con texto claro, para que el usuario no tenga que aprender un nuevo sistema de interacción.

Prevención de errores: Se implementaron medidas como validaciones previas en los formularios para evitar que los usuarios cometan errores, y cuando ocurren, se proporcionan mensajes de error claros y fáciles de entender.

Reconocimiento, no recuerdo: Los elementos clave, como las opciones de navegación y los CTA, se mantienen visibles en todo momento, evitando que el usuario tenga que recordar qué acción tomar a continuación.

Flexibilidad y eficiencia de uso: Se diseñaron accesos rápidos para usuarios más experimentados, como botones visibles para acciones frecuentes, sin sobrecargar la interfaz para los novatos.

Estética y diseño minimalista: El diseño no está sobrecargado con información innecesaria; solo se muestra lo esencial para que el usuario se enfoque en lo importante.

Al aplicar estas heurísticas, se asegura que la landing page no solo sea visualmente atractiva, sino también fácil de usar y accesible para todo tipo de usuarios.
EcoMove Template

rottenmater23

EcoMove Template

Features

Requirements

How to Use

Extension Settings

Known Issues

Release Notes

0.0.1

index.html
