¿Qué estás buscando?

ESTILO, Manual de estilo para los nuevos medios

Una guía viva en la red sobre los nuevos usos

Borrador

Entendiendo a los diseñadores: las claves de su vocabulario

por Marga Cabrera

Durante años nos hemos quejado de no entender a los médicos o a los abogados, hoy en día a estas hay que unir nuevas profesiones que han aparecido con las TIC, cada sector con su lenguaje y sus particularidades.

El diseñador web no es solo aquel que diseña y entrega una imagen de cómo ha de ser un proyecto multimedia. El diseño web es una disciplina que exige grandes dosis de creatividad sumadas a un alto nivel técnico. No solo tienen que saber aplicar las bases del diseño de toda la vida: composición, color, tipografía,…  sino que tienen que combinar toda esta base con su aplicación en pantalla: navegabilidad, interactividad, usabilidad, accesibilidad, arquitectura de la información,… y con la interacción de medios como el audio, el texto, la imagen y el vídeo.

Cuando un diseñador web nos comenta su trabajo, o peor aún, cuando dos diseñadores hablan entre ellos, surgen un montón de términos que no conocemos, lo cual dificulta enormemente el entendimiento. Hemos hecho una pequeña recopilación de este lenguaje tan particular con una breve descripción para poder entenderlos:

  • Usabilidad: facilidad de uso de una web por parte de los usuarios.
  • Accesibilidad: acceso universal a todos los contenidos. La accesibilidad intenta mejorar la eficiencia de la web, con el objeto de lograr un contenido global capaz de llegar al mayor número de usuarios con independencia de sus capacidades físicas, técnicas o intelectuales.
  • URL amigables: direcciones web inteligibles, mediante las cuales se puede deducir el contenido.
  • Sitemap: mapa del sitio web.
  • CMS: gestor de contenidos (Content Management System).
  • Avatar: identidad ficticia que individualiza a un usuario en la red, por ejemplo en una aplicación o red social. Puede ser una forma (icono), una imagen (foto), un personaje de comic…
  • Branding digital: imagen de marca en la red. Es el resultado de un conjunto de estrategias y herramientas de marketing y diseño para lograr crear una identidad visual online.
  • Interface: interfaz. La cara visible de un proyecto, lo que nos muestra la pantalla. Además puede referirse a la forma de interrelación entre la máquina y el hombre, actualmente esa interrelación es gráfica, pero se puede tener una interface sonora, por poner un ejemplo.
  • Layout: prototipo gráfico, el boceto de toda la vida. Diseño, boceto gráfico de la web. Aproximación gráfica, simulación a lo que finalmente será la web.
  • Prototipado: Diseño del prototipo en wireframes.
  • Wireframe: Dibujo simple de la estructura de la web, similar en concepto al layout.
  • Crossbrowsing: Comprobar que en todos los navegadores la web se ve bien.
  • Media queries: Proceso que permite definir condiciones específicas en función de los distintos dispositivos o media en los que se ha de visualizar un proyecto.
  • Hojas de estilo o CSS: Cascading Style Sheets, traducido como «hojas de estilos en cascada». Facilidad del HTML que permite crear plantillas de estilo gráfico y aplicarlas a las diferentes páginas de un proyecto, manteniendo elementos comunes en la maquetación como colores, tipografías, tamaños de letras, fondos…
  • W3C: El Consorcio World Wide Web (W3C) es la comunidad internacional de personas que trabajan conjuntamente para desarrollar estándares web.
  • Frames: Es una parte de la programación para web en la que una página puede estar compuesta por distintos frames, marcos, donde cada uno integra un apartado de la web. Por ejemplo, puede haber un frame que integre el menú, en otro el contenido, en otro el pie de página, y la suma de todos ellos es lo que vemos como página web. También puede referirse a un fotograma dentro de una animación, la imagen estática dentro de la serie que integra el proyecto.  Se expresa en fotogramas o frames por segundo (fps).
  • Página estática: Página creada mediante un único archivo html.
  • Página dinámica: distinta de la estática en que su creación se lleva a cabo mediante consultas a basse de datos y no directamente a un archivo HTML que contenga el contenido deseado. Son páginas que se generan en el momento en el que un usuario hace una consulta, sumando elementos de diferentes de bases de datos.
  • Footer: pie de página/pantalla. La zona inferior en el diseño de la página donde se suelen poner los datos de contacto, logotipos e información que se repetirá en todas las páginas del proyecto. El equivalente al pie de página en el diseño editorial en papel.
  • Banner: animación publicitaria.
  • Scroll: desplazamiento, descender o ascender, en una pantalla de navegación.
  • Minimación: animaciones en pequeño formato (ancho y alto) con una duración básica, entre 5 y 15 segundos.
  • Microanimaciones: animaciones de elementos del interfaz (botones, menús, etc.).
  • Bitrate: flujo/velocidad de bits (por ejemplo aplicado a la visualización de un video online). Viene del inglés bit rate, ‘tasa de bits’,  y define el número de bits que se transmiten por unidad de tiempo, es la velocidad de transferencia de datos.
  • Webtv: retransmisión de videos online, se asocia a la televisión por internet.
  • Videosharing: sistemas que proporcionan la posibilidad de compartir video, por ejemplo vimeo o youtube.
  • CODEC: códec es la abreviatura de codificador-decodificador. Son tecnologías para comprimir y descomprimir datos.
  • Player de video: reproductor de video.
  • Fullscreen: pantalla completa.
  • Capitular contenidos: dividirlos en capítulos, aplicable también a video.
  • Podcast: sistema de distribución (transmisión por demanda) de archivos multimedia que puede contener subtítulos y notas mediante sindicación de contenidos RSS. También entendemos por podcast un archivo de audio digital.
  • Embeber: insertar un objeto o código de un lenguaje de programación en otro.
  • Plugin: programa que puede introducirse en otro para aumentar las funcionalidades del segundo. En ocasiones, sin el plugin adecuado hay aplicaciones que no funcionan.
  • Fade in: incremento paulatino de volumen y de imagen.
  • Lightbox:Sistema de visualización de galerías de imágenes. Se caracteriza por el uso de efectos (físicas) y modos de ver las imágenes de una forma más atractiva al usuario.
  • Loading: Descargando.
  • Página Home: primera página o página principal de un proyecto.
  • Páginas de «error 404»: es la página que nos devuelve el servidor web cuando no encuentra una página concreta por la que hemos preguntado porque no existe. Se pueden diseñar estas respuestas para que sean acordes con el resto del proyecto.
  • Una página se divide en:
    - Header: cabecera donde habitan los menus, espacio para los scripts dinámicos, funciones y enlaces a CSS.
    - Wrapper: el cuerpo de la web.
    - Footer: pie, faldón, de la web.
  • Template: También conocido como plantillas. Es el conjunto de actores/cosas que forman parte de todo el interface gráfico de un sitio web. El template está formado principalmente por los estilos del sitio CSS y la estructura HTML.
  • Intersticial: tipo de banner que ocupa toda la pantalla del ordenador.
  • Tags: Etiquetas, se usa tanto para el código (HTML, CSS, etc.) de las páginas como para el contenido (palabras clave).
  • Breadcrumbs: (Migas de pan)  Guía textual que nos ayuda a navegar por la web y nos muestra la profundidad de la misma. Esas palabritas que nos van diciendo donde estamos en la web. Es un sistema de navegación alternativa a los menús.
  • Download: Descarga.
  • Mapping: Seleccionar una zona de una imagen y convertirla en interactiva. En 3D aplicar texturas sobre un elemento.
  • Pop Up: Tipo de acción en la que un elemento gráfico salta o flota sobre el interfaz gráfico en una ventana aparte. Vamos, esas ventanitas que saltan y que nos vuelven locos a todos.
  • Hot spot: Zonas puntuales calientes. Espacios, selecciones muy puntuales de una imagen que se convierten en botón (invisible).
  • DIV: Capa o zona en la que se subdivide el diseño del interfaz gráfico de una web. Todos los elementos que componen una web hecha con HTML están dentro de divs. Estos se anidan unos con otros (Divs, dentro divs, dentro divs, padres, hijos, etc.) provocando un tremendo lío en forma de árbol que va desplegando sus ramas y que en realidad forman la estructura, el esqueleto de las páginas web.
  • Html5: Última actualización del lenguaje html.
  • JQuery: Framework para java script.
  • Framework: Conjunto de tecnologías que ayudan a otra para un mejor desarrollo.
  • Botón: Elemento que sirve para interactuar y nos permite pasar de un contenido a otro por medio de él. 

Seguro que hay un montón más de ejemplos que se podrían añadir. ¿Cuáles se te ocurren?

SOBRE EL AUTOR/A

Marga Cabrera es Dra. en Comunicación Audiovisual y profesora de la Universidad Politécnica de Valencia. Además, dirige el congreso de redes sociales Comunica 2.0 y es socia de la empresa MASmedios. Puedes encontrarla en @MargaTwita.

  • Manu Alpuente

    ¡Muy bueno! Se lo voy a pasar a todos mis clientes. ;)

  • Luis Antón

    A los diseñadores… de webs, ¿no? 

  • http://twitter.com/carlosmpozo Carlos Muñoz Pozo

    Loading no es descargando, es cargando.
    Métricas web: estadísticas relativas a visitas y modos de encontrar la web que han tenido los usuarios, así como los navegadores y dispositivos que han usado para ello.
    MySQL: sistema de base de datos más usado para la web.
    Página dinámica: distinta de la estática en que su creación se lleva a cabo mediante consultas a la Base de datos y no directamente a un archivo HTML que contenga el contenido deseado.

    Si se me ocurren más os escribo.

  • Isaac Galicia

    En el segundo párrafo, cuarto renglón: “composición, color, tipografía,…” ¿La coma debería aparecer después de los puntos suspensivos? En los demás casos que se utilizan los puntos para que la siguiente palabra inicie con mayúscula ¿Debe colocarse una coma después de los tres puntos? Yo opino que sí, debe aparecer coma después de los tres puntos cuando la palabra que sigue comienza con minúscula.

  • Gabriel Gómez M

    Interface no se refiere principalmente a “la cara visible”, sino a la forma de interrelación entre la máquina y el hombre. El punto es que actualmente esa interrelación es gráfica. Pero se puede tener una interface sonora, por poner un ejemplo.

  • http://www.manualdeestilo.com Manual

    ¡Gracias!

  • Marcelo Nolasco

    Parece muy interesante la ¨desvirtualización¨ de los vocablos utilizados sobre todo en los medios tecnológicos. Es una pena que las academias de lengua no hagan la incorporación de estos términos de manera más hábil. Para los que utilizamos estas y otras palabras cotidianamente, muchas veces necesitamos del respaldo de los académicos para normalizar sus usos.

  • Martilda

    Hola.
    Me gustó mucho la nota y hace bastante tiempo que vengo observando este fenómeno. Soy arquitecta y Planficadora Urbana y la verdad que la inventiva por parte de mis colegas es increíble. Yo pienso que no está mal la creatividad en la medida que una persona quiere transmitir algo nuevo, para lo cual todavía no existe un término establecido con mínimo acuerdod e la socieddad.
    Después de todo si vamos a hilar finito la Real Academia Española se basa en la “moda” estadísticamente hablando para incorporar los términos vigentes en la lengua española..
    Pero ocurre que muchos arquitectos y ni digamos los planificadores, por lo menos acá en Argentina, son muy soberbios y muchos quieren sentir que están inventando…lo que ya está inventado! y posee un término específico..!
    Muchas veces los términos inventados y que temrinan en “idad” se corresponden con sustantivos que se adjetivizan para transformarlos en variables o atributos de la cosa estudiada: p.e. “equitatividad” en lugar de “equidad”.
    Sería bueno que los creativos dedicaran un poquito más de tiempo a familiarizarse con el diccionario al momento de dedicarse a escribir o armar us conferencias.
    Saludos

  • http://twitter.com/MargaTwita Marga Cabrera

    Totalmente de acuerdo, intentaré mejorar el artículo en breve con todas las sugerencias. Un saludo y gracias!

  • http://twitter.com/MargaTwita Marga Cabrera

    Muchísimas gracias! lo mejoraremos con las aportaciones. Saludos!

  • http://twitter.com/MargaTwita Marga Cabrera

    Sí, sí, exactamente

  • http://twitter.com/MargaTwita Marga Cabrera

    Actualizado con vuestros comentarios, y con la genial ayuda del diseñador Moisés Mañas: @moimacar

  • Dgimirizaldu

    BreaDcrumbs
    InterSticial

    :-)

  • Aldemar Hernandez

    NO son Breakcrumbs sino Breadcrumbs

  • Guscas

    Aqui te adjunto unos términos más de la jerga de los diseñadores webs 

    prototipado  (diseño del prototipo en wireframes)
    wireframe ( dibujo simple  de la estructura de la web similar en concepto al layout)
    crossbrowsing ( ver que en todos los navegadores la web se vea bien)
    media queries ( proceso multiplataforma de una web sea para pc, ipad tablet, movil)
    html5 ( Ultima actualización del lenguaje html)
    jQuery (framework para java script)framework (conjunto de tecnologías que ayudan a otra para un mejor desarrollo)
    W3C ( world wide web entidad regente sobre estandares web)
    SEO (search engaing optimization)
    SEM (Search Engine Marketing)
    SMO(posicionamiento en redes sociales)

  • http://twitter.com/MargaTwita Marga Cabrera

    Añadidos! Muchas gracias.
    Los 3 últimos están en el artículo de entendiendo a los SEOS.

  • http://twitter.com/MargaTwita Marga Cabrera

    Corregido! Gracias ;-)

  • http://twitter.com/MargaTwita Marga Cabrera

    Corregido, gracias ;-)

  • Pherpa

    el gerundio es para fardar???? 

  • http://azconanelbarbaro.com/recull-conceptes-i-tendencies/ Recull: Conceptes i tendències « azConan "El Bárbaro", Social Media i periodisme

    [...] Entendiendo a los diseñadores: las claves de su vocabulario [...]

  • Jairo Alberto

    En “Página dinámica: distinta de la estática en que su creación se lleva a cabo mediante consultas a basse de datos y no directamente…” conviene cambiar “basse de datos” por “bases de datos”. Saludo cordial.