Diseñar una página web es un trabajo laborioso que necesita de un amplio abanico de conocimientos y en donde se han de tomar desde el principio decisiones muy importantes que afectarán al desarrollo del proyecto. Durante este proceso es probable que se utilicen términos o expresiones con las que puede que no estemos familiarizados.
En aras de facilitar la comunicación con los responsables del desarrollo de nuestra página web, hemos preparado una pequeña guía con los conceptos más habituales que escucharemos al tratar con un diseñador web.

Dado que todas las expresiones vienen del inglés, trataremos de incluir su traducción al castellano, aunque utilizaremos ambas terminologías indistintamente.

• Diseño personalizado o a medida:

Cuando nos referimos a un diseño a medida, estamos hablando de un proyecto que tiene unos requisitos tan concretos que necesita que la página sea “montada desde cero”. Esto permite una flexibilidad ilimitada a cambio de un mayor coste de tiempo y dinero de desarrollo.

WordPress:

El sistema de gestión de contenido más popular del mercado, y una de las más potentes herramientas del diseño web. A diferencia del diseño a medida, si utilizamos WordPress en nuestro sitio web no es necesario partir de cero. Con miles de plantillas de dsieño que elegir como base para nuestra página e infinidad de plugins de funcionalidades que añadir a nuestro sitio web de forma rápida y relativamente sencilla, WordPress es una de las alternativas más económicas de cara a plantearnos un proyecto web.

• Plugin:

Un plugin es un programa externo de WordPress que nos permite añadir funcionalidades adicionales a nuestra web. Los más habituales son los formularios de contacto o las plataformas de e-commerce.
Existe una variedad casi infinita de plugins en el mercado, algunos gratuitos y otros de pago.

E- Commerce / comercio electrónico:

Un e-commerce es una tienda online de cualquier tipo. Dada la gran cantidad de funcionalidades que requiere un e-commerce para funcionar, lo más habitual es utilizar los plugins que WordPress tiene disponibles.

• Home / Página de inicio:

La página principal y la primera a la que accede el usuario al entrar en nuestra web. Es el punto de inicio de la navegación, desde donde podemos acceder al resto del contenido.
El home de una página web se trabaja con especial mimo ya que es la primera impresión que los usuarios tendrán de nuestra web.

• Header / Cabecera:

La cabecera es, como su propio nombre indica, la parte superior de nuestra página web.
Tradicionalmente hacía referencia al espacio que se reservaba para colocar el logo y el menú de nuestra web, pero cada vez más se utiliza también para referirse a la primera sección del home de nuestro sitio web. Como ya hemos comentado, si el home es la página más importante de nuestra web, la cabecera es la parte más importante de nuestro home.

• Footer / Pie de página:

Por contraste, el footer es la sección al final de nuestra página web. Pero que su posición no nos lleve a engaño, también es muy importante prestarle atención ya que nos permite “rescatar” a los usuarios que hayan acabado haciendo scroll hasta el final de una de nuestras páginas. En el footer podemos incluir información relevante para redirigir su búsqueda, como enlaces a otras secciones de la web, o quizás información de contacto, lo que podría asegurar una venta.

• Desktop / Escritorio:

Cuando un diseñador web se refiere a la versión de escritorio de una web, está haciendo el énfasis en la versión de nuestra web que se visualiza en un ordenador de sobremesa o en un portátil. Actualmente la inmensa mayoría de los usuarios realizan su navegación online a través de dispositivos móviles o tablets pero no por ello debemos descuidar nuestra versión de escritorio.

• Responsive:

El diseño responsive o simplemente responsive de una web se refiere a las versiones optimizadas para la navegación en dispositivos móviles, ya sean tablets o smartphones.
Las limitaciones de espacio de las pantalla de estos dispositivos con respecto al diseño de la versión de escritorio provocará variaciones en el aspecto de nuestro sitio web.
No podemos esperar que un elemento se vea exactamente igual en desktop que en responsive, todo debe de adaptarse al espacio en el que se encuentra.

• Layout / Plantilla:

La plantilla de diseño gráfico que nuestro diseñador web utilizará para maquetar nuestra página. Es un boceto esquemático de qué aspecto, navegación y jerarquías de información tendrá nuestra página web.
Diseñar un layout detallado y concreto es una de las partes más importantes del diseño web, ya que permite ahorrar una gran cantidad de tiempo invirtiendo relativamente muy poco de nuestro presupuesto, dado que realizar cambios sobre una plantilla gráfica es mucho más rápido y sencillo que realizar cambios sobre nuestro sitio web una vez hayamos empezado la maquetación.

• Maquetación web:

El proceso de pasar un layout a un entorno web.

• HTML:

Imaginemos que el diseño web es como construir una casa. En este caso, el código HTML serían los cimientos y estructura básica de nuestra página.
Muy importante resaltar que el código HTML no define el tamaño final de los elementos que componen una página, solamente se refiere al orden del contenido.

• CSS:

Continuando con la metáfora de la casa, el código CSS serían los detalles visuales que diferencian una casa en obras de un hogar. Proporción y espacio entre los elementos, colores, fuentes o animaciones, por poner algunos ejemplos.

• Media Query:

Una media query es una regla de CSS que nos permite modificar el código de nuestra web para que se adapte a las diferentes medidas de los dispositivos que puedan usar nuestros usuarios, haciendo que nuestra web sea responsive.
Las media querys más habituales son:
– Superwide o panorámico. Para pantallas de 2k o superior.
– Desktop o escritorio.
– Tablet.
– Mobile.
Como podemos apreciar, estas media querys son muy vagas en su definición. La razón es que no se puede adaptar una página web a las especificaciones concretas de cada modelo de tablet o smartphone, así que se utilizan unas medidas genéricas.

• JS o JQuery:

Aunque hay una enorme variedad de lenguajes de programación, Javascript (Js) o Jquery son dos de los más habituales. Su función es añadir la funcionalidad a nuestro espacio web. Botones que abren, ocultan o expanden contenido, sliders, carruseles o lightboxes. Si se mueve y reacciona a nuestras acciones, suele ser programación Js.
Existen una gran cantidad de términos y expresiones específicas del diseño web, pero de momento os dejamos las más básicas y frecuentes. Esperamos que con este repaso, hayamos podido mejorar la comunicación entre el cliente y los equipos de diseño web.