creación website con éxito

2C A P í t U l o

desarrollo de un website con éxito

2.1. Proceso de producción de un website

2.1.1. Gestión de dominios

2.1.2. Optimización web

2.2. Principios de diseño en Internet

2.2.1. Diseño de la interfaz: La navegación

2.2.2. Diseño del sitio: La estructura

2.2.3. Diseño de la página: La disposición

2.2.4. Diseño del contenido

e-Branding Posiciona tu marca en la red60

«Todo está conectado con todo.»Tim Berners-Lee

Creador de la World Wide Web. Director del consorcio W3C.

e-Br

and

ing

Posi

cio

na

tu m

arc

a e

n l

a r

ed

61e-Branding Desarrollo de un website con éxito

2.1. Proceso de producción de un websiteinternet consiste básicamente en la unión de ordenadores a lo largo de todo el mundo, permitiendo, de esta manera, establecer vínculos de comunicación. Para ello, es necesario que los distintos ordenadores “hablen una misma lengua” y esto es lo que pretende el protocolo tCP/iP.

El creador de la Web, tim berners-Lee, de la Organización Europea de in-vestigaciones Nucleares, CERN, utilizaba un programa escrito por él mismo como herramienta de productividad para crear documentos “hipertexto”. En 1990, su proyecto recibió su nombre definitivo: World Wide Web. Los tres pilares de su concepto fueron la especificación para:1. La comunicación entre los clientes web y los servidores web: el protocolo

httP (Hypertext Transfer Protocol).2. La dirección de cualquier tipo de archivos: el esquema de los llamados URis

(Universal Resource Identifier).3. Un lenguaje de marcación para documentos web: htML (Hypertext Markup

Language) 31.

actualmente, las posibilidades de comunicación en internet se han multi-plicado al incrementarse el uso de nuevos servicios de la Red por parte de la audiencia. aunque la web y el correo electrónico son los servicios más utiliza-dos por los internautas, la mensajería instantánea y el intercambio de ficheros (P2P) tienden al alza.

Los datos que ofrece el Estudio General de Medios, en relación a los servicios más utilizados de internet, refuerzan la idea de emplear un mix de comunica-ción no sólo en referencia a técnicas (promoción, marketing directo, relaciones públicas, etc.), sino también en relación a una combinación de medios óptima (web, blogs, MsN, telefonía iP, itv, etc.). Es decir, en base a una estrategia mul-timedia integrada.

toda estrategia de marketing on-line tiene su base en la herramienta de comunicación de la empresa en internet: su sitio web.

Un sitio web es el lugar donde se encuentra el conjunto de páginas web de una corporación. Estas páginas se encuentran relacionadas entre sí a través de los hipervínculos. Cada página web tiene una dirección única (URL).

El sistema con el que está construido la Web se llama hipertexto y es un en-tramado de páginas conectadas con enlaces. La Web no sólo se limita a presentar

3� HTMLesunlenguajequesirveparamostrartextoseimágenesdeunsitiowebalusuario.Estácom-puestoporunconjuntodesímbolosocódigos,queseinsertanenarchivos.Estelenguajeleindicaalnavegadorcómomostrarlaspalabraseimágenesdeunsitiowebalusuario.HTMLesunestándarrecomendadoporelWorldWideWebConsortium(W3C)yalquesehanadheridolosmayoresnave-gadores.ElconsorcioW3CseencargadelosfundamentostécnicosyestándaresenlaWeb.


textos y enlaces, sino que también puede ofrecernos imágenes, vídeos, sonido y todo tipo de presentaciones. Una página web es, por tanto, un documento hipermedia (hipertexto + multimedia).

según P. saavedra, el proceso de producción de un sitio web consta de cinco etapas 32:

1. Planificaciónse empieza organizando el equipo de desarrollo web mediante diagramas de Gantt o cronogramas (técnica de visualización de actividades que muestra una secuencia de ellas y, para cada una, el tiempo que se requiere para cumplirlas).

32 Guía para el desarrollo de sitios web (enlínea),2004.Documentodisponibleen:Interneten:www.guiaweb.gob.cl/guia.

Gráfico 2.1. Uso de los servicios de Internet en España.Fuente: EGM.

0

20

40

60

80

100

120

1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 feb/mar2007

abr/may2007

oct/nov2007

World Wide Web (www)Correo electrónicoTransferencia de ficheros

Otros usosGrupos discusiónTel.Ip c/tel.conv

Mensajería instantáneaIntercambio archivos P2PChats/IRC

Tel.Ip c/ordenador

feb/mar2008

abr/may2008

63e-Branding Desarrollo de un website con éxito

Un equipo de desarrollo está formado básicamente por un jefe de proyecto, un editor web, programadores, diseñadores, arquitectos de información y téc-nicos de marketing y comunicación.

Posteriormente, se desarrolla el estudio técnico que implica cada área de producción (con el Plan de trabajo a modo de cronograma), un estudio de tec-nología (navegadores, lenguajes, base de datos a utilizar), de servidores (decidir si será interno o externo, el dominio, el sistema de análisis del tráfico, etc.) y los costes finales (salarios, hardware y software, mantenimiento).

2. Definición del sitio webtras definir objetivos, se desarrolla el mapa del sitio o árbol de contenido en el que se muestra de manera práctica cuántas secciones tendrá el sitio y cuántos niveles habrá dentro de cada uno. El mapa del sitio debe ser la base para desa-rrollar el sistema de navegación.

Posteriormente, es recomendable definir el sistema de navegación mediante cuatro documentos:

a. Estructura de páginas o wireframe. sistema relacionado con el front-end, que hace referencia a lo que el usuario ve en pantalla y a la representa-ción audiovisual de todos los eventos. implica desarrollar la estructura de la página web con sus encabezados, epígrafes y menús.

b. Diagrama de flujo o flowchart, relacionado con el back-end, que hace re-ferencia a lo que el usuario no ve en pantalla, pero que es absolutamente necesario para que el producto funcione (bases de datos y programa-ción). supone desarrollar un diagrama en el que se indiquen todas las alternativas que tiene un usuario a la hora de realizar la navegación por el sitio web.

c. bocetos de diseño en formato de imagen (JPG o similar).d. Maqueta web o borrador final en formato htML.

3. Diseño El objetivo del diseñador es lograr una comunicación eficaz, a través de una composición congruente de la página, que permita una lectura creativa y fácil, a la vez que interactiva.

En esta fase debe diseñarse la interfaz, la página y el contenido siguiendo los principios de diseño web. La labor de recopilación de activos o elementos de diseño, como texto (Css), imágenes (mapa de imágenes e imágenes de sus-titución), colores y otros elementos multimedia (películas Flash, shockwave y Quicktime, sonido y applets) es vital para el funcionamiento posterior del equipo de trabajo.


4. Desarrollotras elaborar los elementos de diseño y recopilar los activos de la web, es el mo-mento de diseñarla con todos sus hipervínculos, sus archivos Css33 agregados y sus diferentes elementos dinámicos (base de datos).

antes de lanzar el sitio es aconsejable desarrollar un pretest que evalúe su desempeño funcional, su contenido y su visualización en los diferentes navega-dores. asimismo, es necesario validar su nivel de usabilidad (mediante pretest de usabilidad con usuarios) y su nivel de accesibilidad (mediante programas como el disponible en la web de la W3C http://validator.w3.org).

5. Publicación y mantenimiento del sitiotras el pretest, es el momento de planificar la campaña de marketing on-line y de mantener la calidad, respondiendo a los comentarios de los usuarios y actualizando la información del sitio.

PlanificaciónObjetivoCronogramaEstudio técnico

Definición

WireframeFlowchartBoceto Maqueta

DiseñoSitioPágina

Desarrollo

ContenidoActivosInteractividadPretest

PublicaciónMarketingMantenimiento

Tabla 2.1. Proceso de producción de un sitio web.Fuente: Guía para el desarrollo de sitios web.

33 TalycomodefineW3C,CSSuhojasdeestiloencascada(Cascading Style Sheets)esunmecanismoquedescribecómosevaamostrarundocumentoenlapantalla.Estaformadedescripcióndeestilosofrecealosdesarrolladoreselcontroltotalsobreelestiloyelformatodesusdocumentos.

CASO 12 meSeS, 12 CAUSAS. TeLe5

Dentro de la campaña “12 meses, 12 causas”, Tele5 desarrolló en febrero de 2007 una acción que hacía referencia a los trastornos alimentarios provocados por motivos estéticos. La acción se enfocó hacia los complejos, creando el titular:

FEBRERO: Por una juventud sin complejos.Para dirigirse a los jóvenes, se positivizó el mensaje en tono de humor mediante un “Video-

Piropeitor”. El usuario se encontraba con un con��gurador de piropos apto para subirle la moral al más desdichado o para demostrar lo mucho que quieres o te gusta alguien independientemente de su aspecto físico.

Los pasos a seguir por el usuario eran:– Nombre o apodo de la persona a la que querías enviar el piropo.– Provincia de la persona a la que se enviaba el piropo.– Tipo de relación con esa persona: pareja, amigo o admirador secreto.– Tono del piropo: romántico, de la calle, clásico o macarra.

Cuatro tonos que correspondían a cuatro caracterizaciones (pijo, tuno, macarra, obrero).

Flowchart

Los vídeos que devuelve el “VideoPiropeitor” seguían una misma estructura:– Introducción: Arturo Valls explicaba a la persona a la que

iba dirigido el piropo qué es lo que iba a ver a continuación y quién se lo enviaba.

– Piropo: Arturo Valls salía por un segundo de la escena y reaparecía vestido con la indumentaria perfecta para el tono elegido, para soltar el piropo.

– Cierre: Arturo Valls terminaba con el mensaje institucio-nal e incitaba al usuario a enviar otro piropo.

Fuente: Interactive McCann.


2.1.1. gestión de dominiossegún Red.es, un dominio es la marca o identificador en internet de la empre-sa, permitiendo posicionar en la Red los productos, servicios e información de la compañía.

todo ordenador conectado a internet se identifica con un número único llamado dirección iP con el fin de que su ubicación y actividad pueda diferen-ciarse de la de otros ordenadores. El formato utilizado es xx.xx.xx.xx, y cada número oscila entre 0 y 255 (por ejemplo, 254.67.45.123).

Como las direcciones iP no son fáciles de recordar, cada iP se asocia a un nombre de dominio. DNs son las siglas de Domain Name System. El servidor de DNs traduce los nombres de dominio en direcciones iP para que sea posible la comunicación entre ordenadores.

Un dominio te permite tener presencia en la Red y que sea posible el acceso al site desde cualquier punto de la Red.

Internet Corporation for Assigned Names and Numbers (iCaNN) es la organi-zación internacional responsable de asignar espacio de direcciones numéricas de protocolo de internet (iP), identificadores de protocolo y de las funciones de gestión del sistema de nombres de dominio de primer nivel.

a nivel europeo, EURid es la organización seleccionada por la Unión Eu-ropea para gestionar la extensión “.eu”. En España, la entidad responsable de la asignación de dominios “.es” se denomina EsNiC.

todo dominio, según la entidad pública Red.es tiene una doble finalidad 34:– Es la marca en internet, sirviendo para identificar a la empresa o a las mar-

cas en la Red. – Es la dirección en la Red, siendo la forma más fácil e intuitiva para localizar

un sitio en internet.

Un Top Level Domain (dominio de primer nivel) 35, es el más alto nivel de categorización de un nombre en internet.

Existen dos tipos de Top level domain:– Dominios genéricos, sin vinculación territorial: .com, .net, .org, .info,

.biz, .name. Los tres primeros son los más utilizados, orientados a redes (.net), comercio (.com) y organizaciones (.org).

– Dominios territoriales correspondientes a los códigos de cada país: .es.

El registro de un dominio puede realizarse a través de agentes registradores acreditados por EsNiC. Para obtener esta acreditación, los agentes registradores deben cumplir una serie de requisitos técnicos, legales y de seguridad.

34 Guía de dominios.ESNIC,200�.Documentohipertextodisponibleen:www.nic.es/index.html.35 SegúnlaestructuradelosdominiosenInternet,existeundominioraízapartirdelcualsecreanlos

dominiosdesegundonively,derivandodeestos,losdetercernivelyasísucesivamente.Porejemplo,midominio.esesundominiodesegundonivel.Undominodetercernivelesmidominio.com.es.

6�e-Branding Desarrollo de un website con éxito

Los agentes registradores ofrecen una serie de servicios de valor añadido, tales como alojamiento de servidores, páginas web, direcciones de correo elec-trónico, gestión del registro y renovación de dominio. también permiten el registro de los dominios genéricos con caracteres multilingües (ñ, diéresis, ç y acentos grave y agudo).

El registro de dominios se ha incrementado en los últimos años, especialmen-te en España (los dominios .es) debido a la agilización en la solicitud del mismo. En julio de 2008 se consiguen un millón de dominios .es.

según J. Nielsen36, las tres formas para crear nombres de dominios son:1. Ejecutar palabras conjuntamente: jakobnielsen.com (el más recomendado).2. Utilizar una abreviatura: jnielsen.com (recomendado si el nombre es largo).3. Utilizar un guión: jacob-nielsen.com (debe evitarse).

El usuario tiende a intentar recordar los nombres de dominio enteros. Por ello, todos los nombres de directorio deberán ser cortos, con términos comunes, con minúsculas y sin espacios ni caracteres extraños.

La gestión del dominio es, por tanto, esencial en el plan de e-marketing. Jun-to a éste, existen otras herramientas fundamentales en toda gestión de tráfico del site. El usuario encuentra un sitio de tres maneras, que por orden, son:– Motores de búsqueda: es fundamental la optimización del sitio, ya que permitirá

mejorar el posicionamiento natural en buscadores (sEO: Search Engine Optimiza-tion) y el posicionamiento en redes sociales (sMO: Social Media Optimization).

3� Nielsen,J.,Usabilidad.Diseño de sitios web.Prentice-Hall,Madrid,2000.

Gráfico 2.2. Dominios registrados en los últimos años en España.Fuente: Red.es.

GUÍA ÚTIL CómO CReAR UN DOmINIO .eS

La Entidad Pública Empresarial Red.es ha elaborado un manual que desarrolla los procedimientos a seguir en la gestión de nombres de dominio.

Puedes solicitar cualquiera de los siguientes dominios con total libertad. Tu dominio .es será aprobado si no está asignado con ante-rioridad, cumple con las normas de sintaxis y no está incluido en la lista de términos prohibidos ni reservados.

Para comprobar si un dominio está libre puedes acceder a www.nic.es y comprobar desde su home page si lo está. El campo de formulario para solicitar dominios está situado en el centro de la página. En el caso de que el dominio no esté libre, podrás ver quién es el propietario del dominio y solicitar otro.

Puedes registrar tu dominio .es con Red.es o a través de un agente registrador. Si decides hacerlo a través de Red.es, la Orden de Tasas en 2008 es:

Indicativo Asignación Renovación

.es 32,00 € 32,00 €

.com.es 13,50 € 13,50 €

.nom.es 13,50 € 13,50 €

.org.es 13,50 € 13,50 €

Los pasos para registrar tu dominio .es son:– Acceder a www.nic.es o agente registrador.– Comprobar si el dominio está libre.– Registrar el dominio cumplimentando el formulario on-line.– Aportar datos del titular.– Aceptar condiciones legales.– Validar datos de factura.

Al pulsar “Realizar pago”* en ESNIC, el sitio te redirige a la pasarela de pago de AEAT. Si todos tus datos del dominio son correctos, el operador avanzará la solicitud al estado de Dominio Activo, el dominio se crea y enviará un mensaje de aprobación.

Con los agentes registradores podrás solicitar el registro del resto de dominios (.com, .org, etc.), así como otros servicios como el alojamiento de archivos en un servidor (hosting).

A continuación, te mostramos algunos agentes registradores**.1 2

Listado de agentes registradores acreditados

Fuente: Red.es.

* Elusuariotiene25díasdesdeeldíaquesusolicitudseaprobó,antesdequesudominiosedesestimeporimpago.Además,antesdelos�0díasdeaprobacióndelasolicitud,elusuariodeberáaceptarlosdatosycondicionesdepago.

** “ListadodeAgentesRegistradores”enRed.es.[ref.mayode2008].DisponibleenInterneten:www.nic.es/agentes/ofrecen/registro.html.

e-Branding Posiciona tu marca en la red�0

– Recomendaciones en e-mail.– vínculos con otros sitios, para lo que debe fomentarse una campaña de

linkeo con otros webmasters, controlar que los archivos y directorios perma-nezcan en el mismo sitio, incluir la URL en todos los productos y publicidad off-line de la empresa y crear campañas publicity en blogs, etc.

2.1.2. optimización web

La optimización web es la estrategia de marketing electrónico cuyo objeto es lograr que los motores de búsqueda conozcan un sitio web, lograr satisfacer las necesidades de los usuarios y obtener una posición óptima entre la multitud de respuestas obtenidas.

Para ello, es necesaria una buena estructura de contenidos, sencillez, preci-sión, utilizar la tecnología web adecuada, conseguir enlaces, etc.

sEO de Search Engine Optimization conlleva un posicionamiento orgánico o natural en buscadores. analizaremos este concepto en el último capítulo del li-bro (“Marketing de buscadores”), pero aquí introducimos los conceptos básicos para lograr una optimización adecuada.

Los motores de búsqueda (search engines) o buscadores son sistemas que rastrean internet e indexan la información encontrada cuando les pedimos in-formación sobre algún tema. Las búsquedas se hacen con palabras clave o con árboles jerárquicos por temas. El resultado de la búsqueda es un listado de direcciones web en las que se mencionan temas relacionados con las palabras clave buscadas.

Los search engines basan su trabajo en la gestión de bases de datos, en las que indexan o almacenan la información que encuentran en la World Wide Web. Para ello, dichos motores rastrean continuamente la Web mediante los hiperenlaces.

Los factores que valoran los buscadores cuando rastrean la Web son:a. Directos: tipología de búsqueda, popularidad de la página, formato del ar-

chivo, perfil de los usuarios, tamaño de la página, URL con los términos de búsqueda, título, descripción y palabras clave de la página web.

b. indirectos: estructura, accesibilidad, usabilidad y credibilidad.

todos estos factores conforman los elementos de merchandising on-line.Como se observa, la promoción on-line y la gestión de las 4 F s es el punto

de partida del merchandising on-line y, por tanto, de todo plan de atracción a un sitio web.

Es fundamental lograr una posición natural basada en técnicas de optimiza-ción para conseguir las primeras posiciones de los resultados de búsqueda.

�1e-Branding Desarrollo de un website con éxito

En sus inicios, esta posición natural se basaba en algoritmos de búsqueda de contenido. Pero desde 1996, con el nacimiento de Google, esta filosofía se sustituye por el algoritmo de búsqueda basado en la referencia, en donde el usuario es quien realmente decide cuáles son las primeras posiciones.

Esta filosofía tiene su origen en el PageRank, un sistema de clasificación de páginas basándose en la naturaleza democrática de la Web. El PageRank mide el valor de una página basado en la cantidad y calidad de enlaces que recibe e interpretando de este modo un vínculo como un voto.

así, con el nacimiento de Google, sus creadores, sergey brin y Larry Page 37, de la Universidad de stanford, descubrieron que el PageRank de su proyecto de investigación analizaba los enlaces entre páginas web. así, cuanto mayor fuera la WWW, mejor serían los resultados. Ello inspiró a que el proyecto se bautizase con el nombre de Google, en alusión a la palabra ‘googol’ (el número representado por un ‘1’ seguido de 100 ceros). En 1996 lanzaron públicamente la primera versión de Google bajo el dominio google.stanford.edu, que poste-riormente fue sustuido por google.com.

Recuerda que Google no sólo analiza el número de “votos”, sino también la calidad y autoridad de la página que emite el voto o enlace. Estas páginas,

3� “Historia de Google” en Google. Dirson, 2004. Disponible en: Internet en http://google.dirson.com/historia.php.

Elementos de merchandising convencional

Elementos de merchandising

en web

Disposición exterior del espaciode ventas

Cartelería Nombre del dominio

Entrada al establecimiento Promoción on-line y enlaces con webs

Rótulo Título de la página

Diseño interior del espacio de ventas

Disposición interna del espacio de ventas

Estructura web(Flujo)

Presentación del surtido Diseño del catálogo electrónico

Ambientación del punto de venta Funcionalidad y feedback

Merchandising de gestión Gestión del espacio del lineal Organización del

catálogo electrónico

Tabla 2.2. Elemento de merchandising on-line.Fuente: Elaboración propia, a partir de Marketing.com.


además de ser importantes, deben ser relevantes para la consulta del usuario, es decir, estar relacionadas con el contenido de tu sitio web. Por ello, de poco servirá un enlace de una página con autoridad si ésta no tiene relevancia en la búsqueda. Para saber el PageRank puedes instalarte la barra de herramientas de Google (www.toolbar.google.es) que muestra en color verde el valor de PageRank en una escala de 0 a 10 de la página que en ese momento visitas.

así, de basar los resultados según el contenido se pasa a mostrar los resulta-dos en función de las referencias que hacen los usuarios de sus websites. De este modo, a partir de la aparición de Google, la optimización ha dejado de priorizar aspectos como las keywords (palabras clave) para dar importancia al contenido real de cada página, dando una puntuación basada en la cantidad y calidad de enlaces que dirigen a esa página web.

Por tanto, además de respetar todos los consejos para optimizar tu web, es fundamental que ésta tenga referencias de calidad y otras técnicas que veremos en el capítulo relacionado con el marketing de buscadores, que entre otros as-pectos, te ayudará a mejorar el PageRank de tu website.

algunos consejos iniciales para la optimización son:– En lo relacionado con la disposición exterior, es fundamental que el domi-

nio y el título de tu página web representen lo que exponen. De hecho la etiqueta “title” (título) es la más importante de tu sitio web. El título ofrece a tu usuario una descripción de la página en la barra superior de su navega-dor y, además, es la frase que lee el usuario en los resultados de búsqueda, por ello debe resumir el valor de tu empresa. así, por ejemplo, si una página muestra un producto, nómbrala igual que el nombre de dicho producto y no con un código que lo represente. De este modo, los buscadores sabrán a qué hace referencia la página y tendrán más probabilidades de situarse en primeras posiciones. también te aconsejamos titular la página de entrada (home page) con el objeto de tu negocio, ya que éste será el que busque tu target en los buscadores, y nunca con un mensaje de bienvenida. Es decir, no titules tu home page con un mensaje genérico tipo “bienvenido a Mi em-presa”, sino con un mensaje que resuma el valor de tu negocio, por ejemplo: “muebles de diseño en valencia Miempresa”.

– En cuanto al diseño interior de tu website, debes analizar especialmente los aspectos de usabilidad y accesibilidad tan importantes para los motores de búsqueda. Por tanto, muestra tu contenido a través de enlaces de texto en un conjunto de directorios bien organizado y con formatos de páginas que el buscador pueda leer y almacenar. Es decir, además de cuidar el contenido de tus páginas, especialmente aquél mostrado mediante vínculos o negritas, es necesario que cuides el nombre de las carpetas y archivos de tu website, ya


que éstas determinan el directorio. Por último, recuerda redactar keywords adecuadas para tu objeto de negocio 38.

– Por último, en cuanto a la gestión y organización de tu sitio, te aconsejamos la creación de un fichero sitemap. trata de representar el mapa de tu sitio web en un fichero que indique las páginas importantes y la frecuencia con que se actualizan. En este sentido, Google ofrece a los webmasters un canal (www.google.com/webmasters) que, entre otros aspectos, aporta un ge-nerador de archivos sitemap. ten en cuenta que en ningún caso el sitemap sustituye a los robots de los buscadores que rastrean todo tu site mediante los hipervínculos. Con este fichero ofreces una ayuda al buscador para que indexe más información. El fichero puedes crearlo con la herramienta de Google y lo deberás guardar en el servidor de tu site. Un segundo fichero que puede ayudar a los buscadores cuando rastrean tu sitio es “robots.txt”. En este fichero simplemente indicas qué páginas de tu sitio quieres que se indexen y cuáles no.

antes de que Google se conociese por todo el mundo, Yahoo!, nacido en 1995, se convertía en el portal más popular. Yahoo! basaba su estructura en un directorio en donde toda la información se clasificaba por categorías. Pos-teriormente el directorio se ha ampliado ofreciendo servicios de webmail, foros, mensajería instantánea, etc. Lo que hace que actualmente sea, junto con MsN, el portal más visitado.

Live.es (conocido hasta el 2006 como MsN) también ha entrado en esta lucha por el liderazgo en el mercado de los search, ofreciendo un buscador que aglutina el uso de otros servicios en línea como Office, hotmail y Messenger.

38 Existenprogramasqueayudanaredactaróptimamentetuskeywords,porejemplowww.goodkeywords.com.

CASO LANZAmIeNTO WINDOWS LIVe meSSeNgeR 2006

La estrategia publicitaria para el plan de atracción de Messenger en el lanzamiento de su nueva versión en 2006, así como la estructura del sitio promocional, tuvo los siguien-tes objetivos:– Destacar valores emocionales de Messenger: comunicación, compartir, diversión e in-

mediatez. Es divertido, fácil de manejar. Es gratuito.– Conocimiento de que nace un nuevo Messenger más personalizable.

El posicionamiento de la promoción era mostrar una ventana para escaparte: “estar conectado y libertad de elegir con quién y cuándo hablas”. Para personalizar tu comu-nicación con el resto; para expresar sentimientos, lo que haces, lo que escuchas, cómo eres realmente.

Se crea una PROMO EMOTICONOS bajo el concepto “Plántale cara al nuevo Windo-ws Live Messenger” y basada en un ¿QUIÉN ES QUIÉN?

La PROMO era un concurso en el que se decidía por votación popular cuál era el mejor pack de emoticonos y el mejor emoticono realizado por los propios usuarios.

Los emoticonos no eran los típicos smilies amarillos, sino caras reales con una pequeña aplicación para editar, retocar y transformar las fotos. Era fácil resaltar los rasgos más carac-terísticos de cada emoticono en la cara de una persona. Además se podían incluir elementos que hicieran más divertidas las imágenes: un bigote, unos labios, un lazo, un parche, unas pestañas, una gorra, etc.

Para participar se necesitaba un mínimo de tres fotos y un máximo de siete. Se podían subir de dos formas: examinando el disco duro o haciéndolas en el acto por

medio de una webcam.Se trataba de imitar las expresiones de los emoticonos, pero de una forma más perso-

nal, con tu cara para el emoticono feliz, la de tu padre para el emoticono gruñón, etc. A cada emoticono le podías asociar un comentario que lo personalizara aún más.

Al subir tus fotos, podías votar emoticono por emoticono. Así, el mejor pack sería aquel que más votos reuniera por sus emoticonos.

Boceto web Imitaemoticons World Championship

Estructura del Imitaemoticons World Championship.

Flowchart web Imitaemoticons World Championship.

Fuente: Interactive McCann.


2.2. Principios de diseño en internetEn los inicios de la Web, para crear una página se necesitaba conocer el código htML. Con la aparición de los editores WYsiWYG (What You See Is What You Get) se ha facilitado el diseño web para profesionales que no necesariamente deben ser informáticos. WYsiWYG son programas como Dreamweaver (adobe Macromedia) y Front Page (Microsoft). Ello ha posibilitado el acceso de nuevos profesionales al web team o equipo de desarrollo web formado actualmente no sólo por informáticos, sino también por diseñadores, publicitarios, arquitectos de información, etc.

Los principios de diseño web hacen referencia a una serie de parámetros para lograr que tu sitio web sea lo más eficaz posible tanto para tu público, como para los buscadores.

Dichos principios, siguiendo a Lynch y horton39, deben respetar normas bási-cas que afectan a las cuatro áreas de diseño web tal y como se ve en la tabla 2.3.

2.2.1. diseño de la interfaz: la navegación

Las páginas web son un tipo de interfaz gráfica de usuario que incorporan una secuencia funcional de interacciones que proporciona la apariencia del documento final de hipertexto.

Las interfaces de navegación deben ayudar a responder a tres preguntas:1. Dónde estoy. La ubicación actual del usuario debe mostrarse a dos niveles:

– En relación con la web como un todo: todas las páginas web se parecen desde la perspectiva del usuario. Por tanto, las interfaces de navegación

39 Lynch,P.yHorton,S.,Principios de diseño básicos para la creación de sitios web.GustavoGili,Madrid,2000.

Áreas Objetivos

Diseño de la interfaz Navegación en el sitio web

Diseño del sitio Estructura del sitio web

Diseño de la página Disposición de la página web

Diseño del contenido Redacción web e imagen digital

Tabla 2.3. Principios de diseño en Internet.Fuente: Lynch y Horton.

��e-Branding Desarrollo de un website con éxito

de tu sitio web deberán ser similares al resto de páginas en internet (estudios de J. Nielsen demuestran que los sitios con interfaces distintas molestan al usuario). además, para distinguir nuestro sitio del resto debemos situar el logo siempre visible.

– En relación con la estructura del sitio: ofrecer estructuras de navegación del sitio que nos señalen dónde estamos.

2. Dónde he estado. hacer buen uso del botón “atrás” y de los colores de los vínculos, distinguiendo vínculos visitados de los que no lo han sido.

3. Dónde puedo ir. Fomentar vínculos internos.

según J. Nielsen, las guías de diseño de la interfaz que orientan la navega-ción del usuario son nueve:a. Desarrollar ayudas claras para la navegación. implica dar sentido de orien-

tación dentro de la arquitectura de información del sitio. Para ello, utiliza iconos claros, diagramas gráficos de identidad, mapas web, buscadores in-ternos y una barra de navegación.

b. Evitar páginas “callejón sin salida”. toda página debe tener enlaces a otras. icono de volver a página principal, ir adelante o hacia atrás.

c. Facilitar al usuario un acceso directo a la información. Construir una jerar-quía de información eficiente, evitando el mayor número de clics (no más de tres) para encontrar lo buscado. además, las opciones de menú no deben contener más de siete ítems.

d. Diseñar con simplicidad y consistencia. Los mejores diseños de información son los que pasan desapercibidos. basa tu diseño en un patrón de unida-des modulares que compartan una misma retícula base (encabezamiento), los mismos temas gráficos (menú y marca) e idéntica organización de la información. se trata de crear un menú o encabezamiento que haga que el usuario se olvide de la estructura de la página al sentirse cómodo y seguro en su navegación.

e. Ofrecer integridad y estabilidad en el diseño. Comprobar el correcto funcio-namiento de enlaces internos y externos.

f. Fomentar el diálogo y retroalimentación. Los enlaces y botones deben ser consecuentes con lo que el usuario espera, confirmando visual y funcio-nalmente sus movimientos. además, siempre debe existir la posibilidad de retroalimentarse con el editor web mediante enlaces de correo.

g. adaptarse al usuario. Chequear los diseños en diferentes navegadores, como Explorer o Mozzila; en pantallas con resolución diversa, como 1.024 × 768 o 1.280 × 1.024; en plataformas de PC/MaC; y en pantallas con diversas paletas de colores.

e-Branding Posiciona tu marca en la red��

h. transmitir el contexto al usuario. Proporcionar claves para situar el contex-to sin necesidad de scroll o desplazamiento y en un solo vistazo. Crear una barra de navegación idéntica para todas las secciones en la parte superior con las opciones anterior, inicio y siguiente.

i. Considerar a usuarios discapacitados. Para lo que te recomendamos crear una versión accesible, no abusar de elementos de Flash, usar mensajes alter-nativos (atributo aLt) para las imágenes, describir las tablas y evitar el uso de marcos.

Gráfico 2.3. Resoluciones de pantalla más comunes en 2007.Fuente: Navegantes en la Red (AIMC).

Gráfico 2.4. Navegadores más usados en España en 2007. Fuente: Navegantes en la Red (AIMC).

��e-Branding Desarrollo de un website con éxito

2.2.2. diseño de la estructura: el sitio

según Nielsen, los principios para mejorar el diseño de la estructura del sitio deben seguir unas normas desde la página de inicio. La home page debe:– Fomentar la navegación clara con un directorio de las principales áreas de

contenido del sitio.– Ofrecer resúmenes de noticias de actualidad y promociones más importantes.– incorporar opciones de búsqueda, como botones, buscador interno, etc.

Evita la inserción de intros o animaciones iniciales que dan la bienvenida al usario y que, por tanto, retardan que pueda encontrar la información que le interesa cada vez que acceda al site. asimismo, es recomendable no insertar las páginas en construcción en el sitio web hasta que no estén terminadas. Las se-ñales de construcción son motivo de molestia para el usuario, ya que defraudan sus expectativas.

Para facilitar la navegación al usuario y la consecución de sus objetivos exis-ten varios elementos de navegación. Los breadcrumbs son caminos que indican al usuario el punto de su navegación. Normalmente tienen esta estructura:

Estás en: inicio > Empresa > Productos > Muebles. Los breadcrumbs o “migas de pan” suelen situarse en la parte superior de la

web, a modo de camino indicativo de la navegación del usuario.Otros elementos de orientación pueden ser los botones “adelante”, “atrás” e

“inicio”, el mapa del sitio web, etc.

Gráfico 2.5. Equipo a través del que se conecta en 2007.Fuente: Navegantes en la Red (AIMC).


Los usuarios pasan la mayor parte de su tiempo visitando otras webs, lo que quiere decir que les será más fácil navegar por la web diseñada cuánto más se parezca ésta al resto de páginas web de internet.

Por tanto, en las páginas interiores, el nombre del sitio (logo de la empresa) debe situarse en la esquina superior izquierda y debe repetirse en todas las pá-ginas interiores, de modo que sea un enlace a la home page. si la home se centra en dar la bienvenida y ofrecer una panorámica del sitio, las páginas internas deben centrarse en el contenido específico.

Debe fomentarse la vinculación profunda, es decir, permitir que otros sitios señalen a los usuarios al punto exacto de nuestro sitio. Esto facilita al usuario encontrar más rápidamente la información de su interés. Es lo que proponen los programas de afiliados dedicados al comercio electrónico. Por ello, deter-minados enlaces de algunas páginas o campañas de e-mail marketing te dirigen directamente a un micro site promocional concreto (seat León) y no a la página web corporativa (seat). De este modo, puedes medir eficazmente el resultado de tus campañas y mejorar las expectativas de tus usuarios.

Existen dos diseños de navegación que muestran de dos modos distintos todos los niveles de estructura del sitio:– Los que acentúan la anchura. se diseñan con una banda en la parte izquier-

da de la página. su ventaja es que recuerdan constantemente los servicios de la web.


– Los que acentúan la profundidad. La inserción de “migas de pan” en la parte superior muestra la jerarquía del sitio desde el inicio hasta los niveles de la página actual (inicio>Cursos>Diseño>inscripción).

también puedes optar por un modelo mixto que inserte menús superiores con “migas de pan” y menús a la izquierda de la página. Este tipo de estructura se da en páginas de organizaciones complejas que requieren varios niveles de estructura de información. En tal caso, debes indicar claramente a tus usuarios, cuál de los dos menús es el más importante, cuál depende de cuál.

Por último, el diseño del sitio debe gestionar todas las opciones de búsque-da posible. Estudios de usabilidad muestran que el 50 por ciento de los usuarios se decanta por la búsqueda, una quinta parte por los vínculos y el resto exhibe una conducta mixta. Esto se debe a que el usuario está centrado en la tarea, no en mirar el sitio.

2.2.3. diseño de la página: la disposición

La página web debe despertar la atención del usuario a través del contenido. hay sitos que destinan más espacio a la navegación que a la información que hizo que el usuario lo visitara. Como norma, el contenido debe ocupar al menos el 50 por ciento de la página, y preferiblemente el 70 por ciento. La navegación, el 20 por ciento de las páginas de destino, aunque más en la inicial y en las intermedias.

El diseño debe adaptarse para todas las resoluciones, navegadores y plata-formas. El principio básico del diseño, independiente de la resolución, implica evitar un ancho de píxeles fijo y emplear diseños por porcentajes para que se adapten a la pantalla del usuario.

Existen varios factores en la lentitud de la descarga: rendimiento del ser-vidor, conexión del servidor con internet, conexión del usuario con internet, velocidad del navegador y del PC. Para disminuir el tamaño de las páginas, reduce los gráficos a su mínima expresión e incluye efectos multimedia sólo cuando contribuyan a la comprensión de la información. asimismo, la adición de barras finales a los enlaces reduce la demora: www.uch.ceu.es/ntic/.

además de los hipervínculos situados en el texto en palabras clave o asun-tos que pueden ampliarse mediante la consulta de otras páginas, un elemento muy importante en el diseño de las páginas web es el uso de elementos iconográ-ficos asociados a enlaces. Este tipo de iconos se denominan barras de navegación y suelen aparecer en un lugar fijo en todas las páginas.


Existen tres tipos de vínculos hipertexto:1. incrustados: tratan de ampliar la información del tema (“ver más info”).

aunque, a la hora de redactar este enlace, es más recomendable hacerlo del siguiente modo: “Cv del sr. González”. así incluye las palabras clave en el enlace y, por tanto, mejora el posicionamiento natural en buscadores.

2. Estructurales: señalan otros niveles de la estructura del sitio. Por ejemplo, “subir un nivel”. En este caso es más recomendable redactar: “subir a la familia de productos de nieve”.

3. asociativos: ofrecen pistas a los usuarios de temas relacionados con la pági-na visitada que pueden interesar al usuario: “véase también”.

2.2.4. diseño del contenido

J. Nielsen 40 expone las directrices principales para escribir en la web:1. ser sucinto. Leer en pantalla es un 25 por ciento más lento que en papel,

por lo que no hay que escribir más de la mitad del texto que se habría usado en publicación impresa. Empieza eliminando el 50 por ciento del texto que incluyas en tus folletos. si deseas publicar toda la información en tu web, debes estructurarla de modo que en la página se muestre la relevante para el usuario y el resto, estructurada en diferentes apartados.

2. Escribir para poder encontrar las cosas. Los usuarios hojean el texto y se-leccionan palabras claves saltándose párrafos sin importancia. Por tanto, no hay que obligar al usuario a leer bloques de texto enteros: utiliza párrafos cortos, subencabezados y listas con viñetas.

3. Utilizar hipertexto para dividir la información extensa en múltiples páginas.

Por tanto, tu forma de escribir en la web debe huir de la estructura pro-mocional y fomentar el lenguaje objetivo, el diseño con la facultad de ojeado (facilita el ojeado con listas, secuencias gráficas, etc.) y el texto conciso.

algunas recomendaciones para mejorar la redacción web son:– Estructurar artículos con dos o tres niveles: titular, encabezados y subenca-

bezados.– Redactar encabezados significativos en vez de atractivos para que indiquen

al usuario lo que encontrará en dicha sección.– Utilizar listas con viñetas para detener el flujo de bloques de texto uniforme.– Utilizar resaltados y énfasis para que las palabras importantes se retengan.

Las anclas de hipertexto deben ir subrayadas.

40 Nielsen,J.,op. cit.,pp.�5yss.


– Presentar el material en la web utilizando el “principio de la pirámide inver-tida”. Es decir, mostrando las conclusiones al principio para que el usuario sepa qué va a encontrar. Esto es necesario debido a las ocasiones en que un usuario encuentra nuestros textos fuera de la web (su contexto) y los visua-liza en los resultados de un buscador.

– abreviar el texto sin sacrificar la profundidad de contenido, dividiendo la in-formación en múltiples nodos conectados por hipervínculos. La estructura de hipertexto debe basarse en un análisis de audiencia. Es decir, divide los temas según el interés del lector evitando expresiones como “Continúa en la pág. 2”. Para ello, divide la información en fragmentos coherentes y por temas.

– Diseñar páginas cortas para asegurarse de que los vínculos más importan-tes estén visibles en los monitores más comunes, sin llegar a ningún tipo de desplazamiento o scroll.

– Redactar titulares breves y claros. Los titulares en línea tienen dos peculia-ridades: suelen mostrarse fuera de su contexto (por ejemplo, en resultados de buscadores) y son más difíciles de leer al mostrarse en pantalla. Ello hace que el texto del titular tenga que tener sentido aunque el resto del contenido no esté disponible. algunas directrices para asegurarte de que el titular sea descriptivo son: explicar claramente de qué va el artículo en términos que se relacionen con el usuario, ser breve evitando artículos y mover los térmi-nos provistos de información al principio del titular para empezar con una palabra que coincida con los intereses del usuario.

– asegurar la legibilidad empleando colores que tengan contraste entre el tex-to y su fondo (la legibilidad óptima requiere texto negro sobre fondo blanco, es el texto positivo), utilizar fondos de colores claros, fuentes grandes. trata de evitar texto en movimiento y el uso de mayúsculas ya que ralentiza la lectura un 10 por ciento.

creación website con éxito

Documents