Frontend - Junior | Evaluación Técnica

Información del candidato

Nombre completo

Email

Teléfono (opcional)

Años de experiencia

CV / Currículum Formatos aceptados: PDF, DOC, DOCX. Máximo 5MB

Preguntas de conocimiento

¿Cuál es la diferencia principal entre `<section>`, `<article>` y `<div>` en HTML5?

`<article>` es contenido independiente redistribuible, `<section>` agrupa contenido temático relacionado, y `<div>` no tiene valor semántico alguno

`<div>` es el elemento semántico principal del documento, mientras que `<section>` y `<article>` son contenedores genéricos sin significado especial

Los tres elementos son intercambiables funcionalmente y solo difieren en los estilos por defecto que aplica el navegador al renderizarlos

`<section>` solo puede usarse como hijo directo de `<article>`, y `<div>` es obligatorio como wrapper de cualquier contenido semántico

Para un blog post que muestra autor, fecha y comentarios, ¿qué combinación de elementos semánticos es más apropiada?

`<div class="post">` con `<span>` para autor y fecha es suficiente porque los screen readers interpretan el contenido textual independientemente del elemento usado

`<section>` como contenedor principal con `<p>` para todo el contenido, ya que `<section>` indica que es una parte temática del documento

`<main>` como wrapper con `<footer>` para autor y fecha, porque `<main>` indica el contenido principal y `<footer>` metadatos del documento

`<article>` con `<header>`, `<time datetime="...">`, `<address>` para autor, y `<section>` para comentarios, proporcionando máxima semántica y accesibilidad

Observa este CSS: `.container { display: flex; justify-content: center; } .child { align-self: center; }` — El hijo NO se centra verticalmente. ¿Por qué?

La propiedad `align-self` no es compatible con el modelo de layout flexbox y solo funciona dentro de un contexto de CSS Grid layout

Se debería usar `margin: auto` en el hijo en vez de `align-self`, ya que `align-self` solo funciona cuando hay múltiples elementos flex en el contenedor

El contenedor no tiene una altura definida (`height`), por lo que no hay espacio vertical disponible para que `align-self: center` pueda centrar el elemento

Falta declarar `flex-direction: column` en el contenedor, porque `align-self` solo opera en el eje principal definido por flex-direction

¿Cuál es la diferencia entre `rem`, `em` y `px` en CSS?

`px` es una unidad relativa a la resolución física de la pantalla del dispositivo, mientras que `rem` y `em` son unidades absolutas que no cambian con el contexto

`rem` es relativo al font-size del elemento raíz (`html`), `em` es relativo al font-size del elemento padre, y `px` es una unidad absoluta independiente del contexto

`rem` y `em` son funcionalmente idénticos y solo difieren en la sintaxis utilizada, ambos se calculan respecto al elemento raíz del documento

`em` se calcula relativo al viewport del navegador, `rem` relativo al root element, y `px` relativo al contenedor padre más cercano con posición definida

¿Qué imprime este código? `for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 100); }`

Imprime 0, 1, 2, 3, 4 secuencialmente porque cada iteración del bucle captura el valor actual de `i` en el closure del callback de setTimeout

Imprime undefined cinco veces porque la variable `i` sale del scope del bucle for antes de que los callbacks de setTimeout se ejecuten en el event loop

5, 5, 5, 5, 5 — porque `var` no crea scope de bloque, y cuando los callbacks se ejecutan tras 100ms, el bucle ya terminó y `i` vale 5

Imprime 0, 0, 0, 0, 0 porque setTimeout congela el valor de `i` en el momento de registrar el callback, capturando siempre el valor inicial

¿Qué es event delegation y cuándo es útil?

Es un patrón donde se asigna un solo event listener al elemento padre y se usa `event.target` para identificar el hijo que disparó el evento; especialmente útil con listas dinámicas

Es el proceso de delegar eventos al servidor backend para procesarlos de forma asíncrona mediante WebSockets, reduciendo la carga de procesamiento en el cliente

Es asignar un event listener individual a cada elemento hijo para tener mayor control granular sobre el comportamiento de cada elemento en el DOM

Es un método específico de React para pasar eventos entre componentes hermanos a través del árbol de componentes usando el contexto compartido

¿Cuáles son las meta tags esenciales para SEO y redes sociales?

Solo Open Graph tags son necesarias para SEO; el elemento `<title>` no afecta al posicionamiento porque los motores de búsqueda priorizan el contenido visible

`<meta name="robots">` y `<meta name="author">` son las únicas meta tags que los motores de búsqueda modernos como Google utilizan para indexar contenido

Solo `<title>` y `<meta name="keywords">` son necesarios, ya que Google sigue usando keywords como factor principal de ranking en sus algoritmos

`<title>`, `<meta name="description">`, `<meta property="og:title">`, `<meta property="og:image">` y `<meta property="og:description">` cubren SEO y compartir en redes

En una interfaz, el botón "Eliminar" tiene el mismo estilo, tamaño y color que el botón "Guardar". ¿Qué principio de UI/UX se está violando?

Se viola el principio de proximidad de Gestalt, que establece que elementos cercanos se perciben como relacionados y deben tener funciones similares

Jerarquía visual y affordance — las acciones destructivas deben diferenciarse visualmente de las constructivas para prevenir errores del usuario

Se viola la Ley de Fitts, que establece que el tiempo para alcanzar un objetivo depende de la distancia y el tamaño del elemento interactivo

Se viola el principio de consistencia de Nielsen, que requiere que todos los botones de una interfaz mantengan exactamente el mismo estilo visual

¿Cuál es la diferencia entre `dependencies` y `devDependencies` en package.json, y qué hace `package-lock.json`?

No hay diferencia funcional real entre ambas, es solo organización visual. `package-lock.json` funciona como backup del package.json en caso de corrupción del archivo

`devDependencies` se instalan primero en orden de prioridad y `dependencies` después. `package-lock.json` almacena el historial completo de cambios de versiones

`dependencies` son para producción, `devDependencies` solo para desarrollo (testing, build tools). `package-lock.json` fija las versiones exactas para builds reproducibles

`dependencies` son paquetes opcionales y `devDependencies` son obligatorios para el funcionamiento. `package-lock.json` es un archivo generado exclusivamente por yarn

¿Qué es two-way data binding y cómo se implementa en Angular y Vue?

Es sincronización automática bidireccional entre modelo y vista. En Angular se implementa con `[(ngModel)]` y en Vue con la directiva `v-model` sobre inputs

Es un patrón donde los datos fluyen solo del componente al template unidireccionalmente. Se usa `@Output` en Angular y `$emit` en Vue para notificar cambios

Solo existe en React mediante la combinación de `useState` para el estado y `onChange` para capturar eventos de input del usuario en formularios

Es un patrón de diseño obsoleto que ha sido completamente reemplazado por programación reactiva con streams y observables en frameworks modernos

Desafío de código

Crea un componente de tarjeta de producto responsive usando HTML semántico y CSS puro (sin frameworks CSS). El componente debe seguir un enfoque mobile-first y ser completamente funcional en diferentes tamaños de pantalla.

Requisitos

Usar HTML semántico apropiado (article, figure, heading, etc.)
Diseño mobile-first con al menos un breakpoint para desktop
Estados hover y focus claramente visibles para accesibilidad
Incluir imagen del producto, nombre, precio y botón de acción
No usar frameworks CSS (Bootstrap, Tailwind, etc.) — solo CSS vanilla

Ejemplos

Entrada: { product: { name: "Auriculares Bluetooth", price: 49.99, image: "headphones.jpg" } }

Salida:

Tarjeta responsive que muestra la imagen, nombre, precio formateado y un botón "Añadir al carrito" con estados hover/focus visibles

Tecnologías aceptadas

HTML5
CSS3
JavaScript vanilla
TypeScript

Envío de solución

URL del repositorio * Plataformas soportadas: GitHub, GitLab, Bitbucket Introduce una URL válida de repositorio (https://github.com, gitlab.com o bitbucket.org seguido de usuario/repositorio)

Frontend - Junior