Estructuración de Headers y Sidebars en Aplicaciones Web

Contenido del curso

Introducción

Elementos básicos de Svelte

Configuración del proyecto

Desarrollo de la aplicación

Deployment

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:46

Estructuración de Headers y Sidebars en Aplicaciones Web

Curso de Svelte

Clase 17 de 26

Clase 17 / 26

Recursos

¿Cómo estructurar el encabezado de la aplicación?

El encabezado es un elemento crucial en cualquier aplicación web, pues proporciona navegación y branding. En este ejemplo, el encabezado o "header" se estructura siguiendo un enfoque sistemático para garantizar una disposición lógica y un diseño limpio que sea fácil de ajustar con CSS posteriormente.

Div "header": Este contenedor es el elemento principal donde se agrupa todo el contenido del encabezado.

<div class="header">
  <div class="container">
    <div class="header-content">
      <div class="logo">
        <h1>Pugstagram</h1>
      </div>
      <nav class="header-navigation">
        <ul>
            <!-- Aquí van los iconos de navegación -->
        </ul>
      </nav>
    </div>
  </div>
</div>

¿Cómo incorporar iconos con Font Awesome?

Font Awesome es una herramienta que te permite integrar fácilmente iconos en las aplicaciones, mejorando la usabilidad y el diseño visual. Para poder usar Font Awesome, sigue estos pasos:

Crear una cuenta en Font Awesome y obtener un kit. Esto es esencial para poder incorporar los iconos necesitados en tu proyecto.

Inserta el kit en tu proyecto mediante su incorporación en el archivo index.html.

<script src="https://kit.fontawesome.com/tu_kit.js" crossorigin="anonymous"></script>

Utiliza los iconos en tu HTML. Una vez configurado, adapta los iconos que desees a tu aplicación. Por ejemplo, para un icono de perfil:
```
<li><i class="fas fa-user-alt"></i></li>
```

¿Cómo configurar la barra lateral (sidebar)?

La barra lateral facilita la accesibilidad y la navegación a través de los contenidos de una aplicación. Se compone de varios componentes que permiten al usuario interactuar con diferentes partes de la página.

Estructura del sidebar:

<div class="sidebar">
  <div class="container">
    <!-- Componentes del sidebar -->
  </div>
</div>

¿Cómo importar y crear componentes en Svelte?

Cuando estás trabajando con componentes en Svelte, es importante organizarlos adecuadamente. Aquí se hará uso de tres componentes clave: perfil, historias y pie de página.

Importar los componentes desde su ubicación en la estructura del proyecto.

import Profile from './Profile.svelte';
import Histories from './Histories.svelte';
import Footer from './Footer.svelte';

Crear el componente Profile en el archivo Profile.svelte.

<div class="profile">
  <div class="profile-content">
    <div class="profile-avatar">
      <img src="https://s3.amazonaws.com/avatar.png" alt="avatar" />
    </div>
    <div class="profile-info">
      <h2>GNDX</h2>
      <p>Óscar Barajas</p>
    </div>
  </div>
</div>

¿Cómo se estructuran las historias (stories)?

Las historias son elementos visuales clave que se muestran en una sección especial, familiar en plataformas como Instagram.

Estructura inicial del componente Stories:

<div class="stories">
  <div class="stories-head">
    <h2>Historias</h2>
    <span>Ver todas</span>
  </div>
  <div class="stories-item">
    <div class="history-item-box">
      <img src="https://s3.amazonaws.com/avatar.png" alt="story" />
      <h2>GNDX <span>10 horas antes</span></h2>
    </div>
  </div>
</div>

¿Cómo crear un pie de página efectivo?

El pie de página sirve como complemento de la información de contacto y legales del sitio. Es vital mantener su estructura clara y estandarizada.

Reto de creación del footer: Crear el contenido del pie de página utilizando la convención ya establecida. Usa clases como footer y footer-container.

Siempre puedes mejorarlo con elementos visuales y técnicas adicionales de CSS, animaciones, entre otros, para que tu diseño sea más atractivo y fácil de usar. Una excelente práctica es iterar constantemente sobre tus elementos de interfaz y este enfoque modular permitirá hacerlo con eficiencia y claridad.