Introducción

1

Componentes y Ciclo de Vida en Svelte

2

Creación de interfaces con Svelte: menos código, más eficiencia

Elementos básicos de Svelte

3

Guía práctica para iniciar proyectos con Svelte y Git

4

Estilos CSS en Svelte: Variables y Globalización

5

Creación de Componentes en Svelte: Paso a Paso

6

Reactividad en Svelte: Manejo de Contadores Interactivos

7

Propiedades en Svelte: Definición y Uso de Valores por Defecto

8

Condicionales y Dark Mode en Componentes de Svelte

9

Iteración y Control de Flujos en Svelte: Desestructuración Eficiente

10

Manejo de Eventos y Binding en Componentes Svelt

11

Ciclo de Vida de Componentes y APIs en Svelte

12

Reactividad en Svelte: Uso de Stores para Estado Global

Configuración del proyecto

13

Creación de redes sociales con Svelte y Node.js

14

Configuración de Webpack para Proyectos con Svelte

15

Configuración de Webpack Dev Server para Proyectos Svelte

Desarrollo de la aplicación

16

Estructura de Componentes con Svelte: Header, Main y Sidebar

17

CSS Grid: Diseño de Layouts Responsivos

18

Timeline en Svelte: Creación de Componente de Publicación

19

Estilos CSS para Componentes en Svelte

20

Conexión de APIs: Integración Completa en Proyectos usando Svelte

21

Programación Asíncrona en JavaScript: Promesas y async/await

22

Crear modal y compartir en Facebook usando Svelte

23

Manejo de likes y stores en Svelte para aplicaciones web

Deployment

24

Despliegue de aplicaciones Svelte con Netlify: paso a paso

25

Componentes y reactividad en Svelte: Aprende a crear un proyecto completo

26

Programación en Python para principiantes

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Svelte

Curso de Svelte

Oscar Barajas Tavares

Oscar Barajas Tavares

Timeline en Svelte: Creación de Componente de Publicación

18/26
Recursos

¿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!

Aportes 7

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

En el curso de Frontend Developer nos enseñaron que no deberíamos colocar texto entre etiquetas <div></div> aunque es verdad que se puede, @tiffcode dice que por temas de semánticas siempre deberíamos utilizar las etiquetas para tal fin, como <p>,<span> y todas las <h>

para las personas que no les carga las imágenes les pido a ustedes que instalen desde la terminal lo siguiente file-loader así

$ npm install --save-dev file-loader

después de que se haya instalado file-loader se dirigen a webpack.config.js y en donde dice rules copian y pegan este siguiente código de webpack que les dejaré para que les funcione.

{
  test: /\.(png|gif|jpg|jpeg)$/,
  use: [
    {
      loader: 'file-loader',
      options: { 
          name: 'assets/[hash].[ext]' 
        },
    }
  ],
},

y listo para usarlo crean una carpeta que se llame assets espero no se les olvide, por que es ahí donde vamos alojar nuestros archivos multimedia y luego hacemos un import de las imágenes que queremos traer por ejemplo:

import LaImagen from './assets/elmo.jpg'

// y en las etiquetas img en donde dice src escriben lo siguiente: 

<img src={LaImagen} alt='esto es una imagen' />

y listo eso era todo espero les sirva a cada uno de ustedes 😃

Gracias Oscar por darte el tiempo de mostrar la maquetación HTML, para mí es una de las partes más importantes para que el desarrollo del proyecto sea optimo.

¿Qué requisitos debe tener un componente para utilizar <slot/>? Porque Sidebar no lo utiliza pero también se convierte en un componente padre de Profile, Stories y Footer.

Si quieres usar tus propias imágenes, lo recomendable es subir el repositorio a Github y usar Github-pages, o también Netlify

Consulta: Sería mejor crear un componente específico para la información del perfil? Veo que se repite en varias partes del front. Gracias.

👌