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.
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.
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.
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`.
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.
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.
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.
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é.
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.
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.
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.
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.
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 →