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>
Introducción
Componentes y Ciclo de Vida en Svelte
Creación de interfaces con Svelte: menos código, más eficiencia
Elementos básicos de Svelte
Guía práctica para iniciar proyectos con Svelte y Git
Estilos CSS en Svelte: Variables y Globalización
Creación de Componentes en Svelte: Paso a Paso
Reactividad en Svelte: Manejo de Contadores Interactivos
Propiedades en Svelte: Definición y Uso de Valores por Defecto
Condicionales y Dark Mode en Componentes de Svelte
Iteración y Control de Flujos en Svelte: Desestructuración Eficiente
Manejo de Eventos y Binding en Componentes Svelt
Ciclo de Vida de Componentes y APIs en Svelte
Reactividad en Svelte: Uso de Stores para Estado Global
Configuración del proyecto
Creación de redes sociales con Svelte y Node.js
Configuración de Webpack para Proyectos con Svelte
Configuración de Webpack Dev Server para Proyectos Svelte
Desarrollo de la aplicación
Estructura de Componentes con Svelte: Header, Main y Sidebar
CSS Grid: Diseño de Layouts Responsivos
Timeline en Svelte: Creación de Componente de Publicación
Estilos CSS para Componentes en Svelte
Conexión de APIs: Integración Completa en Proyectos usando Svelte
Programación Asíncrona en JavaScript: Promesas y async/await
Crear modal y compartir en Facebook usando Svelte
Manejo de likes y stores en Svelte para aplicaciones web
Deployment
Despliegue de aplicaciones Svelte con Netlify: paso a paso
Componentes y reactividad en Svelte: Aprende a crear un proyecto completo
Programación en Python para principiantes
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Timeline en Svelte: Creación de Componente de Publicación
18/26Recursos
¿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:
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?