Aquí tienen el archivo que hay que copiar al principio de la clase
Introduccion
Bienvenida al curso de Empaquetadores Web
¿Qué es un empaquetador de módulos de JavaScript?
Empaquetadores de módulos más populares
¿Por qué necesitamos un empaquetador de módulos?
Webpack
Primeros pasos en Webpack
Configuración de webpack
Proyecto a empaquetar: Tu propio árbol de links
Lógica del árbol de links tipo linktree
Empaquetando un proyecto con webpack
Parcel
Primeros pasos en Parcel
Proyecto a empaquetar: single page con Vanilla JavaScript
Lógica del proyecto single page
Empaquetando un proyecto con parcel
ESBuild
Primeros pasos en ESBuild
Proyecto a empaquetar: contador de React
Empaquetando nuestro proyecto con ESBuild
Configuración de ESBuild serve
Rollup
Primeros pasos en Rollup
Configurando plugins de Rollup
Proyecto a empaquetar: Fake API
Empaquetando nuestro proyecto con Rollup
Vite
Empaquetando un proyecto con Vite
Conclusiones
Ventajas y Desventajas de los empaquetadores
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Proyecto a empaquetar: Tu propio árbol de links
7/23Recursos
¿Cómo crear un proyecto tipo Linktree con HTML y JavaScript?
La combinación de creatividad y programación puede resultar en proyectos impresionantes y personalizados, como un sitio web al estilo Linktree. Este proyecto te permitirá consolidar y compartir enlaces de manera efectiva a través de un solo link. En esta guía, exploraremos cómo configurar un proyecto personalizado utilizando HTML, JavaScript y Tailwind CSS. Prepárate para sacar el máximo provecho de tus habilidades de desarrollo web mientras trabajamos con una aplicación de Vanilla JavaScript y herramientas de empaque como Webpack.
¿Qué elementos incluye el sitio web?
El proyecto culminará en una landing page sencilla, pero efectiva. Aquí tienes los elementos clave que deberías considerar:
- Información personal: Incluye tu nombre, sobrenombre, una breve descripción y una foto.
- Enlaces a redes sociales: Añade enlaces a tus redes sociales preferidas, como Twitter, Instagram o LinkedIn, usando íconos SVG.
- Contenido recomendado: Posibilidad de agregar enlaces a blogs, artículos o cursos.
El resultado será una interfaz similar a Linktree, pero completamente bajo tu control.
¿Cómo adaptar la estructura HTML a tus necesidades?
Arrancaremos pegando en nuestro editor de código el HTML proveniente de un repositorio. Sin embargo, necesitarás hacer varios ajustes personales:
- SEO y personalización: Cambia las etiquetas del título, descripción y nombres a los tuyos.
- Configuración visual: Asegúrate de que tus redes sociales estén correctamente enlazadas y reflejen tu información personal.
- Uso de Tailwind CSS: Esta herramienta provee un diseño optimizado sin necesidad de desarrollar CSS desde cero.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<title>Tu Nombre</title>
</head>
<body>
<header>
<h1>Nombre Completo</h1>
<p>Breve Descripción</p>
</header>
<main id="links">
<!-- Los enlaces se insertarán aquí dinámicamente -->
</main>
<footer>
<!-- Tu mensaje en el footer -->
</footer>
</body>
</html>
¿Cómo manipular el DOM con JavaScript?
Ahora, entramos a la parte emocionante: trabajar con JavaScript puro para hacer nuestro sitio dinámico. Aquí utilizaremos JavaScript para iterar sobre la lista de enlaces que quieras compartir y añadirlos al DOM.
const links = document.getElementById('links');
const loadLinks = () => {
const linkList = [
{ name: 'Mi Blog', url: 'https://mi-blog.com' },
{ name: 'Curso en Platzi', url: 'https://platzi.com' }
];
linkList.forEach(link => {
const anchor = document.createElement('a');
anchor.href = link.url;
anchor.textContent = link.name;
links.appendChild(anchor);
});
};
// Llama la función para cargar los enlaces
loadLinks();
¿Cómo personalizar el proyecto con Webpack?
Finalmente, para que tu proyecto sea más profesional y manejable, vale la pena automatizar el desarrollo utilizando Webpack. Aunque la instalación específica dependerá de las necesidades del proyecto, el objetivo es facilitar la importación y modificación de recursos, así como mejorar el desempeño del sitio.
A medida que implementes estos pasos, sigue adaptando y experimentando con la estructura para hacerla completamente tuya. Comparta tu versión final en las secciones de comentarios y preséntala a otros para obtener retroalimentación y continuar aprendiendo. Nunca subestimes el poder de la personalización y la automatización en el desarrollo web. ¡Adelante, desarrolla y aprende!
Aportes 5
Preguntas 2
Ordenar por:
const data =
{
name: "Oscar Barajas",
nickname: "gndx",
description: "...",
avatar: "...",
social:
[
{
name: "twitter",
url: "https://twitter.com/",
username: "",
},
{
name: "instagram",
url: "https://instagram.com/",
username: "",
},
],
links:
[
{
name: "blog",
url: "https://example.com/",
color: "red",
emoji: "📖",
},
{
name: "podcast",
url: "https://example.com/",
color: "yellow",
emoji: "💬",
},
],
footer: "Made with Love on Colombia",
};
El código que se muestra en la clase es diferente al que se muestra en Github y en los recursos de la clase … el lugar para poner el main es inmediatamente después de la línea 171 en VSCODE con el actual código que se encuentra en Github.
Hubiera preferido algún proyecto más limpio que no haga tanto ruido por usar Tailwind :/
Por qué con esta nueva interfaz de Platzi no hay nada en los recursos?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?