Glosario Técnico
Una guía completa de términos técnicos explicados de forma simple. Desde conceptos básicos hasta avanzados, todo lo que necesitas saber sobre desarrollo web, UI, UX y más.
Cómo usar este glosario
- • Cada término incluye una definición simple con analogías del mundo real
- • Los ejemplos prácticos te ayudan a entender cómo se usa en la vida real
- • Está organizado por categorías para que encuentres lo que buscas fácilmente
- • Usa Ctrl+F para buscar términos específicos
Conceptos Básicos de Internet
Internet
Una red mundial de computadoras conectadas entre sí que permite compartir información. Es como una autopista digital donde viajan datos de un lugar a otro.
Ejemplo:
Cuando buscas algo en Google, estás usando Internet para conectarte con los servidores de Google.
Navegador Web (Browser)
Un programa que te permite ver páginas web. Es como una ventana al Internet.
Ejemplo:
Chrome, Firefox, Safari y Edge son navegadores web populares.
Sitio Web (Website)
Un conjunto de páginas relacionadas en Internet que puedes visitar. Es como un edificio digital con diferentes habitaciones (páginas).
Ejemplo:
Facebook, YouTube y Amazon son sitios web.
URL
La dirección de una página web. Es como la dirección postal de una casa, pero para sitios web.
Ejemplo:
https://www.google.com es una URL.
Servidor
Una computadora especial que almacena sitios web y los envía a tu navegador cuando los solicitas. Es como un bibliotecario que te entrega el libro que pides.
Ejemplo:
Cuando visitas una página web, tu navegador le pide la información a un servidor.
Hosting
El servicio que alquila espacio en servidores para guardar tu sitio web. Es como rentar un espacio en un centro comercial para tu tienda.
Ejemplo:
Netlify, Vercel y GoDaddy ofrecen servicios de hosting.
Dominio
El nombre único de tu sitio web. Es como el nombre de tu negocio.
Ejemplo:
google.com, facebook.com son dominios.
Desarrollo Web - Conceptos Generales
Desarrollo Web
El proceso de crear sitios web. Es como construir una casa, pero digital.
Ejemplo:
Un desarrollador web crea la página de inicio de una tienda online.
Código
Instrucciones escritas en un lenguaje especial que las computadoras entienden. Es como una receta que la computadora sigue.
Ejemplo:
HTML, CSS y JavaScript son lenguajes de código para crear sitios web.
Programación
El acto de escribir código para crear programas o sitios web. Es como escribir instrucciones detalladas para que una computadora haga algo.
Ejemplo:
Programar un botón que cambie de color cuando le das clic.
Framework
Un conjunto de herramientas y reglas pre-hechas que facilitan la creación de sitios web. Es como tener un kit de construcción con piezas listas para armar.
Ejemplo:
React, Vue y Astro son frameworks populares.
Biblioteca (Library)
Una colección de código pre-escrito que puedes usar en tu proyecto. Es como tener una caja de herramientas con funciones listas para usar.
Ejemplo:
jQuery es una biblioteca de JavaScript que simplifica tareas comunes.
Plugin
Un complemento que añade funcionalidades extra a un programa o sitio web. Es como un accesorio que mejora algo que ya tienes.
Ejemplo:
Un plugin de formularios de contacto para tu sitio web.
Frontend - La Parte Visual
Frontend
La parte del sitio web que los usuarios ven e interactúan. Es como la fachada y el interior de una tienda que los clientes pueden ver y tocar.
Ejemplo:
Los botones, menús, imágenes y textos que ves en una página web son el frontend.
HTML (HyperText Markup Language)
El lenguaje que define la estructura de una página web. Es como el esqueleto de una casa que define dónde van las paredes y puertas.
Ejemplo:
HTML define dónde va el título, los párrafos y las imágenes en una página.
CSS (Cascading Style Sheets)
El lenguaje que define cómo se ve una página web (colores, tamaños, posiciones). Es como la pintura y decoración de una casa.
Ejemplo:
CSS hace que un botón sea azul, redondo y tenga sombra.
JavaScript
El lenguaje que hace que las páginas web sean interactivas. Es como el sistema eléctrico de una casa que hace que las luces se enciendan cuando presionas un interruptor.
Ejemplo:
JavaScript hace que un menú se abra cuando haces clic en él.
Responsive Design (Diseño Responsivo)
Un diseño que se adapta a diferentes tamaños de pantalla (celular, tablet, computadora). Es como ropa elástica que se ajusta a diferentes tallas.
Ejemplo:
Un sitio web que se ve bien tanto en tu celular como en tu computadora.
Componente
Una pieza reutilizable de código que representa una parte de la interfaz. Es como un bloque de LEGO que puedes usar varias veces.
Ejemplo:
Un botón, una tarjeta o un menú pueden ser componentes.
React
Una biblioteca de JavaScript muy popular para crear interfaces de usuario. Facilita crear sitios web interactivos y modernos.
Ejemplo:
Facebook, Instagram y Netflix usan React.
Astro
Un framework moderno para crear sitios web rápidos. Es especialmente bueno para sitios con mucho contenido.
Ejemplo:
Este sitio web está hecho con Astro.
Tailwind CSS
Una herramienta de CSS que te permite diseñar rápidamente usando clases predefinidas. Es como tener un catálogo de estilos listos para usar.
Ejemplo:
En lugar de escribir CSS personalizado, usas clases como 'bg-blue-500' para un fondo azul.
Backend - El Motor Invisible
Backend
La parte del sitio web que no ves, pero que hace todo el trabajo detrás de escena. Es como la cocina de un restaurante donde se prepara la comida.
Ejemplo:
Cuando inicias sesión, el backend verifica tu contraseña y te da acceso.
Base de Datos (Database)
Un lugar organizado donde se guarda información. Es como un archivo gigante muy organizado.
Ejemplo:
Todos los usuarios, publicaciones y comentarios de Facebook se guardan en bases de datos.
API (Application Programming Interface)
Un intermediario que permite que diferentes programas se comuniquen entre sí. Es como un mesero que toma tu orden y la lleva a la cocina.
Ejemplo:
Cuando una app del clima muestra el pronóstico, usa una API para obtener esa información.
Servidor Web
Un programa que recibe solicitudes de navegadores y les envía las páginas web. Es como un repartidor que entrega paquetes.
Ejemplo:
Node.js y Apache son servidores web populares.
Node.js
Una tecnología que permite usar JavaScript en el backend. Antes JavaScript solo funcionaba en navegadores.
Ejemplo:
Netflix y LinkedIn usan Node.js en sus servidores.
SQL
Un lenguaje para comunicarse con bases de datos. Es como el idioma que usas para pedirle información a una base de datos.
Ejemplo:
SELECT * FROM usuarios WHERE edad > 18 obtiene todos los usuarios mayores de 18 años.
Autenticación
El proceso de verificar quién eres (como iniciar sesión). Es como mostrar tu identificación en la entrada de un edificio.
Ejemplo:
Cuando ingresas tu email y contraseña para entrar a tu cuenta.
Autorización
El proceso de verificar qué tienes permiso de hacer. Es como tener diferentes llaves para diferentes puertas.
Ejemplo:
Un usuario normal no puede borrar publicaciones de otros, pero un administrador sí.
UI (User Interface) - Interfaz de Usuario
UI (Interfaz de Usuario)
Todo lo que ves y con lo que interactúas en una aplicación o sitio web. Es la cara visible del producto.
Ejemplo:
Los botones, menús, formularios y colores que ves en una app.
Botón (Button)
Un elemento clickeable que ejecuta una acción. Es como un interruptor de luz.
Ejemplo:
El botón 'Enviar' en un formulario o 'Comprar ahora' en una tienda.
Formulario (Form)
Un conjunto de campos donde los usuarios ingresan información. Es como llenar una solicitud en papel, pero digital.
Ejemplo:
Cuando te registras en un sitio, llenas un formulario con tu nombre y email.
Menú de Navegación (Nav Menu)
Una lista de enlaces que te ayuda a moverte por el sitio. Es como el índice de un libro.
Ejemplo:
El menú en la parte superior de este sitio con 'Inicio', 'Componentes', 'FAQs'.
Modal (Ventana Emergente)
Una ventana que aparece sobre el contenido principal. Es como una nota adhesiva que aparece sobre tu pantalla.
Ejemplo:
Cuando haces clic en 'Olvidé mi contraseña' y aparece una ventana para recuperarla.
Tooltip
Un pequeño mensaje que aparece cuando pasas el cursor sobre algo. Es como una nota explicativa.
Ejemplo:
Cuando pasas el mouse sobre un ícono y aparece un texto que dice qué hace.
Iconos
Pequeñas imágenes que representan acciones u objetos. Son como señales de tránsito visuales.
Ejemplo:
El ícono de un sobre para email, o una lupa para buscar.
Card (Tarjeta)
Un contenedor visual que agrupa información relacionada. Es como una tarjeta de presentación digital.
Ejemplo:
En una tienda online, cada producto suele mostrarse en una tarjeta con imagen, precio y descripción.
UX (User Experience) - Experiencia de Usuario
UX (Experiencia de Usuario)
Cómo se siente una persona al usar tu sitio o aplicación. Es la experiencia completa, no solo lo visual.
Ejemplo:
Si un sitio es fácil de usar y te hace sentir bien, tiene buena UX.
Usabilidad
Qué tan fácil es usar algo. Un sitio usable es uno donde encuentras lo que buscas rápidamente.
Ejemplo:
Amazon tiene buena usabilidad porque es fácil encontrar y comprar productos.
Wireframe
Un boceto simple de cómo se verá una página. Es como un plano arquitectónico antes de construir la casa.
Ejemplo:
Un dibujo con cajas que muestran dónde irá el logo, el menú y el contenido.
Prototipo
Una versión de prueba de un sitio o app que simula cómo funcionará. Es como un modelo a escala antes de construir el edificio real.
Ejemplo:
Un prototipo clickeable en Figma que muestra cómo navegarás por la app.
Flujo de Usuario (User Flow)
El camino que sigue un usuario para completar una tarea. Es como un mapa de los pasos que das.
Ejemplo:
El flujo para comprar: ver producto → añadir al carrito → pagar → confirmar.
Call to Action (CTA)
Un elemento que invita al usuario a hacer algo específico. Es como una invitación clara a actuar.
Ejemplo:
Botones como 'Regístrate gratis', 'Comprar ahora' o 'Saber más'.
Accesibilidad
Hacer que tu sitio sea usable por personas con discapacidades. Es como poner rampas para sillas de ruedas.
Ejemplo:
Textos alternativos en imágenes para personas con problemas visuales.
Feedback (Retroalimentación)
Respuestas visuales que confirman que algo pasó. Es como cuando presionas un botón y hace clic.
Ejemplo:
Un mensaje que dice 'Guardado exitosamente' después de enviar un formulario.
Herramientas y Tecnologías
Git
Una herramienta que guarda el historial de cambios en tu código. Es como un 'control Z' infinito para programadores.
Ejemplo:
Si rompes algo en tu código, puedes volver a una versión anterior con Git.
GitHub
Un sitio web donde los programadores guardan y comparten su código usando Git. Es como Google Drive pero para código.
Ejemplo:
Los desarrolladores suben sus proyectos a GitHub para colaborar con otros.
VS Code (Visual Studio Code)
Un editor de código muy popular. Es como Microsoft Word pero diseñado para escribir código.
Ejemplo:
La mayoría de los desarrolladores web escriben su código en VS Code.
Terminal / Consola
Una ventana donde escribes comandos de texto para controlar la computadora. Es como hablarle a tu computadora con instrucciones escritas.
Ejemplo:
Escribir 'npm install' en la terminal para instalar paquetes.
NPM (Node Package Manager)
Una herramienta que te ayuda a instalar y gestionar bibliotecas de código. Es como una tienda de aplicaciones para código.
Ejemplo:
Usar 'npm install react' para añadir React a tu proyecto.
Figma
Una herramienta de diseño para crear interfaces de usuario. Es como Photoshop pero especializado en diseño web.
Ejemplo:
Los diseñadores crean mockups de sitios web en Figma antes de programarlos.
DevTools (Herramientas de Desarrollo)
Herramientas integradas en los navegadores para inspeccionar y depurar sitios web. Es como tener rayos X para ver cómo está hecho un sitio.
Ejemplo:
Presionar F12 en Chrome abre las DevTools donde puedes ver el código de cualquier sitio.
Conceptos de Desarrollo Avanzados
Deploy (Despliegue)
Publicar tu sitio web para que esté disponible en Internet. Es como abrir las puertas de tu tienda al público.
Ejemplo:
Después de terminar tu sitio, lo despliegas en Netlify para que todos puedan verlo.
Bug (Error)
Un problema o error en el código que hace que algo no funcione correctamente. Es como un defecto en un producto.
Ejemplo:
Un botón que no hace nada cuando le das clic es un bug.
Debug (Depurar)
El proceso de encontrar y arreglar bugs. Es como ser un detective que busca pistas.
Ejemplo:
Usar console.log() para ver qué valores tienen las variables y encontrar el error.
Variable
Un contenedor que guarda información en el código. Es como una caja con una etiqueta donde guardas cosas.
Ejemplo:
let nombre = 'Juan' guarda el texto 'Juan' en una variable llamada 'nombre'.
Función
Un bloque de código que hace una tarea específica y puede reutilizarse. Es como una receta que puedes seguir varias veces.
Ejemplo:
Una función que suma dos números: function sumar(a, b) { return a + b }
Loop (Bucle)
Código que se repite varias veces. Es como hacer la misma tarea una y otra vez automáticamente.
Ejemplo:
Mostrar todos los productos de una lista, uno por uno.
Condicional (If/Else)
Código que toma decisiones basadas en condiciones. Es como un camino que se divide según una regla.
Ejemplo:
If (edad >= 18) mostrar contenido para adultos, else mostrar contenido para menores.
Array (Arreglo)
Una lista ordenada de elementos. Es como una lista de compras.
Ejemplo:
let frutas = ['manzana', 'banana', 'naranja']
Objeto
Una colección de información relacionada agrupada. Es como una ficha con diferentes datos.
Ejemplo:
let persona = { nombre: 'Ana', edad: 25, ciudad: 'Santo Domingo' }
Async/Await (Asíncrono)
Código que puede esperar a que algo termine sin bloquear otras tareas. Es como pedir comida a domicilio y seguir haciendo otras cosas mientras llega.
Ejemplo:
Esperar a que se carguen datos de un servidor mientras el resto del sitio sigue funcionando.
Rendimiento y Optimización
Performance (Rendimiento)
Qué tan rápido y eficiente funciona un sitio web. Es como la velocidad de un auto.
Ejemplo:
Un sitio con buen rendimiento carga en menos de 3 segundos.
Optimización
Mejorar algo para que funcione mejor o más rápido. Es como afinar un motor.
Ejemplo:
Comprimir imágenes para que el sitio cargue más rápido.
Cache (Caché)
Guardar copias de archivos para cargarlos más rápido la próxima vez. Es como tener ingredientes ya preparados en la cocina.
Ejemplo:
Tu navegador guarda imágenes de sitios que visitas frecuentemente.
Lazy Loading (Carga Perezosa)
Cargar contenido solo cuando se necesita, no todo de una vez. Es como leer un libro página por página en lugar de cargarlo todo.
Ejemplo:
Las imágenes se cargan solo cuando haces scroll hasta ellas.
Minificación
Reducir el tamaño de archivos de código eliminando espacios y caracteres innecesarios. Es como comprimir un archivo ZIP.
Ejemplo:
Convertir 'function sumar(a, b) { return a + b }' en 'function sumar(a,b){return a+b}'
SEO (Search Engine Optimization)
Técnicas para que tu sitio aparezca en los primeros resultados de Google. Es como hacer que tu tienda sea más visible en una calle comercial.
Ejemplo:
Usar títulos descriptivos y palabras clave relevantes en tu contenido.
GitHub y Control de Versiones
GitHub
Una plataforma en línea donde los desarrolladores guardan, comparten y colaboran en proyectos de código. Es como Google Drive pero diseñado específicamente para programadores y código.
Ejemplo:
Millones de proyectos de código están alojados en GitHub, desde pequeños scripts hasta grandes aplicaciones como Visual Studio Code.
Repositorio (Repo)
Un carpeta o proyecto en GitHub que contiene todo el código y el historial de cambios. Es como una carpeta especial que guarda tu proyecto completo.
Ejemplo:
El repositorio 'foundation-cm' contiene todos los archivos de este sitio web.
Commit
Una fotografía o snapshot de los cambios que hiciste en tu código en un momento específico. Es como guardar una versión de tu trabajo con una descripción de qué cambió.
Ejemplo:
Hacer un commit con el mensaje 'Agregué la página de glosario' guarda esos cambios con esa descripción.
Push
Enviar tus commits locales (en tu computadora) al repositorio remoto en GitHub. Es como subir tu trabajo a la nube.
Ejemplo:
Después de hacer cambios locales, haces 'git push' para que esos cambios aparezcan en GitHub.
Pull
Descargar los cambios más recientes del repositorio remoto a tu computadora local. Es como sincronizar tu copia local con la versión más nueva en GitHub.
Ejemplo:
Si un compañero hizo cambios y los subió a GitHub, tú haces 'git pull' para obtener esos cambios.
Branch (Rama)
Una versión separada de tu proyecto donde puedes trabajar sin afectar el código principal. Es como tener una copia de seguridad donde experimentar.
Ejemplo:
Crear una rama 'nueva-feature' para trabajar en una nueva funcionalidad sin romper el código principal.
Main/Master
La rama principal del proyecto, generalmente la versión estable y lista para producción. Es como la versión oficial de tu proyecto.
Ejemplo:
El código en 'main' es lo que está publicado en el sitio web en vivo.
Merge
Combinar los cambios de una rama con otra rama. Es como fusionar dos versiones de un documento en una sola.
Ejemplo:
Cuando terminas de trabajar en la rama 'nueva-feature', haces un merge para llevar esos cambios a la rama 'main'.
Merge Conflict (Conflicto de Merge)
Cuando dos personas cambian las mismas líneas de código y Git no sabe cuál versión mantener. Es como cuando dos personas editan el mismo párrafo de formas diferentes.
Ejemplo:
Persona A cambia la línea 5 y Persona B también cambia la línea 5. Cuando intentan hacer merge, hay un conflicto.
Pull Request (PR)
Una solicitud para revisar y combinar cambios de una rama a otra. Es como pedir permiso antes de hacer un merge, permitiendo que otros revisen tu código.
Ejemplo:
Haces un PR para que tus compañeros revisen tu código antes de que se combine con 'main'.
Fork
Hacer una copia completa de un repositorio de otra persona en tu cuenta de GitHub. Es como hacer una copia de un proyecto para trabajar en él independientemente.
Ejemplo:
Forking un proyecto de código abierto para contribuir con mejoras.
Clone
Descargar una copia completa de un repositorio de GitHub a tu computadora. Es como descargar un proyecto para trabajar en él localmente.
Ejemplo:
Usar 'git clone https://github.com/usuario/proyecto.git' para obtener el código en tu computadora.
Staging Area (Área de Preparación)
Un área temporal donde seleccionas qué cambios quieres incluir en tu próximo commit. Es como una bandeja donde reúnes los cambios antes de guardarlos.
Ejemplo:
Usar 'git add archivo.js' para poner ese archivo en el staging area antes de hacer commit.
Commit History (Historial de Commits)
Un registro de todos los commits que se han hecho en un proyecto, mostrando qué cambió y cuándo. Es como un diario de cambios.
Ejemplo:
Ver el historial para saber quién cambió qué y cuándo, útil para entender la evolución del proyecto.
Remote
Una referencia a un repositorio en línea (generalmente en GitHub). Es como una dirección que apunta a dónde está tu proyecto en la nube.
Ejemplo:
'origin' es el nombre por defecto del remote que apunta a tu repositorio en GitHub.
Rebase
Reorganizar los commits de una rama para que estén basados en una rama diferente. Es como reordenar la historia de cambios.
Ejemplo:
Hacer rebase para que tu rama tenga los cambios más recientes de 'main' antes de hacer merge.
Stash
Guardar temporalmente cambios sin hacer commit, para poder cambiar de rama. Es como poner tus cambios en una caja temporal.
Ejemplo:
Si estás en medio de cambios y necesitas cambiar de rama, haces 'git stash' para guardar tu trabajo.
Diff
Una comparación que muestra exactamente qué líneas cambiaron entre dos versiones. Es como un resaltador que muestra las diferencias.
Ejemplo:
Ver el diff para saber exactamente qué cambió antes de hacer commit.
Issue
Un reporte de un problema, bug o solicitud de nueva funcionalidad en GitHub. Es como un ticket de soporte.
Ejemplo:
Crear un issue para reportar que el botón de login no funciona.
Collaborator (Colaborador)
Una persona que tiene permiso para trabajar en un repositorio. Es como un miembro del equipo.
Ejemplo:
Invitar a un compañero como colaborador para que pueda hacer push directamente al repositorio.
Seguridad Web
HTTPS
Una versión segura de HTTP que encripta la información. Es como enviar una carta en un sobre sellado en lugar de una postal.
Ejemplo:
Los sitios con HTTPS tienen un candado en la barra de direcciones.
Encriptación
Convertir información en un código secreto que solo personas autorizadas pueden leer. Es como escribir en clave.
Ejemplo:
Cuando envías tu número de tarjeta de crédito, se encripta para que nadie más pueda verlo.
Cookie
Un pequeño archivo que los sitios web guardan en tu navegador para recordar información. Es como una nota adhesiva que el sitio pega en tu navegador.
Ejemplo:
Las cookies recuerdan que iniciaste sesión para no pedirte la contraseña cada vez.
Token
Una clave temporal que prueba que tienes permiso para acceder a algo. Es como un pase de un día para entrar a un parque.
Ejemplo:
Después de iniciar sesión, recibes un token que te da acceso a tu cuenta.
Firewall
Un sistema de seguridad que bloquea accesos no autorizados. Es como un guardia de seguridad digital.
Ejemplo:
Un firewall puede bloquear intentos de hackeo a tu servidor.
¿Listo para empezar?
Ahora que conoces los términos básicos, explora nuestros recursos para aprender más