El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Componentes Comunes de UI

Siguiente ►
►

En este tema, exploraremos los componentes más comunes utilizados en el diseño de interfaces de usuario (UI). Estos componentes son los bloques de construcción fundamentales que permiten a los usuarios interactuar con una aplicación o sitio web de manera efectiva. Comprender estos componentes es crucial para diseñar interfaces intuitivas y eficientes.

  1. Botones

Descripción

Los botones son elementos interactivos que permiten a los usuarios realizar acciones específicas, como enviar un formulario o navegar a otra página.

Tipos de Botones

  • Botón Primario: Usado para la acción principal en una interfaz.
  • Botón Secundario: Usado para acciones secundarias.
  • Botón de Texto: Botones sin borde, generalmente usados para acciones menos importantes.

Ejemplo de Código

<button class="btn-primary">Enviar</button>
<button class="btn-secondary">Cancelar</button>
<button class="btn-text">Más información</button>

Consejos

  • Asegúrate de que los botones sean fácilmente identificables y accesibles.
  • Usa colores y tamaños para diferenciar la importancia de las acciones.

  1. Campos de Entrada

Descripción

Los campos de entrada permiten a los usuarios ingresar datos, como texto, números o contraseñas.

Tipos de Campos de Entrada

  • Campo de Texto: Para ingresar texto libre.
  • Campo de Contraseña: Para ingresar contraseñas, ocultando el texto.
  • Campo de Número: Para ingresar valores numéricos.

Ejemplo de Código

<input type="text" placeholder="Nombre">
<input type="password" placeholder="Contraseña">
<input type="number" placeholder="Edad">

Consejos

  • Proporciona etiquetas claras y placeholders para guiar al usuario.
  • Valida los datos de entrada para mejorar la experiencia del usuario.

  1. Menús de Navegación

Descripción

Los menús de navegación permiten a los usuarios moverse a través de diferentes secciones de una aplicación o sitio web.

Tipos de Menús

  • Barra de Navegación: Menú horizontal o vertical con enlaces a las principales secciones.
  • Menú Desplegable: Menú que se expande al hacer clic o pasar el ratón.

Ejemplo de Código

<nav>
  <ul>
    <li><a href="#home">Inicio</a></li>
    <li><a href="#services">Servicios</a></li>
    <li><a href="#contact">Contacto</a></li>
  </ul>
</nav>

Consejos

  • Mantén la navegación simple y coherente.
  • Usa indicadores visuales para mostrar la sección actual.

  1. Tarjetas

Descripción

Las tarjetas son contenedores que agrupan información relacionada, como imágenes, texto y enlaces.

Ejemplo de Código

<div class="card">
  <img src="imagen.jpg" alt="Imagen de ejemplo">
  <h3>Título de la Tarjeta</h3>
  <p>Descripción breve de la tarjeta.</p>
  <a href="#">Leer más</a>
</div>

Consejos

  • Usa tarjetas para destacar contenido importante o para agrupar elementos relacionados.
  • Asegúrate de que las tarjetas sean responsivas y se adapten a diferentes tamaños de pantalla.

  1. Modales

Descripción

Los modales son ventanas emergentes que se superponen al contenido principal para mostrar información adicional o solicitar una acción del usuario.

Ejemplo de Código

<div class="modal">
  <div class="modal-content">
    <span class="close-button">&times;</span>
    <h2>Título del Modal</h2>
    <p>Contenido del modal.</p>
  </div>
</div>

Consejos

  • Usa modales con moderación para no interrumpir la experiencia del usuario.
  • Asegúrate de que los modales sean accesibles y fáciles de cerrar.

Ejercicio Práctico

Objetivo: Crear una página web simple que incluya los componentes de UI discutidos.

Instrucciones

  1. Crea un archivo HTML.
  2. Incluye un botón primario y secundario.
  3. Añade un formulario con campos de texto y contraseña.
  4. Implementa un menú de navegación simple.
  5. Diseña una tarjeta con una imagen y texto.
  6. Crea un modal que se active al hacer clic en un botón.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Componentes Comunes de UI</title>
  <style>
    /* Estilos básicos para los componentes */
    .btn-primary { background-color: blue; color: white; }
    .btn-secondary { background-color: gray; color: white; }
    .card { border: 1px solid #ccc; padding: 16px; }
    .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
    .modal-content { background-color: white; margin: 15% auto; padding: 20px; width: 80%; }
    .close-button { float: right; cursor: pointer; }
  </style>
</head>
<body>

  <nav>
    <ul>
      <li><a href="#home">Inicio</a></li>
      <li><a href="#services">Servicios</a></li>
      <li><a href="#contact">Contacto</a></li>
    </ul>
  </nav>

  <button class="btn-primary">Enviar</button>
  <button class="btn-secondary">Cancelar</button>

  <form>
    <input type="text" placeholder="Nombre">
    <input type="password" placeholder="Contraseña">
  </form>

  <div class="card">
    <img src="imagen.jpg" alt="Imagen de ejemplo">
    <h3>Título de la Tarjeta</h3>
    <p>Descripción breve de la tarjeta.</p>
    <a href="#">Leer más</a>
  </div>

  <button onclick="document.querySelector('.modal').style.display='block'">Abrir Modal</button>

  <div class="modal">
    <div class="modal-content">
      <span class="close-button" onclick="document.querySelector('.modal').style.display='none'">&times;</span>
      <h2>Título del Modal</h2>
      <p>Contenido del modal.</p>
    </div>
  </div>

</body>
</html>

Retroalimentación

  • Errores Comunes: No olvidar cerrar los modales puede llevar a una experiencia de usuario frustrante.
  • Consejo Adicional: Usa CSS para mejorar la apariencia y la usabilidad de los componentes.

Conclusión

En esta sección, hemos cubierto los componentes comunes de UI que son esenciales para cualquier diseñador o desarrollador. Estos componentes no solo mejoran la interacción del usuario, sino que también contribuyen a una experiencia de usuario más coherente y accesible. En el próximo tema, exploraremos los patrones de diseño en UI, que te ayudarán a crear interfaces más efectivas y atractivas.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados