Diccionario web: los términos imprescindibles explicados fácil

Cuando empiezas tu proyecto de diseño web, te encuentras con un montón de términos que no siempre te resultan familiares.

La desventaja añadida es, que la mayoría de estos términos web se utilizan en inglés… Suena muy «cool», pero… ¿Qué me estás contando?

Este es el diccionario web imprescindible que me hubiera gustado tener desde el primer momento en que me vi inmerso en el primer proyecto web.

A veces, el diseñador web, le cuesta hacerse entender con el cliente porque no habla el mismo idioma en cuanto a los términos se refiere, por lo que sería de ayuda tener una idea mínima de lo que significa.

Así que, aquí te traigo el diccionario de términos web explicados de forma fácil, para que lo consultes siempre que lo necesites.

¡Vamos a ello!

Tipos de página

Landing page – Página de Aterrizaje

Normalmente, se usa como página de venta, enfocada principalmente a seducir a la persona que aterriza en ella para que compre un producto o servicio.

Como detalle curioso, se suele suprimir el menú de navegación para evitar distracciones y conseguir el primer clic en el botón de compra.

Single Page Aplication – Web de Navegación Única

Algunas webs corporativas o de tipo informativas que no tienen mucho contenido, se decantan por estructurar la web en una única página.

En esta página única, estará todo el contenido del sitio. De manera que los enlaces del menú, te llevan al punto concreto de la información, desplazándose hacia arriba o hacia abajo, a través de un Anchor Text.

Una estructura ‘tipo’ de una web Single Page es:

• Inicio: lo primero que vemos al entrar en la web. Expone la propuesta de valor del sitio de forma breve.
• Quienes somos: información acerca de quién hay detrás del proyecto, la empresa o el negocio. También definido como Acerca de o About.
• Servicios: muestra de los servicios que se ofrecen o las características del proyecto o negocio.
• Contacto: datos de contacto como dirección, email y teléfono. También puede contener un formulario de contacto.

Blog – Agrupación de Post

El blog es el módulo que agrupa los post o entradas. Suelen estar ordenados cronológicamente de más reciente a más antiguo. Y en algunos casos, cuenta con un buscador para localizar entradas concretas.

Se usa principalmente, para ofrecer contenidos de valor para los usuarios de tu web.

Gracias a una buena estrategia de contenidos en el blog, podrás mejorar el posicionamiento orgánico SEO, siempre que lo mantengas actualizado y publiques entradas con contenido de valor para tus usuarios.

Post – Entrada – Artículo

Los post o entradas, como diríamos en español, son los artículos como el que estás leyendo ahora, que arrojan algún tipo de información acompañado de textos, imágenes y/o vídeos.

Algunos ejemplos de tipos de post pueden ser:

• Consejos prácticos: con información práctica que sea relativa y coherente con el contenido de la web.
• Tutoriales: cómo se hace algo explicado paso a paso, con imágenes y/o vídeos.
• Análisis: análisis de productos, servicios o aplicaciones con el objetivo de ofrecer una visión global antes de adquirir dicho producto o servicio.
• Definiciones: del tipo al post que estás leyendo ahora, para introducir al usuario a un lenguaje técnico dentro de un gremio o colectivo.

E-commerce – Tienda Online

Sirve para vender por internet productos, servicios o recursos digitales como: cursos, plantillas, software, etc.)

En la página principal de una tienda online de productos, se muestra el escaparate junto con otros elementos que forman parte la tienda.

Estructura de un e-Commerce

• Escaparate principal: donde se muestran todos los productos o los productos destacados. También se puede organizar mostrando las categorías que lleva al escaparate de productos por su temática.
• Categorías de producto: agrupación de productos por temática o uso.
• Etiquetas de producto: palabras asociadas al producto que se enlazan a otros productos que comparten la misma etiqueta. Muy útil para descubrir productos relacionados.
• Ventas dirigidas: también conocido como Up-Selling. Es cuando le damos la opción al usuario de comprar un producto ligeramente superior al que está viendo en ese momento.
• Ventas cruzadas: también conocido como Cross-Selling. Es una estrategia para vender productos adicionales al que está viendo o comprando en ese momento. Se utiliza habitualmente en la parte inferior de la Ficha de Producto.

Ficha de producto

Es la página donde se encuentran las opciones de compra de producto y el botón de añadir a la cesta.

Desglose de la ficha de producto

• Título de producto: el nombre del producto que se muestra en la parte superior de la ficha, como en la parte inferior de la miniatura que se muestra en la tienda.
• Precio: puede ser un precio fijo o precio inicial (si el producto incrementa su precio según las opciones de compra). Se puede mostrar con o sin IVA y aplicar este impuesto en la página de Checkout.
• Descripción corta: el texto principal que describe brevemente el producto. Lo que habitualmente se lee, para entendernos.
• Opciones de compra: variables para configurar la compra del producto. Algunas veces estas opciones requieren de un cálculo de precio automático.
• Añadir al carrito: botón de compra que añade el producto al carrito. Se puede configurar para que redirija a la página de Checkout o que únicamente añada el producto al icono del carrito.
• Descripción larga: texto secundario que completa la información del producto. Habitualmente se aprovecha para optimizar el SEO y se nutre de bastante contenido con palabras clave o Keywords. Lo que habitualmente solo leen los robots de Google.
• Información adicional: suele aparecer en modo Pestaña con información adicional del producto. Generalmente, es información técnica o de la composición del producto.
• Valoraciones de clientes: las famosas reseñas que a todos nos gusta leer antes de la decisión de compra. Se pueden configurar para que el usuario únicamente pueda dejar una reseña si previamente ha comprado el producto. De esta forma evitamos comentarios malintencionados y poco objetivos.
• Productos relacionados: productos de la misma categoría o de características similares. También se pueden relacionar productos de modo manual, es decir, sin que compartan categorías o características, pero que nos interese relacionarlos por algún motivo.

Checkout – Facturación y Pago

Es la página de finalizar compra, donde introducimos la dirección de envío, dirección de facturación (en el caso de no ser la misma) y de selección del método de pago.

Entre los métodos de pago más populares se encuentran:

• TPV virtual: para pago con tarjetas a través de la pasarela Redsys.
• Bizzum: cada vez más común en nuestras compras. Implica una acción manual en el estado del pedido de nuestra tienda.
• PayPal: un método de pago bastante extendido. Genera confianza por la protección que ofrece al comprador en la transacción.
• Recogida en tienda: método utilizado para ofrecer la opción de pago en el momento de la recogida en nuestra tienda física.

Pasarela de pago

Esta es la página que aparece justo después de pulsar el botón de «Finalizar la Compra«.

Puede redirigirnos a una página externa, con otro dominio del propio banco, o de la plataforma que hayamos elegido como método de pago. Allí se introduce la información de la tarjeta con la que se hace la compra.

Una vez introducida la información del pago, esta página siempre debe devolvernos al dominio principal de la tienda donde estamos comprando, para que la compra se valide correctamente.

Recuerda: pulsar siempre el botón «Continuar» o «Finalizar Compra», para validar la compra correctamente.

Navegación

URL – Dirección Web

Son las siglas de Uniform Resource Locator, en castellano: es la dirección única y específica dentro de la Worl Wide Web, comúnmente conocido por WWW.

Esta dirección aparece escrita en la barra de búsqueda del navegador.

Si usas el navegador Google Chrome, ahora no muestra la dirección completa de donde te encuentras, por carecer de información útil para el usuario medio, según criterios de usabilidad de Google. Pero puedes volver a mostrarla desde las opciones del navegador.

Https – Protocolo Seguro Navegación

Es el protocolo de comunicación segura a través de Internet. Ayuda a proteger la integridad y la confidencialidad de los datos intercambiados entre el ordenador del usuario y el sitio web.

Para conseguir que tu web cargue por https, necesitas instalar un certificado SSL a través del panel de control del hosting.

Muchos de estos certificados son gratuitos, como por ejemplo el certificado Let’s Encrypt que ofrece Webempresa.

Tipos de enlace

Antes de nada, cabe de decir que un enlace puede estar en un botón, en un texto, en una imagen, en un vídeo o cualquier otro elemento del contenido.

Ahora sí, a continuación vamos a ver los tipos de enlace:

• URL: es la dirección completa que aparece en el navegador. Si usas Google Chrome, ahora no muestra la dirección completa de donde te encuentras, por carecer de información útil para el usuario general. Pero puedes volver a mostrarla desde las opciones del navegador.
• Anchor text: es el texto ancla, que se utiliza para dar título a un enlace. Para una buena praxis en SEO, debe ser coherente y aportar información del contenido que encontraremos en el destino después de pinchar.
• Hipervínculo: se denomina así a cualquier enlace que lleva a otro sitio. El hipervínculo puede ser de dos tipos:
  • Enlace interno: es un enlace que está dentro del mismo dominio. Este enlace puede llevar a otra posición de la misma página o a otra página que pertenezca al mismo sitio web.
  • Enlace externo: este enlace lleva a otro sitio de internet que no tiene que ver con el sitio principal en el que nos encontramos el enlace para pinchar. Se considera que es externo porque es relativo a otro dominio.
• Enlace relativo: es un enlace que tiene en cuenta el directorio actual en el que te encuentras. Te pongo un ejemplo: Un enlace relativo sería navegar entre artículos sin escribir lo que precede a la URL, o sea así: /otro-articulo-del-blog
• Enlace absoluto: un enlace absoluto tiene en cuenta la dirección completa del enlace como en el siguiente ejemplo: https://quiqueqal.es/blog/el-articulo-que-estas-leyendo-ahora
• Enlace de afiliado: son enlaces a productos o servicios externos, que generan una comisión de venta para la persona afiliada. Te pongo un ejemplo de mi enlace de afiliado al tema de WordPress Divi.

Dominio

El dominio es el nombre único que elegimos para publicar nuestro proyecto web. Se suelen comprar por periodos de 1 año, de forma que si deseamos cambiar el nombre o desestimar la web dejaremos de pagarlo y quedará libre para cualquier persona interesada en él.

Abandonar un dominio o cambiarlo por otro, no afectará al contenido del sitio propiamente, ya que los archivos seguirán permaneciendo en el hosting y se podrá apuntar el nuevo dominio al contenido del hosting.

Subdominio

Es lo que antecede al dominio principal.

Te pongo unos ejemplos a continuación:

• tienda.mi-pagina.com
• clientes.mi-pagina.com
• alumnos.mi-pagina.com

Es una buena manera de organizar los contenidos en los sitios web grandes. Además, te permite realizar una instalación WordPress o de cualquier otro CMS de manera independiente a la del dominio principal, implementando diferentes funciones o características.

Extensión de dominio

La extensión de dominio es lo que encuentras después del punto y al final de la dirección de un sitio web, como por ejemplo .com .es .org y así un largo etcétera.

Sirven para ofrecer información acerca de la ubicación geográfica o la naturaleza del sitio web.

La web cada vez admite más extensiones de dominio, y te preguntarás

¿Cuántas extensiones de dominio existen?

A día de hoy, enero de 2022 y de acuerdo con la ICANN, la respuesta es 280 extensiones diferentes. De ellas, 248 son códigos específicos de cada país, 11 son pruebas, y 20 son  dominios  genéricos TLDs (se refiere a dominios de nivel superior como .com o .net).

Estructura Web

La estructura de la web viene especificada en el mapa del sitio o ‘Sitemap’.

Desde este mapa, podemos ver la organización de las diferentes páginas y el organigrama de como están contenidas unas en otras.

Podríamos decir que hay una estructura más general que sería la estructura global del sitio y otra más concreta y visual que es la estructura a nivel de página.

Veamos las diferencias a continuación.

Estructura global del sitio

La estructura del sitio web viene determinada por varios factores. Algunos de ellos son obvios, como las diferentes páginas por las que navegamos, y otras son más de estructura interna de la web.

A grandes rasgos, podríamos englobar la estructura de un web en 4 temáticas:

• Páginas: la página ‘raíz’ o principal de un sitio es la de Inicio. Es la página que se define como portada de la web y el primer contenido que se muestra cuando accedes al dominio principal. Esta sería la página ‘padre’ desde donde cuelgan el resto de páginas.
• Taxonomías: es la manera de clasificar los contenidos de una web. Es una clasificación con respecto a la dirección URL. Por ejemplo, en la web de una inmobiliaria, las taxonomías podrían ser: pisos, chalets y apartamentos. Veríamos la URL en la barra de navegación de la siguiente manera:
  • www.inmobiliaria.com/pisos/
  • www.inmobliaria.com/chalets/
  • www.inmobiliaria.com/apartamentos/
• Categorías: las categorías sirven para agrupar tipos de contenido. Se pueden establecer categorías para diferentes tipos de contenido, como por ejemplo:
  • Producto: para agrupar productos por características similares.
  • Blog: para tematizar los contenidos publicados en un blog.
  • Porfolio: para clasificar los trabajos realizados según su disciplina. En mi porfolio puedes ver dos categorías, diseño web y logotipos.
• Etiquetas: se usan principalmente para ayudar en la búsqueda de contenidos dentro de una web, del tipo entrada de un blog o producto si es una tienda online.

Estructura a nivel de página

No todas las páginas tienen la misma estructura, pero la disposición más común sería como la imagen que vemos a continuación:

Header: es el encabezado superior de una página. Utilizado para colocar un Slider o el titular.

Menú principal: es la barra superior que enlaza con las diferentes páginas de la web. El menú es los móviles suele ser de tipo «hamburguesa» o sea, con las tres rayas horizontales.

Menú secundario: suele estar por encima o por debajo del menú principal, y enlaza con contenidos específicos como el carrito de la compra, un email de contacto o un teléfono.

Body: el cuerpo de la página, la zona más central entre la cabecera y el footer. Donde está la «miga» del contenido.

Sección: zona especifica dentro del Body que hemos visto anteriormente. Normalmente, se diferencia por un cambio de contenido, al que se enlaza con un anchor text.

Columnas: al igual que en la maquetación de una revista, las columnas sirven para organizar la información. En la versión responsive del móvil se suele usar una o dos columnas por la estrechez de la pantalla.

Sidebar: barra lateral ubicada a la derecha o izquierda de la versión web de escritorio. En la versión móvil desaparece o se ubica al final del contenido. Normalmente, se usa en los post para ofrecer información adicional, como puede ser: campo de búsqueda, artículos relacionados, anuncios (tanto de AdSense como de enlaces de afiliados).

Lead Magnet: gancho de recurso gratuito para su descarga a cambio de un email. Este email pasará a formar parte de una base de datos para realizar email marketing.

Widgets: es una pequeña funcionalidad que se coloca en una zona específica de la web. Por ejemplo un pequeño formulario de contacto dentro de la sidebar.

Footer: es el pie o parte inferior de una página web. En él se ubican los créditos y la información de contacto y el mapa del sitio si se quiere.

Hosting – Alojamiento Web

El hosting es el espacio físico que contiene los archivos de la web. Las características de ese espacio dependerán de lo que contratemos con el proveedor de hosting.

En un hosting como el de Webempresa, podemos elegir la capacidad en gigas que necesitamos, la velocidad del ancho de banda (en función del tráfico que tendremos en nuestra web) y número de instalaciones para diferentes webs.

Es a través del hosting, donde se administran tanto los archivos de la web, como el acceso por ftp o la creación de cuentas de email.

Para que tomes la decisión correcta en su elección, te recomiendo que leas las preguntas y respuestas antes de contratar un hosting.

FTP – Protocolo de Transferencia de Archivos

File Transfer Protocol, o mejor dicho protocolo de transferencia de archivos. Sirve tanto para cargar como descargar los archivos de tu web, ofrecer espacio en la nube a tus clientes o gestionar el espacio de tu buzón de correo.

Este protocolo necesita de un software de conexión específico, así como un usuario y contraseña para conectarse.

Entre los dos más populares están:

• Fillezilla (para usuarios de PC)
• Cyberduck (para usuarios de Mac)

cPanel – Panel de Control

Es el panel de control desde donde se administran las tareas del hosting.

Las herramientas que encontrarás en el cPanel dependerán del proveedor, pero las más comunes son:

• Aplicaciones de servidor: para instalar el cms y gestionar los contenidos de la web, configurar bakcups, configurar la base de datos php o herramientas de migración de cuentas de email.
• Correo electrónico: creación de nuevas cuentas de email, administrar la capacidad del disco duro, auto-contestadores o reenviadores.
• Administrador de archivos: creación de usuarios ftp, privacidad de directorios o copias de seguridad.
• Bases de datos: acceso a MySQL, o phpMyAdmin.
• Dominios: creación de dominios adicionales, subdominios o editor de zonas DNS.
• Seguridad: Instalador de certificados SSL / TLS, gestión de API tokens y bloqueador de IP’s.

Desarrollo web local y servidor

Cuando se crea una nueva página web, el desarrollo web se puede trabajar en dos escenarios distintos:

• Desarrollo web local: realizaremos la instalación de WordPress en nuestro ordenador personal para validar todas las funciones y contenidos antes de publicar el sitio en directo.
• Desarrollo web en vivo: trabajaremos los contenidos de WordPress directamente en el servidor remoto, con el plan de hosting que hayamos contratado.

Staging, de servidor local a remoto

Si decides instalar WordPress en tu propio equipo, puedes vincular el hosting remoto para trasladar todos los cambios del servidor local al servidor remoto.

De esta forma podemos validar que todo funciona correctamente en nuestro ordenador antes de pasar los cambios a la web en vivo.

A este sistema de trabajo se le conoce como Staging.

Posicionamiento Web

El posicionamiento web persigue un claro objetivo: conseguir la mejor posición en los resultados de búsqueda.

La competitividad por lograr la posición más alta es cada vez mayor y los algoritmos de Google se actualizan continuamente para que los robots y arañas de rastreo, comprendan mejor el contenido del sitio web.

SEO – Search Engine Optimization

En castellano, Optimización para Motores de Búsqueda.

Es un conjunto de técnicas y estrategias de optimización de los contenidos de un sitio web para mejorar el posicionamiento orgánico o natural en los buscadores.

Esta definición de posicionamiento orgánico, se refiere a que no se paga por ello, apareciendo en los resultados de búsqueda de Google sin la etiqueta de ‘Anuncio’.

A grandes rasgos, podemos hablar de dos tipos de SEO:

• SEO On Page: es aquel que optimiza los contenidos internos del sitio. El tamaño correcto de las imágenes, los metadatos, atributos alt, taxonomías, los enlaces internos y externos.
• SEO Off Page: es la estrategia de construcción de enlaces externos que apunten hacia nuestra página. Una práctica habitual es el alta en los directorios y la participación en otros blogs.

SEM – Search Engine Marketing

Es el posicionamiento a través de anuncios de pago.

Entre los diferentes tipos de anuncio que ofrece Google Ads podemos encontrar:

• Search: anuncios por palabras clave de búsqueda.
• Display: anuncios con imágenes que se integran por los sitios web por donde navegan los usuarios y posibles clientes.
• Discovery: anuncios integrados en el feed de Youtube y las pestañas de Social en Gmail.
• Shopping: anuncios mostrados en Google Shopping para promocionar los productos de tu tienda online.
• Videos: anuncios integrados en los videos de Youtube.

Keywords – Palabras Clave

Son las palabras clave que empleamos para realizar una búsqueda en Google.

Cuando te planteas el diseño web, debes redactar tus textos de manera que se empleen el número máximo de keywords de forma justificada y coherente en los contenidos.

Elementos de diseño

Responsive – Adaptativo

El diseño responsive, es el diseño que se adapta al tamaño de la pantalla o ventana desde donde visualizamos el contenido.

Gracias al diseño responsive podemos ver el mismo contenido adaptado a una pantalla de ordenador de escritorio, tablet o smartphone.

Podemos agrupar los diferentes tamaños de pantallas en 4 dispositivos diferentes:

• Escritorio: cualquier monitor a partir de 13″ sería tamaño de visualización escritorio.
• Tablet: dispositivos entre 7″ y 12″.
• Smartphone: dispositivos móviles entre 3″ y 7″.
• Smartwatch: relojes inteligentes de hasta 2″.

Slider – Diapositivas

Es un conjunto de imágenes que se van deslizando unas sobre otras.

Se usa habitualmente en la header de una página para mostrar promociones o enlazar con otras secciones de la web.

Marketing digital

Es la aplicación de estrategias realizadas a través de los diferentes medios digitales.

A diferencia del marketing tradicional, el marketing digital implica el uso de diferentes canales y métodos online que permiten el análisis de los resultados en tiempo real.

Estos canales online pueden ser:

• Contenidos: creación de contenidos de valor a través del blog o publicaciones en redes sociales.
• Web: páginas web nicho, landing page de venta, etc.
• Redes Sociales: Facebook, Instagram, LinkedIn, etc.
• Email: envío de comunicaciones y newsletters a ‘leads’ o clientes potenciales
• Grupos / Foros: ganar autoridad en las conversaciones de foros y grupos de conversación.
• Directorios: alta en directorios por ubicación geográfica o temática del sector.

Lead Magnet – Recurso Gancho

Es un recurso gratuito y valiosos para cierto tipo de usuario, que se ofrece dentro de la web para su descarga a cambio de un email. Este email pasará a formar parte de una base de datos para realizar campañas de email marketing.

Conclusión

Estos son los términos mínimos viables que debes conocer para tener una visión global para abordar un proyecto web.

Según tus necesidades, tendrás que profundizar más en algunos de ellos, aunque con este diccionario ya puedes tener una idea de cómo funciona el mundillo web.

Existen muchos más, así que si consideras que falta alguno importante, escríbelo en los comentarios.

¡Gracias por tu aportación!