Cómo contratar diseño web sin hacer el ridículo

Capítulo 1

Glosario de términos.

Introducción a este capítulo

Aunque ya conozcas algunos de los términos a continuación, te rarecomiendo que los leas todos. Además, si más adelante uso algún tecnicismo que no está definido en este capítulo, encontrarás su significado en el diccionario del marketing y la tecnología, de Clever Consulting.


  • bit – unidad mínima de información digital. Se representa por un 0 o por un 1.
  • archivo, fichero, file – los datos almacenados en un ordenador se agrupan en ficheros (también llamados archivos).
  • documento – metáfora gráfica usada para representar un fichero.
  • formato (de archivo) – el formato de archivo determina el orden en que se disponen los bits que conforman dicho archivo, o lo que es lo mismo, la forma en la que se codifica la información que contiene dicho archivo. Por ejemplo, PNG y JPEG son dos formatos muy distintos entre sí desde el punto de vista técnico pero ambos son utilizados para codificar imágenes.
  • extensión (de archivo) – forma parte del nombre de los archivos y sirve para indicar el formato de cada uno de dichos archivos. Es la cadena de texto que se inicia con el último carácter punto (.) del nombre de archivo y los caracteres que lo suceden. Por ejemplo, la extensión de los archivos con formato PNG es .png. Un mismo formato de archivo puede indicarse con distintas extensiones, como ocurre con el formato de archivos JPEG, que puede encontrarse con extensiones como .jpg, .jpeg o .jpe, entre otras.
  • directorio, directory – entidad que sirve para agrupar archivos y otros directorios. Dicho de otra forma, un directorio puede contener archivos y directorios.
  • carpeta, folder – metáfora gráfica usada para representar un directorio.
Foto de un Apple Lisa en funcionamiento. En la pantalla se pueden ver documentos y carpetas.

Imagen 1.1. El concepto de documentos y carpetas fue utilizado por primera vez en el ordenador Apple Lisa. En la pantalla del ordenador de la imagen se pueden observar documentos y carpetas dentro de una ventana.
En Apple se inventaron la expresión “Local Integrated Software Architecture” (Arquitectura de Software Integrada Localmente) para justificar el nombre de este ordenador, pero como todo el mundo sabía y el propio Steve Jobs reconoció mucho después, el Lisa debe su nombre a Lisa Nicole Brennan-Jobs, la hija que Jobs tuvo en 1978 y de la que se desentendió durante años.
(Imagen bajo licencia CC BY 2.0 cortesía de Álvaro Ibáñez.)

Foto de un Osborne 1. Se trata de un ordenador portátil (para los estándares de la época), con varias disqueteras, una minúscula pantalla y un teclado de unas dimensiones y peso mayores a los de un portátil actual.

Imagen 1.2. Como persona curiosa que eres te gustará la historia de Osborne, una marca de ordenadores que, aunque poco conocida hoy en día, gozó de gran éxito a principios de los años 80 por adelantarse a IBM, Apple y Microsoft en muchos aspectos. Pese a su prometedor arranque Osborne cerró sus puertas en 1985. El motivo que provoco dicho cierre hoy se conoce como “Efecto Osborne“.
(Imagen bajo licencia CC BY 2.0 cortesía de Marcin Wichary.)

Breve historia del ordenador personal

Aunque varios intentan ostentar este título, el Simon, creado por el pionero de la informática Edmund Berkeley en 1950, es el primer ordenador personal. Pese a que existían ordenadores antes, el Simon, por 600 $, fue el primero que el público general podía permitirse. Todo lo que podía hacer Simon era combinar unas luces para representar los números 0, 1, 2 y 3.

En un artículo al respecto, Berkeley dijo: “Incluso puede que algún día todos tengamos pequeños ordenadores en nuestros hogares […] Quizás calculen nuestros impuestos. Los estudiantes podrán ayudarse de ellos para hacer sus deberes.”

A la izquierda, portada de la revista Radio-Electronics en la que una azafata, vestida de rojo, manipula una caja metálica con cinco botones y cinco bombillas en el frontal. A la derecha, un hombre en traje da indicaciones a la misma azafata mientras ésta introduce una especie de cinta en el Simon.

Imagen 1.3. A la izquierda de la imagen la portada de la revista Radio-Electronics donde se presentó Simon en una guía por fascículos que explicaba cómo construirlo. A la derecha, Berkeley explica a una azafata cómo introducir instrucciones al Simon a través de una cinta con perforaciones.
(No he encontrado información acerca de los derechos de autor de las imágenes, que supongo que han caducado.)

En los inicios de la informática las empresas contaban con un mainframe u ordenador central al que sus empleados se conectaban con unos dispositivos llamados terminales, que consistían en poco más que una pantalla con teclado, pues no podían funcionar sin la información que les proporcionaba el mainframe.

Fue el ingeniero canadiense Chuck Peddle, investigando para producir un procesador más barato, quien llegó a la conclusión de que lo que la gente realmente deseaba eran terminales con la capacidad de un mainframe. Había nacido el concepto de ordenador personal (Personal Computer o PC en inglés).

Chuck tuvo relación y ejerció gran influencia sobre Steve Wozniak y Steve Jobs, fundadores de Apple; Bill Gates, co-fundador de Microsoft; Adam Osborne, fundador de Osborne, además de otros actores de la revolución de la informática de consumo, como los fabricantes de ordenadores Atari, Commodore y Sirius; o los fabricantes de procesadores Intel, Motorola y Texas Instruments.

Fue en enero de 1977, en la Feria Informática de la Costa Oeste, donde la también canadiense Commodore –empresa para la que trabajaba Chuck– presentó el primer ordenador personal, el Commodore PET, adelantándose así seis meses a Apple y RadioShack, siendo éste último un distribuidor estadounidense de productos de electrónica que jugó un destacado rol en la comercialización de los primeros ordenadores personales.

Ordenador compacto, algo mayor que un ordenador de sobremesa actual, con pequeña pantalla y pequeño teclado.

Imagen 1.4. El Commodore PET fue el primer ordenador personal a la venta (al menos el primero que se vendía ya ensamblado). A la izquierda del teclado contaba con un reproductor integrado de cintas de casete, que es el soporte en el que se almacenaba el software por aquel entonces.
(Imagen bajo licencia CC BY-SA 3.0 cortesía de tomislav medak).

En 1984 Apple presentó su primer ordenador con sistema operativo Macintosh. Yo todavía no había nacido, pero al ver lo que ya era capaz de hacer en aquella época me emociono como si fuera uno de los asistentes al evento:

Steve Wozniak es demasiado inteligente. Cuando su camino se cruzó con el genio comercial que era Steve Jobs sólo podía pasar una cosa: que hiciera historia y de paso crearan una fortuna.

  • subdirectorio, subdirectory – directorio contenido dentro de otro directorio.
  • subcarpeta, subfolder – metáfora usada para representar gráficamente un subdirectorio.
  • directorio superior, directorio padre, directorio madre, parent directory – los términos “padre”, “madre” o “parent“; e “hijo” o “child” se usan para indicar la relación entre un subdirectorio y el directorio que lo contiene, siendo éste último el “padre”, “madre” o “parent“.
  • directorio hijo, child directory – los términos “padre”, “madre” o “parent“; e “hijo” o “child” se usan para indicar la relación entre un subdirectorio y el directorio que lo contiene, siendo el primero de ambos el “hijo” o “child“.
  • directorio raíz, root directory – es el directorio más superior en un sistema de archivos, el que no tiene directorio padre.
  • ruta, path – es la cadena de texto que indica la referencia de un archivo o directorio dentro de la jerarquía del sistema de archivos. Los elementos de una ruta (archivos y directorios) se delimitan por el carácter de la barra (/) o la contrabarra (\). Algunos ejemplos de rutas:
    • Ruta del programa “Bloc de notas” en Windows XP: C:\Windows\System32\notepad.exe
    • Ruta del programa “Editor de texto” en Mac OS X 10.9: file:///Applications/TextEdit.app
    • Ruta del logo de Google en internet: http://www.google.com/images/srpr/logo4w.png
Imagen con un sistema de archivos representado gráficamente. Contiene un disco y varios directorios, subdirectorios y archivos relacionados entre ellos a través de flechas.

Imagen 1.5. Ejemplo gráfico de varias rutas en un sistema de archivos.

  • URL – son las siglas de Uniform Resource Locator, que se traduce como “Localizador de Recursos Uniforme”. Una URL es una ruta que indica la localización de un recurso en internet, como un vídeo, una imagen o una página web, entre otros. El término URL se usa con frecuencia como sinónimo de dirección web. Ejemplo de URLs:
    • URL de la página principal de Google.com: http://www.google.com/
    • URL del logo de Google: http://www.google.com/images/srpr/logo4w.png
  • dominio – cadena de texto que define un espacio autónomo en internet. Es el texto que introduces en la barra de direcciones de tu navegador cuando quieres visitar la página web principal de un sitio web. Ejemplos de dominios:
  • extensión de dominio – forma parte del nombre de los dominios y es la cadena de texto que se inicia con el último carácter punto (.) del nombre del dominio y las letras que lo suceden. Lo que sigue a las letras de la extensión de dominio no es parte del dominio. Ejemplos de extensiones de dominio son .es, .com o .net.
  • dominio local – dominio cuya extensión de dominio está asociada a un país. Cada país tiene su propia extensión de dominio local. Algunos ejemplos de dominios locales son .es para España, .pl para Polonia, .us para Estados Unidos, .tv para Tuvalu, .co para Colombia o .uk para Reino Unido. A los dominios locales también se les llama ccTLD que son las siglas de Country Code Top-Level Domain, que se traduce como “Código de País de Dominio de Nivel Superior”.
  • dominio genérico – tipo de extensión de dominio no asociada a un país. Algunos ejemplos de extensiones de dominios genéricos son .com, .net, .org, .edu, .biz o .info. A los dominios genéricos también se les llama gTLD que son las siglas de Generic Top-Level Domain, que se traduce como “Dominio Genérico de Nivel Superior”.

La ICANN, siglas de Internet Corporation for Assigned Names and Numbers, traducible como “Corporación de Internet para la Asignación de Nombres y Números”, es una organización sin ánimo de lucro responsable de la gestión del sistema de dominios, entre otras tareas.

  • subdominio, subdomain – dominio que es parte de un dominio mayor. Por ejemplo, mail.ejemplo.com y www.ejemplo.com son subdominios del dominio ejemplo.com.
  • sitio web, website – es el conjunto de páginas web relacionadas y comunes a un dominio de internet. cleverconsulting.net, con todas sus secciones y subsecciones, forma un sitio web.
  • página web, webpage – cada una de las secciones individuales que forman un sitio web. http://cleverconsulting.net/nosotros/ es una página web del sitio web cleverconsulting.net.
  • arquitectura de la información, arquitectura web, information architecture, IA – en un sitio web, la arquitectura de la información describe la relación jerárquica entre las distintas páginas web del sitio web. La arquitectura de la información de un sitio web tiene forma de árbol invertido, como se muestra, a modo de ejemplo, en la figura a continuación, que representa la arquitectura de la información de un sitio web sencillo:
Ejemplo de arquitectura de la información, representada en forma de diagrama, para un sitio web sencillo. Se trata de la misma arquitectura de la inforamción que a continuación es representada en una lista.

Imagen 1.6. Inicio, Servicios, Quiénes somos, … todas las secciones de un sitio web guardan una relación jerárquica entre sí.

A continuación un esquema con el mismo ejemplo de arquitectura de la información, representado de manera diferente a la anterior imagen. De tratarse de la arquitectura de la información de un sitio web real, cada uno de los elementos de la siguiente lista sería una página web:

  • Inicio
  • Servicios
    • Servicio A
    • Servicio B
    • Servicio C
  • Quienes Somos
    • Historia
    • El equipo
  • Clientes
  • Contacto
    • Dónde estamos
    • Datos de Contacto
  • Aviso Legal
  • Política de privacidad

No sé qué lleva a algunos a crear enrevesadas hojas de cálculo o complicados diagramas en PowerPoint para representar la arquitectura de la información de su sitio web.

La arquitectura de la información en un sitio web tiene una sencilla relación jerárquica en forma de árbol invertido y, por tanto, se puede representar a la perfección como un esquema en forma de lista en un documento de texto. Además, cuando se desee introducir cambios, una lista resultará más fácil de editar que cualquier otro formato.

  • alojamiento (web), (web) hosting – espacio de almacenamiento, normalmente contratado a una empresa proveedora de servicios de alojamiento, físicamente localizado en un ordenador remoto accesible a través de internet. Es el lugar donde se almacenan los archivos que forman tu sitio web.

Dominio y alojamiento son cosas distintas y pueden estar contratados con empresas distintas.

  • blog – sitio web o sección de sitio web que recopila publicaciones ordenadas cronológicamente. La palabra blog proviene de la expresión “web log“, lo que se traduce literalmente como “bitácora web”.

Un blog es uno de los mejores medios de comunicación que puede usar una empresa: trasmite conocimiento, resuelve dudas y objeciones habituales, genera autoridad, es excelente para mejorar el posicionamiento en buscadores de un sitio web y a menudo sirve como muestra del producto o servicio ofertado. Además, convierte a la empresa en propietaria del medio de comunicación, con todas las ventajas y el ahorro que eso supone.

Por contra, exige disciplina, tiempo y rigurosidad, y es una de las cosas más laboriosas y difíciles de ejecutar con éxito.

“No quiero un blog, quiero una lista de noticias publicadas en orden cronológico inverso, y que los visitantes del sitio web puedan comentar sobre las noticias.” —Excelente definición de blog y petición real de un cliente que por motivos obvios mantendré en el anonimato.

  • navegador, browser – es la aplicación o programa informático que permite visitar y visualizar páginas web de internet. Los navegadores más populares son Microsoft Edge (antiguo Internet Explorer), Google Chrome, Mozilla Firefox, Apple Safari y Opera.

    Iconos de los navegadores m?s populares: Microsoft Internet Explorer, Google Chrome, Apple Safari, y Opera.

    Imagen 0.5. Iconos de los navegadores m?s populares.

  • buscador, search engine, motor de búsqueda – página web que permite encontrar textos concretos entre otras páginas web de internet. Los buscadores más populares en Europa y Norte América son: Google, Yahoo!, Bing (de Microsoft) y Ask. Otros buscadores destacables son Seznam en la República Checa, Yandex en Rusia, Baidu en China y Naver en Corea del Sur.

Google Chrome es un navegador, mientras que google.com es un buscador. Ambos son productos de la empresa Google, Inc. Lo mismo ocurre con Internet Edge y bing.com, navegador y buscador respectivamente, ambos de la empresa Microsoft Corporation.

Yahoo! no nació como un buscador, sino como un directorio. Algo así como un “páginas amarillas”. Por eso, “Yahoo” son las siglas de Yet Another Hierarchical Officious Oracle, que se traduce algo así como “Simplemente Otro Oráculo Jerárquico Oficioso“.

Página web bing.com vista desde Chrome

Imagen 1.8. Captura de pantalla del buscador bing.com visitado desde el navegador Google Chrome para el sistema operativo Mac OS X.

Existen técnicas y buenas prácticas que persiguen conseguir que una página web aparezca entre los primeros resultados de un buscador cuando los usuarios busquen determinadas palabras. Es lo que se conoce como optimización en buscadores, posicionamiento en buscadores, posicionamiento orgánico en buscadores, posicionamiento natural en buscadores, o SEO, que son las siglas de Search Engine Optimization, lo que literalmente se traduce como “Optimización en Motores de Búsqueda”.

Si quieres aprender más acerca de como mejorar el SEO o posicionamiento natural de tu web, te recomiendo que leas mi blog: mongemalo.es.

  • layout – patrón que determina la disposición y tamaño aproximado de los elementos de una página web.

    Layout de ejemplo de página web ficticia en el que en un dibujo en blanco y negro, sin diseño, se indica la posición del logotipo, el menú de navegación, una imagen principal, un título, y un párrafo.

    Imagen 1.9. Ejemplo de layout.

  • diseño web – apariencia gráfica de una página web: colores, tamaños, tipografías, etc. El layout es parte del diseño.
  • contenido (web) – información que se muestra en un sitio web, como textos, imágenes, vídeos, etc.
  • funcionalidad – se refiere a lo que hace o permite hacer un programa informático (más adelante veremos que un sitio web puede —y suele— ser un programa informático).

Una galería de imágenes es parte de la funcionalidad de un sitio web. Dónde aparecerá dicha galería, y con qué tamaño, es parte del layout del sitio web y, por tanto, del diseño. Las fotos concretas que forman la galería de imágenes son parte del contenido web.

Una imagen puede ser parte del diseño (por ejemplo el logotipo), o del contenido (por ejemplo una fotografía que ilustra un artículo).

El término “módulo” no es sinónimo de funcionalidad. Nunca digas que quieres una web con, por ejemplo, un módulo de registro de usuarios. Suena a que crees que el software se construye conectando módulos prefabricados.

  • diseñador web – es la persona encargada de plantear la apariencia gráfica de una página web o de un sitio web.
  • maquetador web – es la persona encargada de implementar un diseño web de tal forma que se convierta en una o varias páginas web.
  • programador – es la persona encargada de implementar la funcionalidad de una aplicación informática.

Los diseñadores crean diseños, los maquetadores los hacen realidad implementándolos y los programadores construyen las funcionalidades.

Escucharás los términos front-end y back-end para referirse a la parte “frontal” y “trasera” de un sitio o aplicación web, respectivamente. Como consecuencia se usan las expresiones “desarrollo o desarrollador de front-end” y “desarrollo o desarrollador de back-end” para diferenciar dos especialidades de programación.

El reto radica en ponernos de acuerdo en cuanto a qué nos referimos con front y a qué con back. Hay quien habla de la parte frontal como la parte pública del sitio o aplicación y, en consecuencia, de la parte trasera como la parte privada o panel de administración de dicho sitio o aplicación.

Dado que programar o maquetar áreas privadas no requiere distintos conocimientos o habilidades que programar o maquetar secciones públicas, más acertado está quién se refiere al front-end como a la implementación de las funcionalidades que se ejecutan en el navegador del usuario, y al back-end como a la implementación de las funcionalidades que se ejecutan en el servidor web. Esto es algo que se entenderá mejor cuando hayas leído el Capítulo 7. ¿Cómo funciona una página web?.

No obstante, no soy partidario de diferenciar en dos disciplinas el desarrollo de front-end y el de back-end. No existe apenas diferencia en los conocimientos y habilidades necesarios para desempeñar una u otra labor y mi experiencia me demuestra que dominar ambas áreas sólo repercute en mejores programadores y proyectos.

  • conversión – objetivo conseguido como resultado de una acción comercial o publicitaria. Ejemplos de conversiones son: cada vez que se produce una venta; un cliente potencial que rellena un formulario de contacto; un usuario que se suscribe a la newsletter; un usuario que abre un correo electrónico, que ve un anuncio publicitario o que hace clic en dicho anuncio; etc.
  • usabilidad – grado de facilidad con la que una persona usa o aprende a usar un utensilio o herramienta para conseguir un objetivo. El objeto de uso puede ser una aplicación de software, un sitio web, una máquina o cualquier otra cosa con la que un humano interactúe.

    Fotografía de un mando a distancia de Apple, con apenas 3 botones, al lado de un mando de Sony Playstation 3, que cuenta con decenas de botones.

    Imagen 1.10. Distintos niveles de usabilidad para dos productos con el mismo cometido.
    (Imagen bajo licencia CC BY-SA 2.0 cortesía de d.neuman.)

La usabilidad es un concepto, no un elemento tangible. No puedes contratar “una usabilidad”, como he escuchado en más ocasiones de las que me gustaría. Una vez tuve un cliente al que tras a explicarle qué era la usabilidad y qué cambios de diseño y funcionalidad podíamos hacer en su sitio web para hacerlo más fácil de usar, insistía en que él no quería eso, que quería lo que le habían pedido sus inversores, que “le hiciéramos la usabilidad”. Tuve que decirle que sería mejor que dejáramos de trabajar con él porque no iba a quedar satisfecho con nuestros servicios.

Si a lo largo del libro te encuentras con algún otro término que desconoces, encontrarás su significado en el diccionario de la tecnología y el marketing.


Ahora que ya hablas con la rigurosidad del informático más puntilloso, no pares aquí. Continúa aprendiendo con el Capítulo 2: Cómo funciona un ordenador.