Guía principiantes
Glosario web
¿Qué es un header? ¿Y una API? Términos web explicados con ejemplos.
Categorías
Estructura del sitio
Header (Encabezado)
jé-der
La sección superior de un sitio web, que contiene elementos de navegación como el logotipo, el menú y la barra de búsqueda.
Ejemplo
El logotipo de 'AIGP' y la sección del menú en la parte superior de este sitio.
Footer (Pie de página)
fú-ter
La sección inferior de un sitio web, que suele contener información como el aviso de derechos de autor, enlaces útiles y datos de contacto.
Ejemplo
La sección donde dice '© AIGP' en la parte inferior de la página.
Sidebar (Barra lateral)
sáid-bar
Un área secundaria colocada junto al contenido principal, que a menudo muestra listas de categorías o filtros.
Ejemplo
La sección del menú a la izquierda en un panel de administración.
Breadcrumb (Ruta de navegación)
bréd-kramb
Una navegación jerárquica que muestra la ubicación de la página actual dentro del sitio. Por ejemplo: INICIO > Categoría > Nombre del artículo.
Ejemplo
INICIO / Colección de Prompts / Efecto Fade-in con AOS.js
Menú Hamburguesa (Hamburger Menu)
ham-bur-gué-sa me-nú
Un icono de tres líneas (≡) que, al tocarlo, abre un menú. Se utiliza comúnmente en pantallas de dispositivos móviles.
Ejemplo
Las tres líneas que aparecen en la esquina superior derecha al ver un sitio en el móvil.
Navegación Global
nah-veh-gah-SYOHN gloh-BAHL
El menú principal que aparece de manera consistente en todas las páginas de un sitio web, conteniendo enlaces a secciones clave como Inicio, Acerca de, Productos y Contacto. Suele ubicarse en el encabezado o la barra lateral y ayuda a los usuarios a navegar rápidamente a áreas importantes del sitio.
Ejemplo
La barra de menú en la parte superior de un sitio web corporativo que siempre muestra 'Inicio', 'Acerca de', 'Servicios', 'Carreras' y 'Contacto' es la navegación global.
Área de Contenido Principal
AH-reh-ah deh kon-TEN-doh prayn-see-PAHL
La sección central de una página web donde se muestra la información principal de esa página (como un artículo, descripción de producto o imágenes). Está rodeada por el encabezado, pie de página y barras laterales, y contiene el contenido central que los usuarios vienen a ver.
Ejemplo
En una página de publicación de blog, la amplia sección central que muestra el título del artículo, el texto principal y las imágenes es el área de contenido principal.
Navegación Local
nah-veh-gah-SYOHN loh-KAHL
Un menú o conjunto de enlaces que aparece solo dentro de una sección o página específica, proporcionando una navegación detallada relacionada con esa área particular. Existe debajo de la navegación global y ayuda a los usuarios a moverse más profundamente dentro de la categoría o tema actual.
Ejemplo
En la página de categoría 'Computadoras' de una tienda en línea, el submenú que muestra 'Portátiles', 'Escritorio' y 'Accesorios' es la navegación local.
Sección Hero
sek-SYOHN EH-roh
Un área grande y visualmente impactante ubicada en la parte superior de una página web, justo debajo del encabezado. Contiene imágenes o videos llamativos, un titular y un botón principal de llamado a la acción (CTA), diseñado para dar una fuerte primera impresión y comunicar inmediatamente el propósito del sitio.
Ejemplo
En la página de destino de una empresa, el área con una hermosa imagen de fondo, un gran titular en el centro que dice 'Construyendo el Futuro con Tecnología Innovadora' y un botón 'Aprende Más' debajo es la sección hero.
Barra de búsqueda
bahr-rah deh boos-keh-dah
Un campo de entrada en un sitio web que permite a los usuarios encontrar información o contenido específico. Los usuarios escriben palabras clave en él y se muestran resultados relevantes del sitio. En muchos sitios web, se ubica en la parte superior o en una barra lateral para facilitar la búsqueda a los visitantes.
Ejemplo
La caja en la parte superior de un sitio de comercio electrónico donde escribes el nombre del producto que buscas, o un campo de entrada en un sitio de noticias para encontrar un artículo específico.
Llamada a la acción (CTA)
yah-mah-dah ah lah ak-syohn (seh-teh-ah)
Un elemento en un sitio web diseñado para incitar a los visitantes a realizar una acción específica, como hacer una compra, registrarse o aprender más. Se presenta generalmente como un botón o enlace destacado, diseñado para captar la atención del usuario. Son cruciales para alcanzar los objetivos de un sitio web.
Ejemplo
Un botón que dice 'Comprar ahora', 'Regístrate gratis' o 'Más información', o un enlace a 'Contáctanos'.
Paginación
pah-hee-nah-syohn
Un sistema de navegación que divide una gran cantidad de contenido en varias páginas, permitiendo a los usuarios moverse entre ellas. Generalmente se muestra como un conjunto de números o enlaces como '1, 2, 3... Siguiente'. Esto ayuda a organizar y presentar el contenido sin saturar al usuario con demasiada información a la vez.
Ejemplo
Los enlaces numerados en la parte inferior de una página de listado de artículos de blog o de una página de resultados de búsqueda, mostrando 'Anterior', '1', '2', '3', 'Siguiente'.
Sección
sek-SYOHN
Una agrupación temática y distinta de contenido dentro de una página web. Ayuda a organizar información relacionada bajo un encabezado o propósito común. Las secciones hacen que una página sea más estructurada y fácil de escanear y comprender para los usuarios.
Ejemplo
En una página de producto, las áreas de 'Características', 'Especificaciones' y 'Opiniones' se considerarían cada una una sección diferente.
Tarjeta
tar-HEH-tah
Un elemento de interfaz de usuario rectangular que agrupa una pieza concisa de información relacionada, a menudo incluyendo una imagen, título, descripción y, a veces, un botón. Las tarjetas se utilizan para mostrar múltiples elementos de contenido de manera eficiente y hacerlos fáciles de escanear. Suelen ser clicables para revelar más detalles.
Ejemplo
En la página de inicio de un servicio de streaming, cada miniatura de película o programa de televisión con su título y una breve descripción se presenta como una tarjeta.
Acordeón
ah-kor-DEH-on
Un elemento de interfaz de usuario que permite a los usuarios expandir o contraer secciones de contenido con un clic. Se usa comúnmente para ahorrar espacio y organizar grandes cantidades de información, especialmente en secciones de preguntas frecuentes o configuraciones detalladas. Los usuarios pueden revelar solo la información que necesitan en el momento.
Ejemplo
En una página de 'Preguntas Frecuentes', al hacer clic en el título de una pregunta, su respuesta aparece, y al hacer clic de nuevo, la respuesta se oculta. Este elemento interactivo es un acordeón.
Formulario
for-moo-LAH-ryo
Una colección de campos de entrada y controles que permite a los usuarios enviar información a un sitio web. Típicamente incluye cuadros de texto, menús desplegables, botones de radio y un botón de envío. Los formularios son esenciales para la interacción del usuario, como registrarse, iniciar sesión o realizar una compra.
Ejemplo
Cuando te registras para una nueva cuenta, la página donde introduces tu nombre de usuario, correo electrónico, contraseña y haces clic en 'Registrar' es un formulario.
Diseño y Maquetación
Diseño Responsivo (Responsive Design)
res-pon-sí-vo di-sáin
Una técnica de diseño que ajusta automáticamente la maquetación de un sitio web según el tamaño de la pantalla, ya sea PC, tableta o smartphone.
Ejemplo
Si ves este sitio en una PC y luego en un móvil, notarás cómo cambia el número de columnas de las tarjetas.
Maquetación en Cuadrícula (Grid Layout)
grid lei-áut
Un método de maquetación que organiza los elementos en una rejilla (filas y columnas). Comúnmente utilizado para listas de tarjetas.
Ejemplo
La sección de la página de inicio donde las tarjetas de artículos están dispuestas en 4 columnas.
Relación de Aspecto (Aspect Ratio)
as-pék-to rá-sio
La proporción entre el ancho y el alto de una imagen o video. 16:9 es panorámico, 4:3 es estándar y 9:16 es vertical (como videos para móviles).
Ejemplo
YouTube usa 16:9, mientras que las historias de Instagram usan 9:16.
Margen / Relleno (Margin / Padding)
már-jen / pá-ding
El margen es el espacio exterior de un elemento, mientras que el relleno (padding) es el espacio interior.
Ejemplo
El espacio alrededor de una tarjeta (margen) y el espacio entre el texto y el borde dentro de la tarjeta (relleno).
Flexbox (Diseño de Caja Flexible)
fleks-box
Un modelo de diseño CSS que ayuda a organizar elementos en una fila o columna, y a distribuir el espacio entre ellos de manera eficiente. Simplifica la creación de diseños complejos, comúnmente utilizado para barras de navegación o listas de tarjetas.
Ejemplo
Utilizas Flexbox en el encabezado de un sitio web para alinear el logo y los enlaces de navegación horizontalmente y ajustar automáticamente el espaciado entre ellos.
Viewport (Ventana Gráfica)
vyoo-pohrt
Se refiere al área visible de una página web en la pantalla de un dispositivo que el usuario está viendo actualmente. El tamaño del viewport varía significativamente entre diferentes dispositivos como ordenadores de escritorio, tabletas y smartphones.
Ejemplo
Cuando ves un sitio web en tu smartphone, el área de la pantalla donde el navegador muestra el contenido es el viewport. Los sitios web ajustan su visualización para adaptarse a este viewport.
Z-index (Índice Z)
zeta-ín-deks
Una propiedad CSS que controla el orden de apilamiento de los elementos en una página web. Los elementos con un valor de Z-index más alto aparecerán encima de los elementos con valores más bajos. Se utiliza para elementos como ventanas emergentes o menús desplegables.
Ejemplo
Para que un anuncio emergente aparezca por encima del contenido principal del sitio web, le asignarías un valor de Z-index alto al anuncio, asegurando que se apile delante de otros elementos.
Breakpoints (Puntos de Ruptura)
breyk-points
En el diseño responsivo, los breakpoints son anchos de pantalla específicos (viewports) donde el diseño o estilo de un sitio web cambia. Permiten que el sitio web se adapte y proporcione una visualización optimizada para diferentes tamaños de dispositivos.
Ejemplo
Para mostrar una barra de navegación verticalmente en dispositivos móviles y horizontalmente en tabletas o escritorios, establecerías un ancho de pantalla específico (por ejemplo, 768px) como un breakpoint.
Espacio en Blanco
es-pa-cio en blan-co
El espacio en blanco es el área vacía entre los elementos de diseño. Mejora la legibilidad y ayuda a dirigir la atención hacia el contenido importante. Un espaciado adecuado crea equilibrio y da una apariencia pulida y profesional.
Ejemplo
Dejar suficiente espacio entre el titular de una noticia y su texto principal hace que el artículo sea más fácil de leer.
Sección Hero
se-cción he-ro
La sección hero es el área grande en la parte superior de una página web que presenta una imagen, video o titular prominente. Su propósito es captar la atención del visitante y comunicar inmediatamente el valor o propósito del sitio. A menudo incluye un botón principal de llamada a la acción (CTA).
Ejemplo
En la página de inicio de una empresa, el área con una impresionante foto de paisaje de fondo y un gran botón 'Comenzar Prueba Gratuita' en el centro es la sección hero.
Diseño de Tarjetas
di-se-ño de tar-je-tas
El diseño de tarjetas es una técnica en la que la información se organiza en pequeñas cajas independientes llamadas tarjetas. Cada tarjeta suele contener una imagen, un título y una breve descripción. Esto crea una apariencia muy escaneable y organizada, ideal para mostrar elementos como productos o publicaciones de blog.
Ejemplo
En la página de listado de productos de un sitio de comercio electrónico, la foto, el nombre, el precio y la calificación de cada producto están contenidos ordenadamente en su propia tarjeta, dispuestas en una cuadrícula.
Pie de Página
pie de pá-gi-na
El pie de página es el área en la parte inferior de una página web. Suele contener información complementaria como mapas del sitio, datos de contacto, avisos de derechos de autor y enlaces a redes sociales. A menudo es consistente en todas las páginas y sirve como una ayuda de navegación secundaria.
Ejemplo
En la parte inferior de un sitio web corporativo, encontrarás el pie de página, que agrupa enlaces al perfil de la empresa, página de contacto, política de privacidad, iconos de redes sociales y el aviso de derechos de autor.
Encabezado (Header)
(en-kah-beh-SAH-doh)
La sección superior de una página web, que generalmente contiene el logotipo del sitio, el menú de navegación y, a veces, una barra de búsqueda. Está diseñado para proporcionar acceso rápido a la marca y las funciones principales del sitio.
Ejemplo
Cuando abres un sitio web, la parte superior donde se muestra el logotipo de la empresa y los botones del menú es el encabezado.
Barra Lateral (Sidebar)
(BAH-rrah lah-teh-RAHL)
Una sección vertical situada junto al contenido principal de una página web, generalmente a la izquierda o a la derecha. Se utiliza a menudo para mostrar contenido complementario como enlaces de navegación, anuncios, información relacionada o filtros de búsqueda.
Ejemplo
En una tienda online, la lista de categorías de productos o las opciones de filtro que se muestran verticalmente en el lado izquierdo de la página son un ejemplo de barra lateral.
Contenedor (Container)
(kon-te-na-DOR)
En el diseño web, un contenedor es una "caja" conceptual utilizada para agrupar y organizar contenido o elementos relacionados. Ayuda a controlar la apariencia del contenido limitando su ancho, centrándolo o aplicando relleno, haciendo que el diseño sea más legible y estructurado.
Ejemplo
En muchos sitios web, el contenido principal se centra con espacio en blanco a cada lado. La caja invisible que contiene este contenido centrado es un contenedor.
Elemento Fijo (Sticky Element)
(eh-leh-MEN-toh FEE-ho)
Un elemento que permanece fijo en una posición específica de la pantalla (por ejemplo, en la parte superior) incluso cuando el usuario se desplaza por la página. Se utiliza comúnmente para mantener información importante, como un menú de navegación, siempre accesible.
Ejemplo
En un sitio web de noticias, si la barra de navegación en la parte superior de la página permanece visible mientras te desplazas hacia abajo, eso es un elemento fijo.
Animación y Movimiento
Fade In / Fade Out (Aparecer / Desaparecer)
(feid in / feid aut)
Una animación donde un elemento aparece lentamente (Fade In) o desaparece (Fade Out).
Ejemplo
Efecto donde las tarjetas de artículos aparecen suavemente al desplazarse.
Slider / Carrusel (Control Deslizante / Carrusel)
(slai-der / ka-rru-sel)
Una interfaz de usuario donde imágenes o contenido se deslizan horizontalmente para cambiar. Swiper es una librería popular para esto.
Ejemplo
La sección de imágenes principales que cambian automáticamente en un sitio web de compras.
Parallax (Efecto Parallax)
(pa-ra-laks)
Un efecto donde el fondo y el primer plano se mueven a diferentes velocidades al desplazarse, creando una sensación de profundidad.
Ejemplo
Un sitio web donde la imagen de fondo se mueve lentamente al desplazarse.
Hover Effect (Efecto de Superposición)
(ho-ber e-fek-t)
Un cambio que ocurre cuando el cursor del ratón se superpone sobre un elemento. Por ejemplo, el color cambia o se agranda.
Ejemplo
El efecto donde un botón se oscurece al pasar el cursor sobre él.
Transition (Transición)
(tran-si-sion)
Una animación donde los cambios de estado ocurren de manera suave. Por ejemplo, un color cambia "suavemente" en lugar de "abruptamente".
Ejemplo
El movimiento de un menú que se desliza suavemente al abrirse.
Animación por Keyframes
/ani.maˈθjon por ˈkifreɪms/
Un método en CSS para definir los estados intermedios de una animación. Al especificar puntos clave (keyframes) en diferentes etapas, puedes crear secuencias complejas de movimiento, cambios de color u otras transformaciones. Permite un control preciso sobre las propiedades de un elemento a lo largo del tiempo.
Ejemplo
Definir una animación que hace que un elemento se mueva de izquierda a derecha, cambiando simultáneamente su color de rojo a azul, estableciendo estilos específicos en el 0%, 50% y 100% de la duración de la animación.
Función de Aceleración / Función de Ritmo (Easing Function)
/funˈθjon de a.θele.ɾaˈθjon/ o /funˈθjon de ˈrit.mo/
Una función que define la curva de aceleración de una animación, controlando cómo su velocidad cambia a lo largo del tiempo. Hace que las animaciones se sientan más naturales al simular la física del mundo real, como empezar lento y acelerar o viceversa. Ejemplos comunes incluyen `linear`, `ease-in`, `ease-out` y `ease-in-out`.
Ejemplo
Animar un botón para que se deslice suavemente hacia arriba y luego se asiente delicadamente en su lugar después de ser clickeado, utilizando una función de aceleración `ease-out` para una sensación más natural.
CSS Transform
/θe ɛse ɛse tɾansˈfoɾm/
Una propiedad CSS que te permite modificar la forma y posición de un elemento en el espacio 2D o 3D. Incluye funciones como `translate` (mover), `scale` (redimensionar), `rotate` (girar) y `skew` (inclinar), formando la base para muchas animaciones web. Estas funciones se pueden combinar para crear efectos complejos.
Ejemplo
Rotar un icono 45 grados usando `rotate(45deg)` o hacer que una imagen sea 1.2 veces más grande con `scale(1.2)` al interactuar con ella, para añadir un efecto visual.
Biblioteca de animación
bee-blee-o-TEH-kah deh ah-nee-mah-see-ON
Una colección de código que facilita la implementación de animaciones. En lugar de crear animaciones desde cero, puedes usar funciones preconstruidas para ahorrar tiempo y lograr movimientos más complejos. Ejemplos populares son GSAP y Anime.js.
Ejemplo
Usé una biblioteca de animación para agregar una animación de giro suave a la pantalla de carga del sitio web.
Animación por desplazamiento
ah-nee-mah-see-ON por des-plah-sah-MYEN-toh
Un mecanismo que inicia una animación cuando el usuario se desplaza a una posición específica en la página. Por ejemplo, un elemento puede aparecer gradualmente o girar cuando llega al centro de la pantalla. Esto crea una experiencia interactiva y dinámica que responde al desplazamiento.
Ejemplo
En mi sitio de portafolio, configuré una animación por desplazamiento donde las imágenes de los proyectos se deslizan al hacer scroll.
Animación SVG
ah-nee-mah-see-ON S-V-G
La técnica de agregar movimiento a imágenes o formas en formato SVG (Gráficos Vectoriales Escalables). Aprovecha las propiedades de los gráficos vectoriales para crear movimientos suaves, como dibujar líneas, transformar formas o cambiar colores. Es ideal para animar logotipos, iconos e ilustraciones.
Ejemplo
Implementé una animación SVG para que el logotipo de la empresa se dibuje con líneas cuando se carga la página.
Animación de partículas
ah-nee-mah-see-ON deh par-tee-KOO-las
Una animación en la que muchos elementos pequeños (partículas) se mueven como nieve, chispas o burbujas. Cada partícula individual tiene un movimiento simple, pero juntas crean efectos visuales complejos y atractivos. A menudo se usa para fondos o efectos especiales.
Ejemplo
Agregué una animación de partículas al fondo de la sección principal del sitio web, donde las partículas brillan y se mueven como un cielo estrellado.
Animación Lottie
LO-ti a-ni-ma-CIÓN
Un formato de animación ligero y de alta calidad para la web y aplicaciones móviles, creado a partir de animaciones vectoriales de Adobe After Effects. Utiliza archivos JSON para integrar animaciones complejas de forma sencilla.
Ejemplo
Se usa cuando ves un personaje animado simpático en una página web o un efecto llamativo al tocar un botón en una aplicación.
Web Animations API (WAAPI)
ueb a-ni-ma-CIÓN-es A-P-I (GUÁ-pi)
Una API nativa del navegador que permite animar elementos web usando JavaScript. Ofrece una forma potente de controlar secuencias de animación complejas y comportamientos dinámicos que serían difíciles solo con animaciones CSS.
Ejemplo
Se utiliza cuando necesitas orquestar múltiples elementos animándose juntos según la interacción del usuario, o cambiar dinámicamente la velocidad y dirección de una animación mediante programación.
Animación de Muelle (Spring Animation)
a-ni-ma-CIÓN de MUE-lle (spring an-i-mey-shun)
Un estilo de animación que imita el movimiento natural de un muelle físico. Los elementos no se detienen abruptamente en su destino, sino que pueden sobrepasarlo ligeramente y luego asentarse, creando una sensación más orgánica y suave.
Ejemplo
Se usa cuando un botón se comprime ligeramente y luego rebota a su tamaño original después de ser clicado, o cuando los elementos de una lista aparecen con un sutil rebote "elástico".
Animación de Ruta de Movimiento (Motion Path Animation)
a-ni-ma-CIÓN de RÚ-ta de mo-vi-MIEN-to (mó-shon path an-i-mey-shon)
Una técnica de animación en la que un elemento se mueve a lo largo de una ruta predefinida. Esto permite el movimiento a lo largo de curvas o formas complejas, no solo líneas rectas, creando animaciones más dinámicas y expresivas.
Ejemplo
Se utiliza cuando un icono sigue una ruta específica en un mapa, o el logotipo de un sitio web aparece trazando un camino ondulado y curvo por la pantalla.
Términos Técnicos
API (Interfaz de Programación de Aplicaciones)
(a-pe-i)
Un "puente" que permite a diferentes softwares comunicarse e intercambiar información. Es un sistema donde "si accedes a esta URL, te da datos".
Ejemplo
AIGP utiliza una API REST para obtener datos de blogs de WordPress.
CSS (Hojas de Estilo en Cascada)
(se-e-se)
Un lenguaje que se utiliza para especificar la apariencia de una página web (colores, tamaños, disposición, animaciones).
Ejemplo
Poner el texto en rojo, redondear las esquinas de un botón, ajustar los márgenes.
JavaScript (JS)
(ya-va-script)
Un lenguaje de programación que añade interactividad y dinamismo a las páginas web. Permite que algo suceda al hacer clic, por ejemplo.
Ejemplo
La acción de abrir un menú al hacer clic en un botón.
CDN (Red de Distribución de Contenido)
(se-de-en)
Un sistema que distribuye archivos en servidores de todo el mundo y los entrega al usuario desde el servidor más cercano.
Ejemplo
Cargar el código de Swiper desde una CDN en lugar de alojarlo en tu propio servidor.
npm / Paquete (Node Package Manager / Paquete)
(e-ne-pe-eme)
Un sistema para descargar y usar programas (librerías) creados por otras personas en tu propio proyecto.
Ejemplo
Añadir la funcionalidad de slider con `npm install swiper`.
HTTP/HTTPS
Hache-Te-Te-Pe / Hache-Te-Te-Pe-Ese
El protocolo de comunicación utilizado por los navegadores y servidores web para intercambiar información. HTTPS es una versión segura de HTTP, que añade cifrado para garantizar la seguridad de los datos durante la transmisión. Cuando la dirección de un sitio web comienza con `https://`, significa que se está utilizando una conexión segura.
Ejemplo
Cuando introduces los datos de tu tarjeta de crédito en una tienda online, verificar que la barra de direcciones comienza con `https://` te confirma que tu información se está enviando de forma segura.
Frontend
FRON-tend
Se refiere a la parte de un sitio web o aplicación con la que los usuarios interactúan directamente. Incluye todos los elementos visuales que se muestran en la pantalla, como el diseño, los botones y los formularios. Se desarrolla principalmente utilizando tecnologías como HTML, CSS y JavaScript.
Ejemplo
El texto, las imágenes, el diseño que ves al navegar por una página web, y todos los botones o menús en los que haces clic, son parte del frontend de ese sitio web.
Backend
BAK-end
Se refiere a la parte oculta de un sitio web o aplicación que opera detrás de escena y no es directamente visible para los usuarios. Se encarga del procesamiento de datos, las interacciones con bases de datos y la ejecución de la lógica del lado del servidor. Lenguajes de programación como Python, PHP o Node.js se usan comúnmente para el backend.
Ejemplo
Cuando añades artículos a un carrito de compras o inicias sesión en una tienda online, los procesos como la verificación de la disponibilidad del producto o la autenticación de tus credenciales de usuario son gestionados por el backend.
Base de Datos (Database)
BAH-se deh DAH-tos
Un sistema diseñado para almacenar y gestionar información de forma organizada. La mayoría del contenido dinámico en los sitios web, como perfiles de usuario, listas de productos o publicaciones de blog, se guarda en una base de datos. Esto permite una rápida recuperación y actualización de la información necesaria.
Ejemplo
Cuando buscas varios productos en una tienda online o revisas tu historial de pedidos, toda esa información se recupera de la base de datos de la tienda.
DOM
dom
El DOM (Modelo de Objetos del Documento) es una interfaz de programación para documentos HTML. Representa la página como un árbol de objetos que se pueden manipular con JavaScript.
Ejemplo
Con `document.querySelector('h1')` en JavaScript accedes al DOM para seleccionar el primer encabezado h1.
JSON
yei-son
JSON (Notación de Objetos de JavaScript) es un formato ligero para intercambiar datos. Es fácil de leer y escribir para humanos, y fácil de interpretar para máquinas.
Ejemplo
Una API climática podría devolver JSON como `{"ciudad": "Madrid", "temp": 30}`.
Ajax
ai-jaks
Ajax (JavaScript asíncrono y XML) es una técnica para actualizar partes de una página web sin recargarla completamente. Permite enviar y recibir datos del servidor en segundo plano.
Ejemplo
Cuando escribes en un buscador y aparecen sugerencias sin recargar la página, eso es Ajax.
Git
git
Git es un sistema de control de versiones que registra los cambios en los archivos a lo largo del tiempo. Permite que varios desarrolladores trabajen en un mismo proyecto sin conflictos.
Ejemplo
Con Git puedes crear ramas para probar ideas nuevas y luego fusionarlas al proyecto principal.
URL
u-e-re-ele
Una URL (Localizador Uniforme de Recursos) es la dirección de un recurso en internet. Indica al navegador dónde está ubicado y cómo obtenerlo.
Ejemplo
En `https://www.ejemplo.com/contacto`, la parte `contacto` es la ruta que identifica la página dentro del sitio.
SEO y Marketing
SEO (Optimización para Motores de Búsqueda)
eseo
Proceso de optimizar un sitio web para que aparezca en los primeros lugares de los resultados de búsqueda de motores como Google. Implica ajustar títulos, encabezados, enlaces internos, etc.
Ejemplo
Lograr que tu sitio aparezca en la primera página al buscar 'Swiper slider'.
MEO (Optimización para Motores de Mapas)
emeo
Estrategias para aparecer en los primeros puestos en las búsquedas de Google Maps. Es crucial para negocios con ubicación física. Se centra en optimizar el perfil de Google Business Profile.
Ejemplo
Mejorar la posición de un negocio que aparece en el mapa al buscar 'cafetería en Madrid'.
AIO (Optimización para Búsquedas con IA)
aeio
Optimizar tu sitio web para que sea citado o referenciado por búsquedas de IA como ChatGPT o Perplexity. También conocido como optimización para AI Overviews.
Ejemplo
Que la información de tu sitio web sea citada en la función de resumen de IA de la búsqueda de Google.
LLMO (Optimización para Modelos de Lenguaje Grandes)
elelemo
Técnica para optimizar tu contenido de modo que LLMs como ChatGPT, Gemini o Claude lo referencien o citen al generar respuestas.
Ejemplo
Que tu artículo sea citado cuando se le pregunta a ChatGPT '¿Cuáles son las mejores librerías CSS?'
GEO (Optimización para Motores Generativos)
jio
Optimizar para que la información de tu empresa sea incluida en los resultados generativos de motores de búsqueda de IA (SGE, Perplexity, etc.). Los datos estructurados y E-E-A-T son clave.
Ejemplo
Que tu artículo explicativo aparezca como fuente cuando se hace una pregunta técnica en Perplexity.
OGP (Protocolo Open Graph)
oyipí
Configuración del título, imagen y descripción que se muestran al compartir un enlace en redes sociales. Es la abreviatura de Open Graph Protocol.
Ejemplo
La imagen en miniatura que aparece al enviar una URL por WhatsApp.
JSON-LD (Datos Estructurados)
yeison ele-de
Una descripción JSON especial que le dice a los motores de búsqueda el contenido de una página, como 'Esto es un artículo' o 'Estos son pasos'. Es la fuente de los rich results.
Ejemplo
Las calificaciones con estrellas y los pasos que aparecen en los resultados de búsqueda de Google son gracias a JSON-LD.
Affiliate (Marketing de Afiliados)
afilieit
Un sistema donde promocionas productos o servicios en tu sitio web y recibes una comisión si alguien compra o se registra a través de tu enlace.
Ejemplo
Si alguien se registra a través del enlace 'Recomiendo esta herramienta', el que la recomienda recibe una comisión.
Investigación de Palabras Clave
in-ves-ti-ga-SYON de pa-LA-bras KLAH-veh
El proceso de encontrar y analizar los términos de búsqueda reales que las personas introducen en los motores de búsqueda. Ayuda a optimizar el contenido del sitio web para atraer tráfico de búsqueda relevante, comprendiendo lo que los usuarios buscan.
Ejemplo
Para un sitio web de granos de café, podrías investigar palabras clave como "mejores granos de café", "cómo preparar café en casa" o "café orgánico".
Backlink (Enlace de Retroceso)
bak-link (en-LA-se de re-tro-SE-so)
Un enlace desde un sitio web a otro sitio web. Los motores de búsqueda consideran los backlinks como "votos" para tu contenido; cuantos más backlinks de alta calidad tengas, más fiable y autoritario parecerá tu sitio, lo que puede mejorar tu posicionamiento en los resultados de búsqueda.
Ejemplo
Si un sitio de noticias conocido enlaza a tu publicación de blog como fuente, eso es un backlink valioso para tu sitio.
Meta Descripción
ME-ta des-krip-SYON
Un resumen corto del contenido de una página web que aparece debajo del título (enlace) en los resultados de búsqueda. Es un factor crucial para convencer a los usuarios de hacer clic, y una descripción concisa y atractiva puede mejorar significativamente las tasas de clics.
Ejemplo
La descripción de 2-3 frases que se muestra justo debajo del título del sitio web en un resultado de búsqueda de Google es la meta descripción.
SERP (Página de Resultados del Motor de Búsqueda)
serp (PA-ji-na de re-sul-TA-dos del mo-TOR de BUS-ke-da)
La página mostrada por un motor de búsqueda después de que un usuario introduce una consulta. Incluye varias formas de resultados como listados de búsqueda orgánica, anuncios pagados y fragmentos enriquecidos. El objetivo del SEO es lograr un alto posicionamiento en la SERP.
Ejemplo
Cuando escribes una consulta en Google y ves una lista de títulos y descripciones con enlaces azules, toda esa pantalla es una SERP.
CRO (Optimización de la Tasa de Conversión)
ce-erre-o (op-ti-mi-za-SYON de la TA-sa de kon-ver-SYON)
El proceso de aumentar el porcentaje de visitantes de un sitio web que completan un objetivo deseado, como realizar una compra, rellenar un formulario o suscribirse a un boletín. Esto se logra mediante mejoras en la experiencia del usuario y pruebas A/B.
Ejemplo
Un sitio de comercio electrónico rediseñando el diseño de su página de producto o cambiando el color de su botón "Comprar ahora" para animar a más visitantes a realizar una compra es un ejemplo de CRO.
Lenguajes de Programación
HTML (Lenguaje de Marcado de Hipertexto)
eich-ti-emel
El lenguaje que crea la 'estructura' de las páginas web. Define la estructura de encabezados, párrafos, imágenes, enlaces, etc. Es la base de todos los sitios web.
Ejemplo
Se escribe algo como <h1>Título</h1><p>Contenido</p>
PHP (Preprocesador de Hipertexto)
pe-ache-pe
Un lenguaje de programación que se ejecuta en el servidor. Es el núcleo de WordPress. Interactúa con bases de datos para generar páginas dinámicas.
Ejemplo
Los temas y plugins de WordPress están escritos en PHP.
TypeScript (Superset de JavaScript)
taip-skript
Un lenguaje que añade 'tipos' a JavaScript. Al definir previamente el tipo de valor que puede contener una variable, ayuda a prevenir errores. Es esencial para el desarrollo a gran escala.
Ejemplo
Al escribir const age: number = 25;, si intentas asignar un string, te avisará con un error.
Python (Lenguaje de Programación)
paison
El lenguaje más utilizado en IA, aprendizaje automático y análisis de datos. Su sintaxis es sencilla y fácil de leer. En desarrollo web, Django/Flask son frameworks populares.
Ejemplo
ChatGPT y Stable Diffusion están construidos en Python.
SQL (Lenguaje de Consulta Estructurado)
es-kiu-el
Un lenguaje especializado para dar instrucciones a las bases de datos, como 'dame estos datos' o 'guarda esto'.
Ejemplo
SELECT * FROM users WHERE age > 20; recupera una lista de usuarios mayores de 20 años.
JavaScript
HA-ba-es-CRIPT
Un lenguaje de programación utilizado para añadir interactividad y comportamiento dinámico a las páginas web. Se ejecuta directamente en los navegadores y es esencial para el desarrollo front-end. Hoy también se usa para programación del lado del servidor y desarrollo de aplicaciones móviles.
Ejemplo
Se usa para hacer que los menús se abran/cierren al hacer clic en botones, validar entradas de formularios, o actualizar contenido de página dinámicamente sin recargar.
Go
GO
Un lenguaje de programación simple y rápido desarrollado por Google. Destaca en concurrencia (ejecutar múltiples tareas simultáneamente) y se usa comúnmente para desarrollo backend como servidores web y servicios en la nube. Al ser un lenguaje compilado, ofrece ejecución rápida y gestión sencilla de dependencias.
Ejemplo
Adecuado para servidores API web que necesitan manejar muchas solicitudes de usuarios simultáneamente, o para sistemas que usan arquitectura de microservicios.
Rust
RUST
Un lenguaje de programación de sistemas que combina seguridad y velocidad. Garantiza seguridad de memoria mientras ofrece rendimiento al nivel de C++. Se usa en situaciones que requieren alta confiabilidad, como motores de renderizado de navegadores, sistemas operativos y sistemas embebidos.
Ejemplo
Adoptado para componentes principales del navegador web Firefox, tecnología blockchain y desarrollo de WebAssembly de alto rendimiento.
Kotlin
KOT-lin
Un lenguaje de programación moderno y conciso conocido como el lenguaje oficialmente recomendado para desarrollo de aplicaciones Android. Es completamente compatible con Java mientras ofrece una sintaxis más segura y legible. También soporta desarrollo del lado del servidor y front-end web.
Ejemplo
Ampliamente usado en desarrollo de aplicaciones para teléfonos inteligentes Android, y adoptado por grandes empresas como Google, Uber y Netflix para sus aplicaciones.
CSS
Ce-Ese-Ese
CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo utilizado para describir la presentación de un documento escrito en HTML o XML. Define cómo los elementos deben mostrarse en pantalla, papel u otros medios, permitiendo a los diseñadores controlar el aspecto y la sensación de las páginas web. Al separar el diseño de la estructura, CSS permite una gestión y modificación eficiente del diseño de un sitio web.
Ejemplo
Usas CSS para cambiar el color de fondo de una página web, establecer el tamaño de fuente de los encabezados o organizar elementos en un diseño de varias columnas.
Java
Yah-vah
Java es un lenguaje de programación de alto nivel, basado en clases y orientado a objetos, diseñado para tener la menor cantidad posible de dependencias de implementación. Es ampliamente utilizado para construir aplicaciones robustas y escalables, incluyendo sistemas backend a nivel empresarial, aplicaciones móviles de Android y procesamiento de grandes datos.
Ejemplo
Muchas aplicaciones web a gran escala, como las utilizadas por bancos o plataformas de redes sociales, utilizan Java para su lógica de servidor. También es el lenguaje principal para desarrollar aplicaciones nativas de Android.
Ruby
Roo-bee
Ruby es un lenguaje de programación dinámico y de código abierto con un enfoque en la simplicidad y la productividad. Tiene una sintaxis elegante que es natural de leer y fácil de escribir, y es ampliamente conocido por su popular framework web, Ruby on Rails.
Ejemplo
Puedes usar Ruby, especialmente con su framework Rails, para construir rápidamente aplicaciones web como plataformas de blogs, sitios de comercio electrónico o servicios de redes sociales.
C#
Ce-Sharp
C# (pronunciado "Ce-sharp") es un lenguaje de programación moderno y orientado a objetos desarrollado por Microsoft. Es ampliamente utilizado para construir aplicaciones de escritorio de Windows, juegos con el motor Unity, y potentes aplicaciones web y APIs utilizando el framework ASP.NET Core.
Ejemplo
Utilizarías C# para crear aplicaciones de escritorio para Windows, desarrollar juegos en Unity, o construir servicios backend y sitios web robustos con ASP.NET Core.
Frameworks y Librerías
React
Ríact
Una librería para construir interfaces de usuario (UI), desarrollada por Meta (anteriormente Facebook). Permite crear páginas combinando componentes. Actualmente es una de las más populares.
Ejemplo
Utilizado por Instagram, Netflix, Airbnb, entre otros. Este AIGP también está basado en React.
Next.js
Néxt Ye-Es
Un framework web completo basado en React. Integra renderizado del lado del servidor (SSR), generación estática de sitios (SSG) y rutas de API.
Ejemplo
Este sitio AIGP está construido con Next.js 16.
Vue.js
Viu-ye-és
Un framework de UI con una curva de aprendizaje baja. Es intuitivo, basado en plantillas HTML. Muy popular en el desarrollo web.
Ejemplo
A menudo se elige para crear rápidamente herramientas internas o paneles de administración.
Tailwind CSS
Téil-uind Ce-Ese-Ese
Un framework CSS que aplica estilos combinando nombres de clases. Permite construir interfaces de usuario rápidamente sin necesidad de archivos de diseño.
Ejemplo
Con `class="text-lg font-bold text-blue-600"` obtendrás texto azul grande y en negrita.
jQuery
Yeí-cueri
Una librería de JavaScript que antes tenía una cuota de mercado dominante. Permite escribir operaciones del DOM de forma sencilla. Actualmente, la migración hacia React/Vue, entre otros, está en curso.
Ejemplo
El comando `$('.menu').slideToggle();` crea una animación para abrir y cerrar un menú.
Node.js
Nóud Ye-Es
Un entorno de ejecución para ejecutar JavaScript en el lado del servidor. Su fortaleza es poder escribir tanto el frontend como el backend en el mismo lenguaje.
Ejemplo
Comandos como `npm install` y el servidor de desarrollo de Next.js se ejecutan en Node.js.
Angular
AN-gu-lar
Angular es un framework front-end desarrollado por Google, ideal para construir aplicaciones web a gran escala. Está basado en TypeScript y ofrece funciones como enlace de datos bidireccional e inyección de dependencias.
Ejemplo
Angular se usa comúnmente al desarrollar paneles de control empresariales o SPAs (Aplicaciones de Página Única) complejas.
Lodash
LO-dash
Lodash es una biblioteca de utilidades de JavaScript que proporciona funciones útiles para trabajar con arrays, objetos, cadenas y más. Mejora la legibilidad del código y reduce tareas repetitivas.
Ejemplo
Puedes usar funciones de Lodash para eliminar duplicados de un array o crear copias profundas de objetos fácilmente.
Express
ex-PRES
Express es un framework ligero de aplicaciones web que se ejecuta en Node.js, simplificando el desarrollo del lado del servidor. Proporciona mecanismos de enrutamiento y middleware, y se usa ampliamente para construir APIs REST.
Ejemplo
Puedes usar Express para construir APIs que gestionen registros de usuarios o información de productos.
Svelte
SVELT
Svelte es un framework front-end moderno que adopta un nuevo enfoque al generar código eficiente en tiempo de compilación sin usar un DOM virtual. Los desarrolladores escriben código declarativo para crear aplicaciones con sobrecarga mínima en tiempo de ejecución.
Ejemplo
Desarrollar aplicaciones web ligeras con formularios interactivos y animaciones usando Svelte resulta en un mejor rendimiento.
Componente (Component)
kom-po-NEN-te
Una pieza de interfaz reutilizable e independiente que maneja su propia apariencia y funcionalidad. Los componentes permiten construir interfaces modulares.
Ejemplo
Un botón, una tarjeta de producto o un menú de navegación.
Aplicación de una sola página (SPA)
a-pli-ka-THYON de OO-na SO-la PA-hi-na
Una aplicación web que carga una sola página HTML y actualiza el contenido dinámicamente sin recargar. Ofrece una experiencia fluida similar a una app nativa.
Ejemplo
Gmail o Google Maps, donde al hacer clic no se recarga toda la página.
Manejo del estado (State Management)
ma-NE-ho del es-TA-do
Forma de centralizar y controlar los datos (estado) que fluyen en una aplicación. Ayuda a mantener la interfaz consistente y predecible.
Ejemplo
Usar Redux o Zustand para manejar el estado de inicio de sesión en varios componentes.
MVC (Modelo-Vista-Controlador)
M V C
Un patrón de diseño que divide la app en tres partes: Modelo (datos), Vista (interfaz) y Controlador (lógica). Separa responsabilidades para facilitar el mantenimiento.
Ejemplo
Ruby on Rails y Angular usan MVC para organizar su código.
Renderizado del lado del servidor (SSR)
ren-de-ri-SA-do del LA-do del ser-vi-DOR
Técnica donde el servidor genera el HTML completo de una página y lo envía al cliente. Mejora la velocidad de carga inicial y el SEO.
Ejemplo
Next.js y Nuxt.js ofrecen SSR de forma nativa.
Servidores e Infraestructura
Servidor de Alojamiento Compartido (Rental Server)
Réntal Sérver
Un servidor compartido que permite publicar un sitio web por unos pocos euros al mes. Facilita el uso de WordPress. Ideal para principiantes.
Ejemplo
Proveedores populares incluyen Raiola Networks, SiteGround, Hostinger, entre otros.
VPS (Servidor Privado Virtual)
Ve-Pe-Ese
Un servicio que divide un único servidor físico de forma virtual, permitiendo usarlo como un servidor dedicado. Ofrece acceso root y alta libertad de configuración.
Ejemplo
El Next.js de AIGP se ejecuta en Docker sobre un VPS de Xserver.
AWS (Amazon Web Services)
A-Dóbleve-Ese
El conjunto de servicios en la nube más grande del mundo, ofrecido por Amazon. Incluye más de 200 servicios como EC2 (servidores), S3 (almacenamiento) y Lambda (sin servidor).
Ejemplo
Utilizado por grandes empresas en todo el mundo como Netflix, Nintendo y la NASA.
Docker
Dóker
Tecnología de virtualización que permite empaquetar aplicaciones en 'contenedores' para que se ejecuten de la misma manera en cualquier entorno.
Ejemplo
Con `docker compose up`, el entorno de desarrollo se inicia con un solo comando.
Vercel
Vérsel
Un servicio de hosting proporcionado por los creadores de Next.js. Permite el despliegue automático de sitios web simplemente haciendo `push` a Git.
Ejemplo
Con la integración de GitHub, las actualizaciones de código se reflejan en el sitio de producción en segundos.
Cloudflare
Cláud-fler
Un servicio que ofrece CDN, DNS, protección DDoS y certificados SSL de forma gratuita. También permite alojar sitios web con Cloudflare Pages.
Ejemplo
Simplemente al colocarlo delante de tu sitio web, puedes mejorar su velocidad y seguridad.
SSL / HTTPS
Ese-Ese-Ele / Ache-Te-Te-Pe-Ese
Un mecanismo para cifrar la comunicación entre un sitio web y el navegador. Los sitios cuya URL comienza con `https://` tienen SSL habilitado. También influye en el SEO.
Ejemplo
La presencia de un icono de candado en la barra de direcciones del navegador es prueba de una comunicación SSL.
nginx
Én-yin-ex
Un servidor web y proxy inverso de alta velocidad. Capaz de manejar grandes volúmenes de acceso simultáneo. Popularizado como la próxima generación de Apache.
Ejemplo
En un VPS, se puede colocar nginx antes de Next.js para gestionar el procesamiento SSL y el caché.
CDN (Red de Distribución de Contenidos)
Ce-de-ene (Rred de Dis-tri-bu-ción de Con-te-ni-dos)
Una red distribuida de servidores diseñada para entregar contenido de sitios web (como imágenes, videos y archivos CSS) a los usuarios de forma rápida. Mejora la velocidad de carga de las páginas y reduce la carga del servidor principal al servir el contenido desde el servidor geográficamente más cercano al usuario.
Ejemplo
Una plataforma de streaming de vídeo utiliza una CDN para entregar películas y series. Así, un usuario en España recibe el vídeo desde un servidor cercano en Europa, garantizando una reproducción fluida y sin interrupciones.
DNS (Sistema de Nombres de Dominio)
De-ene-ese (Sis-te-ma de Nom-bres de Do-mi-nio)
Un sistema que traduce los nombres de dominio legibles para humanos (ej. example.com) a direcciones IP (ej. 192.0.2.1) que las computadoras pueden entender. Esto permite a los usuarios acceder a sitios web utilizando nombres fáciles de recordar en lugar de direcciones numéricas. Actúa como la "agenda telefónica" de Internet.
Ejemplo
Cuando escribes "wikipedia.org" en tu navegador web, el DNS traduce ese nombre de dominio a la dirección IP de los servidores de Wikipedia, permitiendo que tu navegador se conecte al servidor correcto y muestre el sitio web.
Balanceador de Carga (Load Balancer)
Ba-lan-sea-dor de Kar-ga (Load Balancer)
Un dispositivo o software que distribuye equitativamente el tráfico web o las solicitudes de red entre varios servidores. Esto evita que un solo servidor se sobrecargue y mejora la disponibilidad y la capacidad de respuesta de las aplicaciones web.
Ejemplo
Un servicio de streaming de música con millones de usuarios utiliza un balanceador de carga para distribuir las solicitudes de reproducción entre cientos de servidores. Así, incluso durante eventos populares o picos de uso, los usuarios experimentan una reproducción ininterrumpida.
Kubernetes (K8s)
Ku-ber-ne-tes (Ka-o-cho-ese)
Un sistema de código abierto para automatizar el despliegue, escalado y gestión de aplicaciones en contenedores. Orquesta eficientemente contenedores a través de un clúster de máquinas (nodos), proporcionando alta disponibilidad y elasticidad para las aplicaciones.
Ejemplo
Una empresa de desarrollo de software utiliza Kubernetes para gestionar su plataforma de comercio electrónico. Kubernetes asegura que todas las partes de la tienda (catálogo, carrito de compras, pagos) funcionen correctamente en distintos servidores y se ajusten automáticamente a la demanda de clientes.
Base de datos
BAH-seh deh DAH-tos
Una base de datos es una colección organizada de datos, almacenada y accesible electrónicamente. Es utilizada por sitios web y aplicaciones para almacenar de forma persistente datos de usuarios, información de productos o configuraciones. Está diseñada para recuperar y gestionar información de manera eficiente.
Ejemplo
Una tienda en línea guarda todos los detalles de las cuentas de clientes, el historial de pedidos y el estado del inventario de productos en una base de datos.
Computación sin servidor
kom-poo-tah-SYON seen ser-vee-DOR
La computación sin servidor es un modelo de ejecución en la nube donde los desarrolladores pueden construir y ejecutar aplicaciones sin gestionar servidores. El proveedor de la nube administra dinámicamente el aprovisionamiento y escalado de los servidores. El código se ejecuta en respuesta a eventos, y solo pagas por los recursos computacionales consumidos.
Ejemplo
Cuando un usuario sube un archivo, un pequeño fragmento de código (como una función AWS Lambda) se ejecuta automáticamente para procesar ese archivo sin que necesites gestionar el servidor subyacente.
API (Interfaz de Programación de Aplicaciones)
AH-peh-EE
Una API es un conjunto de reglas y protocolos que permite que diferentes aplicaciones de software se comuniquen entre sí de forma segura. Define cómo un programa puede solicitar servicios específicos a otro programa y recibir respuestas. Esto permite que varios servicios y aplicaciones funcionen juntos sin problemas.
Ejemplo
Una aplicación del tiempo utiliza la API de un servicio meteorológico para obtener los últimos datos del tiempo y mostrárselos al usuario.
Cortafuegos (Firewall)
kor-tah-FWEH-gos / FEYE-er-wawl
Un cortafuegos (firewall) es un sistema de seguridad de red que monitorea y controla el tráfico de red entrante y saliente basándose en reglas de seguridad predeterminadas. Su propósito principal es proteger un servidor o red contra accesos no autorizados y ataques maliciosos. Actúa como una barrera entre una red interna de confianza y redes externas no confiables.
Ejemplo
El router Wi-Fi de tu casa suele tener una función de cortafuegos que impide que conexiones sospechosas de internet lleguen directamente a tu ordenador.
IA y Generativa
LLM (Modelo Grande de Lenguaje)
Ele-Ele-Eme
Un modelo de IA masivo entrenado con una vasta cantidad de datos de texto. Utilizado para una amplia gama de tareas como generación de texto, resumen, traducción y creación de código.
Ejemplo
ChatGPT (GPT-4), Claude, Gemini, DeepSeek, entre otros.
Prompt (Instrucción de IA)
Prómpt
Es la instrucción o pregunta que se le da a una IA. La forma en que se escribe el prompt puede cambiar significativamente la calidad de la respuesta de la IA.
Ejemplo
«Crea un slider de bucle infinito con Swiper» es un prompt.
RAG (Generación Aumentada por Recuperación)
Rag
Una técnica que permite a una IA buscar en una base de datos externa antes de responder, para incluir información actualizada en su respuesta. Ayuda a prevenir las 'alucinaciones' de la IA.
Ejemplo
Un chatbot interno que busca en documentos de la empresa antes de generar una respuesta.
Fine-tuning (Ajuste Fino)
Fáin-chiúning
El proceso de reentrenar un modelo de IA existente con datos adicionales para especializarlo en un uso o tarea específica.
Ejemplo
Personalizar un GPT genérico para que sea una IA experta en terminología médica.
Stable Diffusion
Stéibl Diufíushon
Una IA de código abierto que genera imágenes a partir de texto. Puede ejecutarse en una PC local y permite una personalización libre de sus modelos.
Ejemplo
Al introducir «dragón y niña», se genera automáticamente una ilustración.
Token (Unidad de Texto)
Tóken
La unidad mínima en la que una IA procesa texto. Aproximadamente 1 a 3 caracteres japoneses equivalen a 1 token. El costo de las APIs se determina por la cantidad de tokens.
Ejemplo
DeepSeek es muy económico, con $0.14 por cada millón de tokens.
IA generativa
ee-AH heh-neh-rah-TEE-vah
Un tipo de inteligencia artificial capaz de crear contenido nuevo, como texto, imágenes, audio o video, de manera similar a la humana. Aprende de datos existentes y luego genera resultados originales imitando sus patrones y estilos.
Ejemplo
Una IA que puede crear imágenes únicas a partir de un texto o que escribe resúmenes y poemas es un ejemplo de IA generativa.
Modelo
MOH-deh-loh
En el contexto de la IA y el aprendizaje automático, un modelo se refiere al algoritmo o sistema entrenado en sí mismo. Es como el "cerebro" que ha aprendido patrones de los datos y que luego puede hacer predicciones o generar resultados con datos nuevos.
Ejemplo
El sistema de IA completo que ha sido entrenado para identificar si una imagen específica contiene un gato o un perro, o el sistema de IA que genera imágenes a partir de texto, se conoce como modelo.
Datos de entrenamiento
DAH-tos deh ehn-treh-nah-MYEN-toh
Información utilizada para enseñar a un modelo de IA patrones y reglas. Cuantos más datos y de mayor calidad se utilicen, mejor será el rendimiento del modelo.
Ejemplo
Para entrenar una IA para identificar gatos, se necesitarían miles de imágenes de gatos etiquetadas como "esto es un gato" como datos de entrenamiento.
Inferencia
een-FEH-rehn-see-ah
El proceso mediante el cual un modelo de IA entrenado recibe datos nuevos y no vistos, y los utiliza para hacer predicciones, juicios o generar contenido. Es cuando el modelo "piensa" o "actúa".
Ejemplo
Cuando escribes una pregunta a un chatbot y obtienes una respuesta, o cuando un sistema de reconocimiento facial identifica a una persona en una foto, el modelo de IA está realizando una inferencia.
Alucinación
a-loo-sin-ah-see-OWN
Es cuando un modelo de IA generativa produce información falsa, sin sentido o que no está basada en sus datos de entrenamiento. La IA presenta estas fabricaciones con gran confianza, por lo que es crucial que los usuarios verifiquen sus resultados.
Ejemplo
Preguntarle a una IA "¿Quién inventó la bombilla?" y que responda con confianza: "Nikola Tesla inventó la bombilla en 1920", cuando la respuesta correcta es Thomas Edison en 1879.
Embeddings
em-BED-dings
Es una forma de convertir palabras, frases u otros datos en un vector numérico (una lista de números) que los modelos de IA pueden entender y procesar. Esta transformación permite a la IA comprender las relaciones y similitudes entre diferentes piezas de información.
Ejemplo
Las palabras "perro" y "cachorro" podrían convertirse en vectores numéricos muy cercanos entre sí en un espacio multidimensional, indicando su fuerte similitud semántica para la IA.
Temperatura
tem-pe-ra-TOO-rah
Es un parámetro en los modelos de IA generativa que controla la aleatoriedad o creatividad de la salida. Valores de temperatura más altos resultan en respuestas más diversas, sorprendentes y a veces erráticas, mientras que valores más bajos hacen que la salida sea más enfocada, consistente y predecible.
Ejemplo
Al generar una historia creativa, podrías establecer una temperatura alta para fomentar tramas imaginativas y únicas. Para la respuesta a preguntas factuales, una temperatura baja asegura respuestas más directas y precisas.
Barandales de seguridad (Guardrails)
bah-ran-DAH-les de se-goo-ree-DAD
Son mecanismos y reglas de seguridad implementados para evitar que la IA generativa produzca contenido inapropiado, inexacto o dañino. Aseguran que las salidas de la IA se mantengan dentro de los límites éticos y se alineen con el uso previsto.
Ejemplo
Un asistente de IA para atención médica podría tener barandales de seguridad configurados para evitar que dé diagnósticos médicos o recete medicamentos, en su lugar, dirigiendo a los usuarios a consultar a un médico humano para consejos tan críticos.
CMS y Herramientas de Creación de Sitios
WordPress
Uórdpres
Un CMS de código abierto que ostenta aproximadamente el 43% de la cuota de mercado mundial. Desarrollado principalmente por Automattic. Permite expandir sus funcionalidades libremente con plugins y temas, siendo apto para blogs, sitios corporativos y e-commerce.
Ejemplo
Utilizado por la Casa Blanca, Sony Music, BBC News, entre otros.
Wix
Uíks
Un constructor de sitios web sin código originario de Israel, operado por Wix (cotiza en NASDAQ). Permite diseñar de forma intuitiva con arrastrar y soltar, incluye alojamiento y ofrece un plan gratuito.
Ejemplo
Popular para portfolios personales y sitios de pequeñas empresas.
Jimdo
Yímdú
Un servicio de creación de sitios web de origen alemán. En Japón, es operado por KDDI Web Communications. Su característica distintiva es el 'AI Builder', que genera sitios automáticamente con IA.
Ejemplo
Muy compatible con el español, utilizado para pequeños sitios personales o de tiendas.
Studio
Stúdio
Una herramienta japonesa de diseño web sin código, operada por STUDIO Inc. Ofrece una alta libertad de diseño, amplia compatibilidad con fuentes japonesas, y funciones integradas de edición colaborativa y CMS.
Ejemplo
Común entre startups y portfolios de diseñadores en Japón.
Shopify
Shópifai
Una de las plataformas de e-commerce (tiendas en línea) más grandes del mundo, originaria de Canadá. Integra gestión de pagos, inventario y envíos. Permite abrir fácilmente una tienda en línea con una suscripción mensual.
Ejemplo
Utilizado por Nike, Supreme y muchas marcas D2C en España y otros países.
Squarespace
Skuerspéiss
Un constructor de sitios web de EE. UU. caracterizado por sus hermosas plantillas, operado por Squarespace (cotiza en NYSE). Ofrece una amplia gama de diseños para fotógrafos y creadores.
Ejemplo
Popular para portfolios, sitios de restaurantes y bodas.
Webflow
Uébfllou
Una herramienta de desarrollo web visual para diseñadores. Permite construir sitios responsivos profesionales sin escribir código. Ofrece control detallado de CSS a través de una interfaz gráfica.
Ejemplo
Elegida por diseñadores que quieren crear 'sitios web de calidad profesional sin código'.
Peraichi (Página Única)
Peráichi
Una herramienta japonesa para crear LP (landing pages), operada por Peraichi Inc. Permite crear un sitio web de una sola página simplemente eligiendo una plantilla e insertando texto e imágenes.
Ejemplo
Utilizado para anuncios de eventos, landing pages de campañas o páginas web a modo de tarjeta de presentación.
CMS sin Cabeza (Headless CMS)
C-M-S sin ka-BEY-sa
Un sistema de gestión de contenidos donde el repositorio de contenido (el "cuerpo") está desacoplado de la capa de presentación (la "cabeza"). Esto te permite crear y gestionar contenido una vez y luego entregarlo a cualquier interfaz de usuario, como una página web, una aplicación móvil o un dispositivo IoT. Ofrece una gran flexibilidad para que los desarrolladores usen sus tecnologías frontend preferidas.
Ejemplo
Si quieres mostrar las mismas publicaciones de blog tanto en tu aplicación de smartphone como en tu sitio web, un CMS sin cabeza te permite gestionar el contenido en un solo lugar y distribuirlo a ambos.
Desarrollo Sin Código (No-Code Development)
de-sa-RRO-llo sin KOH-di-go
Una metodología para crear aplicaciones o sitios web utilizando interfaces visuales y funciones de arrastrar y soltar, sin escribir ningún código de programación. Permite a personas con pocos o ningún conocimiento técnico construir sus ideas en productos funcionales. Este enfoque a menudo conduce a ciclos de desarrollo más rápidos y costos reducidos.
Ejemplo
Crear tu propia tienda en línea o sitio web de portafolio usando una plataforma como Wix o Webflow, enteramente a través de editores visuales y sin escribir código, es un ejemplo de desarrollo sin código.
Plantilla (Template)
plan-TEE-ya
Un diseño o estructura predefinida para un sitio web o documento. Proporciona un punto de partida, permitiendo a los usuarios crear páginas de manera eficiente sin tener que diseñarlo todo desde cero. Las plantillas a menudo vienen con contenido de marcador de posición y una estética específica que se puede personalizar.
Ejemplo
Al iniciar un nuevo blog en WordPress, podrías elegir una plantilla de "negocios" o "portafolio", y luego personalizar sus colores e imágenes para que se ajusten a tu contenido.
Drupal
DRU-pal
Un potente sistema de gestión de contenidos (CMS) de código abierto. Es muy flexible y a menudo se utiliza para construir sitios web y aplicaciones web complejas y a gran escala con características avanzadas. Drupal es conocido por su robusta seguridad, escalabilidad y modularidad.
Ejemplo
Grandes sitios web gubernamentales, portales universitarios y sitios de medios importantes a menudo utilizan Drupal. Puedes extender su funcionalidad de forma flexible añadiendo varios módulos para satisfacer necesidades específicas.
Sistema de Gestión de Contenidos (CMS)
sis-TE-ma de hes-TYON de kon-te-NI-dos
Una aplicación de software utilizada para crear, editar y gestionar el contenido digital de sitios web. Permite a los usuarios construir y mantener sitios web sin necesidad de conocimientos profundos de programación.
Ejemplo
WordPress es un CMS popular muy utilizado para blogs, sitios web de empresas y más, facilitando las actualizaciones de contenido.
Constructor de Páginas
kon-struk-TOR de PA-hi-nas
Una herramienta que permite a los usuarios crear y personalizar visualmente el diseño y la estructura de las páginas web. Generalmente utiliza una interfaz de arrastrar y soltar, permitiendo la construcción de páginas sin escribir código.
Ejemplo
Utilizando un constructor de páginas dentro de tu CMS, puedes organizar fácilmente galerías de imágenes, bloques de texto y formularios para crear una página de destino personalizada.
Tema
TE-ma
Una colección de plantillas y hojas de estilo que definen la apariencia general, el diseño y la disposición de un sitio web. Permite cambiar la presentación visual de tu sitio sin alterar su contenido.
Ejemplo
Si deseas renovar el aspecto de tu blog, puedes instalar y activar un nuevo tema para cambiar instantáneamente sus colores, fuentes y estructura de página.
Plugin
PLUG-in
Un fragmento de software que añade características o funcionalidades específicas a un CMS o sitio web existente. Permite extender las capacidades de tu sistema sin alterar su código central.
Ejemplo
Instalar un plugin de SEO puede ayudar a optimizar tu sitio web para los motores de búsqueda, haciéndolo más propenso a aparecer en los primeros resultados.
Herramientas Creativas de Adobe
Adobe
A-do-be
Conjunto de software creativo ofrecido por la empresa estadounidense Adobe Inc. (NASDAQ: ADBE). Son el estándar de la industria para edición de fotografía, vídeo, diseño y producción web. Se ofrecen a través de Creative Cloud con una suscripción mensual.
Ejemplo
Prácticamente todas las empresas de diseño y producción de vídeo utilizan Adobe.
Photoshop
Fo-to-shop
El software estándar de la industria para edición y manipulación de fotos. Ampliamente utilizado por fotógrafos profesionales y en producción web para retoque, composición, corrección de color, etc. También incluye la función de IA 'Relleno generativo'.
Ejemplo
Eliminar fondos de fotos de productos, mejorar la piel en retratos o crear imágenes de banner.
Illustrator
I-lus-tra-tor
El estándar de la industria para la creación de gráficos vectoriales. Permite crear logotipos, iconos, ilustraciones, folletos y otros elementos que no pierden calidad al ampliarse. Es una herramienta esencial para el diseño de materiales impresos.
Ejemplo
Creación de logotipos de empresas, tarjetas de visita, pósters y diseños de empaques.
XD / Integración con Figma (XD / Figma Integration)
Ex-di
Adobe XD fue una herramienta de diseño UI/UX, pero su venta para nuevos usuarios finalizó en 2023. Actualmente, se está migrando hacia la integración con Figma (Adobe intentó adquirir Figma, pero la operación fue cancelada).
Ejemplo
Se utilizaba para crear wireframes y prototipos de sitios web y aplicaciones.
Premiere Pro
Pre-mier Pro
Software profesional de edición de vídeo. Se utiliza para editar películas, programas de televisión y vídeos de YouTube. La integración con After Effects permite crear expresiones visuales avanzadas.
Ejemplo
Edición de vídeos de alta calidad para YouTube, vídeos corporativos y tráilers de películas.
After Effects
Af-ter E-fects
El software estándar para gráficos en movimiento y VFX (efectos visuales). Permite crear animaciones de texto, composición de efectos y efectos especiales de vídeo.
Ejemplo
Animaciones de títulos, efectos de explosión o vídeos infográficos.
Lightroom
Light-rum
Software especializado en la gestión y edición por lotes de grandes volúmenes de fotos. Es excelente para el revelado RAW, la corrección de color y la aplicación de ajustes preestablecidos (presets). La versión móvil es gratuita.
Ejemplo
Unificar el color y corregir 100 fotos de un viaje de una sola vez.
InDesign
In-de-saín
Software DTP especializado en la maquetación de documentos impresos de varias páginas, como libros, revistas y catálogos. Es la herramienta estándar en la industria editorial y de impresión.
Ejemplo
Creación de la maquetación para un catálogo de productos de 100 páginas o una revista.
Creative Cloud
/kriˈeɪtɪv klaʊd/
El servicio de suscripción de Adobe para sus aplicaciones creativas. Proporciona acceso a un conjunto de software como Photoshop, Illustrator y Premiere Pro, junto con almacenamiento en la nube y otros servicios. Ayuda a los creativos a gestionar sus proyectos y activos en diferentes dispositivos.
Ejemplo
Te suscribes a Adobe Creative Cloud para descargar y usar Photoshop e Illustrator en tu computadora, y para guardar tus archivos de diseño en línea.
Capa
/ˈkapa/
Las capas son como hojas transparentes apiladas una encima de la otra en un programa de diseño. Cada capa puede contener diferentes elementos, como texto, imágenes o formas, lo que te permite editarlos de forma independiente sin afectar otras partes de tu diseño. Esto facilita enormemente la gestión y modificación de diseños complejos.
Ejemplo
En Photoshop, podrías poner una imagen de fondo en una capa, una foto de una persona en otra capa encima, y texto en una capa superior, para poder mover o cambiar el texto sin alterar la foto o el fondo.
Gráficos Vectoriales
/ˈɡɾafikos βektoˈɾjales/
Los gráficos vectoriales son imágenes creadas utilizando ecuaciones matemáticas para definir líneas, curvas y formas, en lugar de píxeles individuales. Esto significa que pueden escalarse a cualquier tamaño sin perder calidad ni pixelarse, lo que los hace ideales para logotipos e ilustraciones.
Ejemplo
Un logotipo de empresa creado en Illustrator es un gráfico vectorial, lo que asegura que se vea nítido y claro tanto si se imprime en una tarjeta de visita como si se muestra en una valla publicitaria gigante.
Espacio de Trabajo
/esˈpaθjo ðe tɾaˈβaxo/
Un espacio de trabajo en software creativo se refiere a la disposición de paneles, herramientas y ventanas en tu pantalla. Puedes personalizar tu espacio de trabajo para adaptarlo a tus tareas específicas, como edición de fotos, edición de video o diseño web, haciendo tu flujo de trabajo más eficiente.
Ejemplo
En Premiere Pro, podrías cambiar de un espacio de trabajo de "Edición", que enfatiza tu línea de tiempo y vista previa, a un espacio de trabajo de "Color", que resalta las herramientas de corrección de color.
Herramientas de Diseño y Edición de Imágenes
Figma
Fig-ma
Herramienta de diseño UI/UX que funciona en el navegador, operada por la empresa Figma. Su mayor fortaleza es la edición colaborativa en tiempo real. Está expandiendo rápidamente su cuota de mercado en el ámbito del diseño web.
Ejemplo
Diseñar y revisar un sitio web simultáneamente en equipo.
Canva
Can-va
Herramienta de diseño online operada por la empresa australiana Canva. Ofrece una amplia variedad de plantillas, lo que permite a personas sin experiencia en diseño crear fácilmente imágenes para redes sociales o presentaciones.
Ejemplo
Crear imágenes para publicaciones de Instagram, diapositivas de presentación o tarjetas de visita usando plantillas.
Affinity
A-fi-ni-ti
Desarrollado por la empresa británica Serif, y ahora adquirido por Canva. Es un conjunto de software creativo de compra única. Sus tres pilares son Photo (edición de fotos), Designer (vectorial) y Publisher (DTP). Destaca como alternativa a Adobe.
Ejemplo
Utilizado por profesionales que desean evitar las tarifas de suscripción de Adobe.
GIMP
Gimp
Software de edición de imágenes de código abierto y gratuito. Posee funciones similares a Photoshop. Compatible con Windows, Mac y Linux.
Ejemplo
Una opción para aquellos que buscan una edición de imágenes profesional sin coste.
Sketch
Ske-tch
Herramienta de diseño UI exclusiva para Mac, desarrollada por la empresa Sketch (Países Bajos). Antes de la llegada de Figma, era el estándar para el diseño de UI. Es ligera y rápida en su funcionamiento.
Ejemplo
Usuarios de macOS lo utilizan para crear el diseño de UI de sus aplicaciones.
Inkscape
Ink-skeip
Editor de gráficos vectoriales de código abierto y gratuito. Puede utilizarse como alternativa a Illustrator. Su formato nativo es SVG.
Ejemplo
Utilizado para crear logotipos e iconos en formato SVG de forma gratuita.
Adobe Photoshop
a-DO-be fo-to-SHOP
Adobe Photoshop es un software profesional de edición de imágenes ampliamente utilizado para retoque fotográfico y creación de arte digital. Cuenta con capas, filtros, herramientas de selección y muchas otras funciones, siendo adecuado desde retoques simples hasta diseños gráficos complejos.
Ejemplo
Photoshop se usa comúnmente para eliminar objetos no deseados de fotos, cambiar fondos o ajustar tonos de color.
Adobe Illustrator
a-DO-be i-llus-tra-TOHR
Adobe Illustrator es una herramienta de diseño profesional para crear y editar gráficos vectoriales. Es ideal para diseñar logotipos, iconos, ilustraciones y materiales impresos, ya que los gráficos se mantienen nítidos y claros a cualquier tamaño sin perder calidad.
Ejemplo
Illustrator se usa a menudo para diseñar logotipos de empresas o crear maquetas para materiales impresos como tarjetas de visita y folletos.
Procreate
pro-cre-EIT
Procreate es una potente aplicación de pintura digital e ilustración para iPad. Con una interfaz intuitiva, una extensa biblioteca de pinceles y soporte de capas, es ideal para que artistas y diseñadores creen trabajos de calidad profesional en un dispositivo móvil.
Ejemplo
Procreate se usa para dibujar ilustraciones o crear bocetos digitales de manera casual en un iPad con un Apple Pencil, ya sea en el tren o en una cafetería.
Figma Mirror
FIG-ma mi-RROR
Figma Mirror es la aplicación oficial que permite previsualizar diseños creados en Figma en tiempo real en un smartphone o tablet. Ayuda a probar y recopilar comentarios sobre diseños UI/UX al verificar su apariencia y comportamiento en dispositivos reales.
Ejemplo
Después de diseñar una pantalla de aplicación móvil en Figma, puedes usar Figma Mirror para probar interacciones de toque y desplazamiento en tu propio iPhone mientras realizas ajustes.
Adobe XD
(a-DO-be e-quis-de)
Una herramienta de diseño vectorial de Adobe, especializada en diseño UI/UX y prototipado. Permite a los diseñadores crear wireframes, maquetas de diseño y prototipos interactivos. Ayuda a visualizar la experiencia de usuario para sitios web y aplicaciones móviles.
Ejemplo
Usas Adobe XD para diseñar el flujo de pantallas de una nueva aplicación móvil, creando un prototipo que muestra animaciones al tocar los botones.
Miro
(MI-ro)
Una plataforma de pizarra colaborativa en línea diseñada para el trabajo en equipo. Se utiliza para lluvia de ideas, ideación, creación de wireframes, visualización de flujos de usuario y muchos otros procesos de diseño. Los equipos pueden editar e interactuar en tiempo real.
Ejemplo
Tu equipo utiliza Miro para hacer una lluvia de ideas para una nueva sección de un sitio web, organizando pensamientos con notas adhesivas y diagramas en un tablero compartido.
Zeplin
(ZEP-lin)
Una herramienta de colaboración que optimiza el proceso de entrega de diseño entre diseñadores y desarrolladores. Importa diseños de herramientas como Figma o Sketch y genera automáticamente las especificaciones (código CSS, activos, información de espaciado) necesarias para el desarrollo. Ayuda a cerrar la brecha entre el diseño y la implementación.
Ejemplo
Después de que un diseñador finaliza el diseño de una página web, lo sube a Zeplin, permitiendo a los desarrolladores inspeccionar fácilmente las especificaciones de diseño, descargar activos y obtener fragmentos de CSS para la implementación.
Webflow
(WEB-flo)
Una plataforma no-code/low-code que permite a los usuarios diseñar, construir y lanzar sitios web responsivos sin escribir código. Los diseñadores pueden crear sitios visualmente impactantes directamente con una interfaz visual, añadiendo interacciones y animaciones. Desdibuja las líneas entre diseño y desarrollo.
Ejemplo
Un equipo de marketing necesita lanzar rápidamente una nueva landing page, por lo que un diseñador utiliza Webflow para construir y publicar el sitio directamente, sin necesidad de que un desarrollador escriba código.
Ahora que conoces los términos, ponlos en práctica
Nuestra biblioteca de prompts te permite previsualizar y copiar las tecnologías que acabas de aprender.
Ver prompts →