Ir al contenido principal

Entradas

Mostrando entradas de noviembre, 2025

Menú con submenús

De
 Quiero hacer un área dentro de una página web donde al clickear tanto con el botón derecho como con el izquierdo aparezca un menú de items personalizado. Perfecto, Gabriel 🙌. Lo que quieres es crear un menú contextual personalizado que aparezca al hacer clic (izquierdo o derecho) dentro de un área específica de tu página. Te muestro cómo hacerlo paso a paso con HTML, CSS y JavaScript . 📂 Ejemplo básico HTML html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Menú personalizado</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="area"> Haz clic aquí (izquierdo o derecho) </div> <!-- Menú oculto --> <ul id="menu"> <li>Opción 1</li> <li>Opción 2</li> <li>Opción 3</li> </ul> <script src="script.js"></script>...
Publicar un comentario
Leer más

Bundlers de frontend (HTML, JS, CSS, assets)

De
 ¿Qué información importante hay sobre estructuras de proyectos frontend y bundlers para gente que no conoce nada de eso? Respuesta breve: Una estructura de proyecto frontend organiza los archivos y carpetas para que el desarrollo sea claro y mantenible. Los bundlers (como Vite, Webpack o Parcel) son herramientas que empaquetan tu código y recursos (HTML, CSS, JS, imágenes) para que el navegador los entienda y cargue más rápido. 🧩 Estructura básica de un proyecto frontend Para alguien que empieza desde cero, lo más importante es entender cómo se organizan los archivos: index.html → El punto de entrada de la aplicación. Aquí se cargan los estilos y scripts. src/ → Carpeta donde vive tu código fuente. components/ → Pequeñas piezas reutilizables de interfaz (ej. botones, menús). styles/ → Archivos CSS o preprocesadores (Sass, Less). assets/ → Imágenes, íconos, fuentes. main.js o main.tsx → Archivo principal que inicia la aplicación. public/ → Archivos estáticos que no neces...
Publicar un comentario
Leer más

Diferentes maneras de importar un archivo .svg

De
 Estoy importando un archivo que se llama torta.svg como si fuera un componente de React, a través de SVGR. Dice: InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('http://127.0.0.1:5173/resources/images/torta.svg') is not a valid name. Este es un error muy común cuando se usa SVGR y Vite, ¡pero es fácil de solucionar! El mensaje de error indica que React está intentando usar una cadena de texto que contiene la ruta de tu archivo SVG ( http://127.0.0.1:5173/.../torta.svg ) como si fuera el nombre de un componente JSX. Esto sucede porque Vite y SVGR exponen el SVG de dos maneras distintas, y probablemente estás usando la exportación por defecto , que es la URL del archivo, en lugar de la exportación nombrada , que es el componente React en sí. La Solución: Usar la Exportación Nombrada ( ReactComponent ) Cuando instalaste vite-plugin-svgr , este configuró la importación para darte dos cosas: Exportación por defecto: ...
Publicar un comentario
Leer más