96 términos

Glosario de Vibe Coding

Noventa y seis términos, una tarjeta cada uno. De la idea al lanzamiento: una línea de explicación y un ejemplo para cada uno.

Explora por tema

Prueba uno ahora

05Diseño y experiencia

Prototype

Prototipo

Haz primero una maqueta clicable de la interfaz para sentir cómo se usa.

Por ejemplo

Haz unas pantallas en Figma y recorre el flujo haciendo clic.

Figma

18Código y versiones

Branch

Rama

Abre una línea paralela desde el código principal para desarrollar sin tocar la versión principal.

Por ejemplo

Creé una rama feature para construir el inicio de sesión.

Learn Git Branching

35Frontend y web

Browser DevTools

DevTools del navegador

El depurador integrado en el navegador para revisar estructura, estilos y errores.

Por ejemplo

Cuando la página no aparecía, abrí DevTools para leer el error.

Chrome DevTools

41IA y prompting

RAG

Haz que la IA busque material relevante primero y responda a partir de él: menos alucinaciones, más precisión.

Por ejemplo

Mi app usa RAG para recuperar material del diccionario y luego la IA escribe la explicación.

43Publicación y seguridad

CI / CD

Prueba, construye y despliega automáticamente tras cada commit, sin pasos manuales.

Por ejemplo

Configuré CI/CD en GitHub Actions y cada push despliega solo.

47Depurar y probar

Log

Información que el programa registra solo mientras se ejecuta, útil para rastrear problemas.

Por ejemplo

Leí el log de ejecución y encontré por qué falló la llamada a la API.

50Ideas y planificación

Wireframe

Un boceto de la página que muestra la maquetación y dónde va cada cosa, sin color ni detalle visual.

Por ejemplo

Dibujé antes un wireframe para fijar dónde van el botón y el texto.

Excalidraw

67Backend y datos

Cache

Caché

Guardar temporalmente los datos más usados para que el sistema responda más rápido.

Por ejemplo

Guardo los resultados de palabras populares en la caché para que aparezcan antes.

68IA y prompting

Vector Database

Base de datos vectorial

Una base pensada para almacenar y recuperar vectores, habitual en apps de IA como la búsqueda semántica.

Por ejemplo

Guardo el vector de cada palabra en una base vectorial para hacer búsqueda semántica.

Cloudflare Vectorize

75Red y protocolos

Status Code

Código de estado

El número de tres cifras que devuelve el servidor e indica si la petición tuvo éxito.

Por ejemplo

Un 200 significa que fue bien; un 404 probablemente indica que la URL está mal.

MDN Status Codes

84Depurar y probar

Test Coverage

Cobertura de pruebas

La proporción de código alcanzada por las pruebas; mide si probar es lo bastante completo.

Por ejemplo

La cobertura de mi proyecto es del 80%, así que casi todo el código clave está probado.

Vitest

88Publicación y seguridad

Monitoring

Monitorización

Vigilar tras el lanzamiento el estado de la app y métricas clave como errores y tiempo de respuesta.

Por ejemplo

Configuré monitorización, vi que la tasa de errores subió de madrugada y lo revisé.

Workers Observability

97Ideas y planificación

User Feedback

Opinión del usuario

Las opiniones, sugerencias y problemas que plantean los usuarios tras usar el producto; base clave para mejorar.

Por ejemplo

Un usuario dijo que la pronunciación no era clara, así que mejoré el audio.

Publica una página

Ver todos los términos

01Ideas y planificación

Idea

Qué quieres construir y qué problema resuelve.

Por ejemplo

Una app que ayude a descubrir la historia detrás de las palabras en inglés.

02Ideas y planificación

MVP

Producto mínimo viable

Haz primero la versión más pequeña que de verdad funcione, para validar la idea.

Por ejemplo

La primera versión solo hace: ver unas palabras y su etimología.

03Ideas y planificación

PRD

Documento de requisitos

Escribe de forma global qué hace el producto, para quién y por qué.

Por ejemplo

Esta es la ficha completa del producto.

Markdown a HTML

04Ideas y planificación

Spec

Especificación

Detalla exactamente cómo debe funcionar una función concreta.

Por ejemplo

El botón de guardar va arriba a la derecha, se rellena al pulsar y el dato se guarda en la base de datos.

05Diseño y experiencia

Prototype

Prototipo

Haz primero una maqueta clicable de la interfaz para sentir cómo se usa.

Por ejemplo

Haz unas pantallas en Figma y recorre el flujo haciendo clic.

Figma

06IA y prompting

Prompt

La instrucción que le das a la IA; determina la calidad de la salida.

Por ejemplo

Hazme un componente de tarjeta de palabra en React con la palabra, la pronunciación y un botón de guardar.

07IA y prompting

Context

Contexto

La información relevante que la IA necesita para completar la tarea.

Por ejemplo

Objetivo del producto + código actual + documento de requisitos: todo eso es contexto.

08Código y versiones

GitHub

Sincroniza tu repositorio local con la nube; también es el portafolio del desarrollador.

Por ejemplo

Sube el código a GitHub para tener copia y seguir en otro equipo.

Learn Git Branching

09Publicación y seguridad

Deploy

Despliegue

Publica la app terminada en un servidor para que otros puedan entrar.

Por ejemplo

Tras desplegar, tu app tiene una URL que cualquiera puede visitar.

Hosting en 1 clic

10Entorno de desarrollo

Code Editor

Editor de código

La herramienta donde escribes y editas código, como Word para documentos.

Por ejemplo

Escribo código en Cursor: ese es mi editor de código.

Cursor

11Entorno de desarrollo

Terminal

Controla el ordenador directamente con comandos de texto, sin ratón.

Por ejemplo

Escribo comandos en la terminal para instalar dependencias.

ExplainShell

12Entorno de desarrollo

Shell

El programa que recibe los comandos que escribes y los ejecuta de verdad.

Por ejemplo

Uso zsh: es un tipo de shell.

Oh My Zsh

13Entorno de desarrollo

Package Manager

Gestor de paquetes

Descarga, instala y gestiona las herramientas y librerías externas que necesita un proyecto.

Por ejemplo

Uso npm install para añadir una librería nueva.

npm

14Código y versiones

Repository

Repositorio

El conjunto de todo el código, el historial y la configuración de un proyecto.

Por ejemplo

Mi proyecto Bunny es un repositorio de GitHub.

15Código y versiones

Commit

Haz una foto de este cambio de código y deja un registro permanente.

Por ejemplo

Cuando termino una función hago commit, y así puedo volver a esta versión.

Learn Git Branching

16Código y versiones

Push

Sube tus commits locales a un repositorio remoto como GitHub.

Por ejemplo

Uso git push para sincronizar el código con GitHub.

17Código y versiones

Pull

Descarga a tu máquina lo último del repositorio remoto.

Por ejemplo

En equipo, hago git pull primero para traer los últimos cambios.

18Código y versiones

Branch

Rama

Abre una línea paralela desde el código principal para desarrollar sin tocar la versión principal.

Por ejemplo

Creé una rama feature para construir el inicio de sesión.

Learn Git Branching

19Frontend y web

Frontend

Lo que el usuario ve y usa: botones, páginas, animaciones.

Por ejemplo

La página de inicio, los botones y las tarjetas que veo están hechos en el frontend.

20Backend y datos

Backend

Lo que el usuario no ve: el manejo de datos y la lógica de negocio por detrás.

Por ejemplo

Cuando inicio sesión, el backend verifica mi cuenta y mi contraseña.

21Backend y datos

Database

Base de datos

Donde se guardan los datos a largo plazo: usuarios, elementos guardados, etc.

Por ejemplo

Las palabras que guardo están en la base de datos y siguen ahí la próxima vez.

22Backend y datos

API

La ventana por la que dos programas se piden cosas entre sí.

Por ejemplo

Mi app envía una palabra a la IA por una API y recibe la explicación.

MDN HTTP

23Backend y datos

API Key

Clave de API

El secreto que demuestra quién eres al llamar a la API de otro. Nunca lo publiques.

Por ejemplo

Guardo la clave de API de OpenAI en un archivo .env.

24Código y versiones

Framework

Un andamiaje ya construido por otros para que entregues más rápido.

Por ejemplo

Uso Next.js como framework para este proyecto.

25Entorno de desarrollo

Dependency

Dependencia

Una herramienta o librería externa que tu proyecto necesita para funcionar.

Por ejemplo

Este proyecto necesita instalar algunas dependencias para funcionar.

26Entorno de desarrollo

Environment

Entorno

El conjunto de sistema, herramientas y variables que un programa necesita para ejecutarse.

Por ejemplo

Ejecuto el código en mi entorno de desarrollo local, que no es el de producción.

27Entorno de desarrollo

Runtime

La plataforma donde el código se ejecuta de verdad, como Node.js o Python.

Por ejemplo

Mi proyecto se ejecuta sobre el runtime de Node.js.

Node.js

28Frontend y web

HTML

Define qué contenido tiene una página: el esqueleto de la página.

Por ejemplo

Escribí un título y un botón en la página con HTML.

Abrir playground MDN HTML

29Frontend y web

CSS

Controla el estilo de la página: color, tipografía, espaciado y maquetación.

Por ejemplo

Con CSS puse el botón en verde y le di esquinas redondeadas.

MDN CSS Abrir playground

30Frontend y web

JavaScript

Da vida a la página: clics, entradas, datos y demás lógica de interacción.

Por ejemplo

Con JavaScript hice que la palabra aparezca al pulsar el botón.

MDN JavaScript

31Frontend y web

React

Un framework de frontend popular que construye interfaces a base de componentes.

Por ejemplo

Con React convertí la tarjeta de palabra en un componente reutilizable.

react.dev

32Frontend y web

Component

Componente

Un bloque de interfaz reutilizable y autónomo, como un botón, una tarjeta o una barra de navegación.

Por ejemplo

Hice un componente de tarjeta de palabra que sirve en cualquier página.

33Frontend y web

State

Estado

Los datos que la interfaz tiene ahora; cuando cambian, la página se actualiza sola.

Por ejemplo

Al pulsar guardar, el estado pasa a true y el icono se rellena.

34Frontend y web

DOM

El árbol en que el navegador convierte el HTML y que JavaScript usa para cambiar la página.

Por ejemplo

Cambié el texto de la página a través del DOM con JavaScript.

MDN DOM

35Frontend y web

Browser DevTools

DevTools del navegador

El depurador integrado en el navegador para revisar estructura, estilos y errores.

Por ejemplo

Cuando la página no aparecía, abrí DevTools para leer el error.

Chrome DevTools

36Diseño y experiencia

Responsive

Hace que la página se vea bien en móvil, tableta y ordenador.

Por ejemplo

Configuré un diseño responsive y en el móvil también se ve bien.

web.dev

37Publicación y seguridad

Hosting

Ejecutar tu web o app en el servidor en la nube de otro para que el mundo pueda entrar.

Por ejemplo

Desplegué la app en Vercel para que otros puedan visitarla online.

Hosting en 1 clic

38Publicación y seguridad

Domain

Dominio

La dirección con nombre del sitio, para que el usuario llegue con un nombre fácil de recordar.

Por ejemplo

Compré el dominio www.mydapp.com.

Cloudflare Registrar

39Publicación y seguridad

HTTPS / SSL

Cifra el tráfico entre el sitio y el usuario; el navegador muestra un candado que indica conexión segura.

Por ejemplo

Tras desplegar configuré HTTPS, así que ya hay candado en la barra de direcciones.

Let's Encrypt

40Backend y datos

NoSQL

Una base de datos sin estructura de tablas fija: más flexible, útil para datos complejos o cambiantes.

Por ejemplo

Guardo los registros de estudio en MongoDB, sin tablas complejas.

MongoDB

41IA y prompting

RAG

Haz que la IA busque material relevante primero y responda a partir de él: menos alucinaciones, más precisión.

Por ejemplo

Mi app usa RAG para recuperar material del diccionario y luego la IA escribe la explicación.

42Entorno de desarrollo

Docker

Empaqueta una app con el entorno que necesita para que funcione igual en cualquier máquina.

Por ejemplo

Empaqueto el proyecto con Docker y se ejecuta en un servidor nuevo con un comando.

Docker docs

43Publicación y seguridad

CI / CD

Prueba, construye y despliega automáticamente tras cada commit, sin pasos manuales.

Por ejemplo

Configuré CI/CD en GitHub Actions y cada push despliega solo.

44Publicación y seguridad

Serverless

Sin servidor que gestionar: el código corre bajo demanda y pagas por uso.

Por ejemplo

Uso funciones serverless de Vercel para la lógica de backend.

Cloudflare Workers

45Depurar y probar

Bug

Un error o problema en un programa que hace que se comporte de forma inesperada.

Por ejemplo

La página da error al pulsar guardar: eso es un bug.

46Depurar y probar

Debug

Depurar

Encontrar la causa de un problema y arreglarlo.

Por ejemplo

Depuré paso a paso desde el error y vi que un nombre de variable estaba mal escrito.

47Depurar y probar

Log

Información que el programa registra solo mientras se ejecuta, útil para rastrear problemas.

Por ejemplo

Leí el log de ejecución y encontré por qué falló la llamada a la API.

48Depurar y probar

Test

Prueba

Comprobar si un programa se comporta como debería.

Por ejemplo

Tras hacer el login probé el acceso normal, la contraseña incorrecta y más casos.

49Ideas y planificación

User Flow

Flujo de usuario

Los pasos y el camino que recorre un usuario para lograr un objetivo.

Por ejemplo

Abrir la app → ver la palabra del día → pulsarla → guardar. Ese es un flujo de usuario.

50Ideas y planificación

Wireframe

Un boceto de la página que muestra la maquetación y dónde va cada cosa, sin color ni detalle visual.

Por ejemplo

Dibujé antes un wireframe para fijar dónde van el botón y el texto.

Excalidraw

51Diseño y experiencia

UI

La presentación visual del producto: color, tipografía, iconos, botones.

Por ejemplo

Diseñé la UI de la app en Figma para que se viera más limpia.

52Diseño y experiencia

UX

La sensación global de usar el producto: si es usable, fluido y agradable.

Por ejemplo

Simplificamos los pasos para que encuentren antes las palabras guardadas: mejor UX.

53Código y versiones

Algorithm

Algoritmo

Un conjunto claro de pasos para resolver un problema, para que el ordenador procese datos y llegue a un resultado.

Por ejemplo

Las redes sociales usan un algoritmo para decidir qué ves en tu muro.

54Identidad y seguridad

Phishing

Hacerse pasar por una organización de confianza para que entregues contraseñas o datos de tarjeta.

Por ejemplo

Recibí un correo que fingía ser mi banco y pedía que pulsara un enlace: probable phishing.

Google Phishing Quiz

55Publicación y seguridad

Cloud

Nube

Recursos de computación (almacenamiento, software, servidores) entregados por internet en vez de en tu equipo.

Por ejemplo

Guardo los archivos en la nube y los alcanzo desde cualquier lugar.

Cloudflare

56Código y versiones

Git

Una herramienta que rastrea los cambios del código y permite el trabajo en equipo.

Por ejemplo

Uso Git para guardar distintas versiones del código y trabajar con el equipo.

Learn Git Branching

57Ideas y planificación

Iteration

Iteración

Mejorar lo que ya existe con pequeñas actualizaciones que acercan a un resultado mejor.

Por ejemplo

Iteramos con el feedback de los usuarios para mejorar el producto.

58Ideas y planificación

Prioritize

Priorizar

Decidir qué hacer primero y qué dejar para después, según importancia y urgencia.

Por ejemplo

Termino primero la tarea más importante y dejo el resto.

59Ideas y planificación

Stakeholder

Interesado

Cualquier persona con interés en un proyecto o producto: usuarios, clientes, equipo, dirección.

Por ejemplo

Antes de empezar hay que entender qué quiere cada interesado.

60Ideas y planificación

Conversion

Conversión

Cuando un usuario completa la acción deseada (registrarse, comprar, suscribirse): métrica clave del producto.

Por ejemplo

Mejoramos la conversión de registro rediseñando la página.

64Backend y datos

Schema

Esquema

Define la estructura de los datos en una base de datos: qué campos hay y de qué tipo es cada uno.

Por ejemplo

Al diseñar la base definí primero el esquema de la tabla de usuarios, con id, name y email.

65Backend y datos

Query

Consulta

La operación que obtiene datos de una base de datos, normalmente con SQL u otro lenguaje de consulta.

Por ejemplo

Consulto con SQL el usuario donde id = 1.

66Backend y datos

ORM

Mapeo objeto-relacional

Operar la base de datos desde el código de tu lenguaje en vez de escribir SQL directamente.

Por ejemplo

Creo usuarios con el ORM en lugar de escribir SQL complejo a mano.

Drizzle ORM

67Backend y datos

Cache

Caché

Guardar temporalmente los datos más usados para que el sistema responda más rápido.

Por ejemplo

Guardo los resultados de palabras populares en la caché para que aparezcan antes.

68IA y prompting

Vector Database

Base de datos vectorial

Una base pensada para almacenar y recuperar vectores, habitual en apps de IA como la búsqueda semántica.

Por ejemplo

Guardo el vector de cada palabra en una base vectorial para hacer búsqueda semántica.

Cloudflare Vectorize

69Backend y datos

File Storage

Almacenamiento de archivos

Un servicio para guardar imágenes, audio, vídeo y otros archivos.

Por ejemplo

Subo los audios de pronunciación al almacenamiento en la nube para que la app los reproduzca.

70Red y protocolos

HTTP

El protocolo base para enviar datos por internet; define cómo hablan cliente y servidor.

Por ejemplo

Cuando escribo una URL en el navegador, envío una petición al servidor por HTTP.

MDN HTTP

71Red y protocolos

Request

Petición

Los datos e instrucciones que el cliente envía al servidor, normalmente con URL, método y parámetros.

Por ejemplo

Envío una petición al servidor para obtener la lista de palabras de hoy.

MDN HTTP Methods

72Red y protocolos

Response

Respuesta

Los datos y el resultado que devuelve el servidor tras recibir una petición.

Por ejemplo

El servidor devuelve una respuesta JSON con la palabra y su significado.

73Red y protocolos

Endpoint

La dirección de acceso de una función concreta de la API; cada función suele tener su propio endpoint.

Por ejemplo

Llamo al endpoint /v1/words para obtener la lista de palabras.

74Red y protocolos

HTTP Method

Método HTTP

Declara qué operación hace la petición; los habituales son GET, POST, PUT y DELETE.

Por ejemplo

Uso POST para enviar una palabra nueva al servidor.

MDN HTTP Methods

75Red y protocolos

Status Code

Código de estado

El número de tres cifras que devuelve el servidor e indica si la petición tuvo éxito.

Por ejemplo

Un 200 significa que fue bien; un 404 probablemente indica que la URL está mal.

MDN Status Codes

76Red y protocolos

JSON

Un formato de datos ligero y legible, muy usado para pasar datos entre frontend y backend.

Por ejemplo

Los datos de palabras que devuelve la API suelen ser JSON.

MDN JSON

77Red y protocolos

Webhook

Cuando ocurre un evento, el servidor envía datos a una URL que configuraste, sin que tengas que consultar.

Por ejemplo

Tras el pago, el sistema avisa a mi servidor con un webhook.

78Código y versiones

SDK

Un kit de herramientas ya preparado que facilita llamar a las funciones de otro servicio sin escribirlo todo.

Por ejemplo

Con el SDK de OpenAI unas pocas líneas llaman a su API.

79Identidad y seguridad

Authentication

Autenticación

Confirma quién eres y demuestra que puedes acceder a un sistema o recurso.

Por ejemplo

Tras iniciar sesión, el sistema confirma mi identidad con autenticación.

Better Auth

80Identidad y seguridad

Authorization

Autorización

Tras confirmar la identidad, decide a qué recursos y acciones tienes permiso.

Por ejemplo

Aunque haya iniciado sesión, sin autorización no puedo borrar datos de otros.

81Depurar y probar

Error

Un problema que ocurre mientras el programa se ejecuta y hace que algo deje de funcionar.

Por ejemplo

Vi un TypeError, lo que indica un fallo de tipos en el código.

82Depurar y probar

Debugging

Depuración

El proceso de localizar, analizar y corregir problemas para que el programa vuelva a funcionar.

Por ejemplo

Revisé el error línea a línea y al final encontré y corregí el problema.

83Depurar y probar

Test Case

Caso de prueba

Un escenario y unos pasos concretos para verificar si una función trabaja bien.

Por ejemplo

Escribí un caso de prueba: con contraseña incorrecta debe mostrarse un aviso.

84Depurar y probar

Test Coverage

Cobertura de pruebas

La proporción de código alcanzada por las pruebas; mide si probar es lo bastante completo.

Por ejemplo

La cobertura de mi proyecto es del 80%, así que casi todo el código clave está probado.

Vitest

85Publicación y seguridad

CI

Tras cada commit, construir y probar automáticamente para detectar problemas antes.

Por ejemplo

Cuando hago push a GitHub, CI ejecuta las pruebas y me informa.

GitHub Actions

86Publicación y seguridad

CD

Tras pasar las pruebas, desplegar automáticamente a producción o staging para publicar antes.

Por ejemplo

Cuando pasan las pruebas, CD despliega la última versión en Vercel.

87Publicación y seguridad

Production

Producción

El entorno real que usan los usuarios, frente al de desarrollo, y normalmente más estable y seguro.

Por ejemplo

Tras probar, desplegamos la app en producción y salió al público.

88Publicación y seguridad

Monitoring

Monitorización

Vigilar tras el lanzamiento el estado de la app y métricas clave como errores y tiempo de respuesta.

Por ejemplo

Configuré monitorización, vi que la tasa de errores subió de madrugada y lo revisé.

Workers Observability

89Publicación y seguridad

Scaling

Escalado

Cuando crece el tráfico, añadir recursos de cálculo o mejorar la arquitectura para aumentar la capacidad.

Por ejemplo

Con más usuarios escalamos de 1 servidor a 3 para mantener la velocidad.

90Ideas y planificación

Milestone

Hito

Un punto importante del proyecto, que suele marcar si se completó un objetivo de una fase.

Por ejemplo

Nuestro primer hito es terminar el MVP; el segundo, el lanzamiento beta.

91Ideas y planificación

Timeline

Cronograma

El calendario previsto desde el inicio hasta el fin del proyecto, con los puntos clave de cada fase.

Por ejemplo

Planeamos terminar el MVP en 3 meses; ese es el cronograma del proyecto.

92Ideas y planificación

Resource

Recurso

Las personas, el tiempo, el dinero y las herramientas disponibles para completar un proyecto.

Por ejemplo

Soy la única persona en este proyecto, así que hay que planificar bien tiempo y recursos.

93Ideas y planificación

Collaboration

Colaboración

Varias personas trabajando juntas en un proyecto: comunicar, repartir tareas, compartir archivos y sincronizar avances.

Por ejemplo

Colaboro con un compañero en este proyecto en GitHub.

94Ideas y planificación

Documentation

Documentación

Archivos que registran información del proyecto: instrucciones, guías de desarrollo, docs de API, etc.

Por ejemplo

Escribí un README para que otros entiendan el proyecto rápido.

Markdown a HTML

95Código y versiones

License

Licencia

El acuerdo legal que indica cómo pueden otros usar, modificar y distribuir tu código.

Por ejemplo

Elegí la licencia MIT para que otros usen mi proyecto libremente.

Choose a License

96Código y versiones

Open Source

Código abierto

Código público que cualquiera puede ver, usar, modificar y al que puede contribuir, normalmente mantenido por una comunidad.

Por ejemplo

Publiqué el proyecto en abierto en GitHub, esperando más comentarios y contribuciones.

Open Source Guides

97Ideas y planificación

User Feedback

Opinión del usuario

Las opiniones, sugerencias y problemas que plantean los usuarios tras usar el producto; base clave para mejorar.

Por ejemplo

Un usuario dijo que la pronunciación no era clara, así que mejoré el audio.

Publica una página

98Ideas y planificación

Analytics

Analítica

Recoger y analizar datos de comportamiento de los usuarios para entender el uso del producto y decidir.

Por ejemplo

La analítica mostró que la mayoría usa el móvil, así que optimicé primero esa experiencia.

99Publicación y seguridad

Release

Lanzamiento

Publicar oficialmente una versión nueva o mejorada para los usuarios.

Por ejemplo

Terminamos las pruebas, así que ya podemos lanzar la v1.0.0.