Glosario de Diseño Web Para los No Especialistas

Si estás leyendo este post, es muy probable que en tu trabajo te desempeñes en un área muy diferente a la de desarrollo y diseño web, como podría ser el área de community management, copywriting, blogging, ventas, marketing, recursos humanos, finanzas, relaciones públicas… En fin, sin importar a qué te dediques, nunca está de más que tengas algunos conocimientos -por básicos que sean- respecto a otras áreas, pues además de aumentar tu cultura y conocimientos generales, te dará más oportunidades y en dado momento podrían ser muy útiles.

Posiblemente has escuchado términos como HTML, CSS, Responsive, border-radius, círculo cromático, selector, CMYK, RGB, SVG, entre otros. Inspirados en un reciente post de HubSpot, les compartimos un pequeño glosario con términos de desarrollo y diseño web, en que entran diversos conceptos de diseño (editorial, teoría del color, tipografía), lenguajes de marcado, hojas de estilo y programación. Después de algunos términos pueden observar entre paréntesis cómo es que se les llama en inglés, ya que al provenir de este lenguaje, invariablemente nos encontraremos con quien utilice dichos términos en el mencionado idioma, o en lugar de traducirlos, los españolice sin mayor cuidado (ej. traducir Responsive como Responsivo); en caso de no tener una traducción generalmente aceptada, se muestra únicamente el término en inglés. Veamos.

A

a href

Atributo que especifica la URL de la página a la que nos lleva un link.

Alineación (alignment)

Posicionamiento de los elementos (texto, imágenes, bloques, etc.) respecto a algún bloque (ej. alineado a la izquierda, alineado a la derecha, centrado, justificado, alineado a la parte superior, alineado a la parte inferior).

Altura de la letra “x” (x-height)

Distancia que hay desde la línea media hasta la línea base; generalmente toda minúscula -sin contar sus respectivos ascendentes y descendentes- tiene esta altura.

Altura de la tapa (cap height)

Distancia comprendida de la línea base hasta la parte superior de las mayúsculas.

Anillo

El trazo curvo que encierra al blanco interno de una letra (ej. curva de la letra b).

Apígrafe

La unión de dos tallos en la parte superior de una letra (ej. la unión de los tallos en la letra “A”).

Ascendente (ascender)

Trazo extensor de una letra minúscula que sobresale por encima de la altura de la letra “x”, generalmente llega hasta la altura de una mayúscula (ej. ascendentes de la “b”, “d”, “f”, “h”, “k”, “l”, “t”).

aside

Etiqueta HTML introducida en HTML5, sirve para definir un bloque de contenido generalmente relacionado con el bloque que se encuentra a su lado; se aprovecha para la creación de barras laterales.

B

Barra

En tipografía, se trata de un trazo horizontal que une a dos verticales, diagonales o curvos (ej. “A”, “e”, “H”). No confundir con travesaño. También se le conoce como filete o perfil.

Barra lateral (sidebar)

Bloque de información, generalmente de forma rectangular, adyacente al bloque principal de contenido. Comúnmente se coloca contenido de la página web en cuestión (links internos), publicidad, barras de búsqueda, links externos, entre otros.

Blanco interno

Es la parte interna de algunas letras con formas cerradas, como la “a”, la “e”, la “o” y la “p”, entre otras. Su importancia radica en que dependiendo de su tamaño, será la legibilidad de una letra.

Blink

Motor de renderización derivado de WebKit, desarrollado por Opera y Google. Se utiliza a partir de la versión 28 de Google Chrome, y de la versión 15 de Opera.

border-radius

Propiedad CSS implementada a partir de CSS3. Nos permite añadir bordes redondeados a objetos, tan solo cuidado con las demandas de Apple.

C

Cabecera (header)

Encabezamiento de una página o una sección de esta. En el caso de encabezamiento de página, se suele colocar el nombre de esta, un logotipo, menús de navegación que pueden ser desplegables, barras de búsqueda, entre otros. Si bien se pueden generar con bloques comunes, a partir de HTML5 se introduce una etiqueta específica para otorgarle un mayor significado semántico, lo que nos ayuda en cuestión de SEO. No confundir con cabeza (head).

Cabeza (head)

Dentro del código HTML, es una etiqueta contenedora de elementos que no se muestran en el cuerpo de la página. Obligatoriamente deben contener una etiqueta title (título), misma que otorga un “nombre” a la página, el cual se visualiza en la pestaña/ventana del navegador, y en el motor de búsqueda (Google, Bing, Yahoo!). No confundir con cabecera (header).

Círculo cromático

Se trata de una rueda o círculo dividido generalmente en doce partes en que se muestran los diversos colores, mostrando la relación entre colores primarios, secundarios y terciarios.

class

Selector CSS que nos permite especificar propiedades de estilo para un grupo de elementos. En HTML se representa como class, en CSS se representa con un símbolo de punto “.”.

clear

Propiedad CSS que especifica que no se deben mostrar elementos flotantes del lado especificado con el selector: left (izquierda), right (derecha) o both (ambos).

Clearfix

Cuando los simples clear y float no funcionan en los elementos de la manera en que queremos, es decir, sigue habiendo elementos flotantes del lado que no deseamos, se crea un elemento al que se llama popularmente clearfix, considerado un hack aunque no es más que un bloque vació, invisible que ocupa todo el ancho de la página.

CMS

Cuando necesitamos actualizar constantemente el contenido, como en un blog o una tienda en línea, podemos recurrir a sistemas de manejo de contenidos (CMS), como son WordPress, Blogger, Joomla, Drupal, Magento, Prestashop, entre otros.

CMYK

Modelo de color sustractivo, utiliza los colores cian, magenta, amarillo y negro. Es ideal para impresiones, a diferencia del modelo RGB.

Código hexadecimal

Sistema de numeración que emplea 16 símbolos. En diseño web se utiliza para designar colores específicos, van precedidos de un numeral “#”.

Cola

En tipografías, es la prolongación inferior de ciertos rasgos, como la pata de la “Q”.

Colores complementarios

Combinación de colores contrastantes.

Colores complementarios-divididos

Combinación de colores consistente en un color, y los dos colores adyacentes de su color contrastante.

Colores contrastantes

En el círculo cromático, son los colores que se encuentran totalmente opuestos uno del otro al dibujar una línea recta que pase por el centro del mismo.

Colores cuadrados

Cuatro colores del círculo cromático, espaciados uniformemente de manera contigua.

Colores rectangulares

Cuatro colores del círculo cromático que no son más que dos pares de colores complementarios.

Colores triádicos

Combinación de tres colores, cuya ángulo entre cada uno es de 120 grados. Muchos expertos en diseño y teoría del color (incluyendo los dedicados a diseño web), consideran este tipo de combinaciones como las mejores.

Comentario

En todo lenguaje de programación, marcado, hoja de estilos, scripts y demás, el código se puede comentar, es decir, indicar con palabras comunes que significa cada línea o conjunto de líneas, esto a fin de evitar confusiones en caso de que otra persona tome el control del proyecto, o bien, no quiera confundirse a sí misma.

Composición alfa

Cuarto canal de la composición RGB, que define la opacidad de un pixel. Mediante CSS se puede alterar el canal alfa de un objeto, para así convertirlo en uno opaco, traslúcido o totalmente trasparente.

Contraste

La acentuación de diferencias entre formas, colores, espaciado y cualquier otro elemento perteneciente al diseño.

CSS

Lenguaje de hojas de estilo utilizado para dar cierto formato, apariencia y presentación a un archivo hecho mediante un lenguaje de marcado como HTML.

Cuadrícula (grid)

Trazos bidimensionales horizontales y verticales que se intersecan en diversos puntos. Sirve como referencia para el diseñador, de tal manera que el diseño web (texto, imágenes, objetos) se organice de manera racional y fácil de consumir visualmente.

Cuerpo de la página

Puede referirse a dos diferentes aspectos:

1. Toda la parte visible de una página web, comprendida en el código HTML por todo lo que se encuentra dentro de la etiqueta body.
2. La parte visible de una página web que se encuentra encerrada entre la cabecera y el pie de página, y no incluye a la barra lateral.

Cuerpo de tipografía

Es la manera de llamarle al tamaño de la letra, se mide en puntos, pixeles, ems o porcentajes.

D

Declaración de tipo de documento (doctype)

Una instrucción que indica al navegador qué versión de HTML se usa en una página web.

Descendente (descender)

Trazo extensor de una letra minúscula que sobresale por debajo de la altura de la letra “x”, generalmente llega hasta la altura de una mayúscula (ej. descendentes de la “g”, “j”, “p”, “q”, “y”).

Desvanecido (feathering)

Técnica para suavizar los bordes de un objeto.

Diseño web adaptable (responsive web design)

Se llama así al diseño web de aquellas páginas que se adaptan al tamaño de la pantalla o ventana en que se despliegan, por medio del uso de, idealmente, un solo documento HTML y un solo documento CSS. La cuadrícula utilizada en el diseño web adaptable es fluida, es decir, el tamaño de sus elementos es relativo, midiéndose en porcentajes, ems, rems, etc., en vez de puntos y pixeles. Esto permite hacer una sola página web para smartphones, phablets, tablets y PC.

div

Etiqueta HTML que define una sección o una división en una página web. Generalmente se forman bloques con divs, mismos a los que se da un formato mediante CSS. Actualmente se usan con menor frecuencia debido a ciertas etiquetas introducidas en HTML5, a las que se puede dar formato y tienen un significado semántico del cual los divs carecen.

E

Editor de texto

Es un programa o aplicación que nos permite escribir código, en el caso de diseño web el HTML, CSS y demás, mismos que forman una página web. Algunos ejemplos de editores de texto, son el bloc de notas nativo de la PC, TextWrangler, NotePad++, hasta algunos más especializados y de pago como Coda, BB Edit, Adobe Dreamweaver, TextMate, entre otros.

em

Puede tener dos significados:

1. Es una unidad de medición con escalabilidad utilizada en diseño web, relativa al contenedor superior inmediato. Por ejemplo, si hay un div que tiene un tamaño de fuente de 17 px, los elementos contenidos dentro de este tendrán una fuente con cuerpo de 1 em, a menos que se especifique algo diferente en el CSS.
2. Una etiqueta HTML para definir que a un texto se le debe dar cierto énfasis semánticamente hablando. De forma predeterminada tiene un estilo CSS itálico, el cual podemos modificar en la hoja de estilos.

Espacio en blanco

Espacio vacío que rodea a un objeto del diseño, también se le conoce como espacio negativo.

Espolón

La extensión que articula la unión de un trazo recto con un trazo curvo, es decir. Algunos ejemplos son el espolón de la “d” (la patita que sobresale un poco debajo sin convertirse en descendente) o el espolón de la “q” (la patita que sobresale un poco por encima sin convertirse en ascendente).

Esquemas de colores (color schemes)

Utilización de dos o más colores del círculo cromático en un diseño web. También se les llama harmonías de color.

Esquema de página (wireframe)

Se trata de una guía visual que representa la estructura de un sitio web. Dependiendo de lo que se necesite en un proyecto, se puede comenzar con un simple bosquejo hecho a mano, hasta algo más complejo y fácil de visualizar, realizado específicamente con una app para ello como SwordSoft Layout.

Etiqueta (tag)

Son la parte del HTML que el navegador interpreta para dar forma y estructura al sitio. El contenido entre estas etiquetas es lo que muestra el navegador web.

Extensor (extender)

Trazo de una letra minúscula que sobresale por encima o por debajo de la altura de la letra “x”, generalmente llega hasta la altura de una mayúscula (ej. extensores de la “b”, “d”, “g”, “j”).

F

float

Propiedad CSS muy utilizada para alinear un elemento a la izquierda o a la derecha “flotándolo”, es decir, de tal manera que el resto de los elementos continúe con un flujo normal a menos que floten de manera similar o se especifique lo contrario en el documento CSS.

Fuente

Se refiere a un tipo de letra con un tamaño, estilo y peso específico. Un ejemplo podría ser: Helvetica Neue, en Negritas (Bold), con tamaño de 3 em.

G

Gecko

Motor de renderización desarrollado por Mozilla, utilizado en varios de sus productos incluyendo por supuesto al navegador Firefox.

GIF

Formato de imágenes utilizado para que los archivos tengan pocos colores y cuando se requiera un tamaño de archivo pequeño. Una peculiaridad del formato es que los archivos creados con este, pueden ser animados. Respecto a su pronunciación, de acuerdo a su creador es “yif” en vez de “guif”.

H

h1, h2…

Etiquetas HTML para definir títulos y subtítulos. Van desde el h1 (título más importante) hasta el h7 (título menos importante).

Hombro

Es el trazo curvo de una letra que sale desde el tallo principal sin cerrarse. Letras como la “n” y la “h” tienen un hombro.

HTML

Lenguaje de marcado utilizado para la elaboración de páginas web. Es la parte esencial de toda página web.

HTTP

Es el protocolo mediante el cual se transfiere la información de la web.

I

id

Selector CSS que nos permite especificar propiedades de estilo para un elemento que no se repite en la página. En HTML se representa como id, en CSS se representa con un símbolo de numeral “#”.

iframe

Es una etiqueta HTML que nos permite incrustar otros documentos HTML dentro de nuestro propio HTML; esto es muy aprovechado en videos provenientes de fuentes como YouTube, y en imágenes provenientes de Flickr, entre otros.

Ejemplo de iframe

Incrustar (embed)

Es así como se le llama a la introducción de contenido, generalmente externo, en nuestra página web. Existe una etiqueta embed a partir de HTML5, pero hay muchas otras formas de hacerlo, como la etiqueta iframe.

input

Etiqueta HTML que permite colocar un elemento en que el usuario introduce información, que puede ser en forma de texto, casilla de verificación, fecha, usuario y contraseña, email, URL entre otras.

Interletraje (kerning)

El espaciado entre letras individuales. Se aplica de tal manera que no parezca que ciertas letras están más separadas o más juntas entre sí que otras.

J

Javascript

Un lenguaje de programación que permite añadir ciertas funciones a las páginas web, e incluso alterar la manera en que se ven algunos elementos dadas ciertas condiciones (ej. reducir el tamaño de la cabecera al hacer scroll hacia abajo).

Jerarquía visual

Es el orden en que el ojo humano puede percibir lo que ve. Se trata del juego con contrastes, pues las áreas que están rodeadas de mayor contraste son las que primero detecta el ojo.

JPEG

Formato de imágenes que utiliza compresión perdiendo muy poca calidad, dando como resultado imágenes de alta calidad y  poco peso.

jQuery

Una biblioteca JavaScript, que nos permite, como dice su eslogan, escribir menos código para hacer más cosas.

L

Línea base (baseline)

Línea sobre la cual toda letra se apoya.

Línea media (midline)

Distancia comprendida entre la línea base y la parte superior de la mayoría de las mayúsculas.

Lorem ipsum

Texto de relleno utilizado en wireframes y versiones iniciales de algún diseño web, con la finalidad de mostrar cómo se vería algo de texto en cierta parte de la página. El texto lorem ipsum tiene su origen en un texto en latín del filósofo Cicerón, del cual se han extraído fragmentos desde aproximadamente el año 1,500 d.C. para dicho uso. Si necesitamos generar este tipo de texto, podemos recurrir a opciones como lipsum.com para un texto sobrio, o a otras opciones como Cupcake Ipsum, Bacon Ipsum, entre otras si queremos algo menos sobrio y más chistoso.

M

Mapa de bits (bitmap)

Es un tipo de imágenes que se caracteriza por generar imágenes con un ancho y un alto fijos, además de profundidad de color. A diferencia de los vectores, no se puede aumentar su dimensiones sin perder calidad. Tiene su propia extensión (.bmp), aunque hay otros formatos que también son de mapa de bits como el JPEG, el PNG, el GIF, cuya diferencia es la compresión que aplican para menor peso del archivo.

Maquetado

Es el nombre que recibe la acción de distribuir los elementos en una página web.

Matiz (Hue)

Lo que generalmente conocemos como color: azul, verde, amarillo, etc.

Metadatos

Los metadatos son, valga la redundancia, datos que describen datos, generalmente no visibles para el usuario. Algunos ejemplos son palabras clave, autor, codificación de caracteres, entre otros.

Motor de renderizado

Es la parte del navegador que se encarga de examinar e interpretar los documentos HTML, CSS, Scripts y demás para después mostrarlo en pantalla.

N

nav

Etiqueta HTML que define una serie de links de navegación dentro de una página. Entre los usos que se le puede dar, está el menú superior de navegación, una tabla de contenidos (como las utilizadas en artículos de Wikipedia), la paginación, entre otros.

O

OpenType

Es un formato muy utilizado de tipos de letra escalables, compatibles tanto con Windows como con Mac OS.

P

Peso (weight)

El grosor de una letra, puede ser fino (light) o ir hasta algo más fuerte como las negritas (bold), también se pueden usar números para definir el peso de una letra.

PHP

Lenguaje de programación del lado del servidor, es decir, es el servidor y no el dispositivo del usuario el que lo interpreta; se puede incluir dentro del documento HTML.

Pie de página (footer)

La parte inferior de una página web, en que se coloca información como datos de contacto, copyright, autor de la página, entre otros. Si bien se pueden generar con divs comunes, a partir de HTML5 se introduce una etiqueta específica para otorgarle un mayor significado semántico, lo que nos ayuda en cuestión de SEO.

Pixel

Es la menor unidad de medición de los elementos gráficos mostrados en pantallas. Un pixel es equivalente a un punto de la pantalla, que es la división más pequeña de la resolución de la pantalla.

PNG

Formato de imágenes de alta calidad que soporta trasparencias (composiciones alfa). Su pronunciación es “ping”.

Presto

Motor de renderizado utilizado por Opera desde la versión 7 hasta la versión 12 del navegador. De Opera 12 da el salto hacia Opera 15, cambiando Presto por Blink.

Propiedad

En CSS, todo lo que nos permite darle estilo al HTML, como el tamaño de los bloques, bordes redondeados, etc. La sintaxis generalmente es propiedad: especificación (ej. background-color: #fff).

R

Recorte (crop)

Cuando se recortan partes externas de una imagen con la finalidad de mostrar únicamente cierto aspecto de la misma, o bien, de cambiar su relación de aspecto sin distorsionarla.

Imagen completa

Recorte de imagen

Relación de aspecto (aspect ratio)

Es la proporción entre el ancho y la altura de un objeto (generalmente una imagen), se expresa como X:Y. Existen diversas relaciones de aspecto usadas comúnmente: 4:3 (televisión tradicional), 16.18:10 (relación de aspecto áurea), 16:9 (video en alta definición), etc.

rem

Es una unidad de medición con escalabilidad utilizada en diseño web, relativa a la raíz, es decir, el HTML. Por ejemplo, si el HTML tiene un tamaño de fuente de 14 px, los elementos contenidos dentro de este tendrán una fuente con cuerpo de 1 em, a menos que se especifique algo diferente en el CSS.

Resolución

El alto y el ancho de una pantalla en pixeles. A ciertas combinaciones de alto y ancho se les otorga un nombre, por ejemplo, 1920×1080 px es Full HD, mientras que 3840×2160 px es Ultra HD 4K.

RGB

Modelo de color que utiliza los colores rojo, verde y azul, los tres colores primarios aditivos. Todo monitor trasmite la luz en pixeles que se componen de, por lo menos, el color rojo, el color verde y el color azul, aunque algunos agregan el blanco, el amarillo, etc.

S

Saturación

La intensidad de un color específico.

Selector

Es la parte del CSS que nos permite seleccionar qué parte del HTML queremos estilizar y dada qué acción. Por ejemplo, si queremos que los links tengan un color al pasar el mouse por encima, el selector sería a:hover.

SEO

Traducido como Optimización de Motores de Búsqueda, se refiere a la tarea de optimizar una página web y su contenido para que este sea fácil y rápidamente encontrado en motores de búsqueda como Google, Bing o Yahoo! de manera orgánica, al introducir ciertos términos de búsqueda. En esta tarea intervienen webmasters, desarrolladores y diseñadores web, redactores y editores (en caso de ser un blog), copywriters, entre otros; en resumen, es una tarea multidisciplinaria.

Serifa (serif)

Remate que se añade al final de un trazo de la letra. A las tipografías sin serifas se les llama “sans serif” o de palo seco.

Sombra paralela (drop shadow)

Efecto visual que simula que algún objeto de la página tiene una sombra, como si estuviese recibiendo luz de alguna fuente. Se puede implementar de diferentes maneras, como puede ser en la imagen desde el editor de imágenes de nuestra preferencia, o en el documento CSS (propiedad box-shadow), e incluso mediante un script.

Sprites

Conjunto de técnicas de manejo de imágenes mediante CSS que permite al encargado del diseño web colocar diversas imágenes en un solo archivo de imagen y posteriormente llamarlas utilizando su posición y tamaño específicos, lo cual se traduce en menos espacio ocupado en el servidor, menos peticiones generadoras de tráfico innecesario al mismo, y por lo tanto una página que carga más rápido para el usuario.

SQL

Lenguaje de programación para el manejo de bases de datos.

strong

Etiqueta HTML para definir que cierto texto tiene mayor importancia que el resto, semánticamente. De forma predeterminada, tiene un peso de letra en negritas (bold), pero esto y más podemos modificarlo en el documento CSS.

SVG

Formato de imágenes o gráficos ampliables para la web; es totalmente lo contrario al mapa de bits.

T

Tallo

El trazo principal de la letra, el cual define su forma.

Terminal

La parte final de un trazo que no tiene serifa.

Tipo de letra (typeface)

Colección de caracteres (letras, números, signos de puntuación, etc.) con un estilo específico. Es lo que común e incorrectamente conocemos como fuente, algunos ejemplos son Arial, Helvetica, Times New Roman, Georgia…

Travesaño

Trazo que cruza por el tallo principal de una letra, es horizontal. La “t” y la “f” tienen un travesaño. No confundir con barra.

Trazos (strokes)

Cada línea individual que conforma una letra.

Trident

Motor de renderizado de Internet Explorer, utilizado desde la versión 4.0 del navegador.

U

URL

Lo que comúnmente conocemos como dirección web, por ejemplo, https://www.niumedia.mx/

V

Vector

También conocido como gráfico vectorial, es todo aquel al cual se le puede cambiar el tamaño sin afectar su calidad, es decir, no se “pixelean”. Existen diversos formatos tanto para web como para diseño gráfico y documentos, entre los que se encuentra el SVG.

W

Webkit

Motor de renderizado utilizado en una gran variedad de navegadores: Safari de Apple (todas sus versiones), navegador nativo de Android, navegador de BlackBerry 10, navegador de Symbian S60, navegador de Sony PlayStation, y hasta hace poco, Google Chrome.

Z

z-index

Propiedad CSS que nos permite alterar la profundidad de un elemento, es decir, detrás y delante de qué elementos se ubica visualmente.

¿Agregarías algún otro término?

Imagen Principal | Aleksandar Cocek

Imágenes ilustrativas | baldiri, Philip Habing, Rune Leth Andersen, Jeff Baij, Darth Stabro, Miika Silfverberg, Ian Carroll, Cristian Eslava (1, 2),