internetización

1

internetización

2

internetización

Internetización

Gemma Ferreres

3

internetización

© 2011 Gemma Ferreres1ª ediciónISBN: 978-84-9981-718-7DL: M-21314-2011 Impreso en España / Printed in SpainImpreso por Bubok

4

internetización

A los blogueros y tuiteros

5

internetización

6

internetización

ÍndiceIntroducción...................................................................................................9

Creación de sitios web.................................................................................11

Análisis y fuentes de información............................................11

Arquitectura de información...................................................17

Diseño.....................................................................................35

Maquetación............................................................................53

Programación y plataformas....................................................63

Contenidos...............................................................................68

Gestión y mantenimiento........................................................81

Analítica web...........................................................................85

Control de calidad (estándares web, usabilidad, accesibilidad )..........91

Comunicación y promoción de sitios web....................................................99

Comunicación y Relaciones Públicas........................................99

Publicidad (display, SEM, e-mail, móvil)................................111

Posicionamiento en buscadores (SEO)...................................123

Social Media Marketing (SMM).............................................129

Comienza tu propio proyecto....................................................................133

Internet en España y en el mundo.........................................133

De la web 2.0 a la web2 .........................................................140

7

internetización

Modelos de negocio ..............................................................142

Legislación aplicable..............................................................148

Emprendedores.....................................................................150

¿Y ahora qué? Últimas tendencias.............................................................155

Internet en el móvil...............................................................155

The Cloud (la nube)................................................................159

Web semántica o web 3.0......................................................160

Mundos virtuales y 3D...........................................................162

La autora....................................................................................................165

8

internetización

Introducción

Muchos usuarios de internet, cuando tienen que diseñar una web para su empresa o definir una estrategia de social media no disponen de información suficiente para tomar decisiones. ¿HTML? ¿CMS? ¿SEO? Multitud de siglas y conceptos han surgido en internet en la última década. Internetización pretende arrojar luz y presentar de un modo conciso y didáctico respuestas a las principales dudas que encuentra un profesional o un recién graduado cuando se enfrenta a su primer proyecto online.

El libro está organizado en cuatro grandes bloques:

Creación de sitios web describe las principales tareas que realizan los profesionales que construyen un sitio web, desde la recogida de información inicial hasta la elección de la plataforma más adecuada pasando por la arquitectura de información, el diseño gráfico o la maquetación.

Promoción de sitios web se ocupa del marketing y la comunicación en estos nuevos tiempos, en los que figuras como Facebook y Twitter se han sumado a los ya complejos mundos del SEO y el SEM, revolucionando la forma de vender y promocionar nuestros productos. Todo ello, sin olvidar la importancia de medir nuestros progresos a través de la analítica web.

Comienza tu propio proyecto es el capítulo en el que el lector, una vez conocidos los pasos que debe seguir para crear una web, encontrará información sobre el sector internet en el mundo y sobre la pujante comunidad de emprendedores, que le animará a lanzar sus iniciativas.

Por último, el bloque ¿Y ahora qué? Últimas tendencias, resume brevemente algunos sectores que se espera que experimenten un gran crecimiento en los próximos años, como el cloud computing o el ya potente mercado de internet en el móvil.

Dicho esto, te invitamos a leer Internetización y a dar tus primeros pasos en el mundo profesional de internet.

9

internetización

10

internetización

Creación de sitios webAnálisis y fuentes de información

Un profesional, al iniciar un proyecto, necesita mucha información. Sólo de esa forma sus decisiones estarán fundamentadas. No podemos diseñar una tienda online, por ejemplo, sin saber cuál es el producto más demandado o qué artículo se desea promocionar esta temporada. Por ello, la fase previa de cualquier proyecto será la recopilación de información. Ésta se encontrará en manos del cliente, si trabajamos en una agencia, o de un directivo, si somos el departamento de desarrollo web de una empresa o, tal vez, la conozcamos de primera mano si se trata de nuestro negocio.

Las principales fuentes de información a explotar suelen ser:

• estadísticas del sitio web, si ya existía previamente

• informes externos generales y específicos sobre la temática

• informes internos generales y específicos sobre la temática

• entrevistas con clientes y usuarios (focus group, tests de usuarios...)

• entrevistas con proveedores

• entrevistas con empleados

• investigaciones ad hoc

• cualquier otra de la que dispongamos: material audiovisual, folletos, reporting, memorias, merchandising...

Analizaremos toda la información y prepararemos un informe de conclusiones con recomendaciones que guiarán el enfoque del sitio web. Ya sabremos, por ejemplo, cómo es nuestro público y si nuestros usuarios se conectan por las mañanas o por las tardes, si entran una vez a la semana o al mes, si quieren recibir boletines o no y cómo dar respuesta a sus necesidades y demandas.

11

internetización

Asimismo, conoceremos:

• Objetivos

• Competencia

• Referentes

Objetivos

Los objetivos son las metas que queremos alcanzar con el diseño de la web. Deben ser sólo unos pocos y medibles. Por ejemplo: vender más zapatos. Los objetivos están íntimamente relacionados con la estrategia y el posicionamiento de nuestra empresa o proyecto. Si nos posicionamos como “tu pedido en casa en 24 horas” las decisiones se verán condicionadas por esta realidad y tendremos que dejar en un segundo plano otros servicios o ventajas para el usuario.

Competencia

El análisis de la competencia es inevitable realizarlo para conocer en qué grado de avance se encuentran los demás actores de mi segmento y valorar si podemos superarlos o al menos igualarlos. El benchmark es el instrumento más extendido de análisis de la competencia. Usualmente, consiste en un listado de contenidos y funcionalidades de los competidores que nos permite conocer cuál es el más avanzado o rezagado y en qué posición nos encontramos nosotros.

Referentes

Complementario al análisis de la competencia es el de los referentes, muy importante en internet. Pueden existir negocios web que no tengan mucho en común con mi empresa pero de los que pueda extraer aprendizajes. Google, Apple, Amazon y otros gigantes suelen ser ejemplos de buenas prácticas.

12

internetización

Fuentes de informaciónGracias a internet, la tarea de recopilar información se ha vuelto mil veces más sencilla que hace 15 ó 20 años. Aún así, hay que saber buscar y manejar algunas fuentes de referencia, las revisaremos según un doble criterio:

• Públicas y privadas

• Generalistas y especializadas

Dejaremos para más adelante, en el capítulo Analítica web, los sistemas de estadísticas internos y nos centraremos ahora en las fuentes externas.

Los organismos públicos son grandes fuentes de información. Continuamente generan ingentes cantidades de datos de dominio público. Suscribirse a las notas de prensa del Instituto Nacional de Estadística (INE) es altamente recomendable. El INE publica datos demográficos, económicos, sectoriales de todo el país segmentados por Comunidades Autónomas e incluso por edades, sexos, etc.

Los Ministerios son otra fuente privilegiada de información. Resulta muy útil recibir las noticias que emiten los más afines a nuestro sector de actividad: turismo, telecomunicaciones, sanidad, energía... Los Ministerios, así como los organismos públicos, generan periódicamente extensas memorias que recopilan toda la información sobre un sector. Es conveniente bucear en sus webs cada cierto tiempo para ver si hay novedades.

Además de la Administración central también las autonómicas y locales disponen de webs en la que publican documentación de utilidad para cualquier emprendedor: desde modelos de planes de negocio al formulario para solicitar la apertura de un local.

Una fuente constante de información son los estudios y papers que publican consultoras y asociaciones. En parte para su propia promoción y en parte por vocación de servicio, cada cierto tiempo ven la luz investigaciones sobre los más variados temas. Uno de los informes más consolidados es Navegantes en la Red de la AIMC, se publica anualmente y en sus casi doscientas páginas desgrana el perfil de los usuarios de internet punto por punto. Es de elaboración propia, por lo que estamos ante datos primarios. Estudios

13

internetización

destacados basados en datos de terceros son, por ejemplo, el informe eEspaña de la Fundación Orange o La Sociedad de la Información en España que edita la Fundación Telefónica. El organismo público Red.es, por su parte, a través del ONTSI (Observatorio Nacional de las Telecomunicación y la Sociedad de la Información) elabora numerosos estudios generales y sectoriales como el Perfil del internauta o el informe anual La Sociedad en Red.

OJD interactiva es una fuente muy valiosa en el ámbito de los medios online ya que certifica la audiencia de decenas de sitios web. Es posible que tus principales competidores sean auditados por OJD y por tanto sea sencillo conocer sus datos de tráfico.

Además de estos prestigiosos estudios de tipo genérico, las agencias y consultoras publican a menudo informes específicos sobre su área de especialización. Así por ejemplo, existen, análisis sobre internet en el móvil, publicidad en internet, SEO, banca online, accesibilidad, navegadores más usados, social media...

Los estudios a los que tenemos acceso no se limitan al ámbito nacional. Eurostat ofrece estadísticas a nivel europeo; la Unión Internacional de Telecomunicaciones (UTI), a nivel mundial. Comscore o Pew son entidades respetadas que emiten periódicamente informes que sirven de referencia para muchos gerentes.

Como no podía ser de otro modo, internet también permite el “sírvase usted mismo”. Google aporta numerosas herramientas gratuitas de análisis, como Google Insights, que permite comparar la popularidad de uno o varios términos a lo largo del tiempo, por países etc.

Las fuentes de información que hemos venido citando son todas gratuitas pero algunas tienen modalidad de pago, lo que permite el acceso a funciones más avanzadas o potentes, o directamente son de pago. Forrester o Nielsen NetRatings son algunos de los servicios que nos pueden proporcionar información de pago.

14

internetización

Captura de pantalla de Google Insights

15

internetización

Podríamos citar muchas más fuentes: Infoadex para datos de inversión publicitaria, CMT para transacciones con tarjeta de crédito, incluso los diarios digitales o cualquier blog pueden contener informacion valiosa. En definitiva, el mensaje que queremos transmitir es que no debemos descansar hasta tener identificadas las fuentes de información más apropiadas para nuestros intereses: sean públicas o privadas, generales o específicas de nuestro sector, gratuitas o de pago. Y no olvidemos suscribirnos y consultarlas ya que estar al día es fundamental en un sector tan cambiante como internet.

Una vez finalizada la etapa de recogida y análisis de información estamos listos para iniciar propiamente el proyecto, diseñaremos un cronograma con las fases del mismo, tiempos estimados para cada tarea, recursos humanos y técnicos que vamos a dedicar, hitos que cumplir, reuniones de seguimiento y todo aquello necesario para que el proyecto llegue a buen puerto.

16

internetización

Arquitectura de información

Si hay algo que caracteriza a internet es precisamente su multidisciplinariedad: arquitecto de información, diseñador gráfico, maquetador web, programador, periodista, community manager, consultor de negocio, jefe de proyecto... todos ellos participan en la creación y mantenimiento de un sitio web. Comenzaremos refiriéndonos al primero de ellos.

La arquitectura de información (o de contenidos) se nutre de diversas disciplinas:

• Biblioteconomía y Documentación

• Periodismo

• Psicología

• etc

De la Documentación toma el sentido de la organización y clasificación de la información para facilitar su acceso posterior. Del Periodismo, su capacidad para comunicar. De la Psicología, el conocimiento sobre los procesos mentales y cognitivos de los usuarios. No obstante, muchas otras fuentes de saber son aplicables: diseño visual, diseño industrial, sociología...

Y muchas dosis de sentido común, de horas frente al ordenador, el móvil, peleándose con la interfaz del GPS del coche o buscando el botón de encendido del mando a distancia del aire acondicionado.

Ser observador, detallista y tener empatía para ponerse en el lugar de los demás también ayudan.

Al inicio del proyecto, el arquitecto de información dispone de todos los datos obtenidos durante la fase de recogida de información. Está en condiciones de saber cuáles son los objetivos del sitio, el público al que va dirigido, los contextos en los que va a ser usado, etc. Esta aproximación metodológica es válida tanto si lo que va a diseñar es una web como una aplicación para móvil o para iPad. Lo que no será similar son los casos de uso: no es lo mismo consultar información desde el móvil mientras esperas el tren que cuando

17

internetización

estás sentado frente al ordenador. Todo ello afectará a las decisiones de diseño que tomemos.

Imaginemos que el arquitecto de información (AI) tiene ante sí un listado con los contenidos y funcionalidades de las que dispondrá el sitio web. Sus tareas consistirán en organizar la información y distribuirla visualmente.

Organización de la informaciónPensemos por un momento que nuestra web es una casa. Antes de empezar a construirla deberemos contar con unos planos. El equivalente en diseño web sería el árbol de contenidos, que es el documento o entregable que generará el AI en esta fase del proyecto.

Un ejemplo de árbol de contenidos es el que vemos en el gráfico adjunto y que corresponde a la web de Inditex.

18

internetización

19

internetización

La arquitectura de información de los sitios web más comunes se ha ido estandarizando y las secciones en webs del mismo sector suelen ser las mismas. La de Inditex responde a la de una empresa que cotiza en bolsa, de ahí la pestaña con Información para accionistas e inversores o la dedicada a la Responsabilidad Social Corporativa (RSC). Si dispones de un análisis de la competencia (benchmark) habrás comprobado estas similitudes.

El árbol de contenidos, en la mayoría de los casos, es una estructura ramificada compuesta de una home, varias subhomes y numerosas páginas finales. La forma en que agrupemos los contenidos en secciones o, dicho de otra forma, las páginas en subhomes puede ser muy variada. Imaginemos que los contenidos son productos de una tienda online. Podemos organizarlos:

• por marcas (Nokia, Apple, Samsung...)

• por categorías (hombre, mujer, jóvenes, niños...)

• por fechas (2012, 2011, 2010...)

• Incluso en algún caso puede tener sentido el orden alfabético

Será nuestra tarea determinar qué clasificación es la más adecuada.

En algunas ocasiones, en lugar de a un árbol de contenidos, nos enfrentaremos a un proceso, por ejemplo, una compra o un alta de usuario en un registro. En tales casos, generaremos un diagrama de flujos en el que se plasmarán los distintos pasos que hay que atravesar hasta completar el proceso y las decisiones que habrá que tomar durante el mismo.

Distribución visual de la informaciónLos planos de nuestra casa no estarán completos sin el prototipo o wireframe. El wireframe es un dibujo de la interfaz de la web que estamos diseñando. En él distribuimos visualmente los componentes de cada tipo de página.

Un sitio web habitualmente cuenta con tres tipos básicos de página:

• Home, también llamada portada o página de inicio

• Portadilla o subhome

• Página interior, destino o ficha

20

internetización

Un 80% de las webs se pueden construir con este modelo tan simple.

La home es el equivalente a la portada de un libro o la primera plana de un periódico, ambos modelos pueden servirnos. El ejemplo de portada de libro es apropiado para webs con un único mensaje. En cambio, para webs con muchos contenidos y de actualización frecuente es más adecuado un modelo de “primera plana”.

La home debe identificarse como tal al primer vistazo. Esto se consigue con recursos como: mayor tamaño de la marca o predominio de la imagen.

En la home deben tener cabida todas las áreas de contenidos de la web pero, para evitar que esto sobresature la página es preciso utilizar principios y recursos como:

• jerarquización: dar mayor tamaño y visibilidad a los contenidos más importantes o que convenga destacar

• rotación: si todo no puede estar en la home, definir un calendario de rotaciones para los contenidos que queramos comunicar

• priorización: decidir qué es más importante en cada momento

• actualidad: un contenido secundario puede convertirse en relevante por el hecho de ser noticia

Si tenemos usuarios o clientes que visitan la página a menudo podemos tomarnos algunas libertades y dar menos peso a la presentación, pues ya nos conocen y mostrarles más contenidos que al usuario que nos acaba de conocer. Esta dualidad, en todo caso, siempre se va a producir, por lo que siempre tendremos en cuenta a ambas tipologías de usuarios al plantear una web.

Las subhomes son las portadas de las secciones o canales de la web. Mientras que la home es única y alberga contenidos de todas las áreas de la web o la compañía, las subhomes son temáticas, es decir, la subhome del canal de Deportes de un periódico únicamente recoge contenidos deportivos. Puede haber varios niveles de subhomes; siguiendo con el mismo ejemplo, el canal de Deportes puede contener varias subsecciones: Fútbol, Baloncesto, Ciclismo, F1, etc.

Es aconsejable que las subhomes sean muy operativas. Resulta tedioso para el lector tener que atravesar portada tras portada hasta

21

internetización

llegar al contenido. Esto se consigue evitando mensajes estáticos y publicando directamente en la portadilla los contenidos. Por ejemplo, en la sección “Trabaja con nosotros” de una web lo más lógico será publicar las ofertas de empleo en vigor y no una serie de enlaces a: ofertas de empleo, política de RRHH, envía tu CV. Todos estos contenidos deben aparecer pero de la forma más eficiente posible.

Por último, tenemos la página interior. En número es la más importante, porque en un sitio web hay una home, varias subhomes (o ninguna puesto que no son obligatorias) y cientos o miles de páginas finales de contenidos. Son equivalentes a la noticia o ficha de producto. Un sitio web periodístico tendrá como destino final de la visita de cada lector a la página de una noticia y un sitio web comercial deseará que el usuario se dirija a la ficha de un producto y pulse el botón de “comprar”.

En esta fase del proyecto ya dispondremos de un set de plantillas o tipologías de páginas más algunas complementarias como la de la página de contacto o de la nota legal.

Un concepto importante al hablar de páginas es la estandarización. Tenemos que ver las tipologías de páginas como los lineales de un supermercado, en los que cambia el contenido, no el continente. En diseño web cambiar el contenido de una página es muy sencillo, basta con sustituirlo, pero modificar el “contenedor” es complejo, ya que afecta a la programación. Por ello, hay que identificar los tipos de página y convertirlos en “plantillas”. Así, tendremos la plantilla “home”, la plantilla “subhome”, la plantilla “noticia” y varias plantillas más para otros usos. El proceso de estandarización significa que cada página de noticia seguirá el patrón de la plantilla “noticia” y estará compuesta por los mismos elementos o campos. Por ejemplo:

• titular

• antetítulo y/o subtítulo

• entradilla

• texto

• imagen o imágenes

• vídeo(s) embebidos

• pie de foto

• autor

22

internetización

• fecha de publicación y de última actualización

• documentación relacionada (ej: pdf completo de un informe)

• opción imprimir

• comentarios de los lectores

• opción compartir en Twitter

• opción compartir en Facebook

• y los demás que definamos

El conjunto de bocetos de las distintas tipologías de páginas forman el wireframe o prototipo. Éste puede ser estático o puede estar construido en HTML y ser navegable como si de la web final se tratara. Para diseñarlo existen programas como Axure que facilita la creación de prototipos navegables incluso si no sabes programar. La maqueta navegable es especialmente útil en la fase final de desarrollo, una vez cerrado el diseño gráfico, para testarla con usuarios finales antes de programarla.

Ejemplo de página de un prototipo:

23

internetización

24

internetización

Al diseñar un prototipo es preciso seguir una serie de principios. Son muy útiles tanto los principios básicos de diseño, que veremos en el siguiente capítulo como los principios del diseño de interacción, que exceden los límites de este manual pero sobre los que encontrarás abundante información en internet.

Navegación e interacciónSería imposible enumerar todos los componentes de un sitio web pero dedicaremos unas líneas a algunos tan importantes como la navegación, el buscador y los enlaces y botones de acción.

El menú de navegación es el elemento de un sitio web que permite desplazarnos de una sección a otra. Podríamos compararlo con el ascensor de un edificio, que te permite subir de una planta a otra o directamente a una en concreto. Sirve también para transmitirnos una idea de la dimensión y contenidos del sitio: si tiene 5 ó 25 secciones, sobre qué temáticas, etc.

Tradicionalmente el menú de navegación más usado era el vertical lateral. Se ubicaba generalmente a la izquierda de la página, inutilizando dicha zona para la publicación de otros contenidos. Este tipo de menú, no obstante, ha desaparecido, en buena parte, porque no se correspondían con los patrones de navegación de los usuarios.

El modelo que se ha impuesto es el de navegación horizontal superior en uno o dos niveles. Su gran ventaja es que libera todo el espacio de la página para contenidos. Una variante de este tipo de navegación es el menú horizontal desplegable.

Ejemplo de navegación horizontal en la web de Apple

25

internetización

El segundo nivel de navegación, es decir, las subsecciones, puede desplegarse horizontal o verticalmente, aunque si es posible utilizarla, es más eficiente la navegación horizontal tanto para primer como para segundo nivel.

Navegación horizontal y segundo nivel desplegado en la web de Chevron

Una tendencia cada vez más extendida, sin embargo, es que este nivel, en forma de “categorías” desaparezca u ocupe un módulo dentro de la página. Esto se debe a que los usuarios no navegan por categorías más que cuando buscan algo concreto y tienden a pinchar en los contenidos para moverse por la web.

Aunque no sea la predominante, la navegación vertical no sólo no ha desaparecido sino que gigantes como Amazon o Yahoo!, con ingentes secciones y contenidos en sus webs, la han recuperado.

Es frecuente organizar la navegación en dos bloques:

• navegación principal, para los contenidos más relevantes del sitio

• navegación secundaria, para aspectos importantes pero que no representan el comportamiento clave de los usuarios. Ejemplo: política de privacidad, aviso legal, contacto

Los nombres de las secciones, llamados generalmente “etiquetas” o “rótulos”, deben ser breves y descriptivos, de esa forma, facilitaremos la labor de lectura y selección de los usuarios.

La navegación ha de ser consistente en todo el sitio: las mismas secciones, la misma ubicación, la misma apariencia. Es la brújula con la que navegamos y nos orientamos. Esto deberá tenerse en cuenta al definir el diseño de la página.

26

internetización

Menú vertical de Amazon. El segundo nivel de navegación también se despliega verticalmente.

27

internetización

En las siguientes páginas vemos los sistema de navegación del NYTimes en sus versiones para web, móviles e iPad.

Como podemos observar, aunque el periódico es el mismo, han adaptado el volumen de contenidos y la interfaz a las características de cada dispositivo y de uso del mismo. Así:

• En la versión web la navegación es vertical y la home presenta un gran volumen de contenidos.

• En la versión para móviles dan prioridad a la última hora. La navegación por secciones está escondida tras una pestaña para que la utilicen los usuarios con más tiempo para realizar la consulta.

• En la versión para iPad también se priorizan los contenidos. El menú aparece oculto y se despliega en vertical siguiendo las pautas de diseño marcadas por Apple

La forma de interacción en cada dispositivo también es distinta: del ratón que pincha en los enlaces en la web, al manejo rápido con un sólo dedo en el iPhone al uso reposado del iPad y con mayor espacio físico para la interacción y también mayor presencia de elementos audiovisuales.

28

internetización

The New York Times para iPhone (tamaño superior al real)

29

internetización

The New York Times para iPad

30

internetización

The New York Times para web

31

internetización

BuscadorCuando un sitio web contiene grandes volúmenes de información, millones de noticias, miles de productos, la navegación puede resultar insuficiente para permitir a un usuario que localice la noticia o artículo que necesita. En tal caso es conveniente disponer de un buscador que, a través de palabras clave introducidas por el usuario, arroje una página de resultados, la denominada SERP (search engine results page). Todos estamos familiarizados con el comportamiento de los buscadores ya que somos usuarios asiduos de Google.

La página de resultados de un buscador consiste en una enumeración de páginas, imágenes, vídeos u otros elementos que pueden corresponderse con lo que esté buscando el usuario. De cada resultados se mostrará un resumen, información sobre los datos más relevantes (tipo de fichero, peso, fecha...) e incluso una miniatura de la imagen. De esta forma, el usuario podrá rastrearlos rápidamente y pre-seleccionar los que más se aproximen a lo que necesita.

Es muy práctico para el usuario que el buscador ofrezca filtros para refinar los resultados. Dos modalidades son las más frecuentes:

• búsqueda avanzada: el buscador permite especificar características adicionales de aquello que busca. Por ejemplo: posteriores a una determinada fecha, tamaño de las imágenes, idioma

• filtros dinámicos: son una versión moderna de las tradicionales búsquedas avanzadas. Una vez tiene ante sí la página de resultados, el usuario puede marcar o borrar opciones y la página se actualiza dinámicamente. Por ejemplo: busco hoteles en Semana Santa en Sevilla y, como aparecen más de 100, marco opciones adicionales:

• categoría

• con desayuno incluido

• con parking

32

internetización

EnlacesLos enlaces son la esencia de la Red. No sólo nos permiten movernos de un contenido a otro dentro de una web sino saltar a otras webs.

A simple vista debe percibirse qué es un enlace. Es lo que va a marcar la diferencia con el diseño de un periódico o una revista impresos.

En esta página de El País, por ejemplo, ¿somos capaces de identificar qué textos son enlaces y a dónde llevan?

Un enlace debe identificarse sin tener que acercar el ratón para ver si cambia el cursor.

Debe ser descriptivo, en dos otres palabras ha de explicar a qué página te lleva, qué encontrarás en la página de destino: “ir al blog”, “Fotogalería: una ciudad en llamas”. No, “pinchar aquí”.

33

internetización

Botones de acciónLos botones de acción son aquellos elementos que inician un proceso. Aunque a simple vista puedan parecer enlaces, desencadenan toda una serie de funciones informáticas.

Se enmarcan en esta categoría desde el tradicional “login” o registro de usuario, al botón de acción de un buscador o el “play” de un vídeo.

Todos estos elementos, al igual que los que hemos ido enumerando a lo largo del capítulo deben ser definidos tanto en su forma, como su ubicación, como en su estética. En una guía de estilo se consignarán sus características para que el equipo de desarrollo y mantenimiento de la web pueda aplicarlos cada vez que los necesite de manera consistente en toda la web.

34

internetización

Diseño

¿Con qué marca asocias el color rojo?

¿Coca cola? ¿Ferrari? ¿Vodafone? ¿Banco Santander?

¿Y si lo contextualizamos un poco?

Un poco más

35

internetización

¿Te basta una imagen para reconocer a qué marca pertenece el anuncio que estás visualizando?

¿O necesitas ver el logotipo?

Este ejemplo resume los elementos básicos que hay que tener en cuenta a la hora de diseñar una identidad visual corporativa.

Elementos fundamentales de diseño

Al diseñar tu sitio web o aplicación para móviles o tablets debes determinar si ya tienes una identidad definida y, por tanto sólo debes aplicarla o si, por el contrario, has de desarrollar también una identidad para tu web o aplicación. El símbolo, los colores y la tipografía son los elementos fundamentales de tu marca que deberás aplicar pero es preciso tener en cuenta una serie de implicaciones.

Volvamos a los ejemplos. Ikea o BMW se caracterizan por mimar sus marcas, también en internet.

36

internetización

La marca, con todos sus elementos (tipografía, colores, márgenes) aparece en la posición preferente, la esquina superior izquierda.

El color amarillo de Ikea predomina, junto al gris oscuro para los textos y el azul como complementario y para indicar elementos interactivos (enlaces). El fondo blanco elegido se caracteriza por facilitar la legibilidad.

37

internetización

La marca BMW, acompañada del lema “¿Te gusta conducir?”, aparece esta vez a la derecha. Los colores corporativos dominan la paleta. De nuevo se recurre al fondo blanco para facilitar la legibilidad, al gris oscuro, por su contraste con el blanco, para los textos y al azul, que aparece al pasar el ratón por encima de los enlaces, indica interactividad. Ambos colores, gris y azul, son propios de la marca. Los espacios son tan importantes en torno al símbolo encuadrado de BMW como guiando la mirada y organizando los elementos en la página.

Con estos dos ejemplos tenemos ya algunas pistas para analizar los elementos fundamentales del diseño visual de una web.

Color La paleta de colores debe estar basada en los colores corporativos. Se pueden utilizar en estado puro o gradaciones de los mismos. El peso que asignemos a cada uno de ellos y las funciones que van a realizar deberá tener aspectos tan variados como la psicología del color y la accesibilidad.

Existen numerosos estudios que analizan las connotaciones que tienen los distintos colores en la cultura o en el ánimo de las personas. Dependiendo de la función que predomine en una web o

38

internetización

de los públicos a los que vaya dirigida optaremos por unos colores u otros. Una web puede ser seria y respetable e ir dirigida a inversores o un público profesional o, por el contrario, tener un tono distendido y divertido y apelar a niños o jóvenes. Los colores y la forma en que los apliquemos ayudarán a enfatizar el carácter emocional de la web.

Desde un punto de vista más funcional, los colores que se utilicen en el diseño de una web deben cumplir criterios de accesibilidad, un aspecto que trataremos en mayor profundidad en el capítulo sobre Control de calidad. Para garantizar un nivel básico de accesibilidad, los colores deben tener un nivel de luminosidad y contraste suficiente. En ocasiones, los colores corporativos no alcanzan los niveles mínimos recomendados y es necesario adaptarlos para su versión online. En la imagen que vemos a continuación, por ejemplo, la legibilidad se ve perjudicada porque no hay suficiente contraste entre el el color del texto y el del fondo:

Los colores corporativos se aplicarán a todos los elementos que integran la web, sean encabezados, enlaces, tablas o gráficos.

39

Texto

internetización

En los gráficos de la página de BP se puede observar cómo aplican los colores verde y amarillo corporativos.

MarcaDenominamos marca, desde un punto de vista gráfico, a los colores, símbolo y tipografía que identifican a una organización. El diseño de símbolos es una ciencia tan especializada que requeriría un libro entero para explicar cómo se conciben elementos a la vez tan simples y a la vez tan complejos como los de Repsol o Nike.

El logotipo es la tipografía que adquiere corporeidad, bien por ser propia o por asociarse indefectiblemente a una marca.

El símbolo es el elemento gráfico que la acompaña. Ejemplo: un sol sobre el horizonte.

Nike ha conseguido que su símbolo sea suficiente para identificar a la marca.

Coca-cola únicamente dispone de logotipo.

Una marca, además de su versión principal, debe contar con versiones secundarias para utilizar sobre fondos claros u oscuros o en otros soportes o circunstancias.

40

internetización

TipografíaLas fuentes tipográficas, o tipografías, que se pueden emplear en una web tienen algunos condicionantes. Los ordenadores vienen equipados con una serie de tipografías que dependen del sistema operativo usado. Los usuarios pueden instalar nuevas tipografías en sus sistemas pero la oferta de fuentes disponibles es infinita y las configuraciones que pueden tener definidas nuestros usuarios son ilimitadas. Por ello es conveniente basarse en las fuentes comunes a todos los ordenadores, las denominadas, fuentes “de sistema”.

Si al diseñar un sitio web utilizamos fuentes que no son del sistema corremos el riesgo de que el usuario no las tenga instaladas en su equipo y que su sistema operativo las sustituya por una similar pero no la nuestra, poniendo en riesgo nuestra identidad visual. Para solucionarlo, lo más adecuado es seguir estas sencillas reglas:

• utilizar la tipografía corporativa únicamente en la marca y elementos destacados, mediante el uso de imágenes

• emplear tipografías de sistema en la mayor parte de los textos y contenidos

• definir cómo queremos que los ordenadores sustituyan nuestras tipografías predefinidas cuando no estén disponibles

Una forma de evitar que el ordenador cambie la tipografía corporativa por otra cuando no la tiene instalada es utilizar imágenes. Esta solución, sin embargo, presenta problemas de accesibilidad y por lo tanto sólo debe usarse cuando las ventajas superen a los inconvenientes, por ejemplo, en la marca y elementos importantes pero acotados.

La marca, lo que comúnmente llamamos logo, en una web sirve para identificar al propietario del sitio y, usualmente, para volver a la página de inicio. Su finalidad no es ser leída y su capacidad comunicacional se perdería si no utilizase la tipografía corporativa. Por ello, siempre debemos respetar la tipografía de la marca.

En los textos de una web la situación es opuesta a la de la marca; su finalidad es totalmente práctica: ser leídos, desde el PC o desde otros dispositivos, por lo que la accesibilidad debe ser máxima. Recurrir a formatos gráficos como las imágenes o la tecnología flash pueden dar mayor espectacularidad a la página pero nos crearán, inmediatamente, numerosos problemas cuando queramos:

41

internetización

• editarlos

• traducirlos

• llevarlos a la pantalla de un móvil u otro dispositivo

Para editarlos necesitaremos tener el archivo original, un programa informático específico y un diseñador cerca. Para traducirlos deberemos previamente extraerlos de la imagen o fichero flash y luego de nuevo recurrir a un diseñador con el software correspondiente (Photoshop, Flash...). En un móvil, casi con toda seguridad, no se visualizarán. En cambio, un texto en HTML que usa tipografías de sistema podemos editarlo nosotros mismos, traducirlo, publicarlo, leerlo en el móvil o en el agregador RSS.

Por último, debemos definir por qué fuentes deseamos que el navegador sustituya las nuestras si no las tiene instaladas. Esto se define en las “hojas de estilo” y suele tener esta gramática:

p{font-family:"Times New Roman",Georgia,Serif}

Esta línea de código le está diciendo al navegador: “utiliza Times New Roman, si no la encuentras utiliza Georgia, que es otra fuente con serif y si tampoco la encuentras, usa la fuente con serif de la que dispongas”.

Como es sabido, las familias tipográficas son básicamente dos:

Seriff Sin seriff

a a42

internetización

Se aprecia mejor al aumentar el tamaño. La primera es “con serif”, en concreto, la serifa más popular en la informática, la “Times New Roman”, llamada así por haber sido diseñada para el diario The New York Times. La segunda “a” es una “sans serif”, es decir, sin esos rabitos en las terminaciones; “Verdana”, junto a “Arial”, es la más conocida.

Un aspecto fundamental de las fuentes tipográficas, además de su familia, es su tamaño, “cuerpo” en la jerga profesional. Al diseñar una web, los tamaños de las tipografías se pueden expresar en absoluto o en relativo. Por ejemplo:

• en absoluto: 10 px (10 pixels)

• en relativo: 5 em (5 veces el tamaño de una m)

Lo recomendable es definir el tamaño en relativo, de esa forma el usuario puede cambiar el tamaño de la letra con los comandos de su navegador:

Afortunadamente, las últimas generaciones de navegadores permiten aumentar o disminutir el tamaño del texto aunque se codifique en valores absolutos e incluso si está dentro de una imagen.

Una última recomendación. Es tentador emplear numerosas fuentes para el diseño de una página: una para titulares, otra para la entradilla, otra para sumarios, otra para enlaces, otra para textos de ayuda... No obstante, “menos es más” y siempre será más efectivo para lograr una identidad consistente y más eficiente en cuanto al uso de recursos limitarse a una o dos familias tipográficas.

Un punto importante que hay que conocer al seleccionar las tipografías para una web es que están surgiendo iniciativas que, simplemente añadiendo un enlace a nuestra hoja de estilo (más adelante aprenderemos qué es esto), nos permiten utilizar fuentes que no son del sistema. Un ejemplo es Google Web Fonts, una librería de tipografías que no cesa de crecer.

43

internetización

Elementos genéricos de diseño

Las reglas del diseño han sido ampliamente estudiadas y explicadas por los expertos. Recordaremos algunas de ellas sin intentar suplir el papel de un profesor o un director de arte.

• Consistencia. Los estilos definidos se aplican siempre de la misma forma en todo el site

• Jerarquía. Mediante recursos como el tamaño y la posición podemos comunicar al lector qué contenidos son más importantes.

• Simetría/asimetría. Un diseño puede buscar el dinamismo mediante la asimetría.

44

internetización

• Equilibrio o balanza. El peso visual de las distintas zonas ha de ser equivalente. Por ejemplo: un destacado con titular a 20 puntos y con fotografía puede equilibrarse con dos destacados de menor tamaño y fotografías más pequeñas ubicados a la derecha del primero.

• Ritmo. Se crea mediante la repetición de elementos.

• Énfasis. Negritas y tamaño confieren énfasis a los elementos.

• Alineación. Los elementos no deben flotar en la página, una forma de anclarlos visualmente es la alineación: todos los elementos se inician en una línea imaginaria.

• Espacio. Los espacios en el diseño son como los silencios en la música. Mídelos con cuidado. Una imagen con unos márgenes alrededor puede ser la diferencia entre un sitio bien diseñado y uno descuidado en el que los textos se pegan o superponen a las fotografías.

Ejemplo de alineación de los elementos sobre una retícula. Siempre se alinean con el inicio de una de las columnas de la retícula:

Estos principios serán de aplicación al diseñar cada componente (un titular, una entradilla, un sumario, una tabla, un enlace) y también a elementos estéticos de la página:

45

internetización

• líneas

• iconos

• viñetas o bolos

Merecen especial atención dos elementos:

Los enlaces y botones de acción poseen varios estados, que el diseñador debe definir visualmente de modo que el usuario los perciba como lo que son, elementos de interactividad. Si los iconos realizan la función de un botón, también se aplican las mismas normas.

Las imágenes de un sitio web, especialmente si es una web corporativa o comercial y el propietario tiene la posibilidad de elegir su estilo, lo que no ocurre en la misma medida en un diario informativo, influyen grandemente en la personalidad de la web. El director de arte tendrá un papel destacado en la definición del estilo de imágenes que se empleen: apaisadas o cuadradas, en color o en blanco y negro, con marcos o sin marcos, con efectos o sin efectos.

Los formatos de imágenes más usados son:

• JPG (o jpeg). Se trata de un formato versátil, visualizado por todos los navegadores y que es apto tanto para fotografías como para ilustraciones. Se deben optimizar las imágenes para web (reducir su peso) antes de publicarlas. Se pronuncia jotapegé.

• GIF. Adecuado para dibujos e ilustraciones, pero no para fotografías. Permite transparencias y animaciones sencillas. Se pronuncia guif.

• PNG. Es un formato más moderno que puede cumplir las funciones tanto de los GIF como de los JPG aunque algunos navegadores no lo muestran por lo que no ha logrado sustituir totalmente al JPG.

Elementos específicos de diseño

A la hora de diseñar el aspecto de una página web, el diseñador trabaja sobre un prototipo elaborado por el arquitecto de información. Debe “vestir” el wireframe aportando las mejoras que sean

46

internetización

adecuadas. Dependiendo del equipo con el que contemos, iniciará la tarea un director de arte y la desarrollará un diseñador junior o simplemente realizará todo el proceso un diseñador gráfico senior. El diseñador con más experiencia esbozará las líneas maestras que guiarán la aplicación de la identidad visual de la marca y su asistente la extenderá a todas las plantillas necesarias. Recuerda al proceso de pintar un cuadro. Van Dyck plasmaba la fisonomía de sus retratados y sus ayudantes terminaban la obra pintando atuendos, fondos y otros detalles.

Al diseñar para internet conviene tener en cuenta que:

• es un diseño funcional, para ser usado, por lo que la estética debe supeditarse al objetivo principal (informar, vender, acción...)

• se asemeja al diseño editorial pero no es estático, sino que debe incitar a la acción y esto se debe reflejar y percibir al primer vistazo: ¿dónde están los enlaces? ¿dónde está el botón que activa el buscador?

• minimalismo, en la Red la eficiencia y optimización debe ser máxima y en el diseño se logra a través del minimalismo, utilizando los mínimos recursos para lograr los objetivos.

No debemos pensar que el minimalismo es un obstáculo para la creación de diseños imaginativos. Un ejemplo habitual es CSSzengarden, una web en la que se muestra cómo, con unos mismos contenidos, se pueden realizar infinitos diseños.

Como vemos en los ejemplos, estas webs son iguales en sus contenidos pero la disposición de los elementos en la página y el diseño visual cambia alterando únicamente las CSS:

47

internetización

Los diseñadores gráficos suelen trabajar con el programa informático Photoshop para el diseño estático y Flash para animaciones. Son herramientas informáticas que requieren un entrenamiento específico para aprender a utilizarlas. Están dirigidas a un público profesional, por ello, su precio no suele ser accesible para usuarios amateurs. En el caso de Photoshop, existen alternativas gratuitas como Gimp, Krita o Paint.NET. En el post 10 excelentes alternativas gratuitas al Photoshop puedes obtener información más detallada sobre los

48

internetización

mismos. Una vez acabado el diseño, se entregará, preferentemente en dos formatos:

• PSD (Photoshop Document). Es el documento fuente, está organizado en capas y permite el mantenimiento futuro del sitio. Requiere un programa específico para ser visualizado.

• JPG, el mismo documento en un formato estándar que podrá visualizar cualquier persona del equipo o con capacidad de decisión, sin necesidad de tener instalado el programa profesional Photoshop.

• Opcionalmente, impresiones en papel pluma para realizar presentaciones

Las animaciones se entregan en:

• FLA. Son los ficheros fuente que genera el programa Flash. Para visualizarlos y editarlos se necesita el programa profesional Flash y su correspondiente licencia.

• SWF. Es el formato para publicar en la web. Puede ser visualizado si se tiene instalado el plug-in Shockwave Flash, que es gratuito.

¿Y si no sé diseñar?

Como hemos podido comprobar a lo largo del capítulo, diseñar no es una tarea sencilla. Además de la creatividad y el foco es preciso manejar con destreza herramientas como Photoshop, Illustrator y otros programas informáticos. Si no es tu caso, existen recursos que te permitirán suplir estas carencias, aunque no alcancen el nivel de un diseño profesional.

Desde webs que te permiten configurar tu logo en un minuto con sólo elegir color, forma, efectos, hasta plantillas y temas que te darán el trabajo hecho y sólo necesitarán unos toques de personalización. Nos detendremos unos instantes en este tema.

Temas y plantillasLa mayor parte de las webs se gestionan actualmente con un CMS (Content Management System o Gestor de contenidos), son aplicaciones que permiten crear y actualizar una web sin tener conocimientos de programación.

49

internetización

Los CMS gratuitos suelen incluir diseños predefinidos o incluso contar con numerosos diseños desarrollados por miembros de su comunidad.

Algunos de los CMS más populares son Drupal, Joomla, WordPress o Blogger.

Página de selección de plantilla de Blogger.com

¿Cómo elegir un diseño para tu web? Los CMS suelen incluir un buscador de diseños que permite elegir las características (número de columnas, color base... ). Una vez te hayas asegurado de que la estructura de plantilla elegida se adecua a tus necesidades selecciona el diseño que más te guste y personalízalo con tus colores y tu marca.

Una web se compone de diversas capas; la de diseño es una más y no tiene por qué interferir con la capa de contenidos, que se

50

internetización

conservarán y adaptarán al diseño si lo has construido según las directrices que vamos exponiendo en este manual de internetización.

Los diseños predefinidos suelen denominarse Plantillas, Themes o Templates. Cambiarlos es tan simple como cambiar de abrigo, el contenido no cambia pero la apariencia se transforma sin afectar a los textos, imágenes etc.

Ejemplos de plantillas o templates de Joomla:

Para personalizar una plantilla necesitas unos conocimientos básicos. Los elementos que deberás adaptar serán, fundamentalmente:

• marca

• colores

• imágenes y contenidos

• elementos complementarios: iconos, bullets, líneas

• textos

51

internetización

Para cambiar el logo por el tuyo debería bastar con subir una imagen con el tamaño adecuado.

Para cambiar los colores deberás abrir el fichero CSS y sustituir los códigos hexadecimales de los colores.

Aunque la plantilla pueda incorporar fotografías de bancos de imágenes y textos de ejemplo, como es obvio, tendrás que sustituirlos por contenidos sobre tu empresa.

Por último, existen numerosos detalles que necesitarán una adaptación. Generalmente se trata de imágenes de pequeño tamaño que sirven como separadores, decoración, etc. Al ser imágenes, sólo tendrás que editarlos o sustituirlos por los tuyos.

En sistemas centralizados como Blogger.com en los que la empresa propietaria actualiza continuamente tanto las funcionalidades del CMS como las plantillas no suelen surgir problemas.

En los CMS que el usuario instala, como la versión descargable de WordPress, es posible que el creador del theme no lo actualice o no a la velocidad con que se actualiza el CMS. Por ello, si tus conocimientos son limitados, recomendamos realizar únicamente los cambios imprescindibles en la plantilla.

Primeros testsLlegado este punto del proyecto ya podemos mostrar a personas ajenas al mismo, que puedan aportar una visión objetiva, los primeros bocetos y testar sus impresiones, tanto del diseño gráfico como de la usabilidad de la arquitectura de información y de la navegación. Si detectan fallos, estamos a tiempo de corregirlos, ya que aún no se ha iniciado la fase de desarrollo propiamente dicha. Esto es muy importante, imaginemos la construcción de un edificio, es más sencillo introducir cambios cuando se encuentra en fase de plano que cuando ya está construido.

52

internetización

Maquetación

Hasta ahora hemos tratado de la parte visible de una web: sus colores, su número de columnas o sus secciones, pero para que esa información viaje a través de la red debe estar codificada, de ello trataremos en este capítulo. La maquetación web es una profesión que requiere un grado elevado de especialización; no se aprende en una tarde. Es una tarea que debemos dejar en manos de profesionales cualificados ya que un trabajo bien hecho facilitará la perdurabilidad de nuestra web y su extensión a otras plataformas de la mejor forma posible. No descuidemos, por tanto, este aspecto sólo porque no se visualiza.

Qué es el código fuente

¿Has visto alguna vez el código fuente de una web? ¿sabes cómo mostrarlo? Los navegadores web disponen de una opción en su menú llamada “Ver código fuente”. En Internet Explorer se accede a ella desde Página > Ver código fuente. Si la despliegas podrás ver algo similar a esto:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">

<head profile="http://www.w3.org/2000/08/w3c-synd/#">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="keywords" content="W3C, World Wide Web, Web, WWW, Consortium, computer, access, accessibility, semantic, worldwide, W3, HTML, XML, standard, language, technology, link, CSS, RDF, XSL, Berners-Lee, Berners, Lee, style sheet, cascading, schema, XHTML, mobile, SVG, PNG, PICS, DOM, SMIL, MathML, markup, Amaya, Jigsaw, free, open source, software" />

<title>World Wide Web Consortium - Web Standards</title>

53

internetización

<link rel="meta" href="/Overview-about.rdf" />

<link rel="stylesheet" type="text/css" href="/StyleSheets/home.css" />

<link rel="bookmark" href="#technologies" title="Technologies |" />

<link rel="bookmark" href="#news" title="News |" />

<link rel="bookmark" href="#search" title="Search |" />

<link rel="contents" href="#contents" title="Contents |" />

<link rel="bookmark" href="#Offices" title="Offices |" />

<link rel="bookmark" href="#systems" title="Systems |" />

<link rel="bookmark" href="#donors" title="Supporters |" />

<link rel="bookmark" href="#footnotes" title="Footnotes |" />

<link rel="alternate" type="application/rss+xml" title="W3C Home Page News RSS Channel" href="http://www.w3.org/2000/08/w3c-synd/home.rss" />

<style type="text/css">

</head>

Se trata de código HTML, el lenguaje en el que está escrita la world wide web. Los navegadores, como Internet Explorer o Firefox son los encargados de traducir dicho código a un lenguaje que nosotros podamos entender: las páginas web.

El HTML es un lenguaje universal, como la música o las matemáticas y, aunque atemorice un poco a simple vista, no es excesivamente complejo. Aunque no lo dominemos, es conveniente que seamos capaces de reconocer algunos de sus parámetros, del mismo modo que sabemos algunas palabras en francés, italiano o japonés. Esto nos será útil en numerosas ocasiones, por ejemplo:

• si tenemos que editar manualmente un texto de una página web

• si tenemos que saber con qué palabras se intenta posicionar una web en buscadores

54

internetización

• si queremos saber si la web se ciñe a estándares

HTML, el lenguaje de la WWW

HTML es el lenguaje de internet. Significa Hypertext Markup Language o lenguaje de marcado de hipertexto, que no es precisamente muy autodescriptivo. Ha alcanzado recientemente la versión 5.0 y está en constante evolución y mejora para dar respuesta a las siempre crecientes necesidades de los usuarios y posibilidades de la WWW, como incluir vídeos o mayor interactividad.

No es, propiamente dicho, un lenguaje de progamación, sino de descripción o “marcado” de páginas web.

El Consorcio de la World Wide Web es el organismo que define los estándares de diseño web con el fin de que sea accesible desde cualquier dispositivo, independientemente de cuál sea el hardware o software que utilice.

Del mismo modo que hay palabras del castellano que han caído en desuso, el HTML ha atravesado varias versiones y etiquetas (comandos) que hace diez años eran aceptadas ahora se recomienda no usarlas.

Las primeras webs mezclaban en el mismo fichero de código el contenido, la estructura, la presentación. Es decir, si querían destacar un titular con letras rojas y un tamaño de fuente de 24 píxels escribían algo así:

<font size=24px color=red>Victoria de la Selecci&oacute;n española de f&uacute;tbol</font>

Este esquema bastaba para webs de tan sólo unas páginas, no obstante, cuando se deseaba cambiar el diseño los procesos eran muy manuales y tediosos.

Las CSS, Cascade Style Sheets u hojas de estilo, es un concepto que escucharás muy a menudo durante el desarrollo de una web. Permitieron separar en otro fichero las instrucciones sobre la apariencia de una web.

55

internetización

En el fichero principal HTML se enlaza al fichero CSS como vemos en este ejemplo:

<link rel="stylesheet" href="http://h3.hipertextual.com/c/h3v2/ie.css" type="text/css" />

En el fichero invocado se describe el diseño: Ej:

h2 {

font-size:160%;

color:#11aa11;

}

De este modo, si se desea cambiar el diseño, basta con modificar el fichero CSS y los cambios se aplicarán a toda la web, sin tener que cambiar cada página una a una.

La gramática del lenguaje HTML fue evolucionando y las instrucciones más antiguas fueron quedando obsoletas. Este aspecto, aparentemente anodino, es clave porque si en los próximos meses los navegadores dejan de aceptar instrucciones antiguas, nuestra web dejará de visualizarse correctamente.

Además de HTML en sus diversas versiones, existen otros siglas con las que es bueno que te familiarices:

• XML (Extensible Markup Language). El formato XML se utiliza para normalizar e intercambiar datos. Por ejemplo, una base de datos de automóviles en la que sólo cambian los contenidos (Toyota Avensis, Renault Megane, Seat Altea...) pero no los campos, que son siempre los mismos (marca, modelo, CV, combustible...).

• CSS (Cascading Style Sheets u Hojas de Estilo). Las hojas de estilo sirven para definir la presentación de una página web. Indican aspectos como tamaño de letra, color, márgenes, estilo, alineación...

• XHTML. Es una combinación de HTML 4.0 y XML. Fue el lenguaje dominante entre los expertos durante los diez años

56

internetización

que ha durado la definición de HTML 5.0. Existe una versión estricta y una transicional menos restrictiva en sus reglas.

• RSS. Significa Really Simple Syndication y es una tipología de XML utilizada para sindicar o distribuir contenidos entre distintas webs. Se utiliza para suscribirse a las actualizaciones de blogs y páginas de noticias a través de programas específicos, como Google Reader, iGoogle o los incluidos en los propios navegadores.

¿Página o sitio web?

Solemos usar indistintamente los términos “página” y “sitio” web pero en realidad un sitio web se compone de varias páginas. Los sitios más pequeños pueden tener cuatro o cinco páginas pero son cada vez más escasos, predominan las webs con cientos o incluso miles de páginas, por ello, los sitios creados con HTML escrito manualmente van desapareciendo y siendo sustituidos por webs con un gestor de contenidos detrás. Los CMS (Content Management Systems o gestores de contenidos) son motores que crean automáticamente las páginas necesarias a partir de unas tipologías previamente definidas. Por ejemplo: si en la fase de arquitectura de información definimos el tipo de página “noticia”, que se componía de cinco campos (título, entradilla, fecha, autor, texto), con un CMS la podremos crear automáticamente, sólo rellenando los campos, pero sin necesidad de escribir el código HTML.

En el capítulo anterior veíamos que existen diseños predefinidos que podemos usar para nuestra web, dichos diseños o themes incluyen el código HTML necesario. Si usamos gestores de contenidos (CMS) como Drupal o WordPress para crear nuestra web podemos garantizar al 100% que existirán themes básicos listos para usar y muy fáciles de instalar.

Perfil del maquetador web

Del mismo modo que hay personas que aman una bonita caligrafía hay verdaderos enamorados de un código fuente bien formateado. Velan por que las páginas se maqueten de la mejor forma posible, siguiendo los estándares que la harán perdurable y accesible desde múltiples plataformas. Si encontramos a un profesional así haremos

57

internetización

bien en conservarlo, ya que escasean, y porque serán el mejor garante de que nuestra web tenga una larga vida.

Un maquetador web debe tener una mente muy estructurada y ser capaz de sacar el máximo partido al HTML. Formará un buen equipo con los arquitectos de contenidos y los diseñadores para, juntos, encontrar las fórmulas óptimas para llevar a la web lo que todos tienen en mente.

Uno de los principales quebraderos de cabeza de los maquetadores web es la coexistencia en el mercado de multitud de navegadores que hacen que sea muy difícil que una web se visualice de la misma forma en todos ellos: Internet Explorer, Firefox, Opera, Safari, Chrome... Su número es cada vez mayor pero esto no debe obsesionarnos. El diseño web no es tan preciso como el diseño impreso. Es más, si nos empeñamos en eliminar todas las diferencias obtendremos un código menos elegante que si buscamos soluciones más gráciles. Al fin y al cabo ¿qué importa que un botón se mueva dos píxeles a la izquierda en Internet Explorer al lado de las grandes ventajas que aporta internet frente a la entrañable imprenta de Guttenberg?

A la hora de comprobar cómo se visualiza nuestra web en las distintas versiones de cada navegador podemos disponer de varios ordenadores con distintos navegadores instalados o usar aplicaciones que realizan este trabajo automáticamente, generando capturas de pantalla.

La herramienta de trabajo de un maquetador es un editor HTML. En principio, el código fuente se puede escribir con un simple note pad o bloc de notas de Windows pero los editores profesionales, muchos de los cuales se pueden obtener gratuitamente en internet, ahorran mucho tiempo destacando los errores que detectan automáticamente, mediante opciones de vista previa o coloreando las distintas partes de un documento. Al elegir uno debemos cerciorarnos de que no agrega código por sí mismo que escape a nuestro control.

La importancia de los estándares web

Los estándares web son los cimientos de una web, por eso es tan importante su solidez. El uso de estándares es la base que nos

58

internetización

permitirá garantizar que nuestra web seguirá siendo accesible en el futuro y que nuestros contenidos podrán llevarse a:

• cualquier navegador que respete estándares

• teléfonos móviles

• widgets

• redes sociales

• flash

• audio

• otra web

• otros idiomas

• buscadores

• ayudas técnicas usadas por personas con discapacidad

Como hemos señalado en el epígrafe anterior, los estándares establecen una separación entre el contenido y su presentación visual. Hagamos la siguiente prueba:

1. Abre el navegador Firefox

2. Abre la web de elpais.com

3. Selecciona en el menú la opción “Ver> estilo de página > sin estilo”

4. Podrás ver el contenido de elpais.com pero sin diseño

Gracias a ello, ese contenido se puede exportar a móviles o widgets y aplicarles otro diseño, codificado en las CSS.

Breve guía de instrucciones HTML

Dedicaremos unas líneas a explicar el significado de algunas instrucciones HTML muy comunes.

Las etiquetas HTML afectan a todo aquello contenido entre su apertura y su cierre. Las etiquetas HTML se distinguen porque

59

internetización

aparecen encerradas entre los símbolos menor (<) y mayor (>). La de cierre lleva además una barra (/). Veámoslas:

<tag>

</tag>

Para poner una palabra en negrita dentro de una frase escribiríamos lo siguiente:

El actor <b>George Clooney</b> protagoniza los spots de Nespresso

Y el resultado sería:

El actor George Clooney protagoniza los spots de Nespresso

Todos los tags o etiquetas funcionan de la misma forma y deben ser cerrados siempre.

b → abreviatura de bold (negrita)

i → abreviatura de italic (cursiva)

strong → Sirve para destacar una palabra o frase importante

em → Sirve para dar énfasis a un texto

cite y quote → Se utilizan cuando se reproducen fragmentos de texto de otros autores

ul → Significa Unordered List y sirve para incluir listas sin ordenar. Cada elemento de la lista lleva a su vez el tag li (list item o elemento de una lista)

Una de las etiquetas más útiles es <a>, ya que sirve para insertar enlaces en un texto. Por ejemplo:

<a href=”http://dominio.com/direccion”>Consulta la oferta de la semana</a>

60

internetización

El resultado visualmente sería “Consulta la oferta de la semana” y constituiría un enlace a la página alojada en la URL http://dominio.com/direccion.

Si lo que queremos insertar es una imagen haremos lo siguiente:

<img src=”http://dominio.com/ruta-a-la-imagen.jpg” alt=”Pie de foto”>

Como vemos, se trata de una excepción que no lleva etiqueta de cierre. La extensión de la imagen no necesariamente es un jpg, puede ser gif o png.

La etiqueta img es conveniente que lleve siempre, por cuestiones de accesibilidad, el atributo alt. Alt alberga el texto alternativo de una imagen para que lo puedan leer las personas que no visualizan las fotografías

A continuación reproducimos, con permiso del autor, el gráfico What Beautiful HTML Code Looks Like, una chuleta que explica a grandes rasgos en qué consiste el lenguaje HTML. Agradecemos a Chris Coyier de CSS-tricks.com que nos haya permitido su reproducción.

61

internetización

62

internetización

Programación y plataformas

A lo largo del capítulo sobre construcción de sitios web hemos ido describiendo tareas cada vez más complejas y que requieren mayor especialización. En este epígrafe, Programación y plataformas, nos adentramos en el área más inasequible para el usuario medio. Si una web fuera un ser vivo, los programadores serían los cirujanos que operan un corazón o realizan un transplante de riñón. ¿Dejaríamos una operación de bypass a un aficionado? Para programar funcionalidades de una web también debemos contar con los mejores profesionales: los ingenieros informáticos.

Tal vez te estés diciendo, “esto es demasiado difícil para mí”. Si es así, tengo buenas noticias, no siempre hace falta saber programar para crear una web, existen multitud de plataformas en el mercado listas para usar y en ello ha tenido gran protagonismo el movimiento de software libre.

Antes de continuar, aclaremos que entendemos por “plataforma” en este contexto: plataforma es el software que proporciona el servicio completo para una actividad: venta, enseñanza, red social, etc. Así, por ejemplo, una plataforma de e-learning permitirá dar de alta a los alumnos, publicar material didáctico, actividades, tests, chat...

Dicho esto, el primer gran dilema al que nos enfrentaremos al decidir qué plataforma usar es ¿la desarrollamos nosotros mismos o usamos una creada por terceros? Para ello es importante ser consciente de cuál va a ser el valor diferencial de nuestro producto o servicio. Si recae en el software deberemos desarrollar nuestra propia plataforma, total o parcialmente.

Si estás empezando y tu negocio no se diferencia en las funcionalidades que aporta la plataforma puedes apoyarte en desarrollos preexistentes. Así, puedes crear una tienda online sobre una plataforma de “marca blanca” como Prestashop. Con el tiempo, no obstante, querrás incluir mejoras que no formen parte de la plataforma elegida y seguramente acabarás realizando desarrollos propios.

63

internetización

Los desarrollos propios requieren grandes inversiones en tiempo y dinero pero cuando no existe un software que realice lo que andas buscando no existe otra opción. Google, Twitter o Facebook son grandes ejemplos de plataformas desarrolladas desde cero.

Nos ocuparemos a continuación de las dos posibilidades descritas: uso de plataformas de terceros y programación propia.

Plataformas para tu proyecto

No saber programar o no disponer de programadores en el equipo no debe desanimarnos a la hora de poner en marcha una web.

La primera plataforma que realmente puso en manos de las personas sin conocimientos de progamación toda la potencia de la web fue Blogger, un gestor de contenidos o CMS muy sencillo, pero hoy en día hay plataformas para casi todo lo que puedas pensar:

• gestión de contenidos

• comercio electrónico

• educación (campus virtuales)

• redes sociales

• analítica web

• gestión de proyectos

• vídeo

• blogs

• foros

• social media

• ...

A la hora de seleccionar una plataforma elegiremos una que lleve algún tiempo en el mercado. Lo podemos averiguar por su número de versión. No es lo mismo una plataforma que se encuentra en la versión 0.68 que una en la versión 4.0. Esto nos garantizará una

64

internetización

mínima estabilidad y reducirá el número de errores y fallos en el rendimiento.

Es muy importante en una plataforma que haya generado una importante comunidad a su alrededor. Si tiene fans y desarrolladores será más fácil su supervivencia y más difícil que nos encontremos un día con que se ha dejado de actualizar el software. Esto aplica a las plataformas de software libre, en el caso de las plataformas comerciales, es la empresa que las respalda la que decide cuando ha finalizado su ciclo de vida.

Sea cual sea tu proyecto online seguramente necesitarás un gestor de contenidos. Los más populares son Drupal y Joomla. El primero es más veterano y en 2009 fue adoptado por los responsables de la web de la Casa Blanca, lo que nos permite hacernos una idea de su potencia. Puedes descargarlo en http://drupal.org/project/drupal gratuitamente pero no olvides hacer una donación si decides finalmente usarlo en tus proyectos. Del mismo modo, puedes contribuir con desarrollos propios y donarlos a la comunidad para que todos puedan beneficiarse.

Si tu web es más modesta puedes recurrir a CMS más ligeros como WordPress que, aunque pensado para blogs, permite crear páginas que no se vayan a actualizar con frecuencia como un CV o la presentación de tu tienda.

Operar con estos gestores de contenidos como editores es sencillo, no obstante, para su instalación se requieren conocimientos medios. El administrador deberá disponer de un alojamiento web y tener acceso al servidor, donde deberá crear las bases de datos y realizar transferencias de ficheros.

Si queremos ir un poco más allá y empezar a vender por internet es posible instalar carritos de la compra. Existen soluciones específicas para cada CMS: Virtuemart para Joomla, Ubercart para Drupal, eShop para Wordpress. Se puede profundizar en el mundo de las tiendas online en el blog de Jordi Oller, que también hace recomendaciones de software de comercio electrónico para crear tiendas desde cero. OsCommerce es el más veterano mientras que Magento es el que está experimentando más crecimiento. Conviene dejar constancia de que necesitarás conocimientos avanzados para configurar y poner en marcha estos sistemas de comercio electrónico.

65

internetización

Los lenguajes de programación en internet

Si has estado días rastreando la web en busca de una plataforma que se ajuste a tus necesidades y ningún software lo consigue, tal vez sea hora de que te plantees contratar a un desarrollador o a todo un equipo de programadores si el proyecto es de gran alcance.

En el ámbito de los lenguajes propietarios destaca ASP.Net de Microsoft. Antes de empezar a operar es preciso adquirir las correspondientes licencias y contar con el software IIS instalado en el servidor.

En el campo del software libre son populares PHP, Python y Ruby. PHP permite aumentar las posibilidades de webs construidas con HTML y CSS. Python es una de los lenguajes oficiales en los que Google programa sus aplicaciones para el gran público, lo que nos da una idea de sus ventajas. Ruby es el más joven de los lenguajes mencionados y el más emergente, con una comunidad de desarrolladores cada vez mayor.

En cualquier proyecto es preciso innovar contínuamente pero si además los desarrollos son propios no habrá referencias a las que seguir, el futuro lo marcaremos nosotros. Muchas de esas ideas serán rápidamente copiadas por la competencia pero eso no es óbice para seguir investigando e invirtiendo en I+D+i.

El fenómeno de las APIAPI son las siglas de Application Program Interface. Google y otras compañías como Facebook las han “liberado”, lo que en la jerga significa que permiten que otras empresas desarrollen programas que interactúen con los suyos. El resultado son programas mixtos (“mash up”) que mezclan funcionalidades de uno y otro programa.

66

internetización

Ejemplo de mash up con Google Maps

67

internetización

Contenidos

Contenidos es la palabra con la que en internet se denomina a la información. Es un concepto más amplio y pretende englobar a todos aquellos datos que circulan a través de la red, se trate de una poesía, una canción o la retransmisión de un partido de fútbol. Es decir, no importa su género ni su formato: textual, imágenes, gráficos, sonido, vídeo, descargables o aplicaciones.

La mayor capacidad de las redes de banda ancha y de los dispositivos ha permitido que sólo hayamos tardado unos años en pasar de las páginas de texto al vídeo en directo y los mundos en tres dimensiones.

Compárese este avance con estos otros ejemplos. Entre la imprenta de Guttenberg y la impresora multifunción que tenemos en casa median 500 años. El periodismo tardó trescientos años en recorrer su camino desde las gacetas y los diarios impresos hasta los inicios de la radio en los años 20 del siglo pasado y la generalización de la televisión en los hogares en los años 60 y 70.

Si algo caracteriza a los contenidos en internet es su sobreabundancia:

• medios de comunicación de todo el mundo, desde el NYTimes a RTVE pasando por la BBC, están digitalizando sus archivos y publicándolos en internet

• Google está escaneando bibliotecas enteras para poner a disposición de los usuarios el saber acumulado por la Humanidad

• millones de usuarios escriben cada día en sus blogs o en sus cuentas de Twitter y Facebook

Ante esta avalancha informativa lo que diferencia a unos contenidos de otros no es la calidad, que debería estar sobreentendida, sino el valor añadido, como veremos al final de capítulo, primero, ocupémonos de temas más operativos como quién puede crear los contenidos de una web, cuál debe ser el tono editorial, qué temas tratar, formatos existentes y sus reglas correspondientes al 68

internetización

trasladarse a la web así como la gestión de la publicación y difusión de los contenidos.

Quién

Dependiendo del tamaño de la web los contenidos los escribirá el propio autor, dispondrá de un equipo o contratará a terceros para realizar esta tarea. Veámoslo con ejemplos:

• en un blog generalmente escribe una sola persona que controla todo el proceso

• un medio de comunicación cuenta con una plantilla de profesionales dedicados a la generación de contenidos, además de con una red de colaboradores que envían sus materiales periódicamente

• en una empresa puede haber un equipo multidisciplinar dedicado a la creación de contenidos para la web corporativa o se pueden externalizar y ser realizados por terceros total o parcialmente

Con internet el modelo comunicacional del siglo XX ha sido superado. La forma de comunicarnos con nuestros lectores o con nuestros clientes se vuelve más humana y personal. Podemos grabar un vídeo o escribir un post para anunciar una fusión con otra empresa. Si operamos en distintos mercados podemos abrir un blog dirigido a cada uno de ellos que será redactado por una voz autorizada que pueda representar a la empresa.

La especialización es una de las tendencias más fuertes que mueven la Red. En un mercado con cientos de millones de usuarios casi cualquier tema encuentra su público, y en un mundo donde todo está estandarizado, desde la ropa a los muebles, cuanto más personal es una voz más atrayente resulta.

Los formatos a través de los que nos podemos expresar en internet son cada vez más variados y ricos. No sólo disponemos de la palabra escrita, sino que podemos grabar un podcast o hacer un show televisivo en directo a muy bajo coste. La posibilidad está al alcance de todos y el grado de profesionalidad dependerá del perfil de cada emisor. Un estudiante puede publicar un vídeo grabado con la cámara de su teléfono móvil mientras que una gran empresa puede optar por contratar todo un equipo de producción: maquilladores, iluminadores, cámaras de alta definición...

69

internetización

En ocasiones lo que necesitaremos para elaborar un contenido son dos perfiles: la persona que crea el contenido propiamente dicho y el especialista que diseña una infografía o programa una aplicación para calcular el importe de tu seguro de coche.

Estilo y tono editorial

“La gente se reconoce como tal por el sonido de esta voz”. Como reza el Cluetrain Manifesto en internet quienes hablan son personas. La tecnología no debe alejarnos de esta premisa básica.

Independientemente de quién sea el autor de los contenidos, éstos deben compartir una misma línea de comunicación, lo que no debe ser obstáculo para que cada redactor o fotógrafo pueda expresarla de acuerdo con su personalidad.

Por ejemplo, si una empresa se posiciona como fabricante de productos de calidad, todas sus comunicaciones deben transmitir este concepto, independientemente de que el contenido sea un texto, una imagen o de que el emisor sea un directivo o un técnico.

Esta uniformidad ayuda al usuario a identificar a la empresa o institución que emite el mensaje con unos valores y un posicionamiento.

Como vemos, se trata de la misma filosofía explicada en el capítulo sobre diseño aplicada a la comunicación.

Temática

De acuerdo con la línea de consistencia que estamos describiendo, los temas que elijamos a la hora de crear contenidos deben estar también alineados con nuestra especialidad o nuestro negocio. Es lo que nos va a diferenciar de la competencia y lo que más va a valorar nuestro lector, ya que nos identificará como especialista en ese campo. Ejemplos:

• blog sobre Marketing

• consejos sobre eficiencia y uso racional de la energía en la web de una petrolera

• recetas de cocina en la web de un fabricante de vitrocerámicas

70

internetización

• gráficos interactivos en el informe de una agencia de investigación de mercados

La elección de la temática puede ser más laxa en webs más informales, como un blog personal o un Twitter en el que usuario comparte su vida cotidiana, tanto los ingredientes de su desayuno, como fotos de sus viajes o enlaces a noticias de su interés.

Un medio generalista, dentro de la amplitud de materias que abarca, también se caracterizará por abordar una serie de temas con un determinado tono y estilo.

Formatos

Resulta asombroso observar cómo los formatos disponibles en internet han avanzado a pasos de gigante. Ya no es suficiente con incluir noticias ilustradas con imágenes, el público exige vídeos y aplicaciones.

Todos estos formatos ya existían antes de la invención de internet pero al trasladarse a la Red han tenido que adaptarse; algunos aún no lo han conseguido, estas son algunas pautas para “internetizar” los contenidos.

TextoEl texto es sin duda el formato que más ha avanzado en su adaptación a la gramática de internet, desde un doble punto de vista:

• tecnológico

• estilo

HTML es el lenguaje en el que se codifican los contenidos de la web. En Internetización defendemos encarecidamente su uso porque es el que permite que fluyan los contenidos dentro de una web y de una web a otra.

Crear un texto en HTML es sencillo. Los CMS o gestores de contenidos, que son los programas web a través de los cuales publicamos en internet, son versiones sencillas de editores de texto como Microsoft Word que permiten añadir negritas, cursivas, enlaces, fotografías...

71

internetización

Dada la sencillez de crear contenidos en HTML no hay excusa para publicar textos en otros formatos, como imágenes o pdf. Un texto en HTML es indexable por buscadores y, por tanto, localizable por los usuarios que utilizan Google o Yahoo! Un texto embebido en una imagen no es rastreable. Haz esta prueba:

• abre una página web e intenta seleccionar y copiar un texto

• a continuación, pégalo en un documento Word

• trata ahora de hacerlo con el texto que aparece en un banner o logo

• no es posible ¿verdad?

Seguro que alguna vez has intentado pasar un texto a un amigo y no has podido copiarlo porque estaba dibujado en una imagen. Ese y otros problemas de accesibilidad vienen provocados por no usar adecuadamente los formatos.

Y ¿cuántas veces te ha ocurrido que has pinchado en un enlace sin saber que dirigía a un documento pdf y te ha molestado que se inicie el programa Adobe Reader? O, tal vez no tenías instalado dicho programa en el portátil o el teléfono y el enlace no funcionaba. Para evitar estas incomodidades al usuario, lo mejor es:

• hacer disponible en HTML los contenidos

• si no es posible o quieres ofrecer también una versión en pdf, indicar siempre que el enlace lleva a otra aplicación distinta al navegador. En este caso es un pdf, pero podría ser un excel, word...

El BOE, por ejemplo, que desde 2009 sólo se publica online, está disponible en HTML para su búsqueda por palabra clave en todo el histórico y también en pdf para preservar el formato original.

Escribir para internet tiene sus propias reglas. El usuario tiene ante sí toneladas de información para consumir, por ello, valora los textos que van al grano y agradecen la brevedad.

Estas podrían ser sus características:

• Títulos descriptivos

• Frases cortas

• Brevedad

72

internetización

• Ausencia de barroquismos

• Enlaces, enlaces, enlaces

El usuario de internet siempre tiene prisa, no tiene tiempo para leer textos de más de una página o complicadas metáforas que le impiden llegar a los datos importantes. Lo solemos llamar “escanear”, el usuario rastrea la página en busca del verdadero contenido informativo o del enlace que le lleve al mismo, los adjetivos y adornos son como una selva que hay que desbrozar para ver la luz.

Es aconsejable el uso de titulares intermedios y negritas que resalten la información clave.

El tono podríamos situarlo entre el lenguaje propio de las noticias, que se centra en los hechos y elimina adjetivos y el coloquial, que es directo y de igual a igual.

Por supuesto, hay lugar para la poesía y las metáforas pero sólo para lectores especialmente afines. La mayoría, buscará datos relevantes.

Compárense estos titulares:

El director ejecutivo de Google abandona el consejo de Apple

Un cementerio de obras inmortales

Si en un diario impreso la curiosidad del lector es un recurso para incitarle a leer un contenido en internet nuestra atención recibe tantas llamadas que no podemos pinchar en cada enlace para averiguar qué esconde un titular poético sin contextualizar.

73

internetización

Fragmento de infografía realizada por 2mdc.com

InfografíasLas infografías son muy útiles a la hora de resumir información, especialmente datos cuantitativos y para reproducir acontecimientos de los que no se dispone testimonio fotográfico o audiovisual.

Pueden ser estáticas o estar animadas, en cuyo caso deben seguir pautas de usabilidad para facilitar a los lectores la navegación de las mismas.

74

internetización

La sobreabundancia de información ha hecho que cada vez sean más necesarias las infografías, para resumir grandes volúmenes de datos en un formato de fácil lectura.

Vídeo y sonido (Audiovisual)El vídeo es el formato con más éxito del momento. Cada vez es más utilizado y más consumido. No sólo los Parlamentos emiten sus sesiones en directo sino que millones de usuarios graban, publican, visionan y comentan vídeos en Youtube y otras plataformas colaborativas. Incluso “en vivo” mediante servicios como Ustream, Lifestream o Qik, para móviles.

Al principio, para publicar vídeos en internet se subían en formato .avi o .mpeg, el usuario los descargaba y los reproducía en su PC con el programa adecuado. Posteriormente se fue generalizando el vídeo en streaming, que se visualizaba al tiempo que se descargaba y cuya explosión se produjo con la llegada de Youtube que generalizó la conversión a Flash de los vídeos. Hoy en día se abre camino HTML 5 como nueva fórmula para servir vídeos por internet.

Las ventajas que tienen el vídeo y el audio es que existen dispositivos de grabación al alcance de cualquier usuario, que puede grabar un vídeo casero sin esfuerzo. Además, se están realizando grandes avances en el reconocimiento de la voz y la imagen. En YouTube existe una funcionalidad, aún en fase experimental, que permite transcribir las palabras pronunciadas por los protagonistas de un vídeo e incluso traducirlas a tu idioma gracias a la tecnología de Google, propietario del canal de vídeos. Por otro lado, los buscadores, como Bing, son capaces de clasificar imágenes en función de su color predominante o identificar si aparece una persona o un objeto.

El diario The New York Times, en su edición online, dispone de una plataforma que permite buscar términos en un discurso del Presidente Obama o acceder directamente al momento en que pronuncia una determinada frase. RTVE ha implementado algo similar en España.

El vídeo, sin embargo, plantea algunos inconvenientes, por ejemplo, hay usuarios que no disponen de altavoces o auriculares en su centro de trabajo y no pueden escuchar el sonido. Similar obstáculo encuentran personas sordas. Para solucionarlo, es recomendable

75

internetización

acompañar los vídeos con transcripciones y subtítulos en formatos estándar para que puedan beneficiarse:

• buscadores, que sólo rastrean texto

• personas sin altavoces

• personas sordas

En definitiva, los contenidos que publiquemos en nuestra web pueden haber sido creados específicamente para internet o para otros soportes. En ambos casos, deben aplicarse las “gramáticas” de internet y realizar las adaptaciones necesarias en el caso de los contenidos diseñados para ser impresos o retransmitidos por televisión, radio u otros canales. Ejemplos:

• Un vídeo de una convención puede publicarse en la web pero no sin un resumen de pocos minutos y, si es posible, una transcripción en HTML.

• No basta con escanear un catálogo de productos, es preciso adaptarlo a internet siguiendo las reglas que hemos descrito en los capítulos sobre AI y Diseño. El pdf para descarga será una opción pero no un sustituto de un verdadero catálogo. Ejemplo: mangoshop.es

AplicacionesLa Universidad de Columbia ha creado una master que combina Periodismo e Informática porque considera que los periodistas del futuro, los informadores, deberán dominar ambas técnicas. El lenguaje no se limitará al texto o las imágenes sino que deberán ser capaces de programar aplicaciones que realicen funciones complejas. Me gusta el ejemplo del Consumer Profile Tool de la consultora de negocio Forrester. Es un gráfico interactivo en el que el usuario puede elegir cómo visualizar los datos: por edades, por sexo, por país...

76

internetización

Un ámbito en el que son tremendamente populares las aplicaciones es el de los smartphones o teléfonos de última generación con acceso a internet, como el iPhone. En lugar de navegar por páginas web, que generalmente no están adaptadas a teléfonos móviles, los usuarios prefieren descargarse pequeños programas, llamados coloquialmente “apps” o “aplis” (de aplicaciones) que realizan funciones determinadas: consultar el tiempo, compartir fotografías, indicar a tus amigos tu localización...

ComunidadEn torno al contenido se crean comunidades. Los contenidos se generan, se votan, se retuitean, se comparten, se comentan. El paradigma de comunicación de uno a uno, de uno a muchos e incluso de muchos a muchos ha recibido una nueva vuelta de tuerca y ahora los contenidos tienen un ciclo de vida mucho más complejo. Este ciclo de vida, que puede durar minutos (el 70% de los tuits no

77

internetización

obtiene ninguna respuesta) o días es posible gracias a las redes sociales. Emerge entonces una figura, la del community manager, que no sólo dinamiza los contenidos sino también mima la relación con los usuarios: les interpela, les responde, les ayuda si encuentran problemas... La simpática infografía The Hectic Schedule of a Social Media Manager resumía 24 horas en la vida de un community manager:

1. Se levanta y revisa el correo que ha llegado mientras dormía

2. Escanea la red buscando información interesante para compartir

3. Tuitea y retuitea

4. Publica un post o actualiza su estado en Facebook. Lo comparte.

5. Se reúne con el equipo comercial

6. Responde comentarios o mensajes

7. Almuerza con otros compañeros de profesión

8. Sin olvidar hacer check in en Foursquare

9. Graba un vídeo con el CEO o algún empleado y lo sube a YouTube

10. Escribe otro post

11. Habla por Skype sobre microblogging corporativo

12. Revisa las métricas en Google Analytics

13. Programa tuits para publicar por la noche dirigidos a usuarios de otros países

14. Mira el correo por última vez en el móvil antes de acostarse

Valor añadidoCada vez más, los usuarios esperan recibir contenidos de mayor valor añadido. Es un tema clave en el reparto de papeles en internet. Las utilidades para generar contenidos están al alcance de todos los públicos y cada día son capaces de realizar tareas más complejas. Redactar un texto, tomar una fotografía, grabar un vídeo,

78

internetización

preparar una presentación no requieren programas sofisticados. Tampoco su edición ni su publicación. Por tanto, cada vez es mayor el valor añadido que el profesional debe incorporar a sus creaciones para diferenciarse y reivindicar su trabajo. No es lo mismo grabar un vídeo de una hora de tus últimas vacaciones que montar un clip de 2 minutos con las frases principales de un discurso de Barack Obama. Es lo mismo que ocurrió con el aire acondicionado o el ascensor, comenzaron siendo un lujo y hoy son básicos en un automóvil o una vivienda. Los usuarios los demandan por defecto y las empresas y profesionales deben seguir innovando para ser competitivos.

El valor añadido en un contenido puede tomar diversas formas:

• noticia de última hora. Estoy suscrita a un servicio que me envía alertas al móvil cuando se produce una noticia de alcance. No me envía todas las noticias, sino que las filtra y sólo me interrumpe cuando realmente es importante.

• ahorrar trabajo al destinatario final, sea en forma de recopilaciones, resúmenes o análisis en profundidad. Muchos diarios online, acuciados por la falta de ingresos de sus ediciones digitales, están definiendo servicios de pago basados es estas premisas.

79

internetización

80

internetización

Gestión y mantenimiento

A veces es fácil olvidar que una web, una vez creada, requiere un mantenimiento que será, además, lo que más tiempo nos exija. Crear una web puede llevar dos semanas, seis meses o un año pero el mantenimiento no termina jamás. En este epígrafe sobre gestión de una web nos vamos a centrar en el mantenimiento diario no en rediseños o implementación de nuevas funcionalidades, que serían proyectos o mini-proyectos en sí mismos.

Perfil del gestorEn el día a día de una web intervienen numerosos perfiles: editores de contenidos, vendedores, diseñadores, técnicos... Idealmente, deben conocer tanto el negocio o especialidad de la web en la que trabajan, la disciplina a la que se dedican y tener conocimientos de gestión de webs. ¿De qué nos sirve un comercial que no conoce los formatos publicitarios online? ¿y un editor de contenidos que no sabe insertar un enlace en HTML? ¿puede gestionar un canal una persona que no sabe cómo consultar las estadísticas de acceso del día anterior?

Internet es un ámbito multidisciplinar por excelencia, por eso es conveniente que los empleados estén acostumbrados a trabajar en equipo y a compartir conocimientos de sus respectivas áreas de especialización.

CoordinaciónCoordinación, coordinación y coordinación, es la palabra que más repetirás al intentar gestionar una web. Es preciso coordinar a todos los niveles:

• a los miembros del equipo: diseñadores con editores y con comerciales y con técnicos y jefes de proyecto...

• con traductores

• con editores en otras ciudades o países

81

internetización

• con el equipo offline. Por ejemplo, vendedores en concesionarios o puerta a puerta

• con la dirección y equipo de management

• las fechas de publicación

• las fases de proyectos

• las distintas secciones y páginas de la web: querrás que algo aparezca publicado en el boletín el mismo día que en la home

• con las webs en las que participes: sea Facebook o Twitter

• con las distintas versiones de tu presencia online: móviles, tabletas...

• etc

Con la aparición de las redes sociales y los social media la gestión de un proyecto web se ha descentralizado en buena medida. No sólo hay que actualizar la web sino los perfiles en Facebook, Twitter o Linkedin y monitorizar la respuesta de los usuarios y el impacto de las distintas acciones. Es una labor de dinamización, diálogo y moderación.

MantenimientoEl software que utilicemos en nuestra web también nos exigirá tareas de mantenimiento. Un día será un parche de seguridad y otro el lanzamiento de una actualización. Esto implicará primero realizar copias de seguridad y posteriormente instalar las novedades.

Además de estas tareas no programadas una web requiere un mantenimiento diario y semanal. Un ejemplo es la realización de back ups (copias de seguridad) diarios o semanales del sitio. Generalmente el propio servicio de hosting se ocupa de esta tarea.

Seguramente, no habrá pasado una semana desde el lanzamiento de nuestra web y ya estaremos pensando en nuevas funcionalidades, algunas serán tan sencillas como la inclusión de la

82

internetización

opción de “compartir” en los posts del blog y otras requerirán desarrollos que durarán semanas.

Una necesidad que surgirá con los años será un rediseño o un cambio de enfoque. Esto lo han vivido ya empresas webs veteranas que han tenido que adaptar su lay out (apariencia) concebido para resoluciones de pantalla de 800x600 píxeles a 1024.

Alojamiento

Los sitios web se alojan en ordenadores llamados servidores. Existen empresas dedicadas a proveer estos servicios denominados hosting.

En esta tabla de ejemplo podemos ver una comparativa de distintos planes, desde el más sencillo, apropiado para un blog hasta servidores dedicados.

83

internetización

En función del tamaño de nuestra web y del tráfico que vaya a recibir nuestra web necesitaremos mayor capacidad de almacenamiento, de transferencia de datos, más cuentas de correo etc.

Los precios son muy variados, desde 30 euros al año a muchos miles de euros.

84

internetización

Analítica web

Sabemos perfectamente qué clientes son los más asiduos a nuestro restaurante o a nuestro comercio pero a simple vista puede parecer que los visitantes de una web son invisibles. Nada más lejos de la realidad, cada movimiento que un usuario realiza en un web queda registrado. Existen numerosos programas, algunos gratuitos, otros realmente caros, para monitorizar la actividad de los usuarios que visitan nuestra web que permiten extraer conclusiones y tomar decisiones en la gestión de un proyecto web.

Monitorización de un sitio webAl interactuar con una web el usuario deja un rastro, log en inglés. Numerosos programas traducen estas huellas a datos interpretables. Por ejemplo, un periódico online puede saber en tiempo real que noticia está siendo la más leída y, consecuentemente, dejarla más tiempo en portada o ampliarla con nuevos datos. En una web con menos actividad puede ser suficiente con analizar los datos de actividad de los usuarios una vez al día para detectar evoluciones y tendencias.

Es importante ser capaz de averiguar por qué unas páginas son más visitadas que otras o por qué las visitas no se convierten en compras. Para ello, deberemos conocer qué variables intervienen, es posible que se aproxime el Día de la Madre, por lo que la sección “ramos de flores” esté creciendo en visitas. O que sea primero de mes y muchos usuarios consulten su extracto bancario o su factura. El envío de un e-mail promocional es otro motivo frecuente detrás de un incremento significativo del tráfico de una web. Lo importante, en todo caso, es ser capaz de extraer conclusiones, tomar decisiones y ejecutar acciones a la vista de los datos ofrecidos por la analítica web.

La monitorización de un sitio web no se limita a cifras, herramientas como los tests multivariable o el eye tracking nos proporcionarán información sobre las preferencias de nuestros usuarios y cómo el diseño o la rotación de productos afectan a su comportamiento.

85

internetización

Variables principalesNo es lo mismo gestionar un gimnasio con socios en un barrio que una peluquería en un centro comercial y tampoco todas las webs son iguales. Con el tiempo iremos identificando las variables más importantes para monitorizar el día a día de nuestro proyecto o negocio en internet. Son las KPI o Key Performance Indicators (indicadores clave).

Para empezar será necesario conocer el número de usuarios únicos que nos visitan. Un usuario único es una persona que visita la web independientemente del número de veces en que acceda a nuestras páginas. Si entra en repetidas ocasiones hablaremos de visitas. Un lector de un diario online puede entrar todos los días e incluso muchas veces al día mientras que las compras en el supermercado las realizamos una vez al mes o cada quince días. Por tanto, el número de visitas será superior al de usuarios. Páginas vistas es el número de páginas que un usuario recorre al visitar nuestra web. El tiempo que el usuario permanece en la web es una alternativa a las páginas vistas para calcular si los contenidos que ofrecemos al usuario son de su agrado.

Muy relevante es la información que obtengamos sobre la procedencia de nuestros usuarios. Una web con usuarios fieles puede obtener ratios de acceso directo a la misma del 80% mientras que otras webs optan por dirigirse a usuarios que navegan desde buscadores y diseñar sus contenidos para personas que sólo entrarán una vez en su web.

De los usuarios que llegan a través de buscadores, fundamentalmente Google, nos interesa saber qué palabras clave utilizaron para encontrarnos. Asimismo, descubrir cuáles son las principales páginas de entrada, ya que la home no es siempre la primera página que ve un usuario.

Además de los accesos directos de usuarios que conocen a fondo nuestra web y los que llegan casualmente desde buscadores como Google son importantes las visitas que acceden a nuestra web desde enlaces en otras páginas, llamadas referers. Existen webs con gran poder de influencia y lograr que nos enlacen puede suponer crecimientos exponenciales de tráfico a nuestra web durante los días que dure el efecto del enlace. No obstante, esto debe ser el resultado de trabajado constante y no de trucos o artificios que inflen

86

internetización

artificialmente la audiencia que, a los pocos días, se marchará con la misma facilidad que llegó.

Un dato importante que es conveniente conocer es la llamada bounce rate o tasa de rebote. Indica el porcentaje de usuarios que abandonan la web sin realizar ninguna acción. Sólo visualizan una página y se marchan. En un blog puede no ser un dato negativo: el usuario llega, encuentra lo que busca y se marcha. Sin embargo en otras webs puede ser preocupante tener un bounce rate superior a 50-60%.

Cada vez cobran más peso como fuentes de tráfico las redes sociales y, más en concreto, Facebook y Twitter. Para algunos medios de comunicación las visitas que procedentes de Facebook ya suponen el 5%. Las redes sociales, sin embargo, no se miden sólo como fuente de tráfico sino que también hay cada día más herramientas para monitorizar la actividad de nuestros usuarios en social media:

• tamaño de la red (seguidores, fans, suscriptores...)

• actividad de la misma (retweets, favoritos, “me gusta”, comentarios...)

• compromiso (menciones positivas, negativas).

Conocer qué páginas o qué contenidos son los preferidos por los usuarios es una de las funciones que más me gustan de las herramientas de analítica web. Puedes mantener una web sobre cocina pero si además llegas a conocer a tus usuarios y sabes que prefieren la comida asiática o las recetas para microondas te será muy útil para mejorar el servicio. Personalmente, me gusta tener un listado con los contenidos más leídos y agruparlos por temas, es como escuchar en el silencio las voces y las opiniones de tus clientes.

El análisis de los contenidos más visitados se puede sofisticar enormemente, llegando a trazar funnels o recorridos que realizan los visitantes al llegar a una página, identificándose patrones. Por ejemplo, usuarios que llegan a la home → seleccionan una categoría → seleccionan un producto → lo introducen en el carrito de la compra → introducen sus datos y así hasta llegar a la compra. Este tipo de análisis se denomina “de embudo” o “túnel” (funnel) porque lo

87

internetización

habitual es que en el recorrido se vayan perdiendo usuarios y sólo unos pocos lleguen a completar la tarea.

Los datos socio-demográficos y de contexto se pueden obtener igualmente por medio de Analytics, Nielsen u otra herramienta en mayor o menor medida. Así, podemos saber la procedencia geográfica de las visitas, con mayor detalle dependiendo del país o la provincia; las horas de máximo tráfico; incluso los ingresos, la edad o el sexo de los usuarios a través de encuestas.

En el aspecto técnico, los navegadores, resoluciones de pantalla, sistemas operativos desde los que acceden los usuarios nos pueden dar pistas acerca de en qué dirección deberían enfocarse nuestros próximos desarrollos. Por ejemplo, es posible que empiecen a crecer los accesos desde iPhone.

Por último, nos referiremos a uno de los datos clave: la conversión. No es suficiente con monitorizar las estadísticas de acceso sino que hay que fijar objetivos y verificar que se alcanzan. Veamos un ejemplo: contratamos una campaña publicitaria que supone un incremento del tráfico del 20% y que esperamos aumente las ventas un 5%. Deberemos medir que efectivamente los nuevos visitantes no se han quedado en meros espectadores sino que han realizado compras. Otro ejemplo de conversión serían los formatos publicitarios que se pagan en función de la acción que generan, imaginemos que estrenamos una película y queremos que el público objetivo vea el trailer; podemos acordar que se pague únicamente por el número de veces que se activa el “play” en el visor y no sólo por mostrar el robapáginas.

Herramientas más usadasAunque en los primeros años de la analítica web se trataban los ficheros log que se generaban hoy en día se han generalizado programas que traducen los datos “en crudo” a formatos fácilmente interpretables. El más popular y además gratuito es Google Analytics.

Si quieres conservar el control sobre tus datos y no facilitárselos a Google existen alternativas de pago como las que ofrecen Nedstat, Webtrends o Nielsen NetRatings.

88

internetización

Habitualmente, estos programas exigen insertar unas breves líneas en el código fuente de cada página mediante un proceso automatizado. De esa forma, cada vez que un usuario “solicita” página o realiza una acción en ella ésta queda registrada.

Si tu empresa concentra buena parte de su actividad en internet es posible que desees que tus datos sean públicos, por ejemplo, para vender espacio publicitario. Esto es frecuente en los medios de comunicación online, que reciben cientos de miles o millones de visitas de usuarios segmentados. Por ejemplo, la sección de Fórmula 1 del diario deportivo Marca puede ser un soporte publicitario adecuado para un fabricante de automóviles ya que sus lectores son amantes de la conducción. En tal caso, existen organismos que auditan tus cifras de audiencia, como OJD Interactiva en España. Los datos de los medios que audita son públicos y puedes consultarlos gratuitamente en su web: www.ojdinteractiva.es.

89

internetización

90

internetización

Control de calidad

Llegado este punto, ya sabemos lo esencial para construir una web, sin embargo, la inexperiencia nos puede jugar una mala pasada y dar lugar a errores, inconsistencias y diversos tipos de fallos que pondrán en peligro la correcta evolución de nuestra web. Para evitar malas prácticas, disponemos de diversas metodologías y disciplinas que garantizarán que no sólo tenemos una web sino que además es la mejor web posible.

Hemos decidido analizar:

• Estándares web

• Accesibilidad

• Usabilidad

Estándares webEl W3C o World Wide Web Consortium es el organismo que define los estándares para el diseño web. Sus grupos de trabajo pueden dedicar años a debatir la mejor solución para un problema. El HTML, XHTML, CSS o XML que tantas veces hemos citado son algunas de las tecnologías que han definido. Entre sus integrantes se encuentran instituciones, investigadores, multinacionales, y gigantes del software como IBM o Microsoft ya que persiguen el mayor consenso posible en sus decisiones.

El director del W3C es Tim Berners-Lee, inventor de la WWW. Las oficinas del W3C en España tienen sede en Gijón y periódicamente organizan jornadas y eventos divulgativos.

El objetivo del W3C es la interoperabilidad, es decir, lograr que los desarrollos web sean accesibles desde cualquier dispositivo y versión, ahora y en el futuro.

91

internetización

Los estándares que definen podemos compararlos a una gramática que marca las normas para escribir en un determinado idioma. Si las seguimos, nos aseguramos de que todo el mundo nos comprenda. En internet ocurre algo similar, si seguimos las instrucciones del W3C y escribimos el código HTML de nuestra web como marca el W3C incluso los navegadores más antiguos leerán nuestra web y la mostrarán, en tanto que si somos descuidados en poco tiempo nuestra web irá perdiendo usuarios que, al disponer de navegadores diferentes o antiguos, no las podrán visualizar.

Suele ser especialmente molesto cuando ocurre en un servicio público o en la web de un banco, ya que crean una situación de indefensión en el usuario que quiere realizar una operación importante. Afortunadamente esta circunstancia se da cada vez con menor frecuencia.

Cuando diseñamos una web la diseñamos también para el futuro y para el pasado. El W3C continuamente está desarrollando nuevos estándares, cada vez más potentes y exigentes y si descuidamos el código fuente de nuestra web los nuevos navegadores, como Chrome, que se diseñan siguiendo dichos estándares, no serán capaces de mostrar correctamente nuestra web. Del mismo modo, no todos los usuarios disponen de las últimas versiones de los navegadores, bien porque no son conscientes de que deben actualizarlos o porque tienen restricciones para acceder a las versiones más recientes. El W3C se preocupa de que el código que sigue sus estándares “degrade grácilmente”, es decir, que muestre lo esencial aunque pierda algunos detalles o elementos accesorios.

Una página web diseñada conforme a estándares incluso se podría visualizar, con limitaciones, en un teléfono móvil.

“¿Es más caro mantener una web conforme a estándares?” nos preguntan a veces. Podríamos responder ¿es más caro conseguir un texto redactado sin errores gramaticales? Se trata, en definitiva, de una buena práctica que, si se conoce a fondo, surge espontáneamente en el desarrollador web. Lo que sí es cierto es que puede conllevar más días de desarrollo y comprobaciones. Uno de los puntos críticos que más dolores de cabeza traen a los desarrolladores web es la compatibilidad entre navegadores. Los navegadores web, como Firefox, Internet Explorer, Chrome, Safari, Opera, están en constante evolución y conviven, asimismo,

92

internetización

diferentes versiones de los mismos, no todos siguen estándares o no en la misma medida por lo que lograr que una web se visualice exactamente igual en todos ellos puede ser tarea imposible. Esto no es grave si las diferencias son accesorias y las funcionalidades básicas son accesibles en todos ellos.

El W3C facilita en su página web validadores que analizan automáticamente si el código de una web es conforme a estándares y marca los errores que detecta para facilitar su corrección. Asimismo, es posible encontrar en la web servicios que comparan el aspecto de nuestra web en múltiples navegadores, sin tener que tener todos ellos instalados en nuestros ordenadores.

Accesibilidad

La accesibilidad es una rama de los estándares web especializada en facilitar el acceso a las webs a personas con discapacidad.

En un sentido estricto, la accesibilidad, hace referencia a las ayudas que necesitan las personas con ceguera, sordera, movilidad reducida o discapacidad intelectual para navegar por internet. En un sentido amplio, todos nos beneficiamos de una web accesible, del mismo modo que nos beneficiamos de las rampas en las aceras o de los ascensores para minusválidos.

Según el INE, en España hay más de 3 millones de personas con algún tipo de discapacidad, pensemos en las personas con vista cansada que difícilmente pueden leer la diminuta tipografía de algunas webs. Estas personas utilizan ayudas técnicas para navegar y se benefician de algunas buenas prácticas de diseño web que debemos conocer, por ejemplo:

• Lectores de pantalla. Software que lee en voz alta las páginas web. Leen el código HTML por lo que no pueden leer texto escrito en una imagen.

• Software reconocimiento de voz. Personas con movilidad reducida que no pueden manejar un ratón dan instrucciones de voz a sus ordenadores, que las interpretan y les permiten navegar. Ejemplo: “abre Google”

93

internetización

• Una persona sorda se beneficia ampliamente de los vídeos subtitulados y, como es obvio, también lo agradeces si no dispones de altavoces o si no conoces el idioma y los subtítulos son además una traducción

Para diseñar webs accesibles existen unas guías denominadas WCAG. En 2008 se publicó la segunda versión. Son unas guías extensas y complejas y seguirlas al pie de la letra puede resultar tarea imposible. Por ello, hay que distinguir entre a accesibilidad real y la certificación. La real es aquella que, aunque no sigue todas las pautas al 100% facilita inmensamente la navegación y el consumo de contenidos de la web a personas con discapacidad. La accesibilidad certificada es aquella que busca obtener el visto bueno de organismos que revisan el nivel de accesibilidad de webs, especialmente las de la Administración. Según las pautas de accesibilidad de la WAI (Web Accesibility Iniciative, dependiente del W3C) existen tres niveles de accesibilidad:

• A . Es el nivel más básico y el que toda web debería cumplir

• AA . Supone avances respecto al nivel A y es un añadido altamente recomendable

• AAA . Es una gran accesibilidad y supone un esfuerzo lograrlo y mantenerlo

Para determinar si una web es accesible existen validadores disponibles gratuitamente en la Red, adicionalmente, me gusta aplicar algunos trucos:

• Imágenes. Aunque las personas no notemos la diferencia, los navegadores no pueden leer los textos escritos en una imagen. Para averiguar si esto ocurre, intentaremos seleccionar y copiar un texto. Si no es posible, es que es una imagen y por tanto no accesible

• Los lectores de pantalla de que disponen las personas ciegas tienen una opción que permite extraer todos los enlaces de una página y navegar por ellos sin necesidad de leer toda la página. Por ello, si usamos las mismas palabras para cada enlace, no hay forma de distinguirlos. Ejemplo incorrecto: “pincha aquí”, “pincha aquí”, “pincha aquí”. Ejemplo correcto: “accede a la factura” “accede al extracto” “accede a tus

94

internetización

puntos”. Además, si usamos textos significativos en los enlaces, también mejoraremos el SEO de nuestra web.

• Uso de flash. Una infografía diseñada en flash debe ser navegable con el tabulador y ha de ser posible activar los enlaces pulsando “intro”. Si no es así, no es accesible.

Una de las grandes ventajas de seguir estándares y pautas de accesibilidad es que facilitamos el acceso de todo tipo de dispositivos, no sólo navegadores web. Los móviles, con sus pequeñas pantallas, su ausencia de teclado o de ratón y también Google, al que a menudo se alude como el “usuario ciego” más importante, ya que su forma de rastrear la Red es similar a la de un invidente, también podrán recorrer nuestras webs y contenidos y mostrarlos más fácilmente si seguimos las pautas del W3C.

UsabilidadUsabilidad es un término que hace referencia a la facilidad de uso de un sitio web. Estamos acostumbrados a que la lavadora o el microondas vengan con un manual de instrucciones que consultamos con desgana. Con internet y millones de páginas web leer las instrucciones para aprender a usar cada web sería imposible, por ello deben ser tremendamente intuitivas y fáciles de usar. Esto se ha conseguido a partir de las buenas prácticas de disciplinas preexistentes como el diseño de software o la ergonomía así como de convenciones no escritas.

En mis inicios como profesional de internet me dediqué a la usabilidad. Por aquel entonces estaba íntimamente ligada a la arquitectura de información y sigue estándolo aunque en realidad son como dos caras de una misma moneda. La arquitectura de información ayuda a realizar diseños usables y la usabilidad verifica que lo son. La aplicación de una metodología a lo largo del proceso de diseño ayudará a alcanzar la máxima usabilidad.

Antes

El proceso de diseño comienza con una fase de recopilación de información y análisis, es entonces cuando un focus group (grupo de discusión) con usuarios representativos puede aportar datos

95

internetización

valiosos sobre sus preferencias y expectativas que podremos incorporar al diseño de la web.

Si ya existe una web previa y lo que queremos es mejorarla un experto puede realizar una análisis heurístico en el que, mediante un checklist, revisará los puntos críticos.

Durante

Los usuarios pueden tener su propio mapa mental sobre cómo esperan que sea la web, intentemos descubrirlo con técnicas como el card sorting: escribiremos en fichas los nombres de las secciones o funcionalidades de nuestra futura web y veamos cómo las ordenarían. Esto nos dará pistas sobre qué secciones o agrupaciones son más lógicas para ellos y evitaremos llamar a una sección Ocio cuando todo el mundo la llamaría Turismo.

En este punto podremos ya definir “personas” o usuarios prototípicos que representan los casos de uso de nuestra web.

Después

El instrumento para medir la usabilidad por excelencia es el test de usuarios, por eso le dedicaremos más espacio. Al contrario que el focus group en el que un grupo de unos ocho usuarios se juntan en una sala a debatir sobre una web o un tema, en el test los usuarios se enfrentan a solas a la web, en diversas etapas de su diseño (prototipo, boceto, primera versión...) para detectar errores básicos. Es especialmente útil antes de lanzar la web, para corregir problemas fundamentales que saldrán a la luz en cuanto la web comience a ser usada por el público.

Estos test se conducen por un especialista y consisten en una serie de tareas que simulan una sesión de navegación. El usuario debe completarlas en un tiempo determinado o abandonarlas indicando así que la usabilidad es mejorable. El propietario de la web puede observar el test desde otra sala a través de una cámara de circuito cerrado o de vídeos si el usuario acepta que se grabe la sesión.

Un test de usuarios casero se puede realizar con un boceto en papel de nuestra web y unos amigos o familiares que no conozcan el proyecto. Se les muestran las hojas y se les pide que realicen una acción, por ejemplo, hacer login en la página. Si pulsan en el botón o

96

internetización

enlace adecuado les mostraremos otra página en la que introducir usuario y contraseña. La imaginación no tiene límites :-)

El grado de sofisticación de los test no deja de avanzar, al lado de los test caseros con unos pocos amigos tenemos:

• tests automatizados que pueden realizarse a cientos de usuarios a la vez.

• eye tracking: una cámara sigue el movimiento de nuestra pupila por las páginas de la web y detecta donde detenemos la mirada, qué zonas no visualizamos, hasta dónde hacemos scroll...

• tests multivariable: si dudamos entre varias cabeceras o eslóganes para una página podemos testar las diversas combinaciones con ayuda del Optimizador de Páginas Web de Google

Una fórmula alternativa si nuestros amigos no quieren hacer de conejillos de Indias es recurrir a webs que, por unos pocos euros, someterán nuestros diseños a usuarios voluntarios que testan webs.

Existen múltiples técnicas para detectar a tiempo problemas en una web, conviene consultar con especialistas cuáles son las más adecuadas y aplicarlas. Su coste no es alto y ahorra gastos de desarrollo al evitar tirar a la basura funcionalidades que el usuario no necesita o no consigue usar tal como se diseñaron. Es importante incluirlas en el ciclo de vida del producto y repetirlas periódicamente para validar avances, detectar nuevos fallos, obsolescencias etc.

Aunque hemos seleccionado los estándares, la accesibilidad y la usabilidad como las principales fórmulas para medir la calidad de un sitio existen metodologías mucho más exigentes y estrictas, especialmente en el campo de la programación que exceden el ámbito de este manual.

97

internetización

98

internetización

Comunicación y promoción de sitios web

Una empresa, para dirigirse a su público objetivo, dispone de diversos recursos que están transformándose profundamente empujados por la fuerza de internet. Nos referimos a la Comunicación, las Relaciones Públicas (RRPP) y la Publicidad, cada vez más entrelazadas.

Para entender mejor las diferencias entre unas y otras se puede trazar un paralelismo entre estas tres disciplinas y lo que los anglosajones denominan medios owned (en propiedad), earned (ganados) y paid (comprados). La Comunicación equivaldría a los medios owned, la Publicidad a los medios comprados o pagados y en un territorio intermedio se encontrarían los medios ganados gracias a las RRPP o a las otras dos técnicas.

Comunicación y Relaciones PúblicasSi hay algo que ha cambiado y está cambiando con internet es la comunicación. A menudo se habla místicamente de “la conversación”, en alusión a la primera tesis del Manifiesto Cluetrain: “los mercados son conversaciones”. Fue publicado en 1999 y merece la pena detenerse en algunos de sus puntos:

1. Los mercados son conversaciones.

4. Si las conversaciones humanas (...) son usualmente abiertas y naturales ¿por qué cambiarlo?

6. Internet está permitiendo conversaciones entre seres humanos que eran imposibles en la era de los Medios de Comunicación de Masas.

99

internetización

15. En tan solo unos pocos años la homogénea voz de los negocios (el sonido de la visión, la misión y los folletos publicitarios) va a sonar tan artificial como el lenguaje de la corte francesa del siglo XVIII.

19. Las compañías pueden ahora comunicarse con su mercado directamente. Puede ser su última oportunidad si la desperdician.

53. Se están llevando a cabo dos conversaciones. Una en el interior de las compañías. La otra con el mercado.

56. Estas dos conversaciones quieren encontrarse. Hablan el mismo idioma. Reconocen sus voces mútuamente.

64. Queremos tener acceso a tu información corporativa, a tus planes y estrategias, a tus mejores ideas y a tu conocimiento genuino. No nos vamos a conformar con tus folletos a cuatro colores, o con tu web sobrecargada de chucherías visuales pero con muy poca sustancia.

75. Si quieres que te dirijamos la palabra, dinos algo. Que sea algo interesante para variar.

83. Queremos que trates a 50 millones de nosotros tan seriamente como tratas a un reportero de The Wall Street Journal.

84. Conocemos algunas personas en tu empresa. Son buena gente cuando están "online". ¿Tienes más de esos escondidos por ahí? ¿Pueden salir a jugar?

90. Aún en el peor de los casos, nuestra nueva conversación es más interesante que la mayoría de las ferias comerciales, más entretenida que un programa de televisión y ciertamente más apegada a la vida real que cualquier web corporativo que hayamos visitado.

95. Estamos despertando y conectándonos. Estamos observando. Pero no estamos esperando.

Instructivo ¿verdad? El paradigma de la comunicación está cambiando y en él conviven dos niveles. Se mantiene la comunicación a través de intermediarios, si bien ésta está experimentando grandes cambios y crece con fuerza la comunicación directa.

La comunicación a través de intermediarios, fundamentalmente la prensa, sigue siendo ampliamente utilizada. El mecanismo habitual es la nota de prensa que se remite a las agencias de noticias y a los

100

internetización

medios de comunicación para que la publiquen y llegar así a los usuarios finales.

Los blogs irrumpen en escena desde una doble perspectiva de comunicación directa e indirecta. No siempre entran en el circuito habitual de las notas de prensa, no obstante, su audiencia a veces es considerable y al estar dirigidos a nichos muy especializados pueden ser el lugar idóneo para hacer llegar nuestro mensaje a nuestro público. Dirigirse a un blogger puede resultar atemorizante ya que reivindican una forma de comunicación más natural que la de las anquilosadas notas de prensa y comunicados oficiales, pero esto no debe paralizarnos. Seleccionar los blogs más afines temáticamente y leerlos durante un tiempo nos permitirá familiarizarnos con los autores y descubrir puntos de interés comunes. Ellos quieren proporcionar a sus lectores la mejor información y nosotros también, por ello, anunciarles una primicia o invitarlos a una demo de un producto pueden ser fórmulas válidas para acercarnos a ellos.

Los blogs, por otra parte, son una excelente vía de comunicación directa con nuestros clientes. Empresas como Google, Facebook y también todos los pequeños negocios que surgen al calor de internet (start ups) cuentan con blogs corporativos donde hacen sus anuncios oficiales. Los periodistas no olvidan suscribirse a los mismos, pero también bloggers y ciudadanos interesados en conocer las noticias de primera mano.

Los social media son otra de las fuerzas que está cambiando la comunicación entre las empresas y su público. Engloban, no sólo a los blogs, un formato ya veterano, sino a las fanpages de Facebook, los micromensajes de Twitter, las fotos alojadas en Flickr, los vídeos subidos a Youtube, las presentaciones compartidas en Slideshare... Esto significa que internet ya no es sinónimo de página web. La presencia en internet se ha desdoblado en múltiples facetas. Del mismo modo que dábamos a nuestros clientes nuestro teléfono y nuestra dirección postal para que eligieran la mejor forma de comunicarse con nosotros, en estos momentos debemos abrir vías de comunicación en blogs, Facebook, Twitter, Youtube, Flickr, Slideshare, Linkedin y usar cada uno de estos canales de la forma más adecuada. Nuestro público más joven se encontrará en Tuenti, mientras que para distribuir información urgente será más útil Twitter.

Si nos quedan dudas sobre si es conveniente que nuestra empresa utilice estas herramientas planteémonos lo siguiente: si creáramos

101

internetización

una empresa hoy en día ¿cómo nos comunicaríamos con nuestros clientes y grupos de interés? Probablemente elegiríamos un blog. Entonces, ¿por qué no lo aplicamos a una empresa que ya tenga 5, 10 ó 50 años?

Y ¿quién es la persona idónea para ser el portavoz de nuestra empresa? Cualquier persona de nuestra empresa está transmitiendo una imagen de la misma y cualquiera puede representarla, sólo hace falta encontrar el interlocutor más adecuado para cada foro. Si a un congreso enviamos a nuestros mejores investigadores, ¿por qué no designar a las personas más adecuadas para dialogar a través de cada canal? Una segunda opción es hacer recaer esta responsabilidad en la figura del community manager (CM), el profesional que gestiona, dinamizando y moderando la conversación, los social media.

El protagonismo del usuarioDel mismo modo que nosotros tenemos múltiples vías para comunicarnos con nuestro público y clientes, directa o indirectamente, ellos también pueden hacerlo, pueden elegir recibir la información e interactuar con nosotros a través de uno o varios de esos canales o preferir hacerlo a través de intermediarios. Los intermediarios son los medios de comunicación, los blogs de terceros, los amigos en Facebook que comentan nuestros productos o incluso nuestros hijos pueden serlo.

Esta comunicación es bidireccional y los usuarios pueden responder a nuestros mensajes, de nuevo, directa o indirectamente. Pueden escribirnos a través del formulario de contacto de nuestra web o enviarnos un mensaje en Twitter. Pueden comentar nuestros documentos publicados en SlideShare. Pueden marcar con un “me gusta” nuestros mensajes en Facebook. O, por el contrario, pueden publicar una opinión sobre nuestros productos en sus blogs o en la zona de comentarios de un periódico.

En esta nueva comunicación el usuario, no lo olvidemos, se convierte en protagonista al ser él mismo emisor y, si tiene gran influencia a través de su blog o un grupo en Facebook, un prescriptor capaz de influir en la opinión de otros consumidores.

Es de este modo cómo las marcas han dejado de depender del departamento correspondiente y han pasado a ser lo que los

102

internetización

usuarios dicen de ellas, incluso participando en la definición de los productos. Millones de conversaciones, como vaticinaba el Manifiesto Cluetrain, tienen lugar en la red y buena parte de ellas giran en torno a artículos de consumo.

La siguiente pregunta que nos hacemos es ¿cómo escuchamos a nuestro público? Cuando se comunican directamente con nosotros, a través de nuestros canales de presencia en internet es sencillo, basta con escuchar y responder, en público o en privado. Cuando eligen otros foros debemos utilizar herramientas para medir el buzz o “ruido” que generan y elegir el mejor canal para nuestra respuesta, porque no podemos quedarnos de brazos cruzados.

Gestión de la reputación onlineSi cada vez el acceso de las personas a herramientas de comunicación social es más sencillo es lógico que los mensajes se multipliquen exponencialmente. El press clipping que recibía un directivo a primera hora de la mañana recopilando las menciones en prensa a su persona o su compañía ya no es suficiente. Servicios gratuitos como Socialmention o Addictomatic rastrean numerosos medios sociales y de masas para extraer lo que se está comentando en torno a un concepto. Y van más allá, los categorizan, en una aproximación a la web semántica, en mensajes positivos, neutros o negativos. La monitorización es en tiempo real y la cantidad de datos que arrojan es tal que comienza a ser necesaria la figura de un profesional que analice la información, detecte errores y proponga mejoras.

La gestión de reputación online u ORM (online reputation management) es una profesión emergente que consiste en hacer un seguimiento de un determinado tema en social media para lograr una imagen positiva. Sin embargo, a menudo se queda en una operación de maquillaje o estética que no aborda el fondo de la cuestión.

103

internetización

104

internetización

105

internetización

Un servicios pionero en España en la monitorización de los social media fue Lastinfoo, tal vez muy adelantado a su tiempo. Una iniciativa más reciente es Gestiondereputacion.com, que nace de la necesidad de gestionar nuestra identidad y reputación digital.

Relaciones PúblicasLas fronteras entre Comunicación, Relaciones Públicas (RRPP) e incluso Atención al Cliente se están difuminando. Este es uno de los rasgos que caracterizan a la comunicación en la era 2.0, porque, cuando un usuario escribe una queja en su blog sobre un producto y la empresa responde en los comentarios ¿no está realizando funciones de atención al cliente?

Las RRPP se valen generalmente de los siguientes recursos para realizar su función: presencia en ferias, exposiciones, congresos, patrocinio de eventos, mecenazgo cultural, publicaciones corporativas, notas y ruedas de prensa, plublirreportajes y siguen apareciendo nuevos formatos cada día.

Al mencionar las fórmulas para acercarnos a los bloggers nos hemos referido a este tipo de técnicas. Si deseamos dejar esta tarea en manos de terceros existen agencias de comunicación que identifican blogs, tuiteros, grupos y comunidades afines a nuestro sector y posicionamiento. Bloguzz, por ejemplo, es una web que pone en contacto con bloggers a las marcas que desean lanzar o promocionar un producto. No existe un intercambio económico, simplemente, las empresas confían en la bondad de su producto y los bloggers interesados en la temática eligen si lo reseñan y en qué sentido, positivo o negativo.

Una forma de identificar bloggers o tuiteros relacionados con nuestros productos es recurrir a los rankings. En España el veterano ranking de Alianzo filtra por país, Comunidad Autónoma, categoría e idioma.

En febrero de 2010 el ranking absoluto de blogs quedaba así:

1 Microsiervos

2 Barrapunto

106

internetización

3 Genbeta

4 El blog de Enrique Dans

5 Xataka

6 Escolar.net

7 VidaExtra

8 Gadget Tecnologia

9 Error500

10 Kirai.NET

Y el de usuarios de Twitter más populares:

1 @marilink - Marilín Gonzalo

2 @edans - Enrique Dans

3 @meneame_net - Menéame

4 @HombresG - Hombres G

5 @jlori - José Luis Orihuela

6 @JavierCapitan - Javier Capitán

7 @patxilopez - Patxi López

8 @twittes - Rafael Peláez

9 @alexpuig - Alex Puig

10 @fotomaf - Mauro Fuentes

Este tipo de acciones también se pueden realizar directamente con consumidores. TRND (The Real Network Dialog) es una comunidad de marketing participativo. Sus usuarios reciben en primicia nuevos productos relacionados con sus intereses y los comentan con otros miembros o con sus familiares y amigos. Como dice su director, Sven

107

internetización

Mulfinger, en declaraciones a Marketing News “En los tiempos actuales, cuando la publicidad unidireccional deja de convencer al consumidor, se necesita cambiar las reglas del juego. El consumidor quiere ser escuchado e integrado en las estrategias de las marcas. Si el producto cumple con las expectativas, realizamos el sueño de cada responsable de marketing: planificamos y desarrollamos una campaña de boca a oreja a consumidores para que sean ellos quienes prescriban el producto a sus amigos, conocidos y familiares”. La multinacional de productos de limpieza del hogar Henkel, por ejemplo, ha probado ya este sistema con los artículos de limpieza Tenn Brillante o Estrella.

Nos hemos referido a fórmulas para llegar a nuestro público objetivo directa e indirectamente y hemos mencionado la posibilidad de que se conviertan en prescriptores. Pues bien, gracias a internet las Relaciones Públicas ha encontrado nuevas formas de amplificar los mensajes. Pensemos en la aplicación de Twitter, por ejemplo, en un Congreso o conferencia. Es posible:

• retransmitir el congreso desde una cuenta oficial habilitada en Twitter

• ser resumido por los propios asistentes o por quienes lo siguen a través de la retransmisión en vídeo mediante mensajes de menos de 140 caracteres.

• Publicar imágenes del mismo tomadas con el móvil

• seguirlo a través de la funcionalidad hashtag que agrupa todos los mensajes sobre un tema que se han marcado con una almohadilla (#) seguida de una palabra consensuada

• ser comentado por los asistentes y por quienes lo siguen desde sus casas, generando conversación

• enviar preguntas a los ponentes a través de Twitter, estés o no en la sala

• proyectar los mensajes en una pantalla

• en definitiva, generar conversación

Como vemos, algo tan sencillo como Twitter crea un ecosistema de un potencial increíble.

108

internetización

Hemos elegido un ejemplo de aplicación de Twitter pero casos similares se producen con otras herramientas de social media. Pensemos por ejemplo en la retransmisión de una carrera de motociclismo por rtve.es a la que se añade un módulo de Facebook para que los aficionados comenten los adelantamientos entre sí.

Retomando el Manifiesto Cluetrain que mencionábamos al principio, el lenguaje corporativo ha quedado anticuado, hay un nuevo diálogo de tú a tú, entre personas, basado en la naturalidad y en la relevancia de los contenidos. Estamos invitados a participar, si no lo hacemos, la conversación seguirá sin nosotros.

109

internetización

110

internetización

Publicidad

En la Facultad de Periodismo nos enseñaron que la publicidad también es información pero... sólo la primera vez que la ves. Muchas personas admiran la creatividad publicitaria o son fieles a marcas que les han acompañado desde su infancia, sin embargo, el bombardeo y la saturación irrita a los usuarios, tanto a los que ven la televisión y contemplan cómo la entrega de medallas de una final deportiva es interrumpida para insertar cinco minutos de spots como a los que visitan una web y se encuentran un intersticial ocultando los contenidos. Los usuarios, además, aprenden y son capaces de evitar las zonas de la pantalla que ocupan los anuncios, fenómeno ampliamente estudiado.

La gestión de la publicidad en internet constituye, en sí misma, una profesión. Es un campo que no cesa de crecer, innovar y reinventarse. Desde los antiguos banners a los juegos para iPhone diseñados para dar a conocer un producto ha transcurrido una década pero lo mejor de todo es que estamos sólo en los inicios.

En este capítulo repasaremos los principios básicos de las principales modalidades de marketing online.

Gestión de campañas publicitarias

Una campaña publicitaria siempre perseguirá unos objetivos concretos. Si es una nueva empresa la que se da a conocer o si ha cambiado de nombre estará interesada en realizar campañas de branding o reconocimiento de marca. Una tienda puede marcarse como objetivo incrementar un 5% sus ventas o captar 5000 leads o contactos de usuarios con los que establecer una relación comercial.

Para lograr estos objetivos el ejecutivo de marketing dispondrá de un presupuesto que deberá distribuir y una planificación que indique la duración de las campañas en el tiempo o el número de impactos que se van a realizar.

El reparto presupuestario tendrá en cuenta anuncios (“creatividades”), soportes y formatos. A partir de un documento de

111

internetización

briefing en el que se habrán descrito los objetivos la agencia creativa contratada diseñará los anuncios en sus diversos formatos: robapáginas, rascacielos, banner... La agencia de planificación, por su parte, seleccionará los mejores lugares (“soportes”) donde ubicar los anuncios y establecerá el número de veces que se mostrará cada creatividad, lo que en la jerga se conoce como “impresiones”. Por “soportes” en el mundo publicitario se hace referencia a las webs en las que se insertan las creatividades y que normalmente son medios online, aunque también pueden ser aplicaciones como Live Messenger.

Para una correcta planificación se hace imprescindible la segmentación; debemos conocer el perfil de nuestro público o públicos y saber dónde localizarlos. Los usuarios más jóvenes, por ejemplo, son muy activos en redes sociales mientras que existen webs orientadas a aficionados al mundo de los deportes o de los viajes. Si buscamos un público generalista o un gran impacto nada como una campaña en la página principal de los medios online más visitados, dato que se puede obtener en la web de OJD Interactiva.

Ejemplo ficticio de campaña:

Soporte Sección Formato CPM Impresiones Total

Elmundo.es Home intersticial 20 € 250.000 5000 €

Paginas Amarillas

Callejero robapáginas 25 € 100.000 2500 €

Yahoo! Finanzas rascacielos 30 € 150.000 4500 €

Un análisis continuo de la rentabilidad de cada inversión nos permitirá corregir desviaciones y realizar cambios en la campaña en todo momento.

112

internetización

Publicidad gráfica (display)Los anuncios gráficos que vemos al navegar por internet se denominan banners o display, por oposición a los anuncios que sólo contienen texto.

Sus características están normalizadas por la IAB, Internet Advertising Bureau, con matriz en Estados Unidos y con oficina también en España. En sus webs encontrarás documentos especificando los formatos existentes con sus correspondientes dimensiones, los pesos máximos aconsejados y otras normas prácticas.

Este proceso de estandarización de los formatos es necesario ya que permite diseñar las creatividades una sola vez e insertarlas en múltiples webs que tienen un espacio reservado para mostrar publicidad. Si los tamaños no fueran homogéneos deberíamos diseñar banners específicos para cada soporte.

Los primeros banners y botones publicitarios tenían unas dimensiones moderadas pero la tendencia de los lectores a evitarlos llevó a los anunciantes a definir formatos de mayor tamaño, es así como el banner de 468x60 píxeles quedó en desuso y fue sustituido por:

• megabanners (728x90)

• robapáginas (300x250; 300x300 y 200x200)

• rascacielos (100x600 y 120x600)

Existen formatos más agresivos, como los intersticiales, que tapan la pantalla por completo durante unos segundos.

Un anuncio siempre debe llevar un enlace a una página de destino en la que el usuario encontrará más información. Esta página de destino puede ser una página genérica o preexistente o puede ser diseñada específicamente para la campaña, se denomina landing page o página de aterrizaje.

Los anuncios de tipo display han evolucionado sin cesar desde que aparecieron los primeros GIFs animados. Hoy en día, son capaces de incorporar vídeo y sonido, desplegarse al posar el ratón sobre ellos o incorporar interactividad (juegos, selección de opciones, botones de control...). Esto es posible gracias a la tecnología flash,

113

internetización

que es dominante en el mercado publicitario, gracias a su potencial comunicativo.

Para evitar irritar a los usuarios la IAB ha establecido algunas recomendaciones como no activar el audio por defecto, ya que es realmente molesto abrir una página web y que se inicie el sonido por sorpresa. Asimismo, los intersticiales y otros formatos invasivos deberán incluir un aspa en un extremo que permita cerrarlos y un “ir al contenido”.

Si tenemos dudas sobre la efectividad de una creatividad o queremos dirigirnos a públicos distintos es buena idea diseñar varias versiones que incluyan algún matiz. Esto nos servirá también para testar cuál obtiene mejores resultados y analizar el por qué: el claim, las imágenes...

Al contratar una creatividad a un diseñador o una agencia lo más adecuado es redactar un briefing en el que detallemos los objetivos y requerimientos que deben cumplir, tanto técnicos como de identidad corporativa y tono del mensaje. Es conveniente que esté alineada con el resto de campañas en curso.

Al contratar la campaña debemos tener en cuenta el número de veces que una página es visualizada. Por ejemplo, la portada de un diario de gran audiencia como Marca recibe cientos de miles de visitas mientras que hay webs con sólo unos centenares de usuarios. Windows Live Messenger es capaz de solicitar millones de impresiones del anuncio al servidor donde está alojado, llegando a saturar la plataforma si no está preparada para un uso tan intensivo.

Una forma de maximizar nuestra inversión publicitaria es limitar el número de impresiones a una por sesión, de forma que el usuario sólo reciba una vez por visita el impacto publicitario, aunque esté varios minutos navegando por la misma web. Las posibilidades de segmentación son muy variadas, por ejemplo, es posible mostrar anuncios específicos a usuarios que se conectan desde un determinado país o en ciertas franjas horarias.

Una modalidad de publicidad gráfica son los patrocinios, mediante los cuales una empresa esponsoriza una sección o una funcionalidad. Por ejemplo, una operadora de telefonía móvil puede patrocinar la sección de tecnología de un diario o una empresa del IBEX 35 asociar su marca a una página de finanzas.

114

internetización

El buscador de Expansion.com está patrocinado por Iberdrola

Marketing en buscadores (SEM)El marketing en buscadores (SEM o search engine marketing) surge para dar respuesta a los anunciantes que no logran aparecer en la primera página de resultados cuando el usuario realiza una búsqueda de palabras clave en las que se quiere posicionar.

Imaginemos que nos especializamos en la venta de “naranjas para zumo” pero no aparece nuestra web cuando alguien realiza dicha búsqueda en Google o Bing, la solución que ofrece el SEM es “comprar” las primeras posiciones.

Estos anuncios se componen sólo de texto, generalmente constan de:

• título clicable

• entradilla

• dominio del anunciante

Siempre están identificados como “enlaces patrocinados” pero de forma tan sutil que muchos usuarios no lo perciben.

115

internetización

Los enlaces patrocinados permiten aparecer en los primeros puestos

Para contratar estos anuncios se especifican las palabras clave por las que se desea aparecer. Algunas están muy competidas, como “viajes” y puede resultar muy caro comprar una buena posición. Tanto Google como Yahoo! y Bing aceptan esta modalidad publicitaria. En el caso de Google, es su principal fuente de ingresos y dispone de utilidades gratuitas para calcular cuánto puede costar una campaña. Ejemplo:

116

internetización

Google permite calcular el coste de una campaña

AdWords de Google fue el primer ejemplo de esta modalidad publicitaria. Al no necesitar creatividades y adaptarse a todo tipo de presupuestos, desde 50 € a millones de dólares, se hizo rápidamente popular. Progresivamente, ha ido extendiendo el formato AdWords a otros de sus servicios, como Gmail o Youtube.

El sistema se basa en la “lectura” de los textos a los que acompaña, mostrando información relacionada. Por ejemplo, si escribimos un correo mencionando que queremos aprender italiano es muy probable que aparezcan anuncios por palabras de academias de idiomas o de viajes a Roma. Cuando fue incorporado a Gmail, Google recibió duras críticas de usuarios que consideraban que el buscador estaba violando la privacidad de las comunicaciones al “leer” sus correos.

Google extendió este modelo publicitario a todos los sitios web que lo solicitaran mediante el programa AdSense. Si gestionas un sitio web puedes abrir una cuenta de Adsense, obtener el código correspondiente, insertarlo en los espacios de tu web que consideres más adecuados y en pocas horas comenzar a mostrar anuncios relacionados con tus contenidos. Por ejemplo, si escribes un blog sobre literatura se mostrarán anuncios relacionados, como nuevos

117

internetización

libros, talleres de escritura, editoriales... Es lo que se denomina publicidad contextual.

El anunciante paga por clic, es decir, cada vez que un usuario pincha en el anuncio y es dirigido a su web Google recauda una pequeña cantidad que comparte con el dueño de la web en la que ha aparecido el anuncio. La cantidad que se paga por cada clic puede variar desde unos céntimos a varios euros, aunque esto último no es lo habitual.

El sistema siempre ha sido criticado por su falta de transparencia y periódicamente surgen noticias y debates sobre el porcentaje que se reserva Google o si limita los ingresos máximos que puede obtener cada web.

El programa Adsense ha dado origen a toda una generación de webmasters que han logrado gracias a este sistema ingresos suficientes para pagar los gastos de mantenimiento de su web, algún capricho o incluso el equivalente a un sueldo mensual. No obstante, se crea una dependencia de Google y su algoritmo. Un día puedes recibir miles de visitas y a los pocos meses empeorar tu posicionamiento y ver desaparecer estos ingresos. Por ello, es recomendable combinarlo con otras fuentes de ingresos, publicitarios o no.

En el lado más gris de los anuncios contextuales se encuentran casos como los clics fraudulentos o los clics involuntarios. Los anuncios contextuales se pueden personalizar para que encajen mejor con el diseño de tu web, sin embargo algunos websmasters eligen colores que hacen que se confundan con contenidos, llevando a usuarios inexpertos a hacer clic por error. Adsense también da la posibilidad de configurar en qué lugar de la página se inserta la publicidad y no es extraño llegar a páginas en las que es difícil encontrar los contenidos entre tantos anuncios. Un error que no hay que cometer es hacer clic en un anuncio publicado en nuestra página web, ya que eso genera un pago fraudulento para el anunciante. Esta práctica está penalizada por Google, que continuamente introduce mejoras en los formatos para ofrecer a sus clientes mayores garantías.

Para lograr ingresos significativos mediante Adsense una web necesita muchas visitas y visualizaciones de página, ya que se trata de nanopagos, esto a veces lleva a los generadores de contenidos a centrarse más en la cantidad que en la calidad. Al ser un modelo muy

118

internetización

imitado y crecer a mayor ritmo que la inversión publicitaria, se ha llegado a producir un efecto burbuja.

Un debate que se reabre periódicamente es el de la compra de palabras clave que se corresponden con marcas. ¿Sería licito, por ejemplo, que Movistar comprara aparecer en los primeros resultados de búsqueda cuando alguien introduce el término “Vodafone”? La UE ha dicho que sí.

El modelo publicitario que acabamos de estudiar ha significado todo un éxito para Google, ya que constituye su principal fuente de ingresos.

E-mail marketingDesde sus inicios, el email fue considerado un eficiente instrumento de marketing directo. Los correos electrónicos publicitarios permiten enviar mensajes segmentados a clientes actuales o potenciales. Son útiles para comunicar el lanzamiento de un nuevo producto o una oferta especial. Antes de enviar este tipo de contenidos debemos contar con la autorización expresa del destinatario para recibir mensajes publicitarios.

Los usuarios reciben decenas de correos al día por lo que, para diferenciarnos y llamar su atención, debemos controlar aspectos como el “asunto” del mensaje o la periodicidad de los correos. A medida que realicemos más envíos aprenderemos a identificar qué “asuntos” son mejor recibidos por los receptores y detectaremos el ritmo más adecuado. Por ejemplo, enviar correos semanales con ofertas pueden hacer que los correos pasen desapercibidos mientras que remitirlos cuando el usuario más los vaya a necesitar, por ejemplo, una oferta de vacaciones justo antes del verano, aumentará el ratio de respuesta.

Las aplicaciones de emailing permiten medir la efectividad de las campañas y conocer cuántos correos llegaron a su destino, cuántos fueron abiertos, en qué enlaces pincharon los usuarios, si fueron reenviados o si las cuentas de correo ya no existen. Especial atención debemos prestar a las solicitudes de baja, que pueden indicar malestar entre los usuarios.

119

internetización

La solicitud de baja es un requisito que debe incluir cualquier emailing, así como la identificación del mensaje como publicitario.

No todos los programas de correo electrónico muestran igual los mensajes, especialmente si son HTML. Es habitual que, para evitar usos fraudulentos, muchos bloqueen las imágenes y no las muestren. Para garantizar que el destinatario pueda leer el mensaje es una buena práctica incluir al principio un enlace a una versión web del contenido.

La publicidad no solicitada o spam es ampliamente rechazada por los usuarios. Más aún, los fraudes a través del correo electrónico (phishing, scam...) han sensibilizado al público, que sólo abre aquellos correos de remitentes en los que confía.

Publicidad en el móvil, en vídeos y videojuegosLa inversión en publicidad en el móvil crece cada año y las previsiones son optimistas. Los anunciantes valoran la personalización, la cercanía y el acceso al cliente en cualquier momento del día. Diversos estudios recogen la disponibilidad de muchos usuarios a recibir publicidad en sus móviles a cambio de llamadas gratis.

Es un formato que aún se está desarrollando, los códigos BIDI (bidimensionales) pueden ser “leídos” por la cámara del móvil y ampliar así la información sobre una promoción. Mediante bluetooth, muchas compañías lanzan guiños a los usuarios que mientras caminan cerca de una valla publicitaria o cuando entran en un centro comercial reciben mensajes personalizados.

Con el iPhone y terminales diseñados para navegar por internet la publicidad en el móvil amplía sus posibilidades, limitadas hasta ahora por el tamaño de las pantallas o la ausencia de tarifas planas para datos. En abril de 2010 Apple anunciaba el lanzamiento de iAd, su plataforma de publicidad en el móvil, que pretende extraer todo el potencial a los anuncios y no limitarlos a diminutos banners.

Un ejemplo imaginativo de publicidad en el móvil son los juegos que han utilizado algunos fabricantes de coches para comunicar sus nuevos modelos. Por ejemplo, Toyota lanzó una aplicación para iPhone para promocionar su vehículo híbrido Toyota Prius.

120

internetización

Mientras se generalizan estos terminales, los formatos más habituales son:

• enlaces

• SMS y MMS

• banners

Como siempre, la IAB ha normalizado las dimensiones, pesos y buenas prácticas.

El consumo de vídeo ha cautivado a los usuarios, que no cesan de crear y visionar contenidos audiovisuales. La explotación publicitaria de los vídeos, sin embargo, aún no está resuelta. Los vídeos incluyen publicidad de tipo Adwords en la página en la que están insertados, pero, al no estar transcritos los textos o descritas las imágenes que contienen no es sencillo aplicar este formato a material audiovisual.

Las breves inserciones publicitarias que se emiten antes del inicio de un vídeo se denominan pre-roll, pero también existe in-roll y post-roll. Asimismo, la publicidad se puede superponer a la imagen sin llegar a ocultar por completo el contenido. Siempre se debe dar al usuario la posibilidad de saltar o cerrar la publicidad y, por supuesto, también incluir un enlace a una web de destino con más información.

La publicidad en los vídeos está en sus fases iniciales de desarrollo y por el momento no es cómoda para el usuario ya que imita el modelo televisivo de interrumpir al espectador. En internet, donde la velocidad y la multitarea son la norma, los usuarios son reacios a esperar 15 segundos a que transcurra un spot.

Un modelo inspirador para la publicidad en los vídeos es el mercado de los videojuegos, que incorpora el product placement o integración de marcas en el escenario del juego. Por ejemplo, marcas de coches en un videojuego de carreras. Periódicamente es noticia alguna aplicación que permite comprar la cazadora que viste tu actor favorito en tu película favorita, pero de momento no se puede realizar con un simple clic sobre la prenda.

121

internetización

122

internetización

Posicionamiento en buscadores (SEO)SEO son las siglas de Search Engine Optimization, es decir, optimización de sitios web para buscadores. La profesión está muy vinculada al buscador dominante en estos momentos, Google. Antes de la aparición de Google en 1998 los buscadores no eran muy eficientes. Si encontrabas una web interesante la guardabas en “favoritos” ya que no era probable que la volvieras a encontrar. Con Google todo eso cambió. Google revolucionó la forma en que se categorizaba la información al idear un nuevo sistema: si muchas web enlazaban a un mismo sitio cuando hablaban de pesca eso debía significar que era la mejor web sobre pesca. Google aprovechaba la labor de clasificación que realizaban los seres humanos para construir su índice. Este principio fue la base de su algoritmo de búsqueda que ha evolucionado mucho desde entonces y sigue actualizándose continuamente. Es una fórmula secreta y los profesionales SEO siempre intentan desvelar sus claves.

Google acapara el mercado de buscadores, en España las fuentes siempre le atribuyen una penetración en torno al 95% y en Estados Unidos ronda el 65%. Si a ello sumamos que habitualmente el usuario selecciona uno de los primeros resultados que aparecen entenderemos la obsesión de los webmasters por aparecer los primeros en Google. Es así como surge el SEO como profesión.

El posicionamiento obtenido en buscadores se denomina orgánico por oposición a los anuncios patrocinados que aparecen artificialmente en las primeras posiciones y que se compran con dinero.

Muchas webs desarrolladas antes del nacimiento de Google no seguían las “gramáticas” del W3C, siendo muy difícil para los buscadores rastrear su contenido. Los desarrolladores pronto se dieron cuenta de que siguiendo algunas de estas pautas sus webs posicionaban mejor:

• construcción de webs con HTML en lugar de tecnologías como Flash, que dificultan la indexación

• separar los contenidos de la web de la capa de presentación (colores, márgenes, estilos...) mediante hojas de estilo (CSS)

123

internetización

• inclusión de las etiquetas <title> y <meta> con el título individualizado de cada página y las palabras clave y descripción de la página. Son los contenidos que aparecen en buscadores y que utilizan los usuarios para hacer clic en una web o en otra:

• imágenes con texto alternativo

• encabezados (h1, h2) con palabras clave

• evitar javascript y frames, ya que no son fácilmente indexables por los buscadores

Las webs de nueva creación incorporaban estas prácticas y se posicionaban mejor, por lo que las webs veteranas necesitaban adaptarse para no perder visibilidad. Este fue el caldo de cultivo para la profesión de SEO.

La lista de recomendaciones SEO es extensa y se actualiza continuamente. Citamos algunas más:

• URL semánticas, amigables, inteligibles por el ser humano

• mapa web que pueda rastrear el buscador (sitemap)

• adecuada densidad de palabras clave en los contenidos

• alta frecuencia de actualización

• contenidos originales

Este es un ejemplo de URL que favorece el posicionamiento:

www.ejemplo.com/los-mejores-trucos-para-escritores

En el extremo opuesto se situarían las URL formadas por caracteres ilegibles. La URL es valorada positivamente por Google pero también es útil a los usuarios que nos gusta leer una URL antes de pinchar en ella. En el fondo, los buscadores imitan a las personas y premian

124

internetización

aquello que nos facilita el uso de la web, penalizando las malas prácticas.

Además de estos aspectos internos de cada web, para el SEO es importante una adecuada política de enlaces: a qué webs te asimilas, a cuáles admiras, a quién enlazas... Todo eso da pistas a los buscadores para clasificarte.

No son menos importantes los enlaces entrantes. Los expertos en SEO saben perfectamente lo valioso que es un enlace de sitios como Menéame. Menéame es una web en la que los usuarios proponen noticias leídas en otros medios y las más votadas aparecen en portada. Ricardo Galli, su fundador, explica que el título de las noticias publicadas en Menéame se marcan en el código fuente con un h1, lo que significa que le dan la máxima importancia dentro de la página. Esto supone que al poco de ser promocionada a portada en Menéame una noticia indexa la primera en Google y, a las pocas horas, una vez el buscador ha identificado la fuente original, éste aparece ya en primer lugar. Esto ha llevado a muchos SEO a crearse perfiles falsos en este social media para poder votar repetidamente las noticias que envían y falsear así el ranking.

La estrategia de consecución de enlaces entrantes se denomina link building y link baiting a la consecución de enlaces a través de un contenido muy atractivo que muchas webs enlazan.

Un concepto asociado al SEO es el denominado PageRank, que clasifica del 1 al 10 las webs. Muy pocas tienen la categoría 10 y un 7 ya es un gran éxito. Un enlace desde una web con un PR elevado aupaba a la web a la que enlazaba. Sin embargo, se considera que este criterio cada día tiene menos peso. Nadie sabe con certeza qué valora el algoritmo de Google, entre otras cosas porque continuamente cambia, tan sólo tenemos pistas. Por ejemplo, la antigüedad de una web suma puntos y las URL no semánticas pero indexadas desde hace años no se ven penalizadas.

Un proceso al que tarde o temprano se enfrenta toda web es a un rediseño o una migración que puede incluir un cambio en la sintaxis de sus URL. Una web puede tener cientos de enlaces entrantes y dejarlos rotos por un cambio de URL es dramático. Por eso, Google tiene previstos unos redireccionamientos (301 y 302) para atravesar sin daños un proceso como este.

125

internetización

El sitemap es otra herramienta que Google pone en manos de los desarrolladores web para facilitar la indexación de sus páginas, especialmente cuando son dinámicas. Se trata de una recopilación de todas las URL de un sitio web destinada a ser indexada por los buscadores. Puede darse el caso de que no deseemos que la web sea indexada o se excluyan del rastreo algunas de sus páginas, para ello, editaremos el fichero robots.txt, que es el primero que lee un buscador.

Se denomina white hat SEO al que realiza prácticas éticas y black hat SEO a quien recurre a técnicas dudosas para mejorar la visibilidad de su web. Por ejemplo: incluir texto oculto para los usuarios pero no para las robots “araña” que rastrean las webs para indexarlas o lograr enlaces en webs de dudosa reputación. Los ingenieros de Google continuamente rastrean este tipo de prácticas para contrarrestarlas, llegando a banear (prohibir, vetar) las páginas si es necesario.

Lo cierto es que en SEO, el proceso para arañar algunas posiciones en el ranking se parece un poco a una carrera de F1 en la que pequeños detalles pueden dar la victoria.

Los profesionales SEO no trabajan solos sino que los buscadores cuentan con aplicaciones que les facilitan la revisión de los sitios web para mejorar su posicionamiento. Entre las herramientas más populares se encuentran las Webmasters Tools de Google o Bing o la Keyword Tool de Google Adwords.

La gran clave para un buen posicionamiento son los contenidos de calidad, tanto desde el punto de vista del usuario que los va a consumir y que quiere encontrar la mejor información y las mejores referencias como desde el punto de vista de los robots que recorren las webs y que estan ávidas de enlaces a contenidos relacionados y de palabras clave, aunque sin pasarse. Los buscadores, además, valoran que se publiquen contenidos con frecuencia. Una web que publique varias veces al día puede conseguir que sus contenidos aparezcan en los resultados de Google en minutos mientras que webs que se actualizan pocas veces al año tardan mucho más tiempo en ver sus nuevos contenidos indexados.

La disciplina SEO evoluciona con internet. La penúltima batalla de Google por mejorar su algoritmo, criticado por ofrecer contenidos cada vez menos fiables, es discriminar a las denominadas granjas de contenidos, webs que producen contenidos de baja calidad en

126

internetización

grandes volúmenes y que, sacando el máximo partido al SEO posicionan muy bien, relegando de los primeros puestos a páginas con mejores contenidos pero no tan orientadas al SEO.

Uno de los últimos cambios que admitido Google que ha introducido en su algoritmo es la consideración de los social media como factor importante para posicionar una web: un sitio que reciba numerosas menciones en Twitter o Facebook, aunque no tenga enlaces entrantes de otras webs puede obtener un magnífico posicionamiento.

En internet se pueden encontrar gráficos y recursos que resumen las tareas que hay que llevar a cabo para definir una adecuada estrategia SEO: comienza con la creación de contenido de actualidad fácilmente accesible por buscadores, continúa con un proceso de selección de palabras clave en las que nos deseamos posicionar y termina con el uso de los social media, las relaciones con los usuarios para conseguir más visibilidad para nuestros contenidos. Uno de los más conocidos es La Pirámide SEO de SEOmoz.org que amablemente nos ha permitido reproducir. También la puedes visitar en http://www.seomoz.org/img/upload/seo-pyramid-large.gif.

127

internetización

Courtesy of SEOmoz at SEOmoz.org

128

internetización

Social Media Marketing (SMM)A grandes rasgos, por “social media” entendemos el conjunto de medios de comunicación en los que la información es generada por los usuarios: Facebook, Twitter, YouTube, Menéame, Flickr, Slideshare, Instagram, blogs... El Social Media Marketing persigue utilizar dichos canales como herramienta de marketing de una forma organizada y coordinada por un Social Media Manager.

La publicidad en internet ha atravesado al menos dos etapas y se adentra en una nueva. La primera la protagonizaron los “banners”, denominados display por oposición a los anuncios sólo de texto que aparecieron de la mano de los programas de Google AdWords y AdSense.

Google trajo el automatismo y el “sírvase usted mismo” al mundo de la publicidad creando un mercado en el que los anunciantes creaban sus mensajes, elegían los criterios por los que deseaban ser encontrados. El buscador cruzaba los datos y mostraba en sus páginas de resultados los anuncios que habían pagado por las palabras clave de búsqueda.

Posteriormente, este sistema fue extendido por Google a todas las webs que desearan mostrar publicidad en sus páginas. El mecanismo era el mismo: los anunciantes creaban los textos, los webmasters habilitaban el módulo de Adsense en sus webs y Google mostraba los anuncios en las páginas con contenido relacionado.

En los últimos años, algunos proyectos han atraído a millones de usuarios, creando un entorno propicio para la venta de espacio publicitario, pero ¿cómo hacerlo? Lo cierto es que aún se está inventando. Para adentrarse con éxito en este territorio se hace imprescindible comenzar por el diseño de una estrategia, alineada con la estrategia de compañía, que incorpore como pasos inevitables la escucha y monitorización de las redes sociales, como veíamos en el apartado sobre Gestión de Reputación, y la posterior actuación en cada uno de los canales, escuchando y dialogando con los clientes de la marca. Finalmente, realizaremos una medición de los avances y de los resultados para continuar afinando nuestras acciones en social media.

129

internetización

FacebookFacebook, con 500 millones de usuarios en el verano de 2010 es el equivalente al cuarto país más poblado del mundo. Las formas publicitarias de comunicar un contenido en Facebook son fundamentalmente dos:

• comprando espacio publicitario

• viralidad

En ambos casos nos encontramos formatos novedosos, si bien aún inmaduros.

La publicidad incorpora como grandes novedades la máxima segmentación y las votaciones de usuarios. En función de los datos que has declarado (sexo, edad, intereses, localidad...) verás anuncios diferentes.

En Facebook puedes ver la actividad de tus amigos y conocidos por lo que, una aplicación o una noticia, tiene una audiencia cautiva. Esta audiencia, a su vez, puede comentarla, participar o amplificarla en otras redes sociales o en el propio FB invitando a tus amigos a probar el juego o competir en el test. Grupos iniciados por ciudadanos anónimos han conseguido decenas de miles de seguidores basándose únicamente en esta forma de viralidad.

130

internetización

Twitter Japón fue el primer país en el que el popular programa de micro-blogging comenzó a obtener ingresos gracias a la publicidad. En el resto del mundo sus ingresos se basaban en acuerdos con los grandes buscadores para que éstos puedan incluir sus contenidos en sus resultados hasta que en abril de 2010 comenzó a aceptar “promoted tweets”, que aparecen en primer lugar al realizar búsquedas. La cadena de cafeterías Starbucks fue uno de los primeros anunciantes:

131

internetización

En estos momentos, además de los tuits promocionados los anunciantes pueden contratar “trends” o “accounts”, es decir pueden publicitarse en los “trending topics” (temas del momento) o en “Who to follow” (a quién seguir, cuentas sugeridas).

El social media marketing no se refiere únicamente a la compra de espacios publicitarios sino a la optimización de la presencia en blogs y redes sociales: generando contenidos que atraigan la atención de los usuarios, dinamizando los perfiles en Facebook o Twitter... En definitiva, buscando incrementar nuestra presencia y el conocimiento y valoración positivos por parte de los usuarios.

Retorno de la inversión (ROI)Coca-cola ha cambiado la forma de remunerar a sus agencias de publicidad y ha introducido el pago por resultados. Esta práctica, muy conocida por los profesionales, se comienza a trasladar al mundo de la publicidad. Ignacio del Corro, profesor de marketing en ESIC, recalca una y otra vez a sus alumnos que la mejor publicidad no es la que gana más premios sino la que incrementa las ventas. Con internet, donde todo es medible, una nueva forma de entender el marketing se impone.

El ROI, siglas de Return of Investment o “retorno de la inversión” hacen alusión a los ingresos obtenidos por cada unidad de gasto. Simplificadamente, si pagamos 1 euro por cada clic que se realiza en un anuncio de nuestros productos el margen que obtengamos por la venta debe ser superior a un euro.

En las campañas publicitarias este cálculo se realiza constantemente y los ratios son diferentes para cada soporte. Si detectamos que la inversión no se está rentabilizando, es el momento de hacer ajustes.

En el caso de las campañas de branding la medición no recae únicamente en datos cuantitativos y es necesario recurrir a encuestas y estudios sobre reconocimiento, notoriedad, lealtad a la marca.

132

internetización

Comienza tu propio proyecto

Hemos realizado un recorrido por las distintas fases que atraviesa un proyecto web. Si antes de leer el libro ya sentías el gusanillo de crear un proyecto seguramente ahora el sentimiento se ha incrementado. Por ello, es conveniente conocer un poco sobre el mercado de internet en España y en el mundo, cuántos usuarios hay, cómo son, qué significan conceptos como web 2.0, qué modelos de negocio existen, qué casos de éxito se han producido y saber más sobre la comunidad de emprendedores online españoles.

Internet en España y en el mundoSi comparamos internet con tecnologías anteriores, como la electricidad o el ferrocarril nos damos cuenta de que queda mucho camino por recorrer, aún no se han iluminado todas las calles, no se ha inventado la lavadora y el tren se mueve a vapor. Se ha logrado que internet llegue a millones de hogares y contamos con anchos de banda que nos permiten ver películas pero la historia no ha hecho más que comenzar. En el mundo hay 2000 millones de internautas, la mayoría viven en Asia y los mayores porcentajes de penetración se dan en los países nórdicos, con ratios que superan el 80%. En España somos 25 millones pero otra revolución se está fraguando: internet en el móvil. 5000 millones de personas disponen de teléfono móvil y en torno a 2014 se espera que el acceso a internet desde el móvil supere al acceso desde ordenadores. Y nuevas fronteras esperan en el horizonte, como la “internet de las cosas”, que augura un futuro en el que los objetos, conectados mediante sensores, enviarán también información.

Pero ¿cómo somos los usuarios de internet? Veamos algunos datos de Estados Unidos que se pueden extrapolar a otros países.

Las actividades que realizamos online varían según nuestra edad. Los veinteañeros son los que marcan el ritmo: el 67% usa redes sociales, el servicio más popular del momento y son los responsables del éxito de YouTube, ya que son grandes aficionados al consumo de vídeos. Los treintañeros llevan más tiempo usando internet y realizan un uso más “adulto”, como transacciones bancarias o lectura de

133

internetización

noticias. Los adolescentes, por el contrario, nos indican qué servicios serán populares en los próximos años, como los mundos virtuales. Son también muy activos en el uso de mensajería instantánea y creación y lectura de blogs. Los usuarios de más edad, por último, son los más proclives a buscar información sobre salud online.

A continuación podemos ver una tabla elaborada por USA Today a partir de diversas fuentes.

134

internetización

135

internetización

La consultora Forrester ha clasificado a los usuarios por su grado de participación en internet. En un extremo de la escala se encuentran los “Creadores”, que escriben blogs y publican vídeos en YouTube. En el otro extremo tenemos a los “Espectadores” y a los “ Inactivos” que se limitan a consumir lo que los primeros crean o directamente no consumen contenidos. En la zona intermedia encontramos a perfiles como los “Críticos”, que comentan en blogs o los “Coleccionistas”, que clasifican las páginas, se suscriben, etc.

Hemos hablado de los usuarios pero ¿y las empresas? Según el organismo público Red.es el 96,2% de las empresas españolas tiene acceso a internet y el 59% tiene página web, aunque este porcentaje varía según el tamaño de la empresa. Entre las grandes empresas el porcentaje asciende al 91%.

Los objetivos o servicios de las webs de empresa son, fundamentalmente, presentar la compañía y dar acceso a su catálogo de productos, como se puede observar en el gráfico del ONTSI.

Por sectores, es el de la Construcción el que menos explota el potencial de internet.

136

internetización

137

internetización

Por último, cerramos el epígrafe refiriéndonos a los rankings de webs más visitadas en Estados Unidos y en España.

Según Quantcast:

1 google.com

2 facebook.com

3 yahoo.com

4 msn.com

5 youtube.com

6 microsoft.com

7 live.com

8 aol.com

9 wikipedia.org

10 ebay.com

11 amazon.com

12 ask.com

13 weather.com

14 answers.com

15 blogspot.com

16 myspace.com

17 craigslist.org

18 about.com

19 bing.com

20 ehow.com

Para que nos hagamos una idea del orden de magnitudes de que hablamos, Google sumaría 155 millones de usuarios mensuales y Facebook 136.

En la cúspide de la lista aparecen representantes de los que se ha llamado “internet de los buscadores”, que ha dado paso a una

138

internetización

internet más social protagonizada por servicios de comunicación entre personas, con Facebook a la cabeza.

En España, según la AIMC, a finales de 2010 el ranking quedaba así:

1. Google

2. Facebook

3. Elpais.com

4. Marca

5. Live.com

6. Elmundo.es

7. Elotrolado.net

8. AS

9. Tuenti

10. YouTube

El liderazgo lo ostenta Google pero seriamente amenazado por Facebook e importante presencia de actores locales como los medios online elpais.com, marca.es y elmundo.es y la red social para adolescentes Tuenti, adquirida por Telefónica en el verano de 2010.

139

internetización

De la web 2.0 a la web2 En el año 2004 un licenciado en lenguas clásicas dueño de una editorial de libros de tecnología publicó un documento titulado “What is Web 2.0?”. Su nombre es Tim O´Reilly y en su texto comparaba cómo era internet en los años noventa con la internet de 2004.

No debe confundirse el término “web 2.0” con el de “redes sociales”. “Web 2.0” es un concepto que engloba todos los cambios que sufrió internet desde sus inicios hasta el estallido de la burbuja puntocom y el modelo que surgió tras la debacle. “Redes sociales” son comunidades de amigos, aficionados o profesionales que se relacionan entre sí a través de aplicaciones como Facebook o Flickr. Lo que sí es cierto es que la tendencia es que detrás de cada web haya una red social, bien creada expresamente bien a través de las facilidades que ponen Facebook o Twitter para que estés en contacto con tus amigos.

En la famosa tabla que reproducimos a continuación O'Reilly explicaba con ejemplos cómo había cambiado la forma de hacer las cosas entre los tiempos de la web 1.0 y la llegada de la 2.0. Así, si en un principio el modelo publicitario era Doubleclick, en la denominada web 2.0 había sido sustituido por Google AdSense. Si en 1998 podías abrir una página personal en Geocities en 2004 creabas un blog en Blogger.com. Y así mil casos más.

Web 1.0 Web 2.0

DoubleClick --> Google AdSense

Ofoto --> Flickr

Akamai --> BitTorrent

mp3.com --> Napster

Britannica Online --> Wikipedia

personal websites --> blogging

140

internetización

evite --> upcoming.org and EVDB

domain name speculation --> search engine optimization

page views --> cost per click

screen scraping --> web services

publishing --> participation

content management systems --> wikis

directories (taxonomy) --> tagging ("folksonomy")

stickiness --> syndication

Lo bueno del modelo de O´Reilly era su visión 360º; no se centraba en un aspecto de la web sino en su conjunto: publicidad, música, fotografías... Aún así, había cuestiones que no eran tratadas en su modelo.

En 2009 Tim O´Reilly actualizó el concepto y, en vez de web 3.0 lo bautizó como “web squared” o “web al cuadrado”. La web2 es la web de la gente y pone de manifiesto cómo internet ha dejado de ser un reducto de geeks o forofos de la tecnología, cómo el potencial de la red se ha puesto al alcance de la mayoría y éstas se han puesto a usarla. En cierto modo, casi diez años después de su crisis, internet cumple las promesas que hizo y vuelve a poner la ruleta en movimiento. Algunos lo han llamado “back to basics”, otros lo denominamos “internetización”. Lo cierto es que existe un sentimiento compartido de que debemos compartir lo que sabemos para que cada persona saque lo mejor de sí mismo y lo ponga a disposición del mundo a través de la WWW. En un planeta que se acerca a los 7000 millones de habitantes, no necesitamos clones sino que cada uno realice lo que mejor sabe hacer, también en internet.

141

internetización

Modelos de negocio ¿Se puede hacer negocio por internet? Es la gran pregunta de todo aquel que inicia o piensa en iniciar su andadura en la Red. En internet hay básicamente dos modelos de negocio: publicidad o cobro por contenidos y las reglas de cada uno son claras.

PublicidadPara que un sitio web pueda vivir de la publicidad tiene que tener una gran audiencia, cifrada en millones, o una audiencia grande, aunque en cifras más modestas, pero especializada. La publicidad es el medio que tienen las empresas de llegar a su público. Si su público está en una web comprarán espacio publicitario en la misma. Esto es válido para sitios como elmundo.es o elpais.com. Su publicación continua de contenidos para todo tipo de públicos los hace muy atractivos para grandes anunciantes, tanto generalistas (bancos, automóviles, telefonía y utilities...) como segmentados (exposiciones y museos, vinos, aerolíneas low cost, productos premium...).

En publicidad es habitual cotizar en función de los impactos visuales conseguidos o las conversiones realizadas, es decir, si la visualización de la publicidad se transforma en clics, visitas a la web, compras.... Según este esquema y con la calculadora en la mano es fácil llegar a la conclusión de que a mayor número de páginas, mayor número de impactos publicitarios y mayor número de conversiones. Son muchas las webs que se basan en este sencillo cálculo. No obstante, cuantos más competidores existen en el mercado la porción de tarta que corresponde a cada uno es menor, especialmente si la tarta no crece tan rápido como el número de comensales.

El modelo imperante en internet basado en ofrecer contenidos o servicios gratis a cambio de publicidad es antiguo pero tiene un referente fundamental: la prensa gratuita. Recuerdo cuando aparecieron Diario Médico o Gaceta Universitaria, dos medios que se distribuían en centros de salud y de enseñanza superior. Se dirigían a un público segmentado y, en cierto modo cautivo, se distribuían de forma localizada y se financiaban a través de publicidad específica para su target (médicos, enfermeros, estudiantes). Luego llegaron los

142

internetización

20minutos y los Qué!, aplicando el mismo modelo a la prensa generalista.

En 2010 la inversión publicitaria en internet ascendió a 798,8 millones de euros según la IAB; esto sitúa a internet como tercer soporte publicitario, sólo por detrás de la televisión y los diarios.

Son numerosos los ejemplos de empresas de internet que se financian a través de la publicidad. Facebook esperaba facturar 1200 millones de dólares en 2010 y YouTube entrará en números verdes en 2011 tras ingresar 350 millones de euros en publicidad.

Cobro por contenidosEmpecemos puntualizando que entendemos por “contenidos” cualquier producto o servicio ofrecido a través de internet en un sentido amplio. A través de una página web puedes comercializar tus productos o servicios, físicos o virtuales, el problema es que es altamente probable que otros den gratis aquello por lo que tú deseas cobrar. En los productos físicos es más difícil pero en los digitales, como textos, música, vídeos o aplicaciones es relativamente habitual.

Para entender el dilema de gratis vs. pago es conveniente hacer un poco de historia. Chris Anderson ha explicado muy bien en su libro La larga cola el modelo de consumo que imperó en el siglo XX. Era la época de los best sellers, los discos, las películas o los libros que, según recetas mágicas, eran diseñados para llegar a la mayor audiencia posible. Para crear una película de éxito se pagaban cifras astronómicas a los actores y actrices más populares, se rodaba en los parajes más inhóspitos y espectaculares, para grabar un disco los músicos se encerraban durante meses en un estudio. El engranaje era perfecto y el modelo funcionaba, al menos para la industria, pero adolecía de ciertas ineficiencias que con la llegada de internet fueron evidentes. El amante de los libros puede buscar un ejemplar editado en los años 70 que está descatalogado y no encuentra espacio en el tamaño limitado de la librería de su barrio. Te puede gustar una canción de Shakira pero no quieres comprar todo el disco por 20 euros. Alquilas una película en el videoclub pero no la puedes grabar y prestar a un amigo. Todas esas incomodidades que encontraba el usuario a su paso desaparecieron de un plumazo con internet. El catálogo infinito de Amazon, las radios a la carta, Youtube y otros

143

internetización

miles de sitios aparecieron para hacerle la vida más fácil a los usuarios. ¿Significa esto que los usuarios no quieren pagar por un libro o una canción? Las millonarias ventas de la tienda de canciones de Apple, iTunes, demostró que sí están dispuestos a pagar, pero no cualquier precio. El esquema de la venta de canciones se está repitiendo ahora con el alquiler de películas online.

La fijación del precio es una de las claves de los negocios online y aquí el modelo offline más cercano en el que buscar inspiración son las aerolíneas low cost. Como bien dicen en el libro El fenómeno Low Cost, las compañías de vuelos baratos no se llaman así porque los billetes tengan precios ridículamente bajos, sino porque los costes son bajos. Es decir, ajustan su estructura de costes al precio de los billetes. ¿Y cuál es el precio de los billetes? El que los usuarios están dispuestos a pagar. ¿Cuánto pagarías por un vuelo a Londres? ¿cuánto por una conexión a internet? ¿cuánto por un vestido de esta temporada? ¿cuánto por una hamburguesa? ¿cuánto por un libro o una canción?

iTunes empezó a vender canciones sueltas, no sólo discos, a $ 0.99. Ahora no sólo vende música sino podcasts, juegos, películas y otros muchos descargables y los precios son más variados. En 2008 fueron líderes en la venta de música en Estados Unidos, por encima de Wal-Mart. Pero internet, como sabemos, también tiene sus reglas y una de ellas es que todo cambia. En 2009 apareció Spotify, una aplicación similar a iTunes para oir canciones gratis, entre otras funcionalidades y muchos usuarios están empezando a abandonar iTunes porque, no olvidemos que otra de las reglas de internet es que los productos se convierten en commodities a velocidad de vértigo. Lo que un día es un producto elaborado como por ejemplo el texto de una noticia y la imagen que la acompaña en poco tiempo es sólo una matería prima para producir contenidos y productos más elaborados, que también se convertirán en commodites al poco tiempo. No puedes detenerte nunca ni dejar de innovar.

FreemiumFreemium es un concepto que surge de combinar free con premium, es decir, “gratuito” con acceso privilegiado de pago. Hace referencia a modelos como el del Wall Street Journal, que ofrece información gratuita e información reservada a suscriptores. Es un modelo que la

144

internetización

prensa tradicional desea abrazar en sus ediciones online y empieza a haber ejemplos viables como el español Orbyt o The New York Times, que al mes de cerrar parcialmente sus contenidos online había logrado 100.000 suscriptores.

El modelo híbrido o freemium debe analizarse con cautela para cada posible negocio y ver si el producto de pago reúne los alicientes suficientes para que el usuario decida comprarlo. Un caso de éxito es el antes mencionado Spotify, un millón de usuarios ya se han convertido en suscriptores para eliminar la publicidad que escuchan los usuarios de la modalidad gratuita.

Casos de éxitoUn análisis de los modelos de negocio online no puede zanjarse sin reseñar la presencia de algunas empresas que demuestran que se puede hacer dinero en internet.

Google

Vio la luz en 1998 y comenzó licenciando su tecnología de búsqueda aunque su negocio actualmente es la gestión de espacios publicitarios mediante sus productos AdSense y Adwords. Google lanza productos al mercado continuamente y el sello que los caracteriza es su gratuidad. Su objetivo es ser la gran plataforma de internet, dar servicio a todas las necesidades que se plantean a usuarios y empresas: desde correo gratuito de gran capacidad a servidor de DNS.

AmazonSe inició en 1995 como tienda de libros online pero ha evolucionado a un gran hipermercado que sirve a todo el mundo todo tipo de artículos y que en los últimos años se ha especilizado en los servicios en la nube para empresas. Veremos más adelante qué significa en la nube. Kindle es su éxito más reciente, un lector de libros electrónicos que permite encontrar y descargar un libro en segundos y almacenar decenas.

145

internetización

EbayFue fundado en 1995 como sitio de subastas y actualmente opera también como plataforma de comercio electrónico y sistema de pagos (PayPal). Al contrario que Amazon, que se basa en la venta directa, su papel es el de mediador y cobro por comisiones. PayPal, que ya suma un tercio de las ventas de eBay, se ha convertido en el principal impulsor de su crecimiento, habiendo incrementando sus ventas en un 28% respecto el año 2008.

FacebookLa red social por excelencia no necesita presentación. Fundada en 2004 por el jovencísimo Mark Zuckerberg como una forma de contacto para estudiantes universitarios, en 2010 alcanzó los 500 millones de usuarios repartidos por todo el mundo. Como suele bromear su fundador, si Facebook fuese un país ocuparía el puesto número 3 en población. Entre sus accionistas se encuentra Microsoft.

Blizzard Entertainment son los creadores de World of Warcraft, un juego de rol multijugador online que a finales de 2008 contaba con 11,5 millones de suscriptores en todo el mundo. Fundada en 1994, su juego estrella cuenta con una legión de fanáticos seguidores que pasan horas en este mundo virtual poblado de elfos, gnomos, orcos, druidas, guerreros...

Zynga es el mayor desarrollador de social games para Facebook. Sus millonarios ingresos, provenientes de micropagos, la han llevado a alcanzar la rentabilidad.

En España tenemos igualmente ejemplos de casos de éxito de comercios electrónicos:

Mangoshop, de Mango, vendió por valor de 11 millones de euros en su tienda online en 2009. Mango vende ropa y complementos online desde el año 2000. Hoy en día se puede comprar online desde 32 países. A pesar de las buenas cifras, las ventas online de Mango no alcanzan al 1% del total de ventas de la marca.

146

internetización

IdealistaLos hermanos Jesús y Fernando Encinar fundaron en el año 2000, junto a César Oteiza, la web de anuncios inmobiliarios Idealista.com. Una década después sigue siendo el lugar de referencia en internet para buscar vivienda. Es rentable desde 2003 y cerró el año 2008 con 20 millones de facturación y 5 de beneficios de explotación.

BuyVipEl club de compras privadas fue fundado en 2006 por Gustavo García Brusilovsky. Su negocio se basa en la oferta de artículos rebajados entre un 30 y un 70%. Los artículos están a la venta durante un breve periodo de tiempo. Alcanzó la rentabilidad en el segundo trimestre de 2010. En el verano de 2010 sumaba 5 millones de usuarios registrados. En octubre de 2010 fue comprada por la estadounidense Amazon por 70 millones de euros.

PrivaliaClub de compras fundado en 2006 por Lucas Carné y José Manuel Villanueva. Facturó 168,43 millones de euros en 2010. Su número de usuarios asciende a 6,27 millones.

El éxito de estos outlets, que comercializan fundamentalmente moda, ha dado un giro al panorama del comercio electrónico, situando a las prendas de vestir entre los artículos más vendidos por internet.

En sus inicios se accedía por invitación, creando una sensación de exclusividad entre sus miembros. Ahora lo habitual es poder registrarse libremente.

Su propia evolución ha llevado a los clubes de compras a crear tiendas permanentes para algunas firmas y a utilizar Facebook como nuevo canal de venta.

Deliberadamente hemos dejado fuera de este epígrafe a aquellas empresas dedicadas a proporcionar infraestructura para que otros hagan negocios online como proveedores de acceso, alojamiento, creación de sitios web.

147

internetización

Legislación aplicableEl legislativo es un territorio altamente especializado cuyo ámbito excede el de este manual. Sólo pretendemos en este epígrafe señalar las principales normas jurídicas que aplican a los sitios web y recomendamos encarecidamente que se recurra a abogados especializados en nuevas tecnologías e internet para resolver cualquier duda.

La Ley de Servicios de la Sociedad de la Información y Comercio Electrónico entró en vigor en 2002 y es la que rige la actividad en internet. La LSSI afecta a las empresas que realizan actividades comerciales a través de internet, a las que impone una serie de obligaciones. Si además la empresa emite publicidad ésta deberá aparecer identificada claramente y obtener el consentimiento expreso del receptor antes de realizar envíos por correo electrónico o mensajes al móvil. Las webs de usuarios particulares que incluyan publicidad también están sujetas a esta ley.

De gran importancia, especialmente por los riesgos en que se incurre si se incumple, es la Ley Orgánica de Protección de Datos o LOPD. El artículo clave para los propitarios de una web es el que especifica que hay que solicitar y recibir expresamente del usuario autorización para conservar sus datos en una base de datos que debe estar dada de alta en la Agencia de protección de datos. El usuario tiene derecho a pedir que se borre su registro y se imponen fuertes multas si se incumple esta norma.

Además de normas genéricas que aplican a todas las webs existen normas que afectan a aspectos concretos de algunas webs y no a todas en su conjunto. Algunos ejemplos:

• Accesibilidad. Afecta a webs de Administraciones Públicas y grandes empresas.

• Empresas que cotizan en bolsa, que deben cumplir una serie de obligaciones

• Copyright y otras formas de protección de derechos de propiedad intelectual

• IVA y comercio electrónico

148

internetización

Además de normas con rango de ley existen especificaciones, sellos de calidad y otros tipos de acuerdos y compromisos a los que también se puede adherir una web para mostrar su respecto hacia sus usuarios. Ejemplos: Sello Confianza Online. Sello de la Asociación Española de Comercio Electrónico (AECE). Norma UNE Accesibilidad. Lista Robinson.

Antes de cerrar este breve epígrafe centrado en las leyes que aplican a internet resulta conveniente aclarar que internet es un territorio tan nuevo que la legislación no está a menudo preparada para los envites que surgen. Las leyes de internet caminan detrás en un ámbito donde prima la innovación.

Finalmente, no se debe olvidar que en aspectos no específicamente online, una web o un perfil en Facebook se someten a la legislación de ámbito general.

149

internetización

EmprendedoresMe gusta la frase del profesor José Luis Orihuela, publicada en su blog eCuaderno: “aprende a convertir tus ideas en proyectos y tus proyectos en negocios”.

Internet ha eliminado muchas barreras de entrada a la creación de un negocio. Sea tu ocupación en tus ratos libres o tu principal fuente de ingresos, en este epígrafe recopilaremos los consejos para el éxito del fundador de Amazon, trataremos sobre el arte de emprender y veremos las dificultades que conlleva encontrar financiación para una idea de negocio.

Qué mejor forma de iniciar este capítulo que con los consejos de Jeff Bezos, fundador de Amazon, exponente del éxito en internet. Amazon comenzó como tienda de libros online en 1995, desde entonces, se ha convertido en un gran hipermercado online, con distribución a todo el mundo y sedes en numerosos países, cotizada en bolsa y centrada en los últimos años en las soluciones en la nube para empresas web y en revolucionar el mundo editorial con su lector de ebooks Kindle. Ha vivido momentos buenos y malos pero ha sabido capear el temporal y estos son, según su fundador, los secretos de su éxito:

1. Orientación al cliente

2. Innovación

3. Pensar en el largo plazo

Lo que quiere decir Bezos es que para liderar un sector no hay que estar obsesionado con la competencia sino con el cliente, el usuario de nuestro producto que es quien realmente nos hace ganar dinero. Para darle el mejor servicio posible y adelantarnos a sus necesidades debemos innovar continuamente, lo que nos lleva al punto uno de orientación al cliente. Por último, recomienda pensar en el largo plazo, en nuestros planes futuros y no frustrarse por las pequeñas decepciones del día a día y otros contratiempos. En el mismo vídeo que ofrece estos consejos, disponible en YouTube ( http://www.youtube.com/watch?v=-hxX_Q5CnaA ), Bezos desliza una última lección: hay que trabajar como si cada día fuera el primer día y no dar nada por hecho.

150

internetización

La democratización en la apertura de un negocio online se ha hecho posible gracias a internet. Según datos del INE abrir un negocio cuesta de media 65.000 euros, ¿cuánto cuesta crear un proyecto web? Guy Kawasaki, un autor de referencia en EEUU, publicó un post titulado “By the Numbers: How I built a Web 2.0...” respondiendo a esta pregunta. Desglosaba así los conceptos en que gastó 12107,09 dólares para crear un proyecto web 2.0:

• 4500 dólares en programación

• 4824,14 dólares en abogados

• 399 dólares por el logo a Logoworks

• 1115,05 dólares registrando dominios

Una cifra que abre la oportunidades de hacer sus sueños realidad en internet a muchas personas.

Pero no todas las historias son iguales. Numerosas empresas que empiezan, las denominadas start-up, son financiadas por socios capitalistas que invierten millones de euros en su lanzamiento y en los primeros años de vida, con la esperanza de ver multiplicada con creces su inversión. En España sería el caso de Tuenti, que completó varias rondas de financiación antes de ser adquirida por Telefónica en agosto de 2010 por 70 millones de euros.

Una característica muy relevante del nuevo emprendedor de internet es que es tanto vendedor como consumidor, esta dualidad se repite en muchos aspectos de la Red: puedes escribir en tu blog y comentar en otro, puedes comentar el estado de otra persona en Facebook y tener una página con cientos o miles de fans. Un magnífico ejemplo es Etsy, un sitio de Estados Unidos donde puedes vender y comprar artesanía. http://www.etsy.com/

¿Existe mentalidad emprendedora en España? ¿Cuándo es el momento idóneo para emprender? En una entrevista para CincoDías un directivo de AT Kearney afirmaba:

Hace 30 años el español quería trabajar por cuenta propia, ahora ese patrón se ha invertido. Y la tendencia a partir de ahora es revertir todo esto. Tenemos todas las condiciones para volver a ser emprendedores, un perfil optimista, un tejido empresarial internacional y el tejido del conocimiento

151

internetización

En cuanto al momento adecuado para emprender, existen dos visiones encontradas: los que abogan por trabajar durante unos años, ahorrar y luego emprender y los que defienden la vía de recurrir a un inversor. Para estos últimos, recomendamos leer el post de Antonio Mas sobre los “Mitos del Capital Riesgo”. Desde la experiencia, Mas explica cómo habitualmente no es capital lo que necesitas para crear un proyecto en internet, sino algo de tiempo y un pequeño equipo de 2-3 personas que se complementen. El proyecto español Panoramio, vendido a Google en 2007, fue iniciado en sus ratos libres por Eduardo Manchón y Joaquín Cuenca. En cambio, si recurres a financiación externa para tu proyecto debes tener en cuenta que:

El capital sabe más que tú de capital. Suena absurdo pero es así. Tu sabes de Internet y de tu proyecto. Pero el sabe sólo de inversiones. Ha hecho cientos y para ti es la primera. Su negocio es este y entonces tendrás siempre a un tío que sabe más que tu de como cerrar cláusulas, acuerdos y contratos.

Y captar capital lleva tiempo, esfuerzo, negociaciones, discusiones… Mucho desgaste para después darte cuenta que la velocidad no era tan importante como pensabas, que los buenos proyectos siempre tienen un hueco aunque pienses que llegan tarde, que la ventaja del first mover no es tan estratégica, que el mercado siempre reconoce el trabajo bien hecho y que resulta que estas dejando tu vida en una empresa en la que -vaya por dios- necesitas otra ampliación de capital para seguir viviendo y en la que tu posición será minoritaria y que… pero si ya no es mi empresa y la ilusión se ha desvanecido

En Loogic, blog dirigido a emprendedores, Javier Martín publica cada año un resumen de las inversiones en start-ups que se han registrado el año anterior. En 2010 las inyecciones de capital oscilaron entre los 115.000 euros y los 250 millones por la compra de eDreams. Entre los inversores se encuentran tanto business angels e

152

internetización

inversores particulares como fondos de capital riesgo, bancos y cajas de ahorros o empresas.

Los emprendedores son una comunidad muy activa en internet. Se reúnen, crean grupos e iniciativas como:

• Iniciador. Cuenta con ediciones en varias ciudades españolas y los encuentros, mensuales, en torno a un emprendedor de éxito, se suelen retransmitir por internet

• First Tuesday se define como “una organización independiente sin animo de lucro que actúa como plataforma global de encuentro entre emprendedores, empresarios e inversores de negocios relacionados con Internet y las Nuevas Tecnologías”

• Thursday, se reúnen los últimos jueves de cada mes para “analizar cómo las TIC están cambiando el mundo, aunque su objetivo específico es reunir empresarios, mandos intermedios y profesionales para intercambiar conocimiento, establecer contactos e identificar oportunidades empresariales y sociales”

• Idéame, encuentro universitario de jóvenes desarrolladores de videojuegos

• OpenTalent, concurso del BBVA para premiar la mejor idea de negocio

• iWeekend, reúne a emprendedores de internet de diversos perfiles para crear una empresa en un sólo fin de semana.

• Seedrocket “proporciona a los emprendedores acceso a una red de inversores y Business Angels que apuestan por proyectos de base tecnológica en una fase inicial”

Ética en los negociosGuy Kawasaki dedica el último capítulo de su libro para emprendedores El arte de empezar a la ética. Lo llama “El arte de ser buena persona”. En internet, donde existen técnicas dudosas o directamente ilegales como spam, phishing o el black hat SEO puede ser tentador, si atraviesas una mala racha, deslizarse por la pendiente de la falta de ética e incurrir en estas técnicas censurables.

153

internetización

Para no caer en la tentación, Kawasaki aconseja seguir este otro camino:

• Ayuda a mucha gente, especialmente a aquellos que tal vez nunca te puedan devolver el favor

• Haz lo correcto, aunque a veces sea el camino más difícil

• Corresponde a la sociedad, no necesariamente con dinero sino con “tiempo, experiencia, apoyo emocional”

154

internetización

¿Y ahora qué? Últimas tendencias

Abordamos el último capítulo del libro y nos damos cuenta de que ya tenemos una visión global de lo que supone gestionar un proyecto web pero somos conscientes de que es un universo emergente y en constante evolución. Los principios generales que hemos aprendido a lo largo de Internetización nos deberían ayudar a desenvolvernos en este mundo cambiante pero, no obstante, dedicaremos unas páginas a describir las principales tendencias que veremos crecer en los próximos años.

Internet en el móvilInternet en el móvil ha sido la eterna promesa que nunca se cumplía. Durante años se lanzaron propuestas que quedaban en el dique seco. En 2007, con el lanzamiento del iPhone por parte de Apple, comenzó a convertirse en una realidad.

Al contrario que los ordenadores, que utilizan un número limitado de sistemas operativos y resoluciones de pantalla, el mercado de la telefonía móvil se ha caracterizado por la coexistencia de infinidad de configuraciones posibles. Esto hacía muy difícil diseñar una web para móviles que se visualizara adecuadamente en todos los dispositivos disponibles. Cuando no era el tamaño de la pantalla, era el puntero o la pantalla táctil que hacía complicada la navegación. A esto había que sumar la inexistencia de tarifas ajustadas y tarifas planas de navegación. Un mercado en evolución entorpecía la creación de una verdadera internet en el móvil.

La irrupción del iPhone

El iPhone dio lugar a un dispositivo con una pantalla con una resolución que permitía navegar por las webs preexistentes diseñadas para ser vistas desde un PC. Adicionalmente, permitía

155

internetización

desarrollar aplicaciones específicas para el móvil, las apps, pequeños programas diseñados para cumplir una funcionalidad concreta. El ejemplo más típico es consultar la previsión del tiempo pero el grado de sofisticación de estos programas no deja de avanzar y en la iTunes Store desde la que se descargan podemos encontrar desde pianos virtuales hasta juegos online. La mayoría de estas aplicaciones tiene una versión gratuita de prueba y los precios de la mayoría no superan los 2 ó 3 dólares, lo que no ha impedido que surjan grandes empresas a la sombra de estos microprecios.

Identificamos, por tanto, tres tipos de internet en el móvil:

• las webs tradicionales, que se pueden navegar, si bien no de forma óptima

• las versiones para móviles de las webs clásicas, que muestran sólo parte de los contenidos y una interfaz adaptada

• las apps diseñadas especifícamente para entornos móviles y que aprovechan todo su potencial

¿Cuál de ellas se impondrá? Es un debate abierto pero los expertos apuntan a que las versiones web para móviles, por su interoperablidad, tienen ventaja frente a las aplicaciones. Las webs para móviles, al igual que la propia internet, se visualizan en todo tipo de móviles. En cambio, las aplicaciones deben adaptarse a cada sistema operativo dependiendo del móvil en el que se vaya a usar. Es decir, se deben programar tantas aplicaciones como tipologías de móviles existen si queremos que se visualicen en todas ellas: iPhone, Android, Blackberry, Nokia...

En cualquier caso, lo que es seguro es que el internet móvil ha creado un nuevo escenario en el que todos los incumbentes están reclamando su papel.

Google Android y otros competidores

El sistema operativo para móviles de Google se llama Android y es de código abierto. Cualquier desarrollador puede programar aplicaciones para el mismo y publicarlas en el Android Market, la tienda de aplicaciones de Google. Al contrario que en la App Store de Apple no existen apenas restricciones, por lo que prácticament todas las apps son admitidas.

156

internetización

Los primeros teléfonos equipados con Android fueron fabricados por la coreana HTC aunque a día de hoy más compañías se han sumado, entre ellas, Motorola y Samsung. Nokia, Blackberry y otras marcas también han lanzado sus tiendas de apps y en febrero de 2011 así se repartía el número de aplicaciones por stores o markets, según Distimo:

• Apple 310.000

• Android 175.000

• Nokia Ovi 30.000

• BlackBerry 25.000

Estos datos, sin embargo, pronto quedarán obsoletos.

Movilización

A medida que más y más usuarios se sumen al uso de internet en el móvil más necesaria será una estrategia de “movilización” de nuestros proyectos. Numerosos medios online han desarrollado aplicaciones para el iPhone captando así a los primeros usuarios en adoptar esta tecnología y siendo pioneros en experimentar con ella. Ahora deberán ir preparando sus versiones para el cada vez más pujante Android. Si, por el contrario, optamos por adaptar nuestra página web a la navegación con teléfonos móviles aplicaremos las normas específicas del W3C para móviles, englobadas en la Mobile Web Initiative.

Geolocalización

La geolocalización es la identificación de tu posición geográfica a través del GPS del móvil o por la posición de las antenas de telefonía. Es un servicio que cada vez incorporan más terminales y servicios y que más expectativas ha generado. Son muy utilizados servicios que proporcionan información relacionada con tu posicición geográfica, por ejemplo, restaurantes cercanos.

157

internetización

El servicio más pujante, en el momento de escribir estas líneas, es Foursquare, que permite a los usuarios indicar a su red social en qué lugar están en cada momento. En teoría, para poder saludarse si descubren que se encuentran en lugares próximos.

Realidad aumentada

La combinación de la cámara y el móvil está dando lugar a servicios espectaculares. Google presentó Google Goggles, que proporciona información o la procesa al enfocarla con la cámara o al tomar una fotografía. Por ejemplo:

• si fotografías la portada de un libro detecta cuál es

• si fotografías una tarjeta de visita almacena los datos categorizadamente (teléfono, e-mail...) y hasta permite telefonear al número que aparece

• si enfocas un comercio en una calle ofrece datos del mismo

Expectativas de crecimiento

Las cifras de crecimiento en el uso del teléfono móvil como dispositivo de acceso a internet son las propias de un mercado en plena explosión: número de usuarios con tarifa plana, terminales vendidos, aplicaciones descargadas, inversión y formatos publicitarios...

Japón y otros países asiáticos nos llevan gran ventaja en el uso de internet en el móvil.

Cada vez son más los servicios que apuestan por este mercado y crecen a su alrededor, veamos ejemplos:

• servicios de geolocalización, te indican farmacias o restaurantes cercanos, si un amigo está en los alrededores o si un comercio próximo tiene una oferta para ti. Ejemplos: Foursquare, Facebook Places

158

internetización

• tiempo real, esto es, retransmitir qué haces, dónde estás, qué ves en cada momento, ya que tu móvil siempre está contigo, en el restaurante o en tus vacaciones. Ejemplos: Twitter para móviles, Instragram

• emisión de vídeo en directo desde el móvil. Qik

Una realidad en sí misma

La potencia de estos teléfonos móviles, su facilidad de uso, la conectividad 3G con sus tarifas planas asociadas y el wi-fi que casi todos ellos incorporan han dado un protagonismo al acceso a internet desde estos dispositivos que seguirá creciendo fuertemente en los próximos años. Dejaremos de hablar de internet en el móvil para considerarlo un entorno en sí mismo, con sus reglas propias, sus productos propios, sus oportunidades propias.

The Cloud (la nube)La nube, the cloud en inglés, es la forma en que se denomina a hecho de que cada vez más nuestros datos estén en manos de terceros, en servidores y ordenadores centrales de grandes empresas como Google, Amazon o Microsoft. Lo hacemos porque nos supone una gran ventaja, son accesibles desde cualquier ordenador con conexión a internet y desde cualquier lugar del mundo. No obstante, perdemos control sobre ellos, ya que no los “poseemos”, no están en el disco duro de nuestro portátil y, si perdemos la conexión a internet o el servicio de Gmail está caído no podemos acceder a nuestros correos.

El correo es el ejemplo más manido pero puede aplicarse a fotos, blogs, conversaciones en Facebook, documentos, listas de tareas, mensajería instantánea y mil ejemplos más.

En el entorno empresarial son también abundantes los servicios en la nube, también denominados SAAS, siglas de Software As A Service. Se trata de soluciones que facilitan gigantes como IBM, Amazon o Microsoft y, aunque son un tema recurrente, hasta los últimos años no se habían convertido en una realidad. Ofrecen las

159

internetización

mismas ventajas que para los usuarios particulares, los obstáculos principales que impedían su desarrollo, como la lentitud o la escasa potencia se han solucionado y los problemas siguen quitando el sueño a muchos. Nos referimos al temor que siempre nos acompaña a que nuestros datos sean accedidos por personas que infringen las barreras de seguridad. En algunos casos, léase datos bancarios o médicos, la información es muy sensible.

Web semántica o web 3.0El concepto de web semántica tiene dos caras. Para las máquinas, los ordenadores, la web semántica es aquella en la que la información viaja por las redes “etiquetada”, es decir, marcada con parámetros que indican que un dato es una fecha, o el autor de un libro o una dirección postal. Actualmente, eso ocurre con muy pocos datos, pero si se lograra un consenso para que la información se marcara las máquinas podrían facilitar a los humanos información más ajustada a nuestras necesidades. Y esa es la otra cara de la web semántica. Las personas para navegar por internet debemos adaptarnos a la forma de trabajar de las máquinas. Si buscamos en Google introducimos palabras clave, que, simplificadamente no son más que las palabras más empleadas en el texto. Con la web semántica podremos realmente hacer preguntas en lenguaje natural a los buscadores y webs. Podremos escribir “¿En qué año nació Bob Dylan?” en lugar de “año nacimiento Bob Dylan”.

Ya existen grandes experiencias en este terreno. Entre mis favoritos se encuentran:

• Yahoo! Respuestas. Es parecido a un buscador semántico pero operado por los usuarios, por personas que dejan sus preguntas para que otros usuarios las respondan.

• Wolfram Alpha. Un buscador que ofrece datos concretos en lugar de enlaces a otras páginas. Su creador fue profesor de Sergey Brin, uno de los fundadores de Google. Supone un gran avance en la interpretación de información. Por ejemplo, si buscamos “New York”:

160

internetización

161

internetización

Mundos virtuales y 3DConocemos casos de éxito de mundos virtuales y casos que se han quedado en meros titulares de periódicos. World of Warcraft, por ejemplo, es un juego online multijugador (MMORPG) en el que el usuario crea su personaje o avatar e interactúa con los demás viviendo aventuras. Es un tremendo éxito tanto desde el punto de vista de la satisfacción de sus millones de usuarios como de negocio, ya que requiere suscripción. Habbo Hotel es otro ejemplo de mundo virtual que obtiene ingresos, aunque con un modelo centrado en la venta de objetos virtuales.

Second Life acaparó muchos titulares en prensa durante algunos meses para luego pasar a un segundo plano. Uno de los principales problemas de Second Life es su baja usabilidad. Tanto el proceso de registro, tremendamente enrevesado como el aprendizaje necesario para manejar el personaje son barreras no pequeñas para muchos posibles usuarios.

En cierto modo, los mundos virtuales se encuentran en una fase de desarrollo similar a la que pudieron atravesar las redes sociales hace 5 años. Su futuro parece ligado al de los videojuegos y entornos en tres dimensiones. El tiempo nos dirá en qué desembocan.

162

internetización

163

internetización

164

internetización

La autoraGemma Ferreres (Vall d'Uixó, 1974) es profesional de internet desde 1999. Licenciada en Periodismo por la UCM de Madrid y Experta en eLearning por la UNED, ha impartido talleres y seminarios sobre Internet y nuevas tecnologías de la información en varias universidades. Coautora del libro La blogosfera hispana (2006), ha impulsado numerosas iniciativas que ayuden a conocer mejor el panorama de internet y, especialmente, el de los contenidos generados por los usuarios. Destacan la Encuesta a Bloggers y el Wiki de Historia de los Blogs. Su experiencia profesional en diversas empresas del sector le ha permitido conocer en toda su extensión el proceso de creación de proyectos y estrategias web, que ha plasmado en Internetización.

Escribe habitualmente en su página personal gemmaferreres.com y en Twitter (@gferreres). Sus otras webs son: tintachina.com, historiadelosblogs.com e internetizacion.com.

165

internetización

No olvides visitar:

internetizacion.com

Nota: las ilustraciones que aparecen en este libro son propiedad de sus respectivos autores.

166