Estructura de Componente Timeline en Svelte para Pubstagram

¿Cómo se hizo la estructura del timeline en Pubsstagram?

En nuestra misión por construir Pubsstagram, la estructura del timeline es fundamental. Se ha diseñado para mostrar las fotografías de manera organizada y profesional. Aquí te explico detalladamente cómo se construyó este componente esencial.

¿Cuál es la estructura básica del timeline?

Para crear el timeline, primero eliminamos el contenido existente del componente y nos enfocamos en la nueva estructura. Este componente contiene un div llamado timeline-container. Dentro de este, colocamos el componente Cart, encargado de mostrar las fotos en el timeline. La estructura básica es sencilla pero esencial para un funcionamiento correcto.

<div class="timeline-container">
  <Cart />
</div>

¿Cómo se implementa el componente Cart?

El componente Cart es crucial ya que organiza la información que cada usuario ve. Incluye:

• Cabezal (Header): Muestra la imagen de perfil, el nombre de usuario, ubicación y un ícono de settings.
• Foto: Contiene la imagen que se desea mostrar.
• Íconos: Para acciones como "me gusta", compartir y guardar.
• Descripción: Ofrece el nombre de usuario y el mensaje del post.
• Sección de comentarios: Muestra los comentarios ya existentes e incluye un área para añadir nuevos.

Código para el Header:

<div class="cart-header">
  <div class="cart-user">
    <img src="https://arepa.f3.amazonaws.com/elmo002.jpg" alt="User Image" />
    <h2>elmo.pug <span>Bogotá, Colombia</span></h2>
  </div>
  <div class="cart-settings">
    <i class="fas fa-ellipsis-h"></i>
  </div>
</div>

¿Cómo se despliegan los íconos y la foto?

Los íconos se organizan en dos secciones; esto facilita la administración y diseño. Se usa FontAwesome para los íconos, lo que proporciona un aspecto consistente y profesional.

<div class="card-icons">
  <div class="card-icons-first">
    <i class="fas fa-heart"></i>
    <i class="fas fa-paper-plane"></i>
  </div>
  <div class="card-icons-second">
    <i class="fas fa-bookmark"></i>
  </div>
</div>

¿Cómo se añaden los comentarios?

Los comentarios son críticos para la interacción dentro de Pubsstagram. Se ha creado un componente separado para mantener el código organizado. Este componente tiene un espacio para mostrar comentarios existentes y un formulario para añadir más.

Código para añadir comentarios:

<div class="comments">
  <div class="comments-users">
    <h3>Chris Peta: <span>Hola, Elmo</span></h3>
  </div>
  <div class="comments-add">
    <form>
      <input type="text" class="comments-input" placeholder="Agregar comentario" id="text" />
      <button type="submit">Post</button>
    </form>
  </div>
</div>

¿Qué pasos seguir después de la estructura básica?

Con toda la estructura HTML completa, el siguiente paso esencial es estilizar la aplicación. Esto dará vida a la estructura, haciendo la aplicación no solo funcional sino visualmente atractiva. La implementación de estilos CSS será la base para mejorar la experiencia del usuario.

En nuestra próxima clase, nos enfocaremos en añadir estos estilos, asegurándonos de que tu aplicación de Pubsstagram tenga un aspecto profesional y esté lista para impresionar. No te olvides de seguir explorando y mejorando tus habilidades de desarrollo web, cada línea de código es un paso hacia el dominio completo. ¡Ánimo y sigue programando!