Mejora de la visualización de tecnologías expertas en devlog-ist/landing
Introducción
En el proyecto devlog-ist/landing, cuyo objetivo es proporcionar una plataforma atractiva, una de las características clave es la visualización clara de las habilidades de los usuarios. Recientemente, se ha mejorado la presentación de las tecnologías en las que un usuario tiene un nivel de experiencia "Experto". Este post describe cómo se implementó esta mejora, centrándose en el uso de etiquetas coloreadas para resaltar estas tecnologías.
El Problema
Anteriormente, todas las tecnologías se listaban de la misma manera en la barra lateral de estadísticas, sin distinción entre los diferentes niveles de competencia. Esto dificultaba la identificación rápida de las áreas donde un usuario tenía un conocimiento profundo.
La Solución
La solución implementada consiste en agregar etiquetas (badges) con forma de píldora y colores resaltados para las tecnologías con un nivel de competencia "Experto". Estas etiquetas se muestran entre el título de la sección y la lista agrupada por categoría. El esquema de color se adapta al tema de la interfaz:
- Temas oscuros: Colores vibrantes translúcidos.
- Temas claros: Colores pastel.
- Tema retro: Colores llamativos con sombras.
Los colores se asignan de forma cíclica a través de 6 variantes para garantizar una diferenciación visual clara.
Implementación
Aunque no podemos mostrar el código específico, la lógica general implicaría:
- Iterar sobre la lista de tecnologías de un usuario.
- Verificar el nivel de competencia para cada tecnología.
- Si el nivel es "Experto", generar un elemento HTML con la clase CSS correspondiente para la etiqueta coloreada.
- Aplicar un color diferente a cada etiqueta "Experto" usando un ciclo de colores predefinido.
Un ejemplo ilustrativo de cómo se podría generar el HTML con JavaScript:
const tecnologias = [
{ nombre: 'JavaScript', nivel: 'Experto' },
{ nombre: 'HTML', nivel: 'Avanzado' },
{ nombre: 'CSS', nivel: 'Experto' },
{ nombre: 'Node.js', nivel: 'Intermedio' }
];
const colores = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF'];
let colorIndex = 0;
tecnologias.forEach(tecnologia => {
let elementoHTML = document.createElement('div');
elementoHTML.textContent = tecnologia.nombre;
if (tecnologia.nivel === 'Experto') {
elementoHTML.classList.add('experto-badge');
elementoHTML.style.backgroundColor = colores[colorIndex];
colorIndex = (colorIndex + 1) % colores.length;
}
document.body.appendChild(elementoHTML);
});
Este código crea dinámicamente elementos div para cada tecnología y, si la tecnología tiene un nivel de "Experto", agrega una clase y un color de fondo.
Beneficios
- Visualización rápida: Los usuarios pueden identificar rápidamente las tecnologías donde tienen mayor experiencia.
- Mejora de la usabilidad: La interfaz es más intuitiva y fácil de usar.
- Presentación atractiva: Las etiquetas coloreadas hacen que la información sea más atractiva visualmente.
Conclusión
Esta mejora en la visualización de las tecnologías expertas en devlog-ist/landing proporciona una forma más clara y atractiva de presentar las habilidades de los usuarios. El uso de etiquetas coloreadas facilita la identificación rápida de las áreas de experiencia, lo que mejora la usabilidad general de la plataforma. Se anima a seguir explorando formas de mejorar la presentación de la información para hacerla más accesible y atractiva para los usuarios.
