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.
Contenedor
kon-te-na-DOR
Un elemento de la página web utilizado para agrupar y organizar otros contenidos. Típicamente ayuda a limitar el ancho del contenido o a centrarlo en la página, mejorando la legibilidad y el diseño.
Ejemplo
Cuando ves una página web donde el contenido principal está centrado con espacio a ambos lados, ese contenido suele estar dentro de un elemento contenedor.
Artículo
ar-TI-koo-lo
Un elemento semántico que representa un fragmento de contenido autocontenido dentro de una página web, como una entrada de blog, una noticia o una publicación de foro. Debería ser contenido que pueda ser distribuido o reutilizado de forma independiente.
Ejemplo
En un sitio de blog, cada entrada individual, incluyendo su título, autor, texto del cuerpo y fecha de publicación, se marcaría típicamente como un elemento de artículo.
Ventana Modal
ven-TAH-na mo-DAL
Una ventana emergente que aparece sobre la página web actual, bloqueando la interacción con el resto de la página hasta que el usuario la cierra o interactúa con ella. Se usa para resaltar temporalmente información o acciones importantes.
Ejemplo
Cuando haces clic en un botón de "Iniciar sesión" y aparece un pequeño cuadro en el centro de la pantalla, o cuando haces clic en una imagen para verla más grande y el fondo se oscurece, esos son ejemplos de una ventana modal.
Sistema de Rejilla (Grid System)
sis-TE-ma de re-Hee-ya
Un método de diseño que utiliza una estructura invisible de filas y columnas para organizar el contenido en una página web. Ayuda a alinear elementos y a crear diseños consistentes y responsivos en diferentes tamaños de pantalla.
Ejemplo
Los frameworks CSS como Bootstrap proporcionan un sistema de rejilla que divide el área de contenido en 12 columnas virtuales, permitiendo a los diseñadores posicionar elementos fácilmente dentro de estas columnas.
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.
Barra de Navegación
/ˈba.ra ðe na.βe.ɣaˈθjon/
Una sección de un sitio web que contiene enlaces a diferentes páginas o secciones dentro del sitio. Normalmente aparece en la parte superior o lateral de una página web, ayudando a los usuarios a moverse y encontrar contenido fácilmente.
Ejemplo
La fila de enlaces como "Inicio", "Productos", "Categorías" y "Carrito" que se encuentra en la parte superior del sitio web de una tienda en línea.
Carrusel
/ka.ruˈsel/
Un componente de interfaz de usuario que muestra múltiples imágenes o fragmentos de contenido en un formato de presentación de diapositivas rotatorio. Los usuarios pueden hacer clic en botones de flecha o puntos para avanzar por el contenido.
Ejemplo
La presentación de diapositivas de imágenes grandes en la página de inicio de un sitio de comercio electrónico que muestra nuevos productos o promociones de ventas una tras otra.
Ventana Modal
/ˈben.ta.na moˈðal/
Una ventana emergente que aparece superpuesta sobre el contenido actual. Típicamente bloquea la interacción con el contenido de fondo hasta que el usuario completa una acción dentro de la ventana modal o la cierra.
Ejemplo
La pequeña ventana que aparece con un fondo atenuado y un formulario en el centro cuando haces clic en un botón de "Registrarse" en un sitio web.
Cajón (Drawer)
/kaˈxon/
Un panel oculto que generalmente se desliza desde el borde de la pantalla. Se usa comúnmente en dispositivos móviles para revelar menús de navegación u opciones adicionales, ahorrando espacio en la pantalla.
Ejemplo
El panel que se desliza desde el lado izquierdo de la pantalla, revelando una lista de enlaces, cuando tocas el icono del "menú de hamburguesa" en un sitio web visto en un teléfono inteligente.
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.
Esqueleto de Carga (Skeleton Screen)
es-keh-LEH-toh deh KAR-gah
Una animación que muestra un diseño de marcador de posición del contenido mientras se cargan los datos. Permite a los usuarios tener una vista previa de la estructura del contenido, reduciendo el tiempo de espera percibido y ofreciendo una experiencia más fluida.
Ejemplo
Al abrir un artículo de noticias, ves cajas grises para el texto y las imágenes antes de que aparezca el contenido real.
Microinteracción
mee-kroh-een-te-rak-SYON
Pequeñas animaciones o retroalimentaciones visuales momentáneas que ocurren cuando un usuario completa una tarea específica o interactúa con un dispositivo. Mejoran la experiencia del usuario, haciendo las operaciones más intuitivas y agradables.
Ejemplo
La animación de un corazón que aparece al hacer clic en un botón de 'Me gusta', una marca de verificación que aparece al enviar un formulario con éxito, o la animación de desbloqueo de un teléfono.
Animación de Morfosis (Morphing Animation)
ah-nee-mah-SYON deh mor-FOH-sees
Una animación donde una forma o imagen se transforma suavemente en otra forma o imagen diferente. Es visualmente atractiva y se utiliza para expresar relaciones entre elementos o cambios en su estado.
Ejemplo
Un botón circular que se transforma en un campo de entrada rectangular después de hacer clic en él, o un icono que cambia sin problemas a un icono funcional diferente.
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.
Framework
'fɹeɪm.wɜrk
Un framework es un conjunto de herramientas y una estructura que proporciona una base para construir aplicaciones web de manera más eficiente. Ofrece funcionalidades comunes y una arquitectura predefinida, permitiendo a los desarrolladores evitar escribir código repetitivo y centrarse en características específicas.
Ejemplo
React, Angular y Vue.js son frameworks de frontend populares. Ayudan a los desarrolladores a construir interfaces de usuario interactivas de forma rápida y consistente.
Diseño Adaptable (Responsive Design)
di-SE-ño a-dap-TA-ble (Responsive Design)
El diseño adaptable es una estrategia de diseño web que permite que las páginas se visualicen correctamente en una amplia variedad de dispositivos y tamaños de pantalla, desde ordenadores de escritorio hasta teléfonos móviles. Asegura que el diseño y el contenido se ajusten automáticamente para ofrecer una experiencia de visualización óptima, sin importar el dispositivo.
Ejemplo
La mayoría de los sitios web de noticias o tiendas en línea modernos utilizan diseño adaptable. El contenido que se muestra ampliamente en un ordenador se reorganiza automáticamente a un diseño de una sola columna en un smartphone para facilitar la lectura.
Servidor Web
ser-vi-DOR web
Un servidor web es un programa de computadora o la computadora misma que almacena el contenido de un sitio web (como archivos HTML, imágenes y videos) y los entrega a los navegadores web de los usuarios cuando se solicitan. Es un componente esencial para que cualquier sitio web sea accesible en internet.
Ejemplo
Cuando introduces una dirección web en tu navegador, tu solicitud se envía a un servidor web, que luego envía los archivos del sitio web de vuelta a tu navegador para su visualización. Apache y Nginx son ejemplos comunes de software de servidor web.
Despliegue (Deployment)
des-PLIE-ge (Deployment)
El despliegue se refiere a todo el proceso de colocar una aplicación web o sitio web desarrollado en un entorno de producción (como un servidor web) y hacerlo accesible para los usuarios. Este proceso generalmente implica la transferencia de código, la configuración de ajustes y la instalación de dependencias necesarias.
Ejemplo
Cuando se lanza un nuevo sitio web, los desarrolladores despliegan el código y los archivos terminados en un servidor web. Esto hace que el sitio sea accesible para cualquier persona con conexión a internet.
HTML (Lenguaje de Marcado de Hipertexto)
Ache-Te-Eme-Ele
Es un lenguaje de marcado utilizado para estructurar el contenido de las páginas web. HTML usa elementos como encabezados, párrafos, imágenes y enlaces para organizar la información. Forma el esqueleto básico de cualquier página web.
Ejemplo
Al construir un sitio web, se comienza escribiendo etiquetas HTML como `<html>`, `<head>` y `<body>` para definir la estructura fundamental de la página.
Nombre de Dominio
Nom-bre de Doh-mee-nee-oh
Es la dirección amigable de un sitio web en internet, como la dirección postal de una casa. Traduce las direcciones IP (una serie de números difíciles de recordar) en nombres fáciles de memorizar. Ejemplos son "google.com" o "wikipedia.org".
Ejemplo
Cuando escribes "example.com" en tu navegador web, el nombre de dominio apunta al servidor web correcto, permitiendo que la página se cargue.
Cookie (Galleta informática)
Koo-kie
Es un pequeño archivo de datos que un sitio web guarda en tu computadora. Se utiliza para recordar información sobre tu visita, como tus preferencias o el estado de inicio de sesión. Esto permite a los sitios web reconocerte en visitas posteriores y ofrecer una experiencia personalizada.
Ejemplo
Cuando añades artículos a un carrito de compras en una tienda en línea y luego navegas a otra página, los artículos permanecen en tu carrito porque una cookie está almacenando esa información.
Caché
Ka-she
Es un área de almacenamiento temporal para datos o archivos, utilizada para acelerar el acceso futuro. Guarda elementos como imágenes o datos que ya se han descargado una vez, para que puedan mostrarse rápidamente sin necesidad de volver a descargarlos la próxima vez que se necesiten. Esto hace que los sitios web carguen más rápido.
Ejemplo
El logotipo o las imágenes comunes de un sitio web que visitas frecuentemente se almacenan en la caché de tu navegador, permitiendo que se carguen instantáneamente en visitas posteriores y reduciendo el tiempo de carga total.
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.
Marketing de Contenidos
/ˈmaɾkɛtɪŋ de konˈtɛnidos/
Una estrategia de marketing centrada en la creación y distribución de contenido valioso, relevante y consistente para atraer y retener a una audiencia claramente definida, y en última instancia, impulsar acciones rentables del cliente. Ayuda a construir confianza y autoridad con tu audiencia al proporcionar información útil en lugar de lanzamientos de ventas directos.
Ejemplo
Una empresa de jardinería publica regularmente artículos en su blog sobre 'Cómo cuidar tus plantas en invierno' o 'Las mejores plantas para interiores', atrayendo a entusiastas de la jardinería y posicionándose como un experto en el campo.
Llamada a la Acción (CTA)
/ˈʝamaða a la akˈθjon/
Una instrucción dada a la audiencia diseñada para provocar una respuesta inmediata, generalmente utilizando un verbo imperativo. Es un elemento crucial en marketing y diseño web para guiar a los usuarios hacia una acción deseada, como realizar una compra, suscribirse a un boletín o descargar contenido.
Ejemplo
Un botón prominente de 'Comprar Ahora' en la página de un producto de comercio electrónico, un enlace 'Regístrate Gratis' en una página de prueba de software, o un banner de 'Descargar Ebook' en una publicación de blog.
Página de Aterrizaje (Landing Page)
/ˈpaʒina ðe ateɾiˈsaʒe/
Una página web independiente, creada específicamente para una campaña de marketing o publicidad. Es donde un visitante 'aterriza' después de hacer clic en un enlace de un correo electrónico, o en anuncios de Google, YouTube, Facebook, Instagram, o lugares similares. A diferencia de las páginas web normales, las páginas de aterrizaje están diseñadas con un único objetivo: la conversión.
Ejemplo
Cuando haces clic en un anuncio de 'Prueba Gratuita' de un software, la página a la que llegas, dedicada únicamente a que te registres para esa prueba, es una página de aterrizaje. Típicamente tiene una navegación mínima para mantenerte enfocado.
Tráfico Orgánico
/ˈtɾafiko oɾˈɣaniko/
Visitantes que llegan a tu sitio web desde los resultados de búsqueda de los motores (como Google, Bing, etc.) sin que hayas pagado por un anuncio. Es uno de los objetivos principales del SEO, indicando que tu contenido se clasifica bien de forma natural para consultas relevantes. Este tráfico se consigue mediante una optimización efectiva y contenido de alta calidad.
Ejemplo
Un usuario busca 'recetas de comida vegana' en Google, hace clic en un blog de cocina que aparece en los resultados de búsqueda naturales (no en un anuncio) y visita ese sitio web. Esta visita se considera tráfico orgánico.
Texto Alternativo (Alt Text)
teks-to al-ter-na-ti-vo
Es una descripción escrita de una imagen en una página web que aparece si la imagen no se carga y es leída por lectores de pantalla para usuarios con discapacidad visual. Los motores de búsqueda también usan el texto alternativo para entender el contenido de una imagen, lo que lo hace importante para el SEO.
Ejemplo
En HTML, podrías escribir `<img src="cat.jpg" alt="Gato marrón durmiendo en un sofá">`.
Etiqueta Canónica (Canonical Tag)
e-ti-ke-ta ka-non-i-ka
Una etiqueta HTML que se usa para indicar a los motores de búsqueda cuál es la versión "maestra" o preferida de una página cuando existen múltiples URLs con contenido idéntico o muy similar. Esto ayuda a prevenir problemas de contenido duplicado y consolida las señales de clasificación.
Ejemplo
Se coloca `<link rel="canonical" href="https://example.com/preferred-page/">` en la sección `<head>` de tu HTML.
Mapa del Sitio (Sitemap)
ma-pa del si-tio
Un archivo que enumera todas las URLs de tu sitio web, diseñado para informar a los motores de búsqueda sobre la estructura de tu sitio. Principalmente en formato XML, ayuda a los motores de búsqueda a rastrear tu sitio de manera más eficiente, descubriendo páginas nuevas o actualizadas. Es diferente de un mapa del sitio HTML para usuarios.
Ejemplo
Generalmente, se coloca un archivo `sitemap.xml` en el directorio raíz de tu sitio y se envía a Google Search Console.
Fragmentos Enriquecidos (Rich Snippets)
frag-men-tos en-ri-ke-see-dos
Resultados de búsqueda mejorados que muestran información adicional más allá del título y la descripción estándar en una Página de Resultados del Motor de Búsqueda (SERP). Estos datos extra, como calificaciones de estrellas, precios, imágenes o fechas de eventos, se extraen de datos estructurados en tu página web. Los fragmentos enriquecidos hacen que tu listado sea más atractivo y pueden aumentar las tasas de clics.
Ejemplo
Al buscar una receta, es posible que veas calificaciones de estrellas, tiempos de cocción o incluso una imagen directamente en los resultados de búsqueda.
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.
C++
Ce-más-más
C++ es un lenguaje de programación de alto rendimiento y propósito general que extiende el lenguaje C. Se utiliza en diversos campos como el desarrollo de sistemas, videojuegos y sistemas embebidos. C++ soporta la programación orientada a objetos.
Ejemplo
C++ se usa a menudo para crear los motores principales de videojuegos que requieren alto rendimiento, o partes de sistemas operativos.
Swift
Suíft
Swift es un lenguaje de programación moderno y rápido desarrollado por Apple. Se utiliza principalmente para desarrollar aplicaciones para productos Apple como iOS, macOS, watchOS y tvOS. Se caracteriza por su seguridad y sintaxis legible.
Ejemplo
Al desarrollar una nueva aplicación para iPhone o iPad, Swift es casi siempre el lenguaje que usarás.
C
Ce
C es un lenguaje de programación de propósito general muy influyente, desarrollado para la programación de sistemas. Se usa comúnmente para crear software fundamental como sistemas operativos, sistemas embebidos y compiladores. Su estrecha interacción con el hardware permite una ejecución muy rápida.
Ejemplo
Gran parte del kernel del sistema operativo Linux está escrito en C, lo que contribuye a su velocidad y eficiencia.
R
Erre
R es un lenguaje de programación y entorno de software diseñado específicamente para la computación estadística y gráficos. Es ampliamente utilizado por científicos de datos e investigadores para construir modelos estadísticos complejos y visualizar datos. Se caracteriza por su rico ecosistema de librerías.
Ejemplo
R se utiliza para analizar los resultados de una gran encuesta y visualizar tendencias con gráficos, ayudando a los investigadores a sacar conclusiones.
Dart
Dart
Un lenguaje de programación de código abierto desarrollado por Google para construir aplicaciones web, móviles y de escritorio del lado del cliente. Es especialmente popular para su uso con Flutter, un framework de interfaz de usuario multiplataforma.
Ejemplo
Se utiliza para definir interfaces de usuario en una aplicación Flutter o desarrollar partes interactivas de un sitio web.
Scala
ES-kah-lah
Un lenguaje de programación que se ejecuta en la Máquina Virtual de Java (JVM) e integra paradigmas de programación tanto orientada a objetos como funcional. Se utiliza a menudo para sistemas a gran escala y procesamiento de datos.
Ejemplo
Se usa para escribir lógica de análisis de datos en frameworks de procesamiento de big data como Apache Spark, o para construir servicios web de alto rendimiento.
Lua
LOO-ah
Un lenguaje de programación ligero y embebible, a menudo utilizado para el desarrollo de juegos y scripts. Está escrito en C y diseñado para integrarse fácilmente en otras aplicaciones.
Ejemplo
Se usa para crear lógica de juego en Roblox Studio o escribir scripts personalizados para aplicaciones como Adobe Photoshop Lightroom.
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.
Webpack
(WEP-pak)
Webpack es un empaquetador de módulos utilizado principalmente para aplicaciones JavaScript. Toma varios activos como archivos JavaScript, CSS e imágenes, y los agrupa en unos pocos archivos optimizados para el navegador. Este proceso ayuda a mejorar los tiempos de carga de la aplicación y agiliza los flujos de trabajo de desarrollo.
Ejemplo
Al construir una aplicación web grande, usarías Webpack para combinar todos tus archivos JavaScript y CSS separados en un único paquete optimizado para una carga más rápida en producción.
Babel
(BA-bel)
Babel es un compilador de JavaScript que transforma el código JavaScript moderno (características de ES6+) en versiones compatibles con versiones anteriores. Esto permite a los desarrolladores usar las últimas características del lenguaje mientras aseguran que sus aplicaciones funcionen en navegadores o entornos antiguos. Se usa frecuentemente junto con frameworks web modernos.
Ejemplo
Si escribes JavaScript usando `async/await` u otra sintaxis nueva, Babel lo convertirá a una forma que los navegadores más antiguos, como Internet Explorer, puedan entender y ejecutar.
Bootstrap
(BOOT-strap)
Bootstrap es un popular framework CSS de código abierto para construir rápidamente sitios web y aplicaciones web responsivas y mobile-first. Proporciona una colección de componentes HTML, CSS y JavaScript prediseñados. Esto permite a los desarrolladores crear diseños visualmente atractivos y consistentes sin escribir todos los estilos desde cero.
Ejemplo
Para que un botón tenga un aspecto profesional y sea responsivo, simplemente puedes añadir clases de Bootstrap como `btn` y `btn-primary` a tu elemento de botón HTML, en lugar de escribir CSS personalizado.
Vite
(VEET)
Vite es una herramienta de construcción frontend de próxima generación diseñada para acelerar significativamente el proceso de desarrollo de proyectos web modernos. Ofrece tiempos de inicio del servidor de desarrollo extremadamente rápidos y un reemplazo de módulo en caliente instantáneo al guardar cambios. Esto mejora enormemente la experiencia del desarrollador, especialmente con frameworks como Vue.js y React.
Ejemplo
Al iniciar un nuevo proyecto de React, usar Vite con `npm create vite@latest` permite que tu servidor de desarrollo se inicie en segundos y refleje los cambios de código casi al instante, haciendo el desarrollo mucho más fluido.
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.
Dirección IP
(dee-rek-syohn ee-peh)
Una etiqueta numérica única asignada a cada dispositivo conectado a una red informática que utiliza el Protocolo de Internet para la comunicación. Identifica y localiza dispositivos en una red, permitiéndoles enviar y recibir datos.
Ejemplo
Cuando visitas un sitio web como Google, tu navegador traduce "google.com" a la dirección IP de Google (por ejemplo, 142.250.199.46) para encontrar y conectarse a su servidor.
SSH (Secure Shell)
(ese-ese-hache)
Un protocolo de red criptográfico para operar servicios de red de forma segura a través de una red no segura. Se utiliza principalmente para iniciar sesión en servidores remotos y ejecutar comandos, proporcionando un canal seguro entre dos dispositivos en red.
Ejemplo
Un desarrollador utiliza SSH desde su computadora local para conectarse a un servidor remoto, lo que le permite editar archivos de forma segura, ejecutar programas o gestionar la configuración del servidor.
Computación en la Nube
(kom-poo-tah-syohn en lah noo-beh)
La entrega a demanda de servicios de computación, incluyendo servidores, almacenamiento, bases de datos, redes, software, análisis e inteligencia, a través de Internet ("la nube"). Permite a empresas e individuos consumir recursos informáticos, como la electricidad, sin construir ni mantener infraestructura física.
Ejemplo
Utilizar servicios como AWS o Google Cloud Platform para alojar un sitio web, almacenar grandes cantidades de datos o ejecutar aplicaciones complejas sin poseer ningún servidor físico es un ejemplo de computación en la nube.
Backend
(bak-end)
Se refiere a la parte "del lado del servidor" de un sitio web o aplicación, que los usuarios no ven ni interactúan directamente. Incluye el servidor, la base de datos y la lógica de la aplicación, responsable de procesar y almacenar datos, y proporcionar información al frontend.
Ejemplo
Cuando añades un artículo a tu carrito en una tienda en línea, el backend procesa y almacena esta información en su servidor y base de datos, gestionando el inventario y preparando el pedido.
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.
Transformer
trans-FÓR-mer
Un tipo de arquitectura de modelo de IA que ha revolucionado el procesamiento del lenguaje natural. Procesa secuencias completas de datos simultáneamente, aprendiendo eficientemente las relaciones entre las diferentes partes. Es la arquitectura fundamental para los modelos de lenguaje grandes (LLM).
Ejemplo
La capacidad de IA como ChatGPT para generar texto similar al humano se debe en gran parte a la arquitectura Transformer.
Ingeniería de Prompts
in-je-nie-RÍ-a de PROMPT-s
La técnica de diseñar y optimizar instrucciones efectivas (prompts) para obtener los resultados deseados de los modelos de IA, especialmente la IA generativa. Al elaborar prompts claros y específicos, los usuarios pueden mejorar significativamente la calidad y relevancia de las respuestas de la IA.
Ejemplo
Mejorar un prompt de "dibujar un paisaje de verano" a "crea una pintura impresionista de un sereno atardecer de verano sobre un campo de lavanda en la Provenza con una pequeña cabaña" es un ejemplo de ingeniería de prompts.
GAN (Red Generativa Antagónica)
ge-a-ene (rehd je-ne-ra-TÍ-va an-ta-GÓ-ni-ka)
Un tipo de modelo de IA generativa compuesto por dos redes neuronales: un generador y un discriminador, que compiten entre sí. El generador intenta crear datos que parezcan reales, mientras que el discriminador intenta distinguir entre datos reales y los creados por el generador. Este proceso antagónico ayuda al generador a producir datos de cada vez mayor calidad.
Ejemplo
Muchos sistemas de IA que generan imágenes altamente realistas de caras humanas no existentes o paisajes realistas se construyen utilizando tecnología GAN.
RLHF (Aprendizaje por Refuerzo a partir de Retroalimentación Humana)
ere-ele-hache-efe (apren-di-SA-je por re-fuer-ZO a par-TIR de re-tro-a-li-men-ta-SYON hu-MA-na)
Una técnica de entrenamiento utilizada para alinear modelos de IA generativa, especialmente los Modelos de Lenguaje Grandes (LLM), con las preferencias humanas y los estándares éticos. Los humanos evalúan las respuestas generadas por la IA, y esta retroalimentación se utiliza para entrenar aún más el modelo, haciendo que genere salidas más seguras y útiles.
Ejemplo
RLHF jugó un papel crucial en el entrenamiento de modelos como ChatGPT para evitar generar contenido dañino o inapropiado y para producir respuestas conversacionales más naturales y útiles.
Multimodal
mul-tee-moh-dahl
Multimodal se refiere a un modelo de IA que puede manejar múltiples tipos de datos, como texto, imágenes, audio y video, al mismo tiempo. Esto permite al modelo comprender y generar contenido de manera más similar a la humana.
Ejemplo
Un servicio donde subes una foto y preguntas '¿Qué es esto?' en texto, y la IA describe la imagen, es un ejemplo de IA multimodal.
Modelo de Difusión
mo-deh-lo deh dee-foo-see-on
Un modelo de difusión es una técnica de IA generativa que restaura gradualmente datos (como imágenes o audio) desde ruido aleatorio hasta su forma original. Al aprender este proceso, puede generar nuevos datos desde cero.
Ejemplo
Stable Diffusion y DALL-E son IA de generación de imágenes que utilizan modelos de difusión para crear imágenes hermosas a partir de indicaciones de texto.
Aprendizaje con pocos ejemplos (Few-shot Learning)
a-pren-di-sa-je kon po-kos e-xem-plos
El aprendizaje con pocos ejemplos es la capacidad de una IA para aprender una nueva tarea a partir de solo unos pocos ejemplos (por ejemplo, algunas imágenes o preguntas). Esto permite aplicar la IA sin necesidad de conjuntos de datos masivos.
Ejemplo
Una IA que puede aprender a distinguir gatos de perros después de ver solo 3 fotos etiquetadas (por ejemplo, 'Esto es un gato, esto es un perro') es un ejemplo de aprendizaje con pocos ejemplos.
Encadenamiento de indicaciones (Prompt Chaining)
en-ca-de-na-mien-to de in-di-ca-cio-nes
El encadenamiento de indicaciones es una técnica donde se combinan múltiples indicaciones en secuencia para que la IA realice tareas complejas paso a paso. La salida de cada paso se convierte en la entrada de la siguiente indicación.
Ejemplo
Una indicación como 'Primero escribe un resumen de A, luego usa ese resumen para crear una comparación con B' encadena indicaciones para generar un informe detallado.
Espacio latente (Latent Space)
es-pa-cio la-ten-te
El espacio latente es un espacio multidimensional abstracto donde un modelo de IA comprime y representa las características de los datos. Los puntos de datos similares están cerca, lo que lo hace útil para generar o editar nuevos datos.
Ejemplo
En las IA de generación de imágenes, características como 'sonrisa' o 'color de cabello' corresponden a direcciones específicas en el espacio latente, lo que permite editar imágenes moviéndose a lo largo de esas direcciones.
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.
Editor de Bloques (Block Editor)
eh-dee-TOR deh BLO-kes
Un sistema de edición de contenido donde el texto, las imágenes y los títulos de un sitio web se gestionan y editan como "bloques" independientes. Cada bloque se puede posicionar y estilizar individualmente, permitiendo una creación de diseño flexible.
Ejemplo
El editor moderno de WordPress es un ejemplo de editor de bloques, donde puedes añadir párrafos, imágenes y botones como bloques individuales y organizarlos libremente para construir una página.
Herramientas SEO (SEO Tools)
eh-rrah-myen-tas ES-ee-OH
Funciones o software diseñados para ayudar a optimizar el contenido y la configuración de tu sitio web para que aparezca en una posición más alta en los resultados de los motores de búsqueda. Esto facilita que más personas descubran tu sitio.
Ejemplo
Muchas plataformas CMS incluyen herramientas SEO integradas, como la edición de títulos de página y meta descripciones, análisis de palabras clave y la generación de mapas del sitio.
Editor de Arrastrar y Soltar (Drag-and-Drop Editor)
eh-dee-TOR deh a-rras-TRAR ee sol-TAR
Una herramienta de edición que te permite construir páginas web visualmente seleccionando elementos (como imágenes, cuadros de texto) directamente con el ratón y moviéndolos a la posición deseada en la pantalla. Facilita la creación de diseños sin necesidad de conocimientos de programación.
Ejemplo
En muchos constructores de sitios como Wix o Squarespace, usas un editor de arrastrar y soltar para añadir imágenes a una galería o mover un bloque de texto a la barra lateral.
Dominio Personalizado (Custom Domain)
doh-MEE-nyo per-so-na-lee-SA-do
Tu propio nombre de dominio único que eliges y registras para la dirección de tu sitio web. Ofrece una URL más profesional y fácil de recordar que un subdominio gratuito (por ejemplo, misitio.wixsite.com).
Ejemplo
Si quieres que tu sitio web sea accesible en una dirección como "miempresa.com" en lugar de una genérica, eso es un dominio personalizado. Configurarlo mejora la imagen de tu marca.
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.
Gráficos Rasterizados (o Mapa de Bits)
/ˈɡɾafikos rasteɾiˈθaðos/ (o /ˈmapa ðe bits/)
Un formato de imagen compuesto por una cuadrícula de puntos individuales llamados píxeles. Al ampliarse, las imágenes rasterizadas pueden verse pixeladas o borrosas porque los píxeles se estiran. Son ideales para fotografías e imágenes complejas y detalladas.
Ejemplo
Una foto tomada con tu smartphone o una manipulación fotográfica creada en Photoshop son ejemplos típicos de gráficos rasterizados.
Máscara
/ˈmaskaɾa/
Una herramienta utilizada para ocultar o revelar partes de una imagen o capa sin eliminarlas permanentemente. Permite controlar la visibilidad de áreas específicas, haciendo que partes sean transparentes o visibles. Esto es crucial para la edición no destructiva en diseño.
Ejemplo
Usarías una máscara si quieres eliminar el fondo de una foto para mostrar solo a la persona, o para recortar una imagen con una forma específica.
Mesa de Trabajo (Artboard)
/ˈmesa ðe tɾaˈβaxo/ (o /ˈɑːrtbɔːrd/)
Un lienzo o espacio de trabajo configurable dentro de un archivo de diseño donde creas tus diseños. Puedes tener múltiples mesas de trabajo en un solo documento, lo que te permite diseñar diferentes páginas de un sitio web o varias pantallas de una aplicación móvil simultáneamente. Esto mejora significativamente la eficiencia del flujo de trabajo.
Ejemplo
Gestionarías la página de inicio y una subpágina de un sitio web, o la pantalla de inicio de sesión y la pantalla de perfil de una aplicación móvil, como mesas de trabajo separadas dentro de un mismo archivo.
Degradado (Gradient)
/deɡɾaˈðaðo/ (o /ˈɡreɪdiənt/)
Un efecto visual que mezcla suavemente dos o más colores entre sí. Crea una transición gradual entre colores, que puede usarse para transmitir profundidad, dimensión o una estética suave. Los degradados se utilizan ampliamente en varios elementos de diseño como fondos de sitios web, logotipos e ilustraciones.
Ejemplo
Podrías crear un fondo que transicione suavemente de azul a morado, o de negro a transparente, o usarlo para añadir una sensación de profundidad a un botón.
Herramienta Pluma (Pen Tool)
erramienta pluma
Es una herramienta esencial en aplicaciones como Illustrator y Photoshop para crear líneas y curvas precisas. Permite dibujar formas y trazados personalizados mediante la colocación de puntos de ancla y la manipulación de tiradores. Es fundamental para el diseño de logotipos y el trazado de contornos intrincados.
Ejemplo
Utilizar la Herramienta Pluma para dibujar el contorno exacto de un personaje en un diseño gráfico, asegurando una silueta limpia y definida.
Paleta de Colores (Color Palette)
paleta de colores
Es un conjunto o colección de colores seleccionados para un proyecto de diseño. Ayuda a mantener la coherencia visual y a reflejar la identidad de la marca o el ambiente del proyecto. La mayoría de las herramientas creativas ofrecen funciones para crear, guardar y aplicar paletas de colores.
Ejemplo
Definir una paleta de colores vibrantes para un póster de festival de música, utilizando tonos que representen energía y alegría.
Exportar (Export)
eks-por-tar
Es el proceso de guardar su diseño o proyecto en un formato que puede ser utilizado por otros programas, dispositivos o plataformas. Es fundamental al preparar imágenes o videos para subir a la web, imprimir o compartir. A menudo, puedes elegir el tipo de archivo, la calidad y configuraciones específicas durante la exportación.
Ejemplo
Después de diseñar un folleto en InDesign, 'exportarlo' como un archivo PDF listo para enviar a la imprenta.
Resolución (Resolution)
re-so-lu-sion
Es una medida del nivel de detalle que puede mostrar una imagen digital o una pantalla, expresada comúnmente en píxeles por pulgada (PPI) o puntos por pulgada (DPI). Una resolución más alta significa más detalle y una imagen más nítida. Es fundamental para la calidad de impresión y para optimizar imágenes para la web.
Ejemplo
Al preparar una fotografía para una revista impresa, es importante ajustar su 'resolución' a 300 DPI para asegurar que se vea nítida y no pixelada al imprimir.
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.
Krita
KREE-ta
Krita es un programa de dibujo gratuito y de código abierto diseñado para pintura digital, animación y arte conceptual. Ofrece un rico conjunto de pinceles, capas y potentes herramientas para ayudar a los artistas a expresar su creatividad.
Ejemplo
Descargué Krita para empezar a practicar ilustración digital y probé diferentes pinceles para crear un efecto de acuarela.
Clip Studio Paint
KLIP ES-TU-dio PEINT
Clip Studio Paint es un software de dibujo popular diseñado específicamente para crear cómics, manga, ilustraciones y animaciones. Ofrece una amplia gama de herramientas de dibujo, capacidades de modelos 3D y características que apoyan un flujo de trabajo profesional.
Ejemplo
Usé Clip Studio Paint para dibujar mi nuevo manga, y su función de regla de perspectiva me ayudó a dibujar fondos con precisión.
CorelDRAW
KOR-el-DRAW
CorelDRAW es un software de diseño profesional utilizado para crear gráficos vectoriales como logotipos, gráficos web y diseños impresos. Ofrece un conjunto completo de herramientas y capacidades de diseño flexibles, lo que permite un diseño gráfico de alta calidad.
Ejemplo
Usé CorelDRAW para diseñar el logo de mi nueva empresa, y sus herramientas vectoriales me permitieron crear un logo nítido que se escala perfectamente.
Blender
/'blɛndər/
Un software de creación 3D gratuito y de código abierto. Se utiliza para modelado, escultura, animación, renderizado y más, para crear una variedad de gráficos 3D. Los diseñadores web pueden usarlo para crear ilustraciones o íconos 3D atractivos para sitios web.
Ejemplo
Usas Blender para crear un logotipo 3D complejo o un modelo 3D de un producto que se mostrará en un sitio web.
Adobe InDesign
/aˈðoβi ˈindɪzaɪn/
El software profesional de autoedición (DTP) de Adobe. Se especializa en la creación de diseños de varias páginas para libros, revistas, folletos y libros electrónicos. También se utiliza para estructurar contenido web o crear documentos PDF aptos para la web.
Ejemplo
Diseñas un catálogo de productos detallado o un informe anual en InDesign para publicarlo como un documento PDF descargable en un sitio web.
Framer
/'freɪmər/
Una herramienta potente para diseñar y desarrollar prototipos interactivos y sitios web. Combina herramientas de diseño con capacidades de edición de código, permitiéndole crear rápidamente interfaces de usuario con animaciones complejas e integraciones de datos. Sirve como un puente sólido entre el diseño y el desarrollo.
Ejemplo
Prototipas interacciones complejas en Framer, como la reacción de los elementos cuando un usuario hace clic en un botón o arrastra un deslizador, para comunicar con precisión el comportamiento deseado al equipo de desarrollo.
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 →