internetizacin

internetizacin

internetizacin

Internetizacin

Gemma Ferreres

internetizacin

2011 Gemma Ferreres 1 edicin ISBN: 978-84-9981-718-7 DL: M-21314-2011 Impreso en Espaa / Printed in Spain Impreso por Bubok 4

internetizacin

A los blogueros y tuiteros

internetizacin

internetizacin

ndice
Introduccin...................................................................................................9 Creacin de sitios web.................................................................................11 Anlisis y fuentes de informacin............................................11 Arquitectura de informacin...................................................17 Diseo.....................................................................................35 Maquetacin............................................................................53 Programacin y plataformas....................................................63 Contenidos...............................................................................68 Gestin y mantenimiento........................................................81 Analtica web...........................................................................85 Control de calidad (estndares web, usabilidad, accesibilidad )..........91 Comunicacin y promocin de sitios web....................................................99 Comunicacin y Relaciones Pblicas........................................99 Publicidad (display, SEM, e-mail, mvil)................................111 Posicionamiento en buscadores (SEO)...................................123 Social Media Marketing (SMM).............................................129 Comienza tu propio proyecto....................................................................133 Internet en Espaa y en el mundo.........................................133 De la web 2.0 a la web2 .........................................................140 7

internetizacin

Modelos de negocio ..............................................................142 Legislacin aplicable..............................................................148 Emprendedores.....................................................................150 Y ahora qu? ltimas tendencias.............................................................155 Internet en el mvil...............................................................155 The Cloud (la nube)................................................................159 Web semntica o web 3.0......................................................160 Mundos virtuales y 3D...........................................................162 La autora....................................................................................................165

internetizacin

Introduccin
Muchos usuarios de internet, cuando tienen que disear una web para su empresa o definir una estrategia de social media no disponen de informacin suficiente para tomar decisiones. HTML? CMS? SEO? Multitud de siglas y conceptos han surgido en internet en la ltima dcada. Internetizacin pretende arrojar luz y presentar de un modo conciso y didctico respuestas a las principales dudas que encuentra un profesional o un recin graduado cuando se enfrenta a su primer proyecto online. El libro est organizado en cuatro grandes bloques: Creacin de sitios web describe las principales tareas que realizan los profesionales que construyen un sitio web, desde la recogida de informacin inicial hasta la eleccin de la plataforma ms adecuada pasando por la arquitectura de informacin, el diseo grfico o la maquetacin. Promocin de sitios web se ocupa del marketing y la comunicacin 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 travs de la analtica web. Comienza tu propio proyecto es el captulo en el que el lector, una vez conocidos los pasos que debe seguir para crear una web, encontrar informacin 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 prximos aos, como el cloud computing o el ya potente mercado de internet en el mvil. Dicho esto, te invitamos a leer Internetizacin y a dar tus primeros pasos en el mundo profesional de internet. 9

internetizacin

10

internetizacin

Creacin de sitios web

Anlisis y fuentes de informacin
Un profesional, al iniciar un proyecto, necesita mucha informacin. Slo de esa forma sus decisiones estarn fundamentadas. No podemos disear una tienda online, por ejemplo, sin saber cul es el producto ms demandado o qu artculo se desea promocionar esta temporada. Por ello, la fase previa de cualquier proyecto ser la recopilacin de informacin. 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 informacin a explotar suelen ser:

estadsticas del sitio web, si ya exista previamente informes externos generales y especficos sobre la temtica informes internos generales y especficos sobre la temtica 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 informacin y prepararemos un informe de conclusiones con recomendaciones que guiarn el enfoque del sitio web. Ya sabremos, por ejemplo, cmo es nuestro pblico y si nuestros usuarios se conectan por las maanas o por las tardes, si entran una vez a la semana o al mes, si quieren recibir boletines o no y cmo dar respuesta a sus necesidades y demandas. 11

internetizacin

Asimismo, conoceremos:

Objetivos Competencia Referentes

Objetivos Los objetivos son las metas que queremos alcanzar con el diseo de la web. Deben ser slo unos pocos y medibles. Por ejemplo: vender ms zapatos. Los objetivos estn 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 vern condicionadas por esta realidad y tendremos que dejar en un segundo plano otros servicios o ventajas para el usuario. Competencia El anlisis de la competencia es inevitable realizarlo para conocer en qu grado de avance se encuentran los dems actores de mi segmento y valorar si podemos superarlos o al menos igualarlos. El benchmark es el instrumento ms extendido de anlisis de la competencia. Usualmente, consiste en un listado de contenidos y funcionalidades de los competidores que nos permite conocer cul es el ms avanzado o rezagado y en qu posicin nos encontramos nosotros. Referentes Complementario al anlisis de la competencia es el de los referentes, muy importante en internet. Pueden existir negocios web que no tengan mucho en comn con mi empresa pero de los que pueda extraer aprendizajes. Google, Apple, Amazon y otros gigantes suelen ser ejemplos de buenas prcticas.

12

internetizacin

Fuentes de informacin
Gracias a internet, la tarea de recopilar informacin se ha vuelto mil veces ms sencilla que hace 15 20 aos. An as, hay que saber buscar y manejar algunas fuentes de referencia, las revisaremos segn un doble criterio:

Pblicas y privadas Generalistas y especializadas

Dejaremos para ms adelante, en el captulo Analtica web, los sistemas de estadsticas internos y nos centraremos ahora en las fuentes externas. Los organismos pblicos son grandes fuentes de informacin. Continuamente generan ingentes cantidades de datos de dominio pblico. Suscribirse a las notas de prensa del Instituto Nacional de Estadstica (INE) es altamente recomendable. El INE publica datos demogrficos, econmicos, sectoriales de todo el pas segmentados por Comunidades Autnomas e incluso por edades, sexos, etc. Los Ministerios son otra fuente privilegiada de informacin. Resulta muy til recibir las noticias que emiten los ms afines a nuestro sector de actividad: turismo, telecomunicaciones, sanidad, energa... Los Ministerios, as como los organismos pblicos, generan peridicamente extensas memorias que recopilan toda la informacin sobre un sector. Es conveniente bucear en sus webs cada cierto tiempo para ver si hay novedades. Adems de la Administracin central tambin las autonmicas y locales disponen de webs en la que publican documentacin de utilidad para cualquier emprendedor: desde modelos de planes de negocio al formulario para solicitar la apertura de un local. Una fuente constante de informacin son los estudios y papers que publican consultoras y asociaciones. En parte para su propia promocin y en parte por vocacin de servicio, cada cierto tiempo ven la luz investigaciones sobre los ms variados temas. Uno de los informes ms consolidados es Navegantes en la Red de la AIMC, se publica anualmente y en sus casi doscientas pginas desgrana el perfil de los usuarios de internet punto por punto. Es de elaboracin propia, por lo que estamos ante datos primarios. Estudios 13

internetizacin

destacados basados en datos de terceros son, por ejemplo, el informe eEspaa de la Fundacin Orange o La Sociedad de la Informacin en Espaa que edita la Fundacin Telefnica. El organismo pblico Red.es, por su parte, a travs del ONTSI (Observatorio Nacional de las Telecomunicacin y la Sociedad de la Informacin) 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 trfico. Adems de estos prestigiosos estudios de tipo genrico, las agencias y consultoras publican a menudo informes especficos sobre su rea de especializacin. As por ejemplo, existen, anlisis sobre internet en el mvil, publicidad en internet, SEO, banca online, accesibilidad, navegadores ms usados, social media... Los estudios a los que tenemos acceso no se limitan al mbito nacional. Eurostat ofrece estadsticas a nivel europeo; la Unin Internacional de Telecomunicaciones (UTI), a nivel mundial. Comscore o Pew son entidades respetadas que emiten peridicamente informes que sirven de referencia para muchos gerentes. Como no poda ser de otro modo, internet tambin permite el srvase usted mismo. Google aporta numerosas herramientas gratuitas de anlisis, como Google Insights, que permite comparar la popularidad de uno o varios trminos a lo largo del tiempo, por pases etc. Las fuentes de informacin que hemos venido citando son todas gratuitas pero algunas tienen modalidad de pago, lo que permite el acceso a funciones ms avanzadas o potentes, o directamente son de pago. Forrester o Nielsen NetRatings son algunos de los servicios que nos pueden proporcionar informacin de pago.

14

internetizacin

Captura de pantalla de Google Insights

15

internetizacin

Podramos citar muchas ms fuentes: Infoadex para datos de inversin publicitaria, CMT para transacciones con tarjeta de crdito, 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 informacin ms apropiadas para nuestros intereses: sean pblicas o privadas, generales o especficas de nuestro sector, gratuitas o de pago. Y no olvidemos suscribirnos y consultarlas ya que estar al da es fundamental en un sector tan cambiante como internet. Una vez finalizada la etapa de recogida y anlisis de informacin estamos listos para iniciar propiamente el proyecto, disearemos un cronograma con las fases del mismo, tiempos estimados para cada tarea, recursos humanos y tcnicos que vamos a dedicar, hitos que cumplir, reuniones de seguimiento y todo aquello necesario para que el proyecto llegue a buen puerto.

16

internetizacin

Arquitectura de informacin
Si hay algo que caracteriza a internet es precisamente su multidisciplinariedad: arquitecto de informacin, diseador grfico, maquetador web, programador, periodista, community manager, consultor de negocio, jefe de proyecto... todos ellos participan en la creacin y mantenimiento de un sitio web. Comenzaremos refirindonos al primero de ellos. La arquitectura de informacin (o de contenidos) se nutre de diversas disciplinas:

Biblioteconoma y Documentacin Periodismo Psicologa etc

De la Documentacin toma el sentido de la organizacin y clasificacin de la informacin para facilitar su acceso posterior. Del Periodismo, su capacidad para comunicar. De la Psicologa, el conocimiento sobre los procesos mentales y cognitivos de los usuarios. No obstante, muchas otras fuentes de saber son aplicables: diseo visual, diseo industrial, sociologa... Y muchas dosis de sentido comn, de horas frente al ordenador, el mvil, pelendose con la interfaz del GPS del coche o buscando el botn de encendido del mando a distancia del aire acondicionado. Ser observador, detallista y tener empata para ponerse en el lugar de los dems tambin ayudan. Al inicio del proyecto, el arquitecto de informacin dispone de todos los datos obtenidos durante la fase de recogida de informacin. Est en condiciones de saber cules son los objetivos del sitio, el pblico al que va dirigido, los contextos en los que va a ser usado, etc. Esta aproximacin metodolgica es vlida tanto si lo que va a disear es una web como una aplicacin para mvil o para iPad. Lo que no ser similar son los casos de uso: no es lo mismo consultar informacin desde el mvil mientras esperas el tren que cuando 17

internetizacin

ests sentado frente al ordenador. Todo ello afectar a las decisiones de diseo que tomemos. Imaginemos que el arquitecto de informacin (AI) tiene ante s un listado con los contenidos y funcionalidades de las que dispondr el sitio web. Sus tareas consistirn en organizar la informacin y distribuirla visualmente. Organizacin de la informacin Pensemos por un momento que nuestra web empezar a construirla deberemos contar equivalente en diseo web sera el rbol de documento o entregable que generar el proyecto. es una casa. Antes de con unos planos. El contenidos, que es el AI en esta fase del

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

18

internetizacin

19

internetizacin

La arquitectura de informacin de los sitios web ms 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 pestaa con Informacin para accionistas e inversores o la dedicada a la Responsabilidad Social Corporativa (RSC). Si dispones de un anlisis de la competencia (benchmark) habrs comprobado estas similitudes. El rbol de contenidos, en la mayora de los casos, es una estructura ramificada compuesta de una home, varias subhomes y numerosas pginas finales. La forma en que agrupemos los contenidos en secciones o, dicho de otra forma, las pginas en subhomes puede ser muy variada. Imaginemos que los contenidos son productos de una tienda online. Podemos organizarlos:

por marcas (Nokia, Apple, Samsung...) por categoras (hombre, mujer, jvenes, nios...) por fechas (2012, 2011, 2010...) Incluso en algn caso puede tener sentido el orden alfabtico

Ser nuestra tarea determinar qu clasificacin es la ms 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 plasmarn los distintos pasos que hay que atravesar hasta completar el proceso y las decisiones que habr que tomar durante el mismo. Distribucin visual de la informacin Los planos de nuestra casa no estarn completos sin el prototipo o wireframe. El wireframe es un dibujo de la interfaz de la web que estamos diseando. En l distribuimos visualmente los componentes de cada tipo de pgina. Un sitio web habitualmente cuenta con tres tipos bsicos de pgina:

Home, tambin llamada portada o pgina de inicio Portadilla o subhome Pgina interior, destino o ficha

20

internetizacin

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 peridico, 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 actualizacin frecuente es ms adecuado un modelo de primera plana. La home debe identificarse como tal al primer vistazo. Esto se consigue con recursos como: mayor tamao 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 pgina es preciso utilizar principios y recursos como:

jerarquizacin: dar mayor tamao y visibilidad a los contenidos ms importantes o que convenga destacar rotacin: si todo no puede estar en la home, definir un calendario de rotaciones para los contenidos que queramos comunicar priorizacin: decidir qu es ms 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 pgina a menudo podemos tomarnos algunas libertades y dar menos peso a la presentacin, pues ya nos conocen y mostrarles ms 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 tipologas 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 compaa, las subhomes son temticas, es decir, la subhome del canal de Deportes de un peridico nicamente recoge contenidos deportivos. Puede haber varios niveles de subhomes; siguiendo con el mismo ejemplo, el canal de Deportes puede contener varias subsecciones: Ftbol, 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

internetizacin

llegar al contenido. Esto se consigue evitando mensajes estticos y publicando directamente en la portadilla los contenidos. Por ejemplo, en la seccin Trabaja con nosotros de una web lo ms lgico ser publicar las ofertas de empleo en vigor y no una serie de enlaces a: ofertas de empleo, poltica de RRHH, enva tu CV. Todos estos contenidos deben aparecer pero de la forma ms eficiente posible. Por ltimo, tenemos la pgina interior. En nmero es la ms importante, porque en un sitio web hay una home, varias subhomes (o ninguna puesto que no son obligatorias) y cientos o miles de pginas finales de contenidos. Son equivalentes a la noticia o ficha de producto. Un sitio web periodstico tendr como destino final de la visita de cada lector a la pgina de una noticia y un sitio web comercial desear que el usuario se dirija a la ficha de un producto y pulse el botn de comprar. En esta fase del proyecto ya dispondremos de un set de plantillas o tipologas de pginas ms algunas complementarias como la de la pgina de contacto o de la nota legal. Un concepto importante al hablar de pginas es la estandarizacin. Tenemos que ver las tipologas de pginas como los lineales de un supermercado, en los que cambia el contenido, no el continente. En diseo web cambiar el contenido de una pgina es muy sencillo, basta con sustituirlo, pero modificar el contenedor es complejo, ya que afecta a la programacin. Por ello, hay que identificar los tipos de pgina y convertirlos en plantillas. As, tendremos la plantilla home, la plantilla subhome, la plantilla noticia y varias plantillas ms para otros usos. El proceso de estandarizacin significa que cada pgina de noticia seguir el patrn de la plantilla noticia y estar compuesta por los mismos elementos o campos. Por ejemplo:

titular antettulo y/o subttulo entradilla texto imagen o imgenes vdeo(s) embebidos pie de foto autor

22

internetizacin

fecha de publicacin y de ltima actualizacin documentacin relacionada (ej: pdf completo de un informe) opcin imprimir comentarios de los lectores opcin compartir en Twitter opcin compartir en Facebook y los dems que definamos

El conjunto de bocetos de las distintas tipologas de pginas forman el wireframe o prototipo. ste puede ser esttico o puede estar construido en HTML y ser navegable como si de la web final se tratara. Para disearlo existen programas como Axure que facilita la creacin de prototipos navegables incluso si no sabes programar. La maqueta navegable es especialmente til en la fase final de desarrollo, una vez cerrado el diseo grfico, para testarla con usuarios finales antes de programarla. Ejemplo de pgina de un prototipo:

23

internetizacin

24

internetizacin

Al disear un prototipo es preciso seguir una serie de principios. Son muy tiles tanto los principios bsicos de diseo, que veremos en el siguiente captulo como los principios del diseo de interaccin, que exceden los lmites de este manual pero sobre los que encontrars abundante informacin en internet. Navegacin e interaccin Sera imposible enumerar todos los componentes de un sitio web pero dedicaremos unas lneas a algunos tan importantes como la navegacin, el buscador y los enlaces y botones de accin. El men de navegacin es el elemento de un sitio web que permite desplazarnos de una seccin a otra. Podramos compararlo con el ascensor de un edificio, que te permite subir de una planta a otra o directamente a una en concreto. Sirve tambin para transmitirnos una idea de la dimensin y contenidos del sitio: si tiene 5 25 secciones, sobre qu temticas, etc. Tradicionalmente el men de navegacin ms usado era el vertical lateral. Se ubicaba generalmente a la izquierda de la pgina, inutilizando dicha zona para la publicacin de otros contenidos. Este tipo de men, no obstante, ha desaparecido, en buena parte, porque no se correspondan con los patrones de navegacin de los usuarios. El modelo que se ha impuesto es el de navegacin horizontal superior en uno o dos niveles. Su gran ventaja es que libera todo el espacio de la pgina para contenidos. Una variante de este tipo de navegacin es el men horizontal desplegable.

Ejemplo de navegacin horizontal en la web de Apple

25

internetizacin

El segundo nivel de navegacin, es decir, las subsecciones, puede desplegarse horizontal o verticalmente, aunque si es posible utilizarla, es ms eficiente la navegacin horizontal tanto para primer como para segundo nivel.

Navegacin horizontal y segundo nivel desplegado en la web de Chevron

Una tendencia cada vez ms extendida, sin embargo, es que este nivel, en forma de categoras desaparezca u ocupe un mdulo dentro de la pgina. Esto se debe a que los usuarios no navegan por categoras ms que cuando buscan algo concreto y tienden a pinchar en los contenidos para moverse por la web. Aunque no sea la predominante, la navegacin vertical no slo 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 navegacin en dos bloques:

navegacin principal, para los contenidos ms relevantes del sitio navegacin secundaria, para aspectos importantes pero que no representan el comportamiento clave de los usuarios. Ejemplo: poltica de privacidad, aviso legal, contacto

Los nombres de las secciones, llamados generalmente etiquetas o rtulos, deben ser breves y descriptivos, de esa forma, facilitaremos la labor de lectura y seleccin de los usuarios. La navegacin ha de ser consistente en todo el sitio: las mismas secciones, la misma ubicacin, la misma apariencia. Es la brjula con la que navegamos y nos orientamos. Esto deber tenerse en cuenta al definir el diseo de la pgina.

26

internetizacin

Men vertical de Amazon. El segundo nivel de navegacin tambin se despliega verticalmente.

27

internetizacin

En las siguientes pginas vemos los sistema de navegacin del NYTimes en sus versiones para web, mviles e iPad. Como podemos observar, aunque el peridico es el mismo, han adaptado el volumen de contenidos y la interfaz a las caractersticas de cada dispositivo y de uso del mismo. As:

En la versin web la navegacin es vertical y la home presenta un gran volumen de contenidos. En la versin para mviles dan prioridad a la ltima hora. La navegacin por secciones est escondida tras una pestaa para que la utilicen los usuarios con ms tiempo para realizar la consulta. En la versin para iPad tambin se priorizan los contenidos. El men aparece oculto y se despliega en vertical siguiendo las pautas de diseo marcadas por Apple

La forma de interaccin en cada dispositivo tambin es distinta: del ratn que pincha en los enlaces en la web, al manejo rpido con un slo dedo en el iPhone al uso reposado del iPad y con mayor espacio fsico para la interaccin y tambin mayor presencia de elementos audiovisuales.

28

internetizacin

The New York Times para iPhone (tamao superior al real)

29

internetizacin

The New York Times para iPad

30

internetizacin

The New York Times para web

31

internetizacin

Buscador Cuando un sitio web contiene grandes volmenes de informacin, millones de noticias, miles de productos, la navegacin puede resultar insuficiente para permitir a un usuario que localice la noticia o artculo que necesita. En tal caso es conveniente disponer de un buscador que, a travs de palabras clave introducidas por el usuario, arroje una pgina 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 pgina de resultados de un buscador consiste en una enumeracin de pginas, imgenes, vdeos u otros elementos que pueden corresponderse con lo que est buscando el usuario. De cada resultados se mostrar un resumen, informacin sobre los datos ms relevantes (tipo de fichero, peso, fecha...) e incluso una miniatura de la imagen. De esta forma, el usuario podr rastrearlos rpidamente y pre-seleccionar los que ms se aproximen a lo que necesita. Es muy prctico para el usuario que el buscador ofrezca filtros para refinar los resultados. Dos modalidades son las ms frecuentes:

bsqueda avanzada: el buscador permite especificar caractersticas adicionales de aquello que busca. Por ejemplo: posteriores a una determinada fecha, tamao de las imgenes, idioma filtros dinmicos: son una versin moderna de las tradicionales bsquedas avanzadas. Una vez tiene ante s la pgina de resultados, el usuario puede marcar o borrar opciones y la pgina se actualiza dinmicamente. Por ejemplo: busco hoteles en Semana Santa en Sevilla y, como aparecen ms de 100, marco opciones adicionales:

categora con desayuno incluido con parking

32

internetizacin

Enlaces Los enlaces son la esencia de la Red. No slo 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 diseo de un peridico o una revista impresos. En esta pgina de El Pas, por ejemplo, somos capaces de identificar qu textos son enlaces y a dnde llevan?

Un enlace debe identificarse sin tener que acercar el ratn para ver si cambia el cursor. Debe ser descriptivo, en dos otres palabras ha de explicar a qu pgina te lleva, qu encontrars en la pgina de destino: ir al blog, Fotogalera: una ciudad en llamas. No, pinchar aqu. 33

internetizacin

Botones de accin Los botones de accin son aquellos elementos que inician un proceso. Aunque a simple vista puedan parecer enlaces, desencadenan toda una serie de funciones informticas. Se enmarcan en esta categora desde el tradicional login o registro de usuario, al botn de accin de un buscador o el play de un vdeo. Todos estos elementos, al igual que los que hemos ido enumerando a lo largo del captulo deben ser definidos tanto en su forma, como su ubicacin, como en su esttica. En una gua de estilo se consignarn sus caractersticas 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

internetizacin

Diseo
Con qu marca asocias el color rojo?

Coca cola? Ferrari? Vodafone? Banco Santander? Y si lo contextualizamos un poco?

Un poco ms

35

internetizacin

Te basta una imagen para reconocer a qu marca pertenece el anuncio que ests visualizando? O necesitas ver el logotipo?

Este ejemplo resume los elementos bsicos que hay que tener en cuenta a la hora de disear una identidad visual corporativa. Elementos fundamentales de diseo Al disear tu sitio web o aplicacin para mviles o tablets debes determinar si ya tienes una identidad definida y, por tanto slo debes aplicarla o si, por el contrario, has de desarrollar tambin una identidad para tu web o aplicacin. El smbolo, los colores y la tipografa son los elementos fundamentales de tu marca que debers aplicar pero es preciso tener en cuenta una serie de implicaciones. Volvamos a los ejemplos. Ikea o BMW se caracterizan por mimar sus marcas, tambin en internet. 36

internetizacin

La marca, con todos sus elementos (tipografa, colores, mrgenes) aparece en la posicin 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

internetizacin

La marca BMW, acompaada 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 ratn 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 smbolo encuadrado de BMW como guiando la mirada y organizando los elementos en la pgina. Con estos dos ejemplos tenemos ya algunas pistas para analizar los elementos fundamentales del diseo 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 psicologa 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 funcin que predomine en una web o 38

internetizacin

de los pblicos 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 pblico profesional o, por el contrario, tener un tono distendido y divertido y apelar a nios o jvenes. Los colores y la forma en que los apliquemos ayudarn a enfatizar el carcter emocional de la web. Desde un punto de vista ms funcional, los colores que se utilicen en el diseo de una web deben cumplir criterios de accesibilidad, un aspecto que trataremos en mayor profundidad en el captulo sobre Control de calidad. Para garantizar un nivel bsico de accesibilidad, los colores deben tener un nivel de luminosidad y contraste suficiente. En ocasiones, los colores corporativos no alcanzan los niveles mnimos recomendados y es necesario adaptarlos para su versin online. En la imagen que vemos a continuacin, por ejemplo, la legibilidad se ve perjudicada porque no hay suficiente contraste entre el el color del texto y el del fondo:

Texto

Los colores corporativos se aplicarn a todos los elementos que integran la web, sean encabezados, enlaces, tablas o grficos.

39

internetizacin

En los grficos de la pgina de BP se puede observar cmo aplican los colores verde y amarillo corporativos. Marca Denominamos marca, desde un punto de vista grfico, a los colores, smbolo y tipografa que identifican a una organizacin. El diseo de smbolos es una ciencia tan especializada que requerira un libro entero para explicar cmo se conciben elementos a la vez tan simples y a la vez tan complejos como los de Repsol o Nike. El logotipo es la tipografa que adquiere corporeidad, bien por ser propia o por asociarse indefectiblemente a una marca. El smbolo es el elemento grfico que la acompaa. Ejemplo: un sol sobre el horizonte. Nike ha conseguido que su smbolo sea suficiente para identificar a la marca. Coca-cola nicamente dispone de logotipo. Una marca, adems de su versin principal, debe contar con versiones secundarias para utilizar sobre fondos claros u oscuros o en otros soportes o circunstancias.

40

internetizacin

Tipografa Las fuentes tipogrficas, o tipografas, que se pueden emplear en una web tienen algunos condicionantes. Los ordenadores vienen equipados con una serie de tipografas que dependen del sistema operativo usado. Los usuarios pueden instalar nuevas tipografas 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 disear 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 ms adecuado es seguir estas sencillas reglas:

utilizar la tipografa corporativa nicamente en la marca y elementos destacados, mediante el uso de imgenes emplear tipografas de sistema en la mayor parte de los textos y contenidos definir cmo queremos que los ordenadores sustituyan nuestras tipografas predefinidas cuando no estn disponibles

Una forma de evitar que el ordenador cambie la tipografa corporativa por otra cuando no la tiene instalada es utilizar imgenes. Esta solucin, sin embargo, presenta problemas de accesibilidad y por lo tanto slo debe usarse cuando las ventajas superen a los inconvenientes, por ejemplo, en la marca y elementos importantes pero acotados. La marca, lo que comnmente llamamos logo, en una web sirve para identificar al propietario del sitio y, usualmente, para volver a la pgina de inicio. Su finalidad no es ser leda y su capacidad comunicacional se perdera si no utilizase la tipografa corporativa. Por ello, siempre debemos respetar la tipografa de la marca. En los textos de una web la situacin es opuesta a la de la marca; su finalidad es totalmente prctica: ser ledos, desde el PC o desde otros dispositivos, por lo que la accesibilidad debe ser mxima. Recurrir a formatos grficos como las imgenes o la tecnologa flash pueden dar mayor espectacularidad a la pgina pero nos crearn, inmediatamente, numerosos problemas cuando queramos: 41

internetizacin

editarlos traducirlos llevarlos a la pantalla de un mvil u otro dispositivo

Para editarlos necesitaremos tener el archivo original, un programa informtico especfico y un diseador cerca. Para traducirlos deberemos previamente extraerlos de la imagen o fichero flash y luego de nuevo recurrir a un diseador con el software correspondiente (Photoshop, Flash...). En un mvil, casi con toda seguridad, no se visualizarn. En cambio, un texto en HTML que usa tipografas de sistema podemos editarlo nosotros mismos, traducirlo, publicarlo, leerlo en el mvil 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 gramtica: p{font-family:"Times New Roman",Georgia,Serif} Esta lnea de cdigo 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 tipogrficas son bsicamente dos: Seriff Sin seriff

a
42

internetizacin

Se aprecia mejor al aumentar el tamao. La primera es con serif, en concreto, la serifa ms popular en la informtica, la Times New Roman, llamada as por haber sido diseada 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 ms conocida. Un aspecto fundamental de las fuentes tipogrficas, adems de su familia, es su tamao, cuerpo en la jerga profesional. Al disear una web, los tamaos de las tipografas se pueden expresar en absoluto o en relativo. Por ejemplo:

en absoluto: 10 px (10 pixels) en relativo: 5 em (5 veces el tamao de una m)

Lo recomendable es definir el tamao en relativo, de esa forma el usuario puede cambiar el tamao de la letra con los comandos de su navegador: Afortunadamente, las ltimas generaciones de navegadores permiten aumentar o disminutir el tamao del texto aunque se codifique en valores absolutos e incluso si est dentro de una imagen. Una ltima recomendacin. Es tentador emplear numerosas fuentes para el diseo de una pgina: una para titulares, otra para la entradilla, otra para sumarios, otra para enlaces, otra para textos de ayuda... No obstante, menos es ms y siempre ser ms efectivo para lograr una identidad consistente y ms eficiente en cuanto al uso de recursos limitarse a una o dos familias tipogrficas. Un punto importante que hay que conocer al seleccionar las tipografas para una web es que estn surgiendo iniciativas que, simplemente aadiendo un enlace a nuestra hoja de estilo (ms adelante aprenderemos qu es esto), nos permiten utilizar fuentes que no son del sistema. Un ejemplo es Google Web Fonts, una librera de tipografas que no cesa de crecer.

43

internetizacin

Elementos genricos de diseo Las reglas del diseo 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 Jerarqua. Mediante recursos como el tamao y la posicin podemos comunicar al lector qu contenidos son ms importantes. Simetra/asimetra. Un diseo puede buscar el dinamismo mediante la asimetra.

44

internetizacin

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 fotografa puede equilibrarse con dos destacados de menor tamao y fotografas ms pequeas ubicados a la derecha del primero. Ritmo. Se crea mediante la repeticin de elementos. nfasis. Negritas y tamao confieren nfasis a los elementos. Alineacin. Los elementos no deben flotar en la pgina, una forma de anclarlos visualmente es la alineacin: todos los elementos se inician en una lnea imaginaria. Espacio. Los espacios en el diseo son como los silencios en la msica. Mdelos con cuidado. Una imagen con unos mrgenes alrededor puede ser la diferencia entre un sitio bien diseado y uno descuidado en el que los textos se pegan o superponen a las fotografas.

Ejemplo de alineacin de los elementos sobre una retcula. Siempre se alinean con el inicio de una de las columnas de la retcula:

Estos principios sern de aplicacin al disear cada componente (un titular, una entradilla, un sumario, una tabla, un enlace) y tambin a elementos estticos de la pgina: 45

internetizacin

lneas iconos vietas o bolos

Merecen especial atencin dos elementos: Los enlaces y botones de accin poseen varios estados, que el diseador debe definir visualmente de modo que el usuario los perciba como lo que son, elementos de interactividad. Si los iconos realizan la funcin de un botn, tambin se aplican las mismas normas. Las imgenes 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 definicin del estilo de imgenes 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 imgenes ms usados son:

JPG (o jpeg). Se trata de un formato verstil, visualizado por todos los navegadores y que es apto tanto para fotografas como para ilustraciones. Se deben optimizar las imgenes para web (reducir su peso) antes de publicarlas. Se pronuncia jotapeg. GIF. Adecuado para dibujos e ilustraciones, pero no para fotografas. Permite transparencias y animaciones sencillas. Se pronuncia guif. PNG. Es un formato ms 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 especficos de diseo A la hora de disear el aspecto de una pgina web, el diseador trabaja sobre un prototipo elaborado por el arquitecto de informacin. Debe vestir el wireframe aportando las mejoras que sean 46

internetizacin

adecuadas. Dependiendo del equipo con el que contemos, iniciar la tarea un director de arte y la desarrollar un diseador junior o simplemente realizar todo el proceso un diseador grfico senior. El diseador con ms experiencia esbozar las lneas maestras que guiarn la aplicacin 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 fisonoma de sus retratados y sus ayudantes terminaban la obra pintando atuendos, fondos y otros detalles. Al disear para internet conviene tener en cuenta que:

es un diseo funcional, para ser usado, por lo que la esttica debe supeditarse al objetivo principal (informar, vender, accin...) se asemeja al diseo editorial pero no es esttico, sino que debe incitar a la accin y esto se debe reflejar y percibir al primer vistazo: dnde estn los enlaces? dnde est el botn que activa el buscador? minimalismo, en la Red la eficiencia y optimizacin debe ser mxima y en el diseo se logra a travs del minimalismo, utilizando los mnimos recursos para lograr los objetivos.

No debemos pensar que el minimalismo es un obstculo para la creacin de diseos imaginativos. Un ejemplo habitual es CSSzengarden, una web en la que se muestra cmo, con unos mismos contenidos, se pueden realizar infinitos diseos. Como vemos en los ejemplos, estas webs son iguales en sus contenidos pero la disposicin de los elementos en la pgina y el diseo visual cambia alterando nicamente las CSS:

47

internetizacin

Los diseadores grficos suelen trabajar con el programa informtico Photoshop para el diseo esttico y Flash para animaciones. Son herramientas informticas que requieren un entrenamiento especfico para aprender a utilizarlas. Estn dirigidas a un pblico 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 informacin ms detallada sobre los 48

internetizacin

mismos. Una vez acabado el diseo, 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 especfico para ser visualizado. JPG, el mismo documento en un formato estndar que podr visualizar cualquier persona del equipo o con capacidad de decisin, sin necesidad de tener instalado el programa profesional Photoshop. Opcionalmente, impresiones en papel pluma para realizar presentaciones 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.

Las animaciones se entregan en:

Y si no s disear? Como hemos podido comprobar a lo largo del captulo, disear no es una tarea sencilla. Adems de la creatividad y el foco es preciso manejar con destreza herramientas como Photoshop, Illustrator y otros programas informticos. Si no es tu caso, existen recursos que te permitirn suplir estas carencias, aunque no alcancen el nivel de un diseo profesional. Desde webs que te permiten configurar tu logo en un minuto con slo elegir color, forma, efectos, hasta plantillas y temas que te darn el trabajo hecho y slo necesitarn unos toques de personalizacin. Nos detendremos unos instantes en este tema. Temas y plantillas La 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 programacin. 49

internetizacin

Los CMS gratuitos suelen incluir diseos predefinidos o incluso contar con numerosos diseos desarrollados por miembros de su comunidad. Algunos de los CMS ms populares son Drupal, Joomla, WordPress o Blogger.

Pgina de seleccin de plantilla de Blogger.com

Cmo elegir un diseo para tu web? Los CMS suelen incluir un buscador de diseos que permite elegir las caractersticas (nmero de columnas, color base... ). Una vez te hayas asegurado de que la estructura de plantilla elegida se adecua a tus necesidades selecciona el diseo que ms te guste y personalzalo con tus colores y tu marca. Una web se compone de diversas capas; la de diseo es una ms y no tiene por qu interferir con la capa de contenidos, que se 50

internetizacin

conservarn y adaptarn al diseo si lo has construido segn las directrices que vamos exponiendo en este manual de internetizacin. Los diseos 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, imgenes etc. Ejemplos de plantillas o templates de Joomla:

Para personalizar una plantilla necesitas unos conocimientos bsicos. Los elementos que debers adaptar sern, fundamentalmente:

marca colores imgenes y contenidos elementos complementarios: iconos, bullets, lneas textos 51

internetizacin

Para cambiar el logo por el tuyo debera bastar con subir una imagen con el tamao adecuado. Para cambiar los colores debers abrir el fichero CSS y sustituir los cdigos hexadecimales de los colores. Aunque la plantilla pueda incorporar fotografas de bancos de imgenes y textos de ejemplo, como es obvio, tendrs que sustituirlos por contenidos sobre tu empresa. Por ltimo, existen numerosos detalles que necesitarn una adaptacin. Generalmente se trata de imgenes de pequeo tamao que sirven como separadores, decoracin, etc. Al ser imgenes, slo tendrs 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 versin 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 tests Llegado este punto del proyecto ya podemos mostrar a personas ajenas al mismo, que puedan aportar una visin objetiva, los primeros bocetos y testar sus impresiones, tanto del diseo grfico como de la usabilidad de la arquitectura de informacin y de la navegacin. Si detectan fallos, estamos a tiempo de corregirlos, ya que an no se ha iniciado la fase de desarrollo propiamente dicha. Esto es muy importante, imaginemos la construccin de un edificio, es ms sencillo introducir cambios cuando se encuentra en fase de plano que cuando ya est construido.

52

internetizacin

Maquetacin
Hasta ahora hemos tratado de la parte visible de una web: sus colores, su nmero de columnas o sus secciones, pero para que esa informacin viaje a travs de la red debe estar codificada, de ello trataremos en este captulo. La maquetacin web es una profesin que requiere un grado elevado de especializacin; 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 extensin a otras plataformas de la mejor forma posible. No descuidemos, por tanto, este aspecto slo porque no se visualiza.

Qu es el cdigo fuente Has visto alguna vez el cdigo fuente de una web? sabes cmo mostrarlo? Los navegadores web disponen de una opcin en su men llamada Ver cdigo fuente. En Internet Explorer se accede a ella desde Pgina > Ver cdigo fuente. Si la despliegas podrs 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

internetizacin <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 cdigo 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 cdigo a un lenguaje que nosotros podamos entender: las pginas web. El HTML es un lenguaje universal, como la msica o las matemticas 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 parmetros, del mismo modo que sabemos algunas palabras en francs, italiano o japons. Esto nos ser til en numerosas ocasiones, por ejemplo:

si tenemos que editar manualmente un texto de una pgina web si tenemos que saber con qu palabras se intenta posicionar una web en buscadores

54

internetizacin

si queremos saber si la web se cie a estndares

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 versin 5.0 y est en constante evolucin y mejora para dar respuesta a las siempre crecientes necesidades de los usuarios y posibilidades de la WWW, como incluir vdeos o mayor interactividad. No es, propiamente dicho, un lenguaje de progamacin, sino de descripcin o marcado de pginas web. El Consorcio de la World Wide Web es el organismo que define los estndares de diseo web con el fin de que sea accesible desde cualquier dispositivo, independientemente de cul sea el hardware o software que utilice. Del mismo modo que hay palabras del castellano que han cado en desuso, el HTML ha atravesado varias versiones y etiquetas (comandos) que hace diez aos eran aceptadas ahora se recomienda no usarlas. Las primeras webs mezclaban en el mismo fichero de cdigo el contenido, la estructura, la presentacin. Es decir, si queran destacar un titular con letras rojas y un tamao de fuente de 24 pxels escriban algo as:
<font size=24px color=red>Victoria de la Selecci&oacute;n espaola de f&uacute;tbol</font>

Este esquema bastaba para webs de tan slo unas pginas, no obstante, cuando se deseaba cambiar el diseo los procesos eran muy manuales y tediosos. Las CSS, Cascade Style Sheets u hojas de estilo, es un concepto que escuchars muy a menudo durante el desarrollo de una web. Permitieron separar en otro fichero las instrucciones sobre la apariencia de una web.

55

internetizacin

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 diseo: Ej:

h2 { font-size:160%; color:#11aa11; }

De este modo, si se desea cambiar el diseo, basta con modificar el fichero CSS y los cambios se aplicarn a toda la web, sin tener que cambiar cada pgina una a una. La gramtica del lenguaje HTML fue evolucionando y las instrucciones ms antiguas fueron quedando obsoletas. Este aspecto, aparentemente anodino, es clave porque si en los prximos meses los navegadores dejan de aceptar instrucciones antiguas, nuestra web dejar de visualizarse correctamente. Adems 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 automviles en la que slo 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 presentacin de una pgina web. Indican aspectos como tamao de letra, color, mrgenes, estilo, alineacin... XHTML. Es una combinacin de HTML 4.0 y XML. Fue el lenguaje dominante entre los expertos durante los diez aos

56

internetizacin

que ha durado la definicin de HTML 5.0. Existe una versin estricta y una transicional menos restrictiva en sus reglas.

RSS. Significa Really Simple Syndication y es una tipologa de XML utilizada para sindicar o distribuir contenidos entre distintas webs. Se utiliza para suscribirse a las actualizaciones de blogs y pginas de noticias a travs de programas especficos, como Google Reader, iGoogle o los incluidos en los propios navegadores.

Pgina o sitio web? Solemos usar indistintamente los trminos pgina y sitio web pero en realidad un sitio web se compone de varias pginas. Los sitios ms pequeos pueden tener cuatro o cinco pginas pero son cada vez ms escasos, predominan las webs con cientos o incluso miles de pginas, por ello, los sitios creados con HTML escrito manualmente van desapareciendo y siendo sustituidos por webs con un gestor de contenidos detrs. Los CMS (Content Management Systems o gestores de contenidos) son motores que crean automticamente las pginas necesarias a partir de unas tipologas previamente definidas. Por ejemplo: si en la fase de arquitectura de informacin definimos el tipo de pgina noticia, que se compona de cinco campos (ttulo, entradilla, fecha, autor, texto), con un CMS la podremos crear automticamente, slo rellenando los campos, pero sin necesidad de escribir el cdigo HTML. En el captulo anterior veamos que existen diseos predefinidos que podemos usar para nuestra web, dichos diseos o themes incluyen el cdigo HTML necesario. Si usamos gestores de contenidos (CMS) como Drupal o WordPress para crear nuestra web podemos garantizar al 100% que existirn themes bsicos listos para usar y muy fciles de instalar. Perfil del maquetador web Del mismo modo que hay personas que aman una bonita caligrafa hay verdaderos enamorados de un cdigo fuente bien formateado. Velan por que las pginas se maqueten de la mejor forma posible, siguiendo los estndares que la harn perdurable y accesible desde mltiples plataformas. Si encontramos a un profesional as haremos 57

internetizacin

bien en conservarlo, ya que escasean, y porque sern 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 mximo partido al HTML. Formar un buen equipo con los arquitectos de contenidos y los diseadores para, juntos, encontrar las frmulas 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 difcil que una web se visualice de la misma forma en todos ellos: Internet Explorer, Firefox, Opera, Safari, Chrome... Su nmero es cada vez mayor pero esto no debe obsesionarnos. El diseo web no es tan preciso como el diseo impreso. Es ms, si nos empeamos en eliminar todas las diferencias obtendremos un cdigo menos elegante que si buscamos soluciones ms grciles. Al fin y al cabo qu importa que un botn se mueva dos pxeles a la izquierda en Internet Explorer al lado de las grandes ventajas que aporta internet frente a la entraable imprenta de Guttenberg? A la hora de comprobar cmo 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 automticamente, generando capturas de pantalla. La herramienta de trabajo de un maquetador es un editor HTML. En principio, el cdigo 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 automticamente, mediante opciones de vista previa o coloreando las distintas partes de un documento. Al elegir uno debemos cerciorarnos de que no agrega cdigo por s mismo que escape a nuestro control. La importancia de los estndares web Los estndares web son los cimientos de una web, por eso es tan importante su solidez. El uso de estndares es la base que nos 58

internetizacin

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

cualquier navegador que respete estndares telfonos mviles widgets redes sociales flash audio otra web otros idiomas buscadores ayudas tcnicas usadas por personas con discapacidad

Como hemos sealado en el epgrafe anterior, los estndares establecen una separacin entre el contenido y su presentacin visual. Hagamos la siguiente prueba: 1. Abre el navegador Firefox 2. Abre la web de elpais.com 3. Selecciona en el men la opcin Ver> estilo de pgina > sin estilo 4. Podrs ver el contenido de elpais.com pero sin diseo Gracias a ello, ese contenido se puede exportar a mviles o widgets y aplicarles otro diseo, codificado en las CSS. Breve gua de instrucciones HTML Dedicaremos unas lneas 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

internetizacin

aparecen encerradas entre los smbolos menor (<) y mayor (>). La de cierre lleva adems una barra (/). Vemoslas: <tag> </tag> Para poner una palabra en negrita dentro de una frase escribiramos lo siguiente:
El actor <b>George Clooney</b> protagoniza los spots de Nespresso

Y el resultado sera:
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 ms 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

internetizacin

El resultado visualmente sera Consulta la oferta de la semana y constituira un enlace a la pgina 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 excepcin que no lleva etiqueta de cierre. La extensin 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 fotografas A continuacin reproducimos, con permiso del autor, el grfico 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 reproduccin.

61

internetizacin

62

internetizacin

Programacin y plataformas
A lo largo del captulo sobre construccin de sitios web hemos ido describiendo tareas cada vez ms complejas y que requieren mayor especializacin. En este epgrafe, Programacin y plataformas, nos adentramos en el rea ms inasequible para el usuario medio. Si una web fuera un ser vivo, los programadores seran los cirujanos que operan un corazn o realizan un transplante de rin. Dejaramos una operacin de bypass a un aficionado? Para programar funcionalidades de una web tambin debemos contar con los mejores profesionales: los ingenieros informticos. Tal vez te ests diciendo, esto es demasiado difcil 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, enseanza, red social, etc. As, por ejemplo, una plataforma de e-learning permitir dar de alta a los alumnos, publicar material didctico, 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 cul 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 ests 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, querrs incluir mejoras que no formen parte de la plataforma elegida y seguramente acabars realizando desarrollos propios.

63

internetizacin

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 opcin. Google, Twitter o Facebook son grandes ejemplos de plataformas desarrolladas desde cero. Nos ocuparemos a continuacin de las dos posibilidades descritas: uso de plataformas de terceros y programacin 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 progamacin toda la potencia de la web fue Blogger, un gestor de contenidos o CMS muy sencillo, pero hoy en da hay plataformas para casi todo lo que puedas pensar:

gestin de contenidos comercio electrnico educacin (campus virtuales) redes sociales analtica web gestin de proyectos vdeo blogs foros social media ...

A la hora de seleccionar una plataforma elegiremos una que lleve algn tiempo en el mercado. Lo podemos averiguar por su nmero de versin. No es lo mismo una plataforma que se encuentra en la versin 0.68 que una en la versin 4.0. Esto nos garantizar una 64

internetizacin

mnima estabilidad y reducir el nmero 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 ms fcil su supervivencia y ms difcil que nos encontremos un da 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 necesitars un gestor de contenidos. Los ms populares son Drupal y Joomla. El primero es ms 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 donacin 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 ms modesta puedes recurrir a CMS ms ligeros como WordPress que, aunque pensado para blogs, permite crear pginas que no se vayan a actualizar con frecuencia como un CV o la presentacin de tu tienda. Operar con estos gestores de contenidos como editores es sencillo, no obstante, para su instalacin 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 ms all y empezar a vender por internet es posible instalar carritos de la compra. Existen soluciones especficas 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 tambin hace recomendaciones de software de comercio electrnico para crear tiendas desde cero. OsCommerce es el ms veterano mientras que Magento es el que est experimentando ms crecimiento. Conviene dejar constancia de que necesitars conocimientos avanzados para configurar y poner en marcha estos sistemas de comercio electrnico. 65

internetizacin

Los lenguajes de programacin en internet Si has estado das rastreando la web en busca de una plataforma que se ajuste a tus necesidades y ningn 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 pblico, lo que nos da una idea de sus ventajas. Ruby es el ms joven de los lenguajes mencionados y el ms emergente, con una comunidad de desarrolladores cada vez mayor. En cualquier proyecto es preciso innovar contnuamente pero si adems los desarrollos son propios no habr referencias a las que seguir, el futuro lo marcaremos nosotros. Muchas de esas ideas sern rpidamente copiadas por la competencia pero eso no es bice para seguir investigando e invirtiendo en I+D+i. El fenmeno de las API API son las siglas de Application Program Interface. Google y otras compaas como Facebook las han liberado, lo que en la jerga significa que permiten que otras empresas desarrollen programas que interacten con los suyos. El resultado son programas mixtos (mash up) que mezclan funcionalidades de uno y otro programa.

66

internetizacin

Ejemplo de mash up con Google Maps

67

internetizacin

Contenidos
Contenidos es la palabra con la que en internet se denomina a la informacin. Es un concepto ms amplio y pretende englobar a todos aquellos datos que circulan a travs de la red, se trate de una poesa, una cancin o la retransmisin de un partido de ftbol. Es decir, no importa su gnero ni su formato: textual, imgenes, grficos, sonido, vdeo, descargables o aplicaciones. La mayor capacidad de las redes de banda ancha y de los dispositivos ha permitido que slo hayamos tardado unos aos en pasar de las pginas de texto al vdeo en directo y los mundos en tres dimensiones. Comprese este avance con estos otros ejemplos. Entre la imprenta de Guttenberg y la impresora multifuncin que tenemos en casa median 500 aos. El periodismo tard trescientos aos en recorrer su camino desde las gacetas y los diarios impresos hasta los inicios de la radio en los aos 20 del siglo pasado y la generalizacin de la televisin en los hogares en los aos 60 y 70. Si algo caracteriza sobreabundancia:

los

contenidos

en

internet

es

su

medios de comunicacin de todo el mundo, desde el NYTimes a RTVE pasando por la BBC, estn digitalizando sus archivos y publicndolos en internet Google est escaneando bibliotecas enteras para poner a disposicin de los usuarios el saber acumulado por la Humanidad millones de usuarios escriben cada da 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 debera estar sobreentendida, sino el valor aadido, como veremos al final de captulo, primero, ocupmonos de temas ms operativos como quin puede crear los contenidos de una web, cul debe ser el tono editorial, qu temas tratar, formatos existentes y sus reglas correspondientes al 68

internetizacin

trasladarse a la web as como la gestin de la publicacin y difusin de los contenidos. Quin Dependiendo del tamao de la web los contenidos los escribir el propio autor, dispondr de un equipo o contratar a terceros para realizar esta tarea. Vemoslo con ejemplos:

en un blog generalmente escribe una sola persona que controla todo el proceso un medio de comunicacin cuenta con una plantilla de profesionales dedicados a la generacin de contenidos, adems de con una red de colaboradores que envan sus materiales peridicamente en una empresa puede haber un equipo multidisciplinar dedicado a la creacin 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 ms humana y personal. Podemos grabar un vdeo o escribir un post para anunciar una fusin 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 especializacin es una de las tendencias ms fuertes que mueven la Red. En un mercado con cientos de millones de usuarios casi cualquier tema encuentra su pblico, y en un mundo donde todo est estandarizado, desde la ropa a los muebles, cuanto ms personal es una voz ms atrayente resulta. Los formatos a travs de los que nos podemos expresar en internet son cada vez ms variados y ricos. No slo 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 vdeo grabado con la cmara de su telfono mvil mientras que una gran empresa puede optar por contratar todo un equipo de produccin: maquilladores, iluminadores, cmaras de alta definicin... 69

internetizacin

En ocasiones lo que necesitaremos para elaborar un contenido son dos perfiles: la persona que crea el contenido propiamente dicho y el especialista que disea una infografa o programa una aplicacin 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 tecnologa no debe alejarnos de esta premisa bsica. Independientemente de quin sea el autor de los contenidos, stos deben compartir una misma lnea de comunicacin, lo que no debe ser obstculo para que cada redactor o fotgrafo 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 tcnico. Esta uniformidad ayuda al usuario a identificar a la empresa o institucin que emite el mensaje con unos valores y un posicionamiento. Como vemos, se trata de la misma filosofa explicada en el captulo sobre diseo aplicada a la comunicacin. Temtica De acuerdo con la lnea de consistencia que estamos describiendo, los temas que elijamos a la hora de crear contenidos deben estar tambin alineados con nuestra especialidad o nuestro negocio. Es lo que nos va a diferenciar de la competencia y lo que ms 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 energa en la web de una petrolera recetas de cocina en la web de un fabricante de vitrocermicas

70

internetizacin

grficos interactivos en el informe de una agencia de investigacin de mercados

La eleccin de la temtica puede ser ms laxa en webs ms 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 inters. Un medio generalista, dentro de la amplitud de materias que abarca, tambin se caracterizar por abordar una serie de temas con un determinado tono y estilo. Formatos Resulta asombroso observar cmo los formatos disponibles en internet han avanzado a pasos de gigante. Ya no es suficiente con incluir noticias ilustradas con imgenes, el pblico exige vdeos y aplicaciones. Todos estos formatos ya existan antes de la invencin de internet pero al trasladarse a la Red han tenido que adaptarse; algunos an no lo han conseguido, estas son algunas pautas para internetizar los contenidos. Texto El texto es sin duda el formato que ms ha avanzado en su adaptacin a la gramtica de internet, desde un doble punto de vista:

tecnolgico estilo

HTML es el lenguaje en el que se codifican los contenidos de la web. En Internetizacin 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 travs de los cuales publicamos en internet, son versiones sencillas de editores de texto como Microsoft Word que permiten aadir negritas, cursivas, enlaces, fotografas... 71

internetizacin

Dada la sencillez de crear contenidos en HTML no hay excusa para publicar textos en otros formatos, como imgenes 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 pgina web e intenta seleccionar y copiar un texto a continuacin, pgalo 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 cuntas veces te ha ocurrido que has pinchado en un enlace sin saber que diriga a un documento pdf y te ha molestado que se inicie el programa Adobe Reader? O, tal vez no tenas instalado dicho programa en el porttil o el telfono 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 tambin una versin en pdf, indicar siempre que el enlace lleva a otra aplicacin distinta al navegador. En este caso es un pdf, pero podra ser un excel, word...

El BOE, por ejemplo, que desde 2009 slo se publica online, est disponible en HTML para su bsqueda por palabra clave en todo el histrico y tambin en pdf para preservar el formato original. Escribir para internet tiene sus propias reglas. El usuario tiene ante s toneladas de informacin para consumir, por ello, valora los textos que van al grano y agradecen la brevedad. Estas podran ser sus caractersticas:

Ttulos descriptivos Frases cortas Brevedad

72

internetizacin

Ausencia de barroquismos Enlaces, enlaces, enlaces

El usuario de internet siempre tiene prisa, no tiene tiempo para leer textos de ms de una pgina o complicadas metforas que le impiden llegar a los datos importantes. Lo solemos llamar escanear, el usuario rastrea la pgina 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 informacin clave. El tono podramos 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 poesa y las metforas pero slo para lectores especialmente afines. La mayora, buscar datos relevantes. Comprense 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 atencin recibe tantas llamadas que no podemos pinchar en cada enlace para averiguar qu esconde un titular potico sin contextualizar.

73

internetizacin

Fragmento de infografa realizada por 2mdc.com

Infografas Las infografas son muy tiles a la hora de resumir informacin, especialmente datos cuantitativos y para reproducir acontecimientos de los que no se dispone testimonio fotogrfico o audiovisual. Pueden ser estticas o estar animadas, en cuyo caso deben seguir pautas de usabilidad para facilitar a los lectores la navegacin de las mismas. 74

internetizacin

La sobreabundancia de informacin ha hecho que cada vez sean ms necesarias las infografas, para resumir grandes volmenes de datos en un formato de fcil lectura. Vdeo y sonido (Audiovisual) El vdeo es el formato con ms xito del momento. Cada vez es ms utilizado y ms consumido. No slo los Parlamentos emiten sus sesiones en directo sino que millones de usuarios graban, publican, visionan y comentan vdeos en Youtube y otras plataformas colaborativas. Incluso en vivo mediante servicios como Ustream, Lifestream o Qik, para mviles. Al principio, para publicar vdeos en internet se suban en formato .avi o .mpeg, el usuario los descargaba y los reproduca en su PC con el programa adecuado. Posteriormente se fue generalizando el vdeo en streaming, que se visualizaba al tiempo que se descargaba y cuya explosin se produjo con la llegada de Youtube que generaliz la conversin a Flash de los vdeos. Hoy en da se abre camino HTML 5 como nueva frmula para servir vdeos por internet. Las ventajas que tienen el vdeo y el audio es que existen dispositivos de grabacin al alcance de cualquier usuario, que puede grabar un vdeo casero sin esfuerzo. Adems, se estn realizando grandes avances en el reconocimiento de la voz y la imagen. En YouTube existe una funcionalidad, an en fase experimental, que permite transcribir las palabras pronunciadas por los protagonistas de un vdeo e incluso traducirlas a tu idioma gracias a la tecnologa de Google, propietario del canal de vdeos. Por otro lado, los buscadores, como Bing, son capaces de clasificar imgenes en funcin de su color predominante o identificar si aparece una persona o un objeto. El diario The New York Times, en su edicin online, dispone de una plataforma que permite buscar trminos en un discurso del Presidente Obama o acceder directamente al momento en que pronuncia una determinada frase. RTVE ha implementado algo similar en Espaa. El vdeo, 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 obstculo encuentran personas sordas. Para solucionarlo, es recomendable 75

internetizacin

acompaar los vdeos con transcripciones y subttulos en formatos estndar para que puedan beneficiarse:

buscadores, que slo rastrean texto personas sin altavoces personas sordas

En definitiva, los contenidos que publiquemos en nuestra web pueden haber sido creados especficamente para internet o para otros soportes. En ambos casos, deben aplicarse las gramticas de internet y realizar las adaptaciones necesarias en el caso de los contenidos diseados para ser impresos o retransmitidos por televisin, radio u otros canales. Ejemplos:

Un vdeo de una convencin puede publicarse en la web pero no sin un resumen de pocos minutos y, si es posible, una transcripcin en HTML. No basta con escanear un catlogo de productos, es preciso adaptarlo a internet siguiendo las reglas que hemos descrito en los captulos sobre AI y Diseo. El pdf para descarga ser una opcin pero no un sustituto de un verdadero catlogo. Ejemplo: mangoshop.es

Aplicaciones La Universidad de Columbia ha creado una master que combina Periodismo e Informtica porque considera que los periodistas del futuro, los informadores, debern dominar ambas tcnicas. El lenguaje no se limitar al texto o las imgenes sino que debern 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 grfico interactivo en el que el usuario puede elegir cmo visualizar los datos: por edades, por sexo, por pas...

76

internetizacin

Un mbito en el que son tremendamente populares las aplicaciones es el de los smartphones o telfonos de ltima generacin con acceso a internet, como el iPhone. En lugar de navegar por pginas web, que generalmente no estn adaptadas a telfonos mviles, los usuarios prefieren descargarse pequeos programas, llamados coloquialmente apps o aplis (de aplicaciones) que realizan funciones determinadas: consultar el tiempo, compartir fotografas, indicar a tus amigos tu localizacin... Comunidad En torno al contenido se crean comunidades. Los contenidos se generan, se votan, se retuitean, se comparten, se comentan. El paradigma de comunicacin 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 ms complejo. Este ciclo de vida, que puede durar minutos (el 70% de los tuits no 77

internetizacin

obtiene ninguna respuesta) o das es posible gracias a las redes sociales. Emerge entonces una figura, la del community manager, que no slo dinamiza los contenidos sino tambin mima la relacin con los usuarios: les interpela, les responde, les ayuda si encuentran problemas... La simptica infografa The Hectic Schedule of a Social Media Manager resuma 24 horas en la vida de un community manager: 1. Se levanta y revisa el correo que ha llegado mientras dorma 2. Escanea la red buscando informacin interesante para compartir 3. Tuitea y retuitea 4. Publica un post o actualiza su estado en Facebook. Lo comparte. 5. Se rene con el equipo comercial 6. Responde comentarios o mensajes 7. Almuerza con otros compaeros de profesin 8. Sin olvidar hacer check in en Foursquare 9. Graba un vdeo con el CEO o algn empleado y lo sube a YouTube 10. Escribe otro post 11. Habla por Skype sobre microblogging corporativo 12. Revisa las mtricas en Google Analytics 13. Programa tuits para publicar por la noche dirigidos a usuarios de otros pases 14. Mira el correo por ltima vez en el mvil antes de acostarse Valor aadido Cada vez ms, los usuarios esperan recibir contenidos de mayor valor aadido. Es un tema clave en el reparto de papeles en internet. Las utilidades para generar contenidos estn al alcance de todos los pblicos y cada da son capaces de realizar tareas ms complejas. Redactar un texto, tomar una fotografa, grabar un vdeo, 78

internetizacin

preparar una presentacin no requieren programas sofisticados. Tampoco su edicin ni su publicacin. Por tanto, cada vez es mayor el valor aadido que el profesional debe incorporar a sus creaciones para diferenciarse y reivindicar su trabajo. No es lo mismo grabar un vdeo 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 bsicos en un automvil o una vivienda. Los usuarios los demandan por defecto y las empresas y profesionales deben seguir innovando para ser competitivos. El valor aadido en un contenido puede tomar diversas formas:

noticia de ltima hora. Estoy suscrita a un servicio que me enva alertas al mvil cuando se produce una noticia de alcance. No me enva todas las noticias, sino que las filtra y slo me interrumpe cuando realmente es importante. ahorrar trabajo al destinatario final, recopilaciones, resmenes o anlisis en diarios online, acuciados por la falta ediciones digitales, estn definiendo basados es estas premisas. sea en forma de profundidad. Muchos de ingresos de sus servicios de pago

79

internetizacin

80

internetizacin

Gestin y mantenimiento
A veces es fcil olvidar que una web, una vez creada, requiere un mantenimiento que ser, adems, lo que ms tiempo nos exija. Crear una web puede llevar dos semanas, seis meses o un ao pero el mantenimiento no termina jams. En este epgrafe sobre gestin de una web nos vamos a centrar en el mantenimiento diario no en rediseos o implementacin de nuevas funcionalidades, que seran proyectos o mini-proyectos en s mismos.

Perfil del gestor En el da a da de una web intervienen numerosos perfiles: editores de contenidos, vendedores, diseadores, tcnicos... 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 gestin 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 cmo consultar las estadsticas de acceso del da anterior? Internet es un mbito multidisciplinar por excelencia, por eso es conveniente que los empleados estn acostumbrados a trabajar en equipo y a compartir conocimientos de sus respectivas reas de especializacin. Coordinacin Coordinacin, coordinacin y coordinacin, es la palabra que ms repetirs al intentar gestionar una web. Es preciso coordinar a todos los niveles:

a los miembros del equipo: diseadores con editores y con comerciales y con tcnicos y jefes de proyecto... con traductores con editores en otras ciudades o pases 81

internetizacin

con el equipo offline. Por ejemplo, vendedores en concesionarios o puerta a puerta con la direccin y equipo de management las fechas de publicacin las fases de proyectos las distintas secciones y pginas de la web: querrs que algo aparezca publicado en el boletn el mismo da que en la home con las webs en las que participes: sea Facebook o Twitter con las distintas versiones de tu presencia online: mviles, tabletas... etc

Con la aparicin de las redes sociales y los social media la gestin de un proyecto web se ha descentralizado en buena medida. No slo 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 dinamizacin, dilogo y moderacin.

Mantenimiento El software que utilicemos en nuestra web tambin nos exigir tareas de mantenimiento. Un da ser un parche de seguridad y otro el lanzamiento de una actualizacin. Esto implicar primero realizar copias de seguridad y posteriormente instalar las novedades. Adems de estas tareas no programadas una web requiere un mantenimiento diario y semanal. Un ejemplo es la realizacin 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 sern tan sencillas como la inclusin de la 82

internetizacin

opcin de compartir en los posts del blog y otras requerirn desarrollos que durarn semanas. Una necesidad que surgir con los aos ser un rediseo 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 pxeles 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 ms sencillo, apropiado para un blog hasta servidores dedicados.

83

internetizacin

En funcin del tamao de nuestra web y del trfico que vaya a recibir nuestra web necesitaremos mayor capacidad de almacenamiento, de transferencia de datos, ms cuentas de correo etc. Los precios son muy variados, desde 30 euros al ao a muchos miles de euros.

84

internetizacin

Analtica web
Sabemos perfectamente qu clientes son los ms asiduos a nuestro restaurante o a nuestro comercio pero a simple vista puede parecer que los visitantes de una web son invisibles. Nada ms 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 gestin de un proyecto web.

Monitorizacin de un sitio web Al interactuar con una web el usuario deja un rastro, log en ingls. Numerosos programas traducen estas huellas a datos interpretables. Por ejemplo, un peridico online puede saber en tiempo real que noticia est siendo la ms leda y, consecuentemente, dejarla ms 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 da para detectar evoluciones y tendencias. Es importante ser capaz de averiguar por qu unas pginas son ms 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 Da de la Madre, por lo que la seccin ramos de flores est creciendo en visitas. O que sea primero de mes y muchos usuarios consulten su extracto bancario o su factura. El envo de un e-mail promocional es otro motivo frecuente detrs de un incremento significativo del trfico 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 analtica web. La monitorizacin de un sitio web no se limita a cifras, herramientas como los tests multivariable o el eye tracking nos proporcionarn informacin sobre las preferencias de nuestros usuarios y cmo el diseo o la rotacin de productos afectan a su comportamiento. 85

internetizacin

Variables principales No es lo mismo gestionar un gimnasio con socios en un barrio que una peluquera en un centro comercial y tampoco todas las webs son iguales. Con el tiempo iremos identificando las variables ms importantes para monitorizar el da a da de nuestro proyecto o negocio en internet. Son las KPI o Key Performance Indicators (indicadores clave). Para empezar ser necesario conocer el nmero de usuarios nicos que nos visitan. Un usuario nico es una persona que visita la web independientemente del nmero de veces en que acceda a nuestras pginas. Si entra en repetidas ocasiones hablaremos de visitas. Un lector de un diario online puede entrar todos los das e incluso muchas veces al da mientras que las compras en el supermercado las realizamos una vez al mes o cada quince das. Por tanto, el nmero de visitas ser superior al de usuarios. Pginas vistas es el nmero de pginas que un usuario recorre al visitar nuestra web. El tiempo que el usuario permanece en la web es una alternativa a las pginas vistas para calcular si los contenidos que ofrecemos al usuario son de su agrado. Muy relevante es la informacin 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 disear sus contenidos para personas que slo entrarn una vez en su web. De los usuarios que llegan a travs de buscadores, fundamentalmente Google, nos interesa saber qu palabras clave utilizaron para encontrarnos. Asimismo, descubrir cules son las principales pginas de entrada, ya que la home no es siempre la primera pgina que ve un usuario. Adems 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 pginas, llamadas referers. Existen webs con gran poder de influencia y lograr que nos enlacen puede suponer crecimientos exponenciales de trfico a nuestra web durante los das 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

internetizacin

artificialmente la audiencia que, a los pocos das, 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 accin. Slo visualizan una pgina 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 ms peso como fuentes de trfico las redes sociales y, ms en concreto, Facebook y Twitter. Para algunos medios de comunicacin las visitas que procedentes de Facebook ya suponen el 5%. Las redes sociales, sin embargo, no se miden slo como fuente de trfico sino que tambin hay cada da ms herramientas para monitorizar la actividad de nuestros usuarios en social media:

tamao de la red (seguidores, fans, suscriptores...) actividad de la misma (retweets, favoritos, me gusta, comentarios...) compromiso (menciones positivas, negativas).

Conocer qu pginas o qu contenidos son los preferidos por los usuarios es una de las funciones que ms me gustan de las herramientas de analtica web. Puedes mantener una web sobre cocina pero si adems llegas a conocer a tus usuarios y sabes que prefieren la comida asitica o las recetas para microondas te ser muy til para mejorar el servicio. Personalmente, me gusta tener un listado con los contenidos ms ledos y agruparlos por temas, es como escuchar en el silencio las voces y las opiniones de tus clientes. El anlisis de los contenidos ms visitados se puede sofisticar enormemente, llegando a trazar funnels o recorridos que realizan los visitantes al llegar a una pgina, identificndose patrones. Por ejemplo, usuarios que llegan a la home seleccionan una categora seleccionan un producto lo introducen en el carrito de la compra introducen sus datos y as hasta llegar a la compra. Este tipo de anlisis se denomina de embudo o tnel (funnel) porque lo 87

internetizacin

habitual es que en el recorrido se vayan perdiendo usuarios y slo unos pocos lleguen a completar la tarea. Los datos socio-demogrficos 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 geogrfica de las visitas, con mayor detalle dependiendo del pas o la provincia; las horas de mximo trfico; incluso los ingresos, la edad o el sexo de los usuarios a travs de encuestas. En el aspecto tcnico, los navegadores, resoluciones de pantalla, sistemas operativos desde los que acceden los usuarios nos pueden dar pistas acerca de en qu direccin deberan enfocarse nuestros prximos desarrollos. Por ejemplo, es posible que empiecen a crecer los accesos desde iPhone. Por ltimo, nos referiremos a uno de los datos clave: la conversin. No es suficiente con monitorizar las estadsticas de acceso sino que hay que fijar objetivos y verificar que se alcanzan. Veamos un ejemplo: contratamos una campaa publicitaria que supone un incremento del trfico 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 conversin seran los formatos publicitarios que se pagan en funcin de la accin que generan, imaginemos que estrenamos una pelcula y queremos que el pblico objetivo vea el trailer; podemos acordar que se pague nicamente por el nmero de veces que se activa el play en el visor y no slo por mostrar el robapginas.

Herramientas ms usadas Aunque en los primeros aos de la analtica web se trataban los ficheros log que se generaban hoy en da se han generalizado programas que traducen los datos en crudo a formatos fcilmente interpretables. El ms popular y adems gratuito es Google Analytics. Si quieres conservar el control sobre tus datos y no facilitrselos a Google existen alternativas de pago como las que ofrecen Nedstat, Webtrends o Nielsen NetRatings. 88

internetizacin

Habitualmente, estos programas exigen insertar unas breves lneas en el cdigo fuente de cada pgina mediante un proceso automatizado. De esa forma, cada vez que un usuario solicita pgina o realiza una accin en ella sta queda registrada. Si tu empresa concentra buena parte de su actividad en internet es posible que desees que tus datos sean pblicos, por ejemplo, para vender espacio publicitario. Esto es frecuente en los medios de comunicacin online, que reciben cientos de miles o millones de visitas de usuarios segmentados. Por ejemplo, la seccin de Frmula 1 del diario deportivo Marca puede ser un soporte publicitario adecuado para un fabricante de automviles ya que sus lectores son amantes de la conduccin. En tal caso, existen organismos que auditan tus cifras de audiencia, como OJD Interactiva en Espaa. Los datos de los medios que audita son pblicos y puedes consultarlos gratuitamente en su web: www.ojdinteractiva.es.

89

internetizacin

90

internetizacin

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 pondrn en peligro la correcta evolucin de nuestra web. Para evitar malas prcticas, disponemos de diversas metodologas y disciplinas que garantizarn que no slo tenemos una web sino que adems es la mejor web posible.

Hemos decidido analizar:

Estndares web Accesibilidad Usabilidad

Estndares web El W3C o World Wide Web Consortium es el organismo que define los estndares para el diseo web. Sus grupos de trabajo pueden dedicar aos a debatir la mejor solucin para un problema. El HTML, XHTML, CSS o XML que tantas veces hemos citado son algunas de las tecnologas 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 Espaa tienen sede en Gijn y peridicamente 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 versin, ahora y en el futuro. 91

internetizacin

Los estndares que definen podemos compararlos a una gramtica 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 cdigo HTML de nuestra web como marca el W3C incluso los navegadores ms antiguos leern nuestra web y la mostrarn, en tanto que si somos descuidados en poco tiempo nuestra web ir perdiendo usuarios que, al disponer de navegadores diferentes o antiguos, no las podrn visualizar. Suele ser especialmente molesto cuando ocurre en un servicio pblico o en la web de un banco, ya que crean una situacin de indefensin en el usuario que quiere realizar una operacin importante. Afortunadamente esta circunstancia se da cada vez con menor frecuencia. Cuando diseamos una web la diseamos tambin para el futuro y para el pasado. El W3C continuamente est desarrollando nuevos estndares, cada vez ms potentes y exigentes y si descuidamos el cdigo fuente de nuestra web los nuevos navegadores, como Chrome, que se disean siguiendo dichos estndares, no sern 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 ms recientes. El W3C se preocupa de que el cdigo que sigue sus estndares degrade grcilmente, es decir, que muestre lo esencial aunque pierda algunos detalles o elementos accesorios. Una pgina web diseada conforme a estndares incluso se podra visualizar, con limitaciones, en un telfono mvil. Es ms caro mantener una web conforme a estndares? nos preguntan a veces. Podramos responder es ms caro conseguir un texto redactado sin errores gramaticales? Se trata, en definitiva, de una buena prctica que, si se conoce a fondo, surge espontneamente en el desarrollador web. Lo que s es cierto es que puede conllevar ms das de desarrollo y comprobaciones. Uno de los puntos crticos que ms dolores de cabeza traen a los desarrolladores web es la compatibilidad entre navegadores. Los navegadores web, como Firefox, Internet Explorer, Chrome, Safari, Opera, estn en constante evolucin y conviven, asimismo, 92

internetizacin

diferentes versiones de los mismos, no todos siguen estndares 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 bsicas son accesibles en todos ellos. El W3C facilita en su pgina web validadores que analizan automticamente si el cdigo de una web es conforme a estndares y marca los errores que detecta para facilitar su correccin. Asimismo, es posible encontrar en la web servicios que comparan el aspecto de nuestra web en mltiples navegadores, sin tener que tener todos ellos instalados en nuestros ordenadores.

Accesibilidad La accesibilidad es una rama de los estndares 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 minusvlidos. Segn el INE, en Espaa hay ms de 3 millones de personas con algn tipo de discapacidad, pensemos en las personas con vista cansada que difcilmente pueden leer la diminuta tipografa de algunas webs. Estas personas utilizan ayudas tcnicas para navegar y se benefician de algunas buenas prcticas de diseo web que debemos conocer, por ejemplo:

Lectores de pantalla. Software que lee en voz alta las pginas web. Leen el cdigo 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 ratn dan instrucciones de voz a sus ordenadores, que las interpretan y les permiten navegar. Ejemplo: abre Google

93

internetizacin

Una persona sorda se beneficia ampliamente de los vdeos subtitulados y, como es obvio, tambin lo agradeces si no dispones de altavoces o si no conoces el idioma y los subttulos son adems una traduccin

Para disear webs accesibles existen unas guas denominadas WCAG. En 2008 se public la segunda versin. Son unas guas 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 certificacin. La real es aquella que, aunque no sigue todas las pautas al 100% facilita inmensamente la navegacin 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 Administracin. Segn las pautas de accesibilidad de la WAI (Web Accesibility Iniciative, dependiente del W3C) existen tres niveles de accesibilidad:

A . Es el nivel ms bsico y el que toda web debera cumplir AA . Supone avances respecto al nivel A y es un aadido 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:

Imgenes. 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 opcin que permite extraer todos los enlaces de una pgina y navegar por ellos sin necesidad de leer toda la pgina. 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

internetizacin

puntos. Adems, si usamos textos significativos en los enlaces, tambin mejoraremos el SEO de nuestra web.

Uso de flash. Una infografa diseada 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 estndares y pautas de accesibilidad es que facilitamos el acceso de todo tipo de dispositivos, no slo navegadores web. Los mviles, con sus pequeas pantallas, su ausencia de teclado o de ratn y tambin Google, al que a menudo se alude como el usuario ciego ms importante, ya que su forma de rastrear la Red es similar a la de un invidente, tambin podrn recorrer nuestras webs y contenidos y mostrarlos ms fcilmente si seguimos las pautas del W3C.

Usabilidad Usabilidad es un trmino 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 pginas web leer las instrucciones para aprender a usar cada web sera imposible, por ello deben ser tremendamente intuitivas y fciles de usar. Esto se ha conseguido a partir de las buenas prcticas de disciplinas preexistentes como el diseo de software o la ergonoma 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 informacin y sigue estndolo aunque en realidad son como dos caras de una misma moneda. La arquitectura de informacin ayuda a realizar diseos usables y la usabilidad verifica que lo son. La aplicacin de una metodologa a lo largo del proceso de diseo ayudar a alcanzar la mxima usabilidad. Antes El proceso de diseo comienza con una fase de recopilacin de informacin y anlisis, es entonces cuando un focus group (grupo de discusin) con usuarios representativos puede aportar datos 95

internetizacin

valiosos sobre sus preferencias y expectativas que podremos incorporar al diseo de la web. Si ya existe una web previa y lo que queremos es mejorarla un experto puede realizar una anlisis heurstico en el que, mediante un checklist, revisar los puntos crticos. Durante Los usuarios pueden tener su propio mapa mental sobre cmo esperan que sea la web, intentemos descubrirlo con tcnicas como el card sorting: escribiremos en fichas los nombres de las secciones o funcionalidades de nuestra futura web y veamos cmo las ordenaran. Esto nos dar pistas sobre qu secciones o agrupaciones son ms lgicas para ellos y evitaremos llamar a una seccin Ocio cuando todo el mundo la llamara Turismo. En este punto podremos ya definir personas o usuarios prototpicos que representan los casos de uso de nuestra web. Despus El instrumento para medir la usabilidad por excelencia es el test de usuarios, por eso le dedicaremos ms 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 diseo (prototipo, boceto, primera versin...) para detectar errores bsicos. Es especialmente til antes de lanzar la web, para corregir problemas fundamentales que saldrn a la luz en cuanto la web comience a ser usada por el pblico. Estos test se conducen por un especialista y consisten en una serie de tareas que simulan una sesin de navegacin. 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 travs de una cmara de circuito cerrado o de vdeos si el usuario acepta que se grabe la sesin. 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 accin, por ejemplo, hacer login en la pgina. Si pulsan en el botn o 96

internetizacin

enlace adecuado les mostraremos otra pgina en la que introducir usuario y contrasea. La imaginacin no tiene lmites :-) El grado de sofisticacin 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 cmara sigue el movimiento de nuestra pupila por las pginas de la web y detecta donde detenemos la mirada, qu zonas no visualizamos, hasta dnde hacemos scroll... tests multivariable: si dudamos entre varias cabeceras o eslganes para una pgina podemos testar las diversas combinaciones con ayuda del Optimizador de Pginas Web de Google

Una frmula alternativa si nuestros amigos no quieren hacer de conejillos de Indias es recurrir a webs que, por unos pocos euros, sometern nuestros diseos a usuarios voluntarios que testan webs. Existen mltiples tcnicas para detectar a tiempo problemas en una web, conviene consultar con especialistas cules son las ms 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 disearon. Es importante incluirlas en el ciclo de vida del producto y repetirlas peridicamente para validar avances, detectar nuevos fallos, obsolescencias etc. Aunque hemos seleccionado los estndares, la accesibilidad y la usabilidad como las principales frmulas para medir la calidad de un sitio existen metodologas mucho ms exigentes y estrictas, especialmente en el campo de la programacin que exceden el mbito de este manual.

97

internetizacin

98

internetizacin

Comunicacin y promocin de sitios web

Una empresa, para dirigirse a su pblico objetivo, dispone de diversos recursos que estn transformndose profundamente empujados por la fuerza de internet. Nos referimos a la Comunicacin, las Relaciones Pblicas (RRPP) y la Publicidad, cada vez ms 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 Comunicacin equivaldra a los medios owned, la Publicidad a los medios comprados o pagados y en un territorio intermedio se encontraran los medios ganados gracias a las RRPP o a las otras dos tcnicas.

Comunicacin y Relaciones Pblicas

Si hay algo que ha cambiado y est cambiando con internet es la comunicacin. A menudo se habla msticamente de la conversacin, en alusin 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 Comunicacin de Masas. 99

internetizacin

15. En tan solo unos pocos aos la homognea voz de los negocios (el sonido de la visin, la misin y los folletos publicitarios) va a sonar tan artificial como el lenguaje de la corte francesa del siglo XVIII. 19. Las compaas pueden ahora comunicarse con su mercado directamente. Puede ser su ltima oportunidad si la desperdician. 53. Se estn llevando a cabo dos conversaciones. Una en el interior de las compaas. La otra con el mercado. 56. Estas dos conversaciones quieren encontrarse. Hablan el mismo idioma. Reconocen sus voces mtuamente. 64. Queremos tener acceso a tu informacin 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 chucheras 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 estn "online". Tienes ms de esos escondidos por ah? Pueden salir a jugar? 90. An en el peor de los casos, nuestra nueva conversacin es ms interesante que la mayora de las ferias comerciales, ms entretenida que un programa de televisin y ciertamente ms apegada a la vida real que cualquier web corporativo que hayamos visitado. 95. Estamos despertando y conectndonos. Estamos observando. Pero no estamos esperando. Instructivo verdad? El paradigma de la comunicacin est cambiando y en l conviven dos niveles. Se mantiene la comunicacin a travs de intermediarios, si bien sta est experimentando grandes cambios y crece con fuerza la comunicacin directa. La comunicacin a travs 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

internetizacin

medios de comunicacin para que la publiquen y llegar as a los usuarios finales. Los blogs irrumpen en escena desde una doble perspectiva de comunicacin 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 idneo para hacer llegar nuestro mensaje a nuestro pblico. Dirigirse a un blogger puede resultar atemorizante ya que reivindican una forma de comunicacin ms natural que la de las anquilosadas notas de prensa y comunicados oficiales, pero esto no debe paralizarnos. Seleccionar los blogs ms afines temticamente y leerlos durante un tiempo nos permitir familiarizarnos con los autores y descubrir puntos de inters comunes. Ellos quieren proporcionar a sus lectores la mejor informacin y nosotros tambin, por ello, anunciarles una primicia o invitarlos a una demo de un producto pueden ser frmulas vlidas para acercarnos a ellos. Los blogs, por otra parte, son una excelente va de comunicacin directa con nuestros clientes. Empresas como Google, Facebook y tambin todos los pequeos 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 tambin bloggers y ciudadanos interesados en conocer las noticias de primera mano. Los social media son otra de las fuerzas que est cambiando la comunicacin entre las empresas y su pblico. Engloban, no slo a los blogs, un formato ya veterano, sino a las fanpages de Facebook, los micromensajes de Twitter, las fotos alojadas en Flickr, los vdeos subidos a Youtube, las presentaciones compartidas en Slideshare... Esto significa que internet ya no es sinnimo de pgina web. La presencia en internet se ha desdoblado en mltiples facetas. Del mismo modo que dbamos a nuestros clientes nuestro telfono y nuestra direccin postal para que eligieran la mejor forma de comunicarse con nosotros, en estos momentos debemos abrir vas de comunicacin en blogs, Facebook, Twitter, Youtube, Flickr, Slideshare, Linkedin y usar cada uno de estos canales de la forma ms adecuada. Nuestro pblico ms joven se encontrar en Tuenti, mientras que para distribuir informacin urgente ser ms til Twitter. Si nos quedan dudas sobre si es conveniente que nuestra empresa utilice estas herramientas plantemonos lo siguiente: si creramos 101

internetizacin

una empresa hoy en da cmo nos comunicaramos con nuestros clientes y grupos de inters? Probablemente elegiramos un blog. Entonces, por qu no lo aplicamos a una empresa que ya tenga 5, 10 50 aos? Y quin es la persona idnea para ser el portavoz de nuestra empresa? Cualquier persona de nuestra empresa est transmitiendo una imagen de la misma y cualquiera puede representarla, slo hace falta encontrar el interlocutor ms adecuado para cada foro. Si a un congreso enviamos a nuestros mejores investigadores, por qu no designar a las personas ms adecuadas para dialogar a travs de cada canal? Una segunda opcin es hacer recaer esta responsabilidad en la figura del community manager (CM), el profesional que gestiona, dinamizando y moderando la conversacin, los social media. El protagonismo del usuario Del mismo modo que nosotros tenemos mltiples vas para comunicarnos con nuestro pblico y clientes, directa o indirectamente, ellos tambin pueden hacerlo, pueden elegir recibir la informacin e interactuar con nosotros a travs de uno o varios de esos canales o preferir hacerlo a travs de intermediarios. Los intermediarios son los medios de comunicacin, los blogs de terceros, los amigos en Facebook que comentan nuestros productos o incluso nuestros hijos pueden serlo. Esta comunicacin es bidireccional y los usuarios pueden responder a nuestros mensajes, de nuevo, directa o indirectamente. Pueden escribirnos a travs 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 opinin sobre nuestros productos en sus blogs o en la zona de comentarios de un peridico. En esta nueva comunicacin el usuario, no lo olvidemos, se convierte en protagonista al ser l mismo emisor y, si tiene gran influencia a travs de su blog o un grupo en Facebook, un prescriptor capaz de influir en la opinin de otros consumidores. Es de este modo cmo las marcas han dejado de depender del departamento correspondiente y han pasado a ser lo que los 102

internetizacin

usuarios dicen de ellas, incluso participando en la definicin 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 artculos de consumo. La siguiente pregunta que nos hacemos es cmo escuchamos a nuestro pblico? Cuando se comunican directamente con nosotros, a travs de nuestros canales de presencia en internet es sencillo, basta con escuchar y responder, en pblico 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. Gestin de la reputacin online Si cada vez el acceso de las personas a herramientas de comunicacin social es ms sencillo es lgico que los mensajes se multipliquen exponencialmente. El press clipping que reciba un directivo a primera hora de la maana recopilando las menciones en prensa a su persona o su compaa 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 ms all, los categorizan, en una aproximacin a la web semntica, en mensajes positivos, neutros o negativos. La monitorizacin 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 informacin, detecte errores y proponga mejoras. La gestin de reputacin online u ORM (online reputation management) es una profesin 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 operacin de maquillaje o esttica que no aborda el fondo de la cuestin.

103

internetizacin

104

internetizacin

105

internetizacin

Un servicios pionero en Espaa en la monitorizacin de los social media fue Lastinfoo, tal vez muy adelantado a su tiempo. Una iniciativa ms reciente es Gestiondereputacion.com, que nace de la necesidad de gestionar nuestra identidad y reputacin digital. Relaciones Pblicas Las fronteras entre Comunicacin, Relaciones Pblicas (RRPP) e incluso Atencin al Cliente se estn difuminando. Este es uno de los rasgos que caracterizan a la comunicacin 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 atencin al cliente? Las RRPP se valen generalmente de los siguientes recursos para realizar su funcin: presencia en ferias, exposiciones, congresos, patrocinio de eventos, mecenazgo cultural, publicaciones corporativas, notas y ruedas de prensa, plublirreportajes y siguen apareciendo nuevos formatos cada da. Al mencionar las frmulas para acercarnos a los bloggers nos hemos referido a este tipo de tcnicas. Si deseamos dejar esta tarea en manos de terceros existen agencias de comunicacin 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 econmico, simplemente, las empresas confan en la bondad de su producto y los bloggers interesados en la temtica eligen si lo resean y en qu sentido, positivo o negativo. Una forma de identificar bloggers o tuiteros relacionados con nuestros productos es recurrir a los rankings. En Espaa el veterano ranking de Alianzo filtra por pas, Comunidad Autnoma, categora e idioma. En febrero de 2010 el ranking absoluto de blogs quedaba as: 1 Microsiervos 2 Barrapunto 106

internetizacin

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 ms populares: 1 @marilink - Mariln Gonzalo 2 @edans - Enrique Dans 3 @meneame_net - Mename 4 @HombresG - Hombres G 5 @jlori - Jos Luis Orihuela 6 @JavierCapitan - Javier Capitn 7 @patxilopez - Patxi Lpez 8 @twittes - Rafael Pelez 9 @alexpuig - Alex Puig 10 @fotomaf - Mauro Fuentes Este tipo de acciones tambin 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

internetizacin

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 sueo de cada responsable de marketing: planificamos y desarrollamos una campaa 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 artculos de limpieza Tenn Brillante o Estrella. Nos hemos referido a frmulas para llegar a nuestro pblico objetivo directa e indirectamente y hemos mencionado la posibilidad de que se conviertan en prescriptores. Pues bien, gracias a internet las Relaciones Pblicas ha encontrado nuevas formas de amplificar los mensajes. Pensemos en la aplicacin 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 travs de la retransmisin en vdeo mediante mensajes de menos de 140 caracteres. Publicar imgenes del mismo tomadas con el mvil seguirlo a travs 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 conversacin enviar preguntas a los ponentes a travs de Twitter, ests o no en la sala proyectar los mensajes en una pantalla en definitiva, generar conversacin

Como vemos, algo tan sencillo como Twitter crea un ecosistema de un potencial increble. 108

internetizacin

Hemos elegido un ejemplo de aplicacin de Twitter pero casos similares se producen con otras herramientas de social media. Pensemos por ejemplo en la retransmisin de una carrera de motociclismo por rtve.es a la que se aade un mdulo de Facebook para que los aficionados comenten los adelantamientos entre s. Retomando el Manifiesto Cluetrain que mencionbamos al principio, el lenguaje corporativo ha quedado anticuado, hay un nuevo dilogo 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 conversacin seguir sin nosotros.

109

internetizacin

110

internetizacin

Publicidad
En la Facultad de Periodismo nos ensearon que la publicidad tambin es informacin pero... slo la primera vez que la ves. Muchas personas admiran la creatividad publicitaria o son fieles a marcas que les han acompaado desde su infancia, sin embargo, el bombardeo y la saturacin irrita a los usuarios, tanto a los que ven la televisin y contemplan cmo 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, adems, aprenden y son capaces de evitar las zonas de la pantalla que ocupan los anuncios, fenmeno ampliamente estudiado. La gestin de la publicidad en internet constituye, en s misma, una profesin. Es un campo que no cesa de crecer, innovar y reinventarse. Desde los antiguos banners a los juegos para iPhone diseados para dar a conocer un producto ha transcurrido una dcada pero lo mejor de todo es que estamos slo en los inicios. En este captulo repasaremos los principios bsicos de las principales modalidades de marketing online.

Gestin de campaas publicitarias Una campaa 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 campaas 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 relacin comercial. Para lograr estos objetivos el ejecutivo de marketing dispondr de un presupuesto que deber distribuir y una planificacin que indique la duracin de las campaas en el tiempo o el nmero 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

internetizacin

briefing en el que se habrn descrito los objetivos la agencia creativa contratada disear los anuncios en sus diversos formatos: robapginas, rascacielos, banner... La agencia de planificacin, por su parte, seleccionar los mejores lugares (soportes) donde ubicar los anuncios y establecer el nmero 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 tambin pueden ser aplicaciones como Live Messenger. Para una correcta planificacin se hace imprescindible la segmentacin; debemos conocer el perfil de nuestro pblico o pblicos y saber dnde localizarlos. Los usuarios ms jvenes, 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 pblico generalista o un gran impacto nada como una campaa en la pgina principal de los medios online ms visitados, dato que se puede obtener en la web de OJD Interactiva. Ejemplo ficticio de campaa:

Soporte Elmundo.es Paginas Amarillas Yahoo!

Seccin Home Callejero

Formato intersticial robapginas

CPM 20 25

Impresiones

Total 5000 2500

250.000 100.000

Finanzas

rascacielos

30

150.000

4500

Un anlisis continuo de la rentabilidad de cada inversin nos permitir corregir desviaciones y realizar cambios en la campaa en todo momento.

112

internetizacin

Publicidad grfica (display)

Los anuncios grficos que vemos al navegar por internet se denominan banners o display, por oposicin a los anuncios que slo contienen texto. Sus caractersticas estn normalizadas por la IAB, Internet Advertising Bureau, con matriz en Estados Unidos y con oficina tambin en Espaa. En sus webs encontrars documentos especificando los formatos existentes con sus correspondientes dimensiones, los pesos mximos aconsejados y otras normas prcticas. Este proceso de estandarizacin de los formatos es necesario ya que permite disear las creatividades una sola vez e insertarlas en mltiples webs que tienen un espacio reservado para mostrar publicidad. Si los tamaos no fueran homogneos deberamos disear banners especficos para cada soporte. Los primeros banners y botones publicitarios tenan unas dimensiones moderadas pero la tendencia de los lectores a evitarlos llev a los anunciantes a definir formatos de mayor tamao, es as como el banner de 468x60 pxeles qued en desuso y fue sustituido por:

megabanners (728x90) robapginas (300x250; 300x300 y 200x200) rascacielos (100x600 y 120x600)

Existen formatos ms agresivos, como los intersticiales, que tapan la pantalla por completo durante unos segundos. Un anuncio siempre debe llevar un enlace a una pgina de destino en la que el usuario encontrar ms informacin. Esta pgina de destino puede ser una pgina genrica o preexistente o puede ser diseada especficamente para la campaa, se denomina landing page o pgina de aterrizaje. Los anuncios de tipo display han evolucionado sin cesar desde que aparecieron los primeros GIFs animados. Hoy en da, son capaces de incorporar vdeo y sonido, desplegarse al posar el ratn sobre ellos o incorporar interactividad (juegos, seleccin de opciones, botones de control...). Esto es posible gracias a la tecnologa flash, 113

internetizacin

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 pgina web y que se inicie el sonido por sorpresa. Asimismo, los intersticiales y otros formatos invasivos debern 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 pblicos distintos es buena idea disear varias versiones que incluyan algn matiz. Esto nos servir tambin para testar cul obtiene mejores resultados y analizar el por qu: el claim, las imgenes... Al contratar una creatividad a un diseador o una agencia lo ms adecuado es redactar un briefing en el que detallemos los objetivos y requerimientos que deben cumplir, tanto tcnicos como de identidad corporativa y tono del mensaje. Es conveniente que est alineada con el resto de campaas en curso. Al contratar la campaa debemos tener en cuenta el nmero de veces que una pgina 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 slo 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 inversin publicitaria es limitar el nmero de impresiones a una por sesin, de forma que el usuario slo reciba una vez por visita el impacto publicitario, aunque est varios minutos navegando por la misma web. Las posibilidades de segmentacin son muy variadas, por ejemplo, es posible mostrar anuncios especficos a usuarios que se conectan desde un determinado pas o en ciertas franjas horarias. Una modalidad de publicidad grfica son los patrocinios, mediante los cuales una empresa esponsoriza una seccin o una funcionalidad. Por ejemplo, una operadora de telefona mvil puede patrocinar la seccin de tecnologa de un diario o una empresa del IBEX 35 asociar su marca a una pgina de finanzas.

114

internetizacin

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 pgina de resultados cuando el usuario realiza una bsqueda 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 bsqueda en Google o Bing, la solucin que ofrece el SEM es comprar las primeras posiciones. Estos anuncios se componen slo de texto, generalmente constan de:

ttulo clicable entradilla dominio del anunciante

Siempre estn identificados como enlaces patrocinados pero de forma tan sutil que muchos usuarios no lo perciben.

115

internetizacin

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 estn muy competidas, como viajes y puede resultar muy caro comprar una buena posicin. 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 cunto puede costar una campaa. Ejemplo:

116

internetizacin

Google permite calcular el coste de una campaa

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 dlares, se hizo rpidamente 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 acompaa, mostrando informacin 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 crticas 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 cdigo correspondiente, insertarlo en los espacios de tu web que consideres ms adecuados y en pocas horas comenzar a mostrar anuncios relacionados con tus contenidos. Por ejemplo, si escribes un blog sobre literatura se mostrarn anuncios relacionados, como nuevos 117

internetizacin

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 pequea cantidad que comparte con el dueo de la web en la que ha aparecido el anuncio. La cantidad que se paga por cada clic puede variar desde unos cntimos a varios euros, aunque esto ltimo no es lo habitual. El sistema siempre ha sido criticado por su falta de transparencia y peridicamente surgen noticias y debates sobre el porcentaje que se reserva Google o si limita los ingresos mximos que puede obtener cada web. El programa Adsense ha dado origen a toda una generacin de webmasters que han logrado gracias a este sistema ingresos suficientes para pagar los gastos de mantenimiento de su web, algn capricho o incluso el equivalente a un sueldo mensual. No obstante, se crea una dependencia de Google y su algoritmo. Un da 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 ms 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 diseo 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 tambin da la posibilidad de configurar en qu lugar de la pgina se inserta la publicidad y no es extrao llegar a pginas en las que es difcil encontrar los contenidos entre tantos anuncios. Un error que no hay que cometer es hacer clic en un anuncio publicado en nuestra pgina web, ya que eso genera un pago fraudulento para el anunciante. Esta prctica est penalizada por Google, que continuamente introduce mejoras en los formatos para ofrecer a sus clientes mayores garantas. Para lograr ingresos significativos mediante Adsense una web necesita muchas visitas y visualizaciones de pgina, ya que se trata de nanopagos, esto a veces lleva a los generadores de contenidos a centrarse ms en la cantidad que en la calidad. Al ser un modelo muy 118

internetizacin

imitado y crecer a mayor ritmo que la inversin publicitaria, se ha llegado a producir un efecto burbuja. Un debate que se reabre peridicamente es el de la compra de palabras clave que se corresponden con marcas. Sera licito, por ejemplo, que Movistar comprara aparecer en los primeros resultados de bsqueda cuando alguien introduce el trmino 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 marketing
Desde sus inicios, el email fue considerado un eficiente instrumento de marketing directo. Los correos electrnicos 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 autorizacin expresa del destinatario para recibir mensajes publicitarios. Los usuarios reciben decenas de correos al da por lo que, para diferenciarnos y llamar su atencin, debemos controlar aspectos como el asunto del mensaje o la periodicidad de los correos. A medida que realicemos ms envos aprenderemos a identificar qu asuntos son mejor recibidos por los receptores y detectaremos el ritmo ms adecuado. Por ejemplo, enviar correos semanales con ofertas pueden hacer que los correos pasen desapercibidos mientras que remitirlos cuando el usuario ms 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 campaas y conocer cuntos correos llegaron a su destino, cuntos fueron abiertos, en qu enlaces pincharon los usuarios, si fueron reenviados o si las cuentas de correo ya no existen. Especial atencin debemos prestar a las solicitudes de baja, que pueden indicar malestar entre los usuarios.

119

internetizacin

La solicitud de baja es un requisito que debe incluir cualquier emailing, as como la identificacin del mensaje como publicitario. No todos los programas de correo electrnico muestran igual los mensajes, especialmente si son HTML. Es habitual que, para evitar usos fraudulentos, muchos bloqueen las imgenes y no las muestren. Para garantizar que el destinatario pueda leer el mensaje es una buena prctica incluir al principio un enlace a una versin web del contenido. La publicidad no solicitada o spam es ampliamente rechazada por los usuarios. Ms an, los fraudes a travs del correo electrnico (phishing, scam...) han sensibilizado al pblico, que slo abre aquellos correos de remitentes en los que confa.

Publicidad en el mvil, en vdeos y videojuegos

La inversin en publicidad en el mvil crece cada ao y las previsiones son optimistas. Los anunciantes valoran la personalizacin, la cercana y el acceso al cliente en cualquier momento del da. Diversos estudios recogen la disponibilidad de muchos usuarios a recibir publicidad en sus mviles a cambio de llamadas gratis. Es un formato que an se est desarrollando, los cdigos BIDI (bidimensionales) pueden ser ledos por la cmara del mvil y ampliar as la informacin sobre una promocin. Mediante bluetooth, muchas compaas lanzan guios 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 diseados para navegar por internet la publicidad en el mvil ampla sus posibilidades, limitadas hasta ahora por el tamao 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 mvil, que pretende extraer todo el potencial a los anuncios y no limitarlos a diminutos banners. Un ejemplo imaginativo de publicidad en el mvil son los juegos que han utilizado algunos fabricantes de coches para comunicar sus nuevos modelos. Por ejemplo, Toyota lanz una aplicacin para iPhone para promocionar su vehculo hbrido Toyota Prius. 120

internetizacin

Mientras se generalizan estos terminales, los formatos ms habituales son:

enlaces SMS y MMS banners

Como siempre, la IAB ha normalizado las dimensiones, pesos y buenas prcticas. El consumo de vdeo ha cautivado a los usuarios, que no cesan de crear y visionar contenidos audiovisuales. La explotacin publicitaria de los vdeos, sin embargo, an no est resuelta. Los vdeos incluyen publicidad de tipo Adwords en la pgina en la que estn insertados, pero, al no estar transcritos los textos o descritas las imgenes que contienen no es sencillo aplicar este formato a material audiovisual. Las breves inserciones publicitarias que se emiten antes del inicio de un vdeo se denominan pre-roll, pero tambin 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, tambin incluir un enlace a una web de destino con ms informacin. La publicidad en los vdeos est en sus fases iniciales de desarrollo y por el momento no es cmoda 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 vdeos es el mercado de los videojuegos, que incorpora el product placement o integracin de marcas en el escenario del juego. Por ejemplo, marcas de coches en un videojuego de carreras. Peridicamente es noticia alguna aplicacin que permite comprar la cazadora que viste tu actor favorito en tu pelcula favorita, pero de momento no se puede realizar con un simple clic sobre la prenda.

121

internetizacin

122

internetizacin

Posicionamiento en buscadores (SEO)

SEO son las siglas de Search Engine Optimization, es decir, optimizacin de sitios web para buscadores. La profesin est muy vinculada al buscador dominante en estos momentos, Google. Antes de la aparicin 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 informacin al idear un nuevo sistema: si muchas web enlazaban a un mismo sitio cuando hablaban de pesca eso deba significar que era la mejor web sobre pesca. Google aprovechaba la labor de clasificacin que realizaban los seres humanos para construir su ndice. Este principio fue la base de su algoritmo de bsqueda que ha evolucionado mucho desde entonces y sigue actualizndose continuamente. Es una frmula secreta y los profesionales SEO siempre intentan desvelar sus claves. Google acapara el mercado de buscadores, en Espaa las fuentes siempre le atribuyen una penetracin 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 obsesin de los webmasters por aparecer los primeros en Google. Es as como surge el SEO como profesin. El posicionamiento obtenido en buscadores se denomina orgnico por oposicin 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 seguan las gramticas del W3C, siendo muy difcil para los buscadores rastrear su contenido. Los desarrolladores pronto se dieron cuenta de que siguiendo algunas de estas pautas sus webs posicionaban mejor:

construccin de webs con HTML en lugar de tecnologas como Flash, que dificultan la indexacin separar los contenidos de la web de la capa de presentacin (colores, mrgenes, estilos...) mediante hojas de estilo (CSS)

123

internetizacin

inclusin de las etiquetas <title> y <meta> con el ttulo individualizado de cada pgina y las palabras clave y descripcin de la pgina. Son los contenidos que aparecen en buscadores y que utilizan los usuarios para hacer clic en una web o en otra:

imgenes con texto alternativo encabezados (h1, h2) con palabras clave evitar javascript y frames, ya que no son fcilmente indexables por los buscadores

Las webs de nueva creacin incorporaban estas prcticas y se posicionaban mejor, por lo que las webs veteranas necesitaban adaptarse para no perder visibilidad. Este fue el caldo de cultivo para la profesin de SEO. La lista de recomendaciones SEO es extensa y se actualiza continuamente. Citamos algunas ms:

URL semnticas, 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 actualizacin 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 situaran las URL formadas por caracteres ilegibles. La URL es valorada positivamente por Google pero tambin 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

internetizacin

aquello que nos facilita el uso de la web, penalizando las malas prcticas. Adems de estos aspectos internos de cada web, para el SEO es importante una adecuada poltica de enlaces: a qu webs te asimilas, a cules admiras, a quin 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 Mename. Mename es una web en la que los usuarios proponen noticias ledas en otros medios y las ms votadas aparecen en portada. Ricardo Galli, su fundador, explica que el ttulo de las noticias publicadas en Mename se marcan en el cdigo fuente con un h1, lo que significa que le dan la mxima importancia dentro de la pgina. Esto supone que al poco de ser promocionada a portada en Mename 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 envan y falsear as el ranking. La estrategia de consecucin de enlaces entrantes se denomina link building y link baiting a la consecucin de enlaces a travs 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 categora 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 da tiene menos peso. Nadie sabe con certeza qu valora el algoritmo de Google, entre otras cosas porque continuamente cambia, tan slo tenemos pistas. Por ejemplo, la antigedad de una web suma puntos y las URL no semnticas pero indexadas desde hace aos no se ven penalizadas. Un proceso al que tarde o temprano se enfrenta toda web es a un rediseo o una migracin 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 dramtico. Por eso, Google tiene previstos unos redireccionamientos (301 y 302) para atravesar sin daos un proceso como este.

125

internetizacin

El sitemap es otra herramienta que Google pone en manos de los desarrolladores web para facilitar la indexacin de sus pginas, especialmente cuando son dinmicas. Se trata de una recopilacin 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 pginas, para ello, editaremos el fichero robots.txt, que es el primero que lee un buscador. Se denomina white hat SEO al que realiza prcticas ticas y black hat SEO a quien recurre a tcnicas dudosas para mejorar la visibilidad de su web. Por ejemplo: incluir texto oculto para los usuarios pero no para las robots araa que rastrean las webs para indexarlas o lograr enlaces en webs de dudosa reputacin. Los ingenieros de Google continuamente rastrean este tipo de prcticas para contrarrestarlas, llegando a banear (prohibir, vetar) las pginas si es necesario. Lo cierto es que en SEO, el proceso para araar algunas posiciones en el ranking se parece un poco a una carrera de F1 en la que pequeos detalles pueden dar la victoria. Los profesionales SEO no trabajan solos sino que los buscadores cuentan con aplicaciones que les facilitan la revisin de los sitios web para mejorar su posicionamiento. Entre las herramientas ms 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 informacin 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, adems, valoran que se publiquen contenidos con frecuencia. Una web que publique varias veces al da puede conseguir que sus contenidos aparezcan en los resultados de Google en minutos mientras que webs que se actualizan pocas veces al ao tardan mucho ms tiempo en ver sus nuevos contenidos indexados. La disciplina SEO evoluciona con internet. La penltima 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

internetizacin

grandes volmenes y que, sacando el mximo partido al SEO posicionan muy bien, relegando de los primeros puestos a pginas 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 consideracin 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 magnfico posicionamiento. En internet se pueden encontrar grficos y recursos que resumen las tareas que hay que llevar a cabo para definir una adecuada estrategia SEO: comienza con la creacin de contenido de actualidad fcilmente accesible por buscadores, contina con un proceso de seleccin 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 ms visibilidad para nuestros contenidos. Uno de los ms conocidos es La Pirmide SEO de SEOmoz.org que amablemente nos ha permitido reproducir. Tambin la puedes visitar en http://www.seomoz.org/img/upload/seo-pyramid-large.gif.

127

internetizacin

Courtesy of SEOmoz at SEOmoz.org

128

internetizacin

Social Media Marketing (SMM)

A grandes rasgos, por social media entendemos el conjunto de medios de comunicacin en los que la informacin es generada por los usuarios: Facebook, Twitter, YouTube, Mename, 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 oposicin a los anuncios slo de texto que aparecieron de la mano de los programas de Google AdWords y AdSense. Google trajo el automatismo y el srvase usted mismo al mundo de la publicidad creando un mercado en el que los anunciantes creaban sus mensajes, elegan los criterios por los que deseaban ser encontrados. El buscador cruzaba los datos y mostraba en sus pginas de resultados los anuncios que haban pagado por las palabras clave de bsqueda. Posteriormente, este sistema fue extendido por Google a todas las webs que desearan mostrar publicidad en sus pginas. El mecanismo era el mismo: los anunciantes creaban los textos, los webmasters habilitaban el mdulo de Adsense en sus webs y Google mostraba los anuncios en las pginas con contenido relacionado. En los ltimos aos, algunos proyectos han atrado a millones de usuarios, creando un entorno propicio para la venta de espacio publicitario, pero cmo hacerlo? Lo cierto es que an se est inventando. Para adentrarse con xito en este territorio se hace imprescindible comenzar por el diseo de una estrategia, alineada con la estrategia de compaa, que incorpore como pasos inevitables la escucha y monitorizacin de las redes sociales, como veamos en el apartado sobre Gestin de Reputacin, y la posterior actuacin en cada uno de los canales, escuchando y dialogando con los clientes de la marca. Finalmente, realizaremos una medicin de los avances y de los resultados para continuar afinando nuestras acciones en social media.

129

internetizacin

Facebook Facebook, con 500 millones de usuarios en el verano de 2010 es el equivalente al cuarto pas ms 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 an inmaduros. La publicidad incorpora como grandes novedades la mxima segmentacin y las votaciones de usuarios. En funcin de los datos que has declarado (sexo, edad, intereses, localidad...) vers anuncios diferentes. En Facebook puedes ver la actividad de tus amigos y conocidos por lo que, una aplicacin 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 annimos han conseguido decenas de miles de seguidores basndose nicamente en esta forma de viralidad.

130

internetizacin

Twitter Japn fue el primer pas en el que el popular programa de microblogging 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 bsquedas. La cadena de cafeteras Starbucks fue uno de los primeros anunciantes:

131

internetizacin

En estos momentos, adems 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 quin seguir, cuentas sugeridas). El social media marketing no se refiere nicamente a la compra de espacios publicitarios sino a la optimizacin de la presencia en blogs y redes sociales: generando contenidos que atraigan la atencin de los usuarios, dinamizando los perfiles en Facebook o Twitter... En definitiva, buscando incrementar nuestra presencia y el conocimiento y valoracin positivos por parte de los usuarios.

Retorno de la inversin (ROI)

Coca-cola ha cambiado la forma de remunerar a sus agencias de publicidad y ha introducido el pago por resultados. Esta prctica, 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 ms 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 inversin hacen alusin 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 campaas publicitarias este clculo se realiza constantemente y los ratios son diferentes para cada soporte. Si detectamos que la inversin no se est rentabilizando, es el momento de hacer ajustes. En el caso de las campaas de branding la medicin no recae nicamente en datos cuantitativos y es necesario recurrir a encuestas y estudios sobre reconocimiento, notoriedad, lealtad a la marca.

132

internetizacin

Comienza tu propio proyecto

Hemos realizado un recorrido por las distintas fases que atraviesa un proyecto web. Si antes de leer el libro ya sentas 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 Espaa y en el mundo, cuntos usuarios hay, cmo son, qu significan conceptos como web 2.0, qu modelos de negocio existen, qu casos de xito se han producido y saber ms sobre la comunidad de emprendedores online espaoles.

Internet en Espaa y en el mundo

Si comparamos internet con tecnologas anteriores, como la electricidad o el ferrocarril nos damos cuenta de que queda mucho camino por recorrer, an 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 pelculas pero la historia no ha hecho ms que comenzar. En el mundo hay 2000 millones de internautas, la mayora viven en Asia y los mayores porcentajes de penetracin se dan en los pases nrdicos, con ratios que superan el 80%. En Espaa somos 25 millones pero otra revolucin se est fraguando: internet en el mvil. 5000 millones de personas disponen de telfono mvil y en torno a 2014 se espera que el acceso a internet desde el mvil 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, enviarn tambin informacin. Pero cmo somos los usuarios de internet? Veamos algunos datos de Estados Unidos que se pueden extrapolar a otros pases. Las actividades que realizamos online varan segn nuestra edad. Los veinteaeros son los que marcan el ritmo: el 67% usa redes sociales, el servicio ms popular del momento y son los responsables del xito de YouTube, ya que son grandes aficionados al consumo de vdeos. Los treintaeros llevan ms tiempo usando internet y realizan un uso ms adulto, como transacciones bancarias o lectura de 133

internetizacin

noticias. Los adolescentes, por el contrario, nos indican qu servicios sern populares en los prximos aos, como los mundos virtuales. Son tambin muy activos en el uso de mensajera instantnea y creacin y lectura de blogs. Los usuarios de ms edad, por ltimo, son los ms proclives a buscar informacin sobre salud online. A continuacin podemos ver una tabla elaborada por USA Today a partir de diversas fuentes.

134

internetizacin

135

internetizacin

La consultora Forrester ha clasificado a los usuarios por su grado de participacin en internet. En un extremo de la escala se encuentran los Creadores, que escriben blogs y publican vdeos 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 Crticos, que comentan en blogs o los Coleccionistas, que clasifican las pginas, se suscriben, etc. Hemos hablado de los usuarios pero y las empresas? Segn el organismo pblico Red.es el 96,2% de las empresas espaolas tiene acceso a internet y el 59% tiene pgina web, aunque este porcentaje vara segn el tamao 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 compaa y dar acceso a su catlogo de productos, como se puede observar en el grfico del ONTSI. Por sectores, es el de la Construccin el que menos explota el potencial de internet.

136

internetizacin

137

internetizacin

Por ltimo, cerramos el epgrafe refirindonos a los rankings de webs ms visitadas en Estados Unidos y en Espaa. Segn Quantcast: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 google.com facebook.com yahoo.com msn.com youtube.com microsoft.com live.com aol.com wikipedia.org ebay.com amazon.com ask.com weather.com answers.com blogspot.com myspace.com craigslist.org about.com bing.com ehow.com

Para que nos hagamos una idea del orden de magnitudes de que hablamos, Google sumara 155 millones de usuarios mensuales y Facebook 136. En la cspide de la lista aparecen representantes de los que se ha llamado internet de los buscadores, que ha dado paso a una 138

internetizacin

internet ms social protagonizada por servicios de comunicacin entre personas, con Facebook a la cabeza. En Espaa, segn 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 Telefnica en el verano de 2010.

139

internetizacin

De la web 2.0 a la web2

En el ao 2004 un licenciado en lenguas clsicas dueo de una editorial de libros de tecnologa public un documento titulado What is Web 2.0?. Su nombre es Tim OReilly y en su texto comparaba cmo era internet en los aos noventa con la internet de 2004. No debe confundirse el trmino 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 travs de aplicaciones como Facebook o Flickr. Lo que s es cierto es que la tendencia es que detrs de cada web haya una red social, bien creada expresamente bien a travs de las facilidades que ponen Facebook o Twitter para que ests en contacto con tus amigos. En la famosa tabla que reproducimos a continuacin O'Reilly explicaba con ejemplos cmo haba 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 haba sido sustituido por Google AdSense. Si en 1998 podas abrir una pgina personal en Geocities en 2004 creabas un blog en Blogger.com. Y as mil casos ms.

Web 1.0 DoubleClick Ofoto Akamai mp3.com Britannica Online personal websites 140 --> --> --> --> --> -->

Web 2.0 Google AdSense Flickr BitTorrent Napster Wikipedia blogging

internetizacin

evite domain name speculation page views screen scraping publishing

--> --> --> --> -->

upcoming.org and EVDB search engine optimization cost per click web services participation wikis tagging ("folksonomy") syndication

content management systems --> directories (taxonomy) stickiness --> -->

Lo bueno del modelo de OReilly era su visin 360; no se centraba en un aspecto de la web sino en su conjunto: publicidad, msica, fotografas... An as, haba cuestiones que no eran tratadas en su modelo. En 2009 Tim OReilly 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 cmo internet ha dejado de ser un reducto de geeks o forofos de la tecnologa, cmo el potencial de la red se ha puesto al alcance de la mayora y stas se han puesto a usarla. En cierto modo, casi diez aos despus 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 internetizacin. 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 disposicin del mundo a travs 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, tambin en internet.

141

internetizacin

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 bsicamente dos modelos de negocio: publicidad o cobro por contenidos y las reglas de cada uno son claras. Publicidad Para 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 ms modestas, pero especializada. La publicidad es el medio que tienen las empresas de llegar a su pblico. Si su pblico est en una web comprarn espacio publicitario en la misma. Esto es vlido para sitios como elmundo.es o elpais.com. Su publicacin continua de contenidos para todo tipo de pblicos los hace muy atractivos para grandes anunciantes, tanto generalistas (bancos, automviles, telefona y utilities...) como segmentados (exposiciones y museos, vinos, aerolneas low cost, productos premium...). En publicidad es habitual cotizar en funcin de los impactos visuales conseguidos o las conversiones realizadas, es decir, si la visualizacin de la publicidad se transforma en clics, visitas a la web, compras.... Segn este esquema y con la calculadora en la mano es fcil llegar a la conclusin de que a mayor nmero de pginas, mayor nmero de impactos publicitarios y mayor nmero de conversiones. Son muchas las webs que se basan en este sencillo clculo. No obstante, cuantos ms competidores existen en el mercado la porcin de tarta que corresponde a cada uno es menor, especialmente si la tarta no crece tan rpido como el nmero 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 Mdico o Gaceta Universitaria, dos medios que se distribuan en centros de salud y de enseanza superior. Se dirigan a un pblico segmentado y, en cierto modo cautivo, se distribuan de forma localizada y se financiaban a travs de publicidad especfica para su target (mdicos, enfermeros, estudiantes). Luego llegaron los 142

internetizacin

20minutos y los Qu!, aplicando el mismo modelo a la prensa generalista. En 2010 la inversin publicitaria en internet ascendi a 798,8 millones de euros segn la IAB; esto sita a internet como tercer soporte publicitario, slo por detrs de la televisin y los diarios. Son numerosos los ejemplos de empresas de internet que se financian a travs de la publicidad. Facebook esperaba facturar 1200 millones de dlares en 2010 y YouTube entrar en nmeros verdes en 2011 tras ingresar 350 millones de euros en publicidad.

Cobro por contenidos

Empecemos puntualizando que entendemos por contenidos cualquier producto o servicio ofrecido a travs de internet en un sentido amplio. A travs de una pgina web puedes comercializar tus productos o servicios, fsicos o virtuales, el problema es que es altamente probable que otros den gratis aquello por lo que t deseas cobrar. En los productos fsicos es ms difcil pero en los digitales, como textos, msica, vdeos 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 pelculas o los libros que, segn recetas mgicas, eran diseados para llegar a la mayor audiencia posible. Para crear una pelcula de xito se pagaban cifras astronmicas a los actores y actrices ms populares, se rodaba en los parajes ms inhspitos y espectaculares, para grabar un disco los msicos se encerraban durante meses en un estudio. El engranaje era perfecto y el modelo funcionaba, al menos para la industria, pero adoleca de ciertas ineficiencias que con la llegada de internet fueron evidentes. El amante de los libros puede buscar un ejemplar editado en los aos 70 que est descatalogado y no encuentra espacio en el tamao limitado de la librera de su barrio. Te puede gustar una cancin de Shakira pero no quieres comprar todo el disco por 20 euros. Alquilas una pelcula 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 catlogo infinito de Amazon, las radios a la carta, Youtube y otros 143

internetizacin

miles de sitios aparecieron para hacerle la vida ms fcil a los usuarios. Significa esto que los usuarios no quieren pagar por un libro o una cancin? Las millonarias ventas de la tienda de canciones de Apple, iTunes, demostr que s estn dispuestos a pagar, pero no cualquier precio. El esquema de la venta de canciones se est repitiendo ahora con el alquiler de pelculas online. La fijacin del precio es una de las claves de los negocios online y aqu el modelo offline ms cercano en el que buscar inspiracin son las aerolneas low cost. Como bien dicen en el libro El fenmeno Low Cost, las compaas de vuelos baratos no se llaman as porque los billetes tengan precios ridculamente bajos, sino porque los costes son bajos. Es decir, ajustan su estructura de costes al precio de los billetes. Y cul es el precio de los billetes? El que los usuarios estn dispuestos a pagar. Cunto pagaras por un vuelo a Londres? cunto por una conexin a internet? cunto por un vestido de esta temporada? cunto por una hamburguesa? cunto por un libro o una cancin? iTunes empez a vender canciones sueltas, no slo discos, a $ 0.99. Ahora no slo vende msica sino podcasts, juegos, pelculas y otros muchos descargables y los precios son ms variados. En 2008 fueron lderes en la venta de msica en Estados Unidos, por encima de Wal-Mart. Pero internet, como sabemos, tambin tiene sus reglas y una de ellas es que todo cambia. En 2009 apareci Spotify, una aplicacin similar a iTunes para oir canciones gratis, entre otras funcionalidades y muchos usuarios estn 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 vrtigo. Lo que un da es un producto elaborado como por ejemplo el texto de una noticia y la imagen que la acompaa en poco tiempo es slo una matera prima para producir contenidos y productos ms elaborados, que tambin se convertirn en commodites al poco tiempo. No puedes detenerte nunca ni dejar de innovar.

Freemium
Freemium 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 informacin gratuita e informacin reservada a suscriptores. Es un modelo que la 144

internetizacin

prensa tradicional desea abrazar en sus ediciones online y empieza a haber ejemplos viables como el espaol Orbyt o The New York Times, que al mes de cerrar parcialmente sus contenidos online haba logrado 100.000 suscriptores. El modelo hbrido o freemium debe analizarse con cautela para cada posible negocio y ver si el producto de pago rene los alicientes suficientes para que el usuario decida comprarlo. Un caso de xito es el antes mencionado Spotify, un milln de usuarios ya se han convertido en suscriptores para eliminar la publicidad que escuchan los usuarios de la modalidad gratuita.

Casos de xito
Un anlisis de los modelos de negocio online no puede zanjarse sin resear la presencia de algunas empresas que demuestran que se puede hacer dinero en internet. Google Vio la luz en 1998 y comenz licenciando su tecnologa de bsqueda aunque su negocio actualmente es la gestin 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. Amazon Se inici en 1995 como tienda de libros online pero ha evolucionado a un gran hipermercado que sirve a todo el mundo todo tipo de artculos y que en los ltimos aos se ha especilizado en los servicios en la nube para empresas. Veremos ms adelante qu significa en la nube. Kindle es su xito ms reciente, un lector de libros electrnicos que permite encontrar y descargar un libro en segundos y almacenar decenas.

145

internetizacin

Ebay Fue fundado en 1995 como sitio de subastas y actualmente opera tambin como plataforma de comercio electrnico 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 ao 2008. Facebook La red social por excelencia no necesita presentacin. Fundada en 2004 por el jovencsimo 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 pas ocupara el puesto nmero 3 en poblacin. 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 legin de fanticos 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 Espaa tenemos igualmente ejemplos de casos de xito de comercios electrnicos: 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 ao 2000. Hoy en da se puede comprar online desde 32 pases. A pesar de las buenas cifras, las ventas online de Mango no alcanzan al 1% del total de ventas de la marca. 146

internetizacin

Idealista Los hermanos Jess y Fernando Encinar fundaron en el ao 2000, junto a Csar Oteiza, la web de anuncios inmobiliarios Idealista.com. Una dcada despus sigue siendo el lugar de referencia en internet para buscar vivienda. Es rentable desde 2003 y cerr el ao 2008 con 20 millones de facturacin y 5 de beneficios de explotacin. BuyVip El club de compras privadas fue fundado en 2006 por Gustavo Garca Brusilovsky. Su negocio se basa en la oferta de artculos rebajados entre un 30 y un 70%. Los artculos estn 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. Privalia Club de compras fundado en 2006 por Lucas Carn y Jos Manuel Villanueva. Factur 168,43 millones de euros en 2010. Su nmero de usuarios asciende a 6,27 millones. El xito de estos outlets, que comercializan fundamentalmente moda, ha dado un giro al panorama del comercio electrnico, situando a las prendas de vestir entre los artculos ms vendidos por internet. En sus inicios se acceda por invitacin, creando una sensacin de exclusividad entre sus miembros. Ahora lo habitual es poder registrarse libremente. Su propia evolucin 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 epgrafe a aquellas empresas dedicadas a proporcionar infraestructura para que otros hagan negocios online como proveedores de acceso, alojamiento, creacin de sitios web.

147

internetizacin

Legislacin aplicable
El legislativo es un territorio altamente especializado cuyo mbito excede el de este manual. Slo pretendemos en este epgrafe sealar las principales normas jurdicas que aplican a los sitios web y recomendamos encarecidamente que se recurra a abogados especializados en nuevas tecnologas e internet para resolver cualquier duda. La Ley de Servicios de la Sociedad de la Informacin y Comercio Electrnico 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 travs de internet, a las que impone una serie de obligaciones. Si adems la empresa emite publicidad sta deber aparecer identificada claramente y obtener el consentimiento expreso del receptor antes de realizar envos por correo electrnico o mensajes al mvil. Las webs de usuarios particulares que incluyan publicidad tambin estn sujetas a esta ley. De gran importancia, especialmente por los riesgos en que se incurre si se incumple, es la Ley Orgnica de Proteccin de Datos o LOPD. El artculo clave para los propitarios de una web es el que especifica que hay que solicitar y recibir expresamente del usuario autorizacin para conservar sus datos en una base de datos que debe estar dada de alta en la Agencia de proteccin de datos. El usuario tiene derecho a pedir que se borre su registro y se imponen fuertes multas si se incumple esta norma. Adems de normas genricas 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 Pblicas y grandes empresas. Empresas que cotizan en bolsa, que deben cumplir una serie de obligaciones Copyright y otras formas de proteccin de derechos de propiedad intelectual IVA y comercio electrnico

148

internetizacin

Adems de normas con rango de ley existen especificaciones, sellos de calidad y otros tipos de acuerdos y compromisos a los que tambin se puede adherir una web para mostrar su respecto hacia sus usuarios. Ejemplos: Sello Confianza Online. Sello de la Asociacin Espaola de Comercio Electrnico (AECE). Norma UNE Accesibilidad. Lista Robinson. Antes de cerrar este breve epgrafe centrado en las leyes que aplican a internet resulta conveniente aclarar que internet es un territorio tan nuevo que la legislacin no est a menudo preparada para los envites que surgen. Las leyes de internet caminan detrs en un mbito donde prima la innovacin. Finalmente, no se debe olvidar que en aspectos no especficamente online, una web o un perfil en Facebook se someten a la legislacin de mbito general.

149

internetizacin

Emprendedores
Me 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 creacin de un negocio. Sea tu ocupacin en tus ratos libres o tu principal fuente de ingresos, en este epgrafe recopilaremos los consejos para el xito del fundador de Amazon, trataremos sobre el arte de emprender y veremos las dificultades que conlleva encontrar financiacin para una idea de negocio. Qu mejor forma de iniciar este captulo 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 distribucin a todo el mundo y sedes en numerosos pases, cotizada en bolsa y centrada en los ltimos aos 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, segn su fundador, los secretos de su xito: 1. Orientacin al cliente 2. Innovacin 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 orientacin al cliente. Por ltimo, recomienda pensar en el largo plazo, en nuestros planes futuros y no frustrarse por las pequeas decepciones del da a da y otros contratiempos. En el mismo vdeo que ofrece estos consejos, disponible en YouTube ( http://www.youtube.com/watch?v=-hxX_Q5CnaA ), Bezos desliza una ltima leccin: hay que trabajar como si cada da fuera el primer da y no dar nada por hecho. 150

internetizacin

La democratizacin en la apertura de un negocio online se ha hecho posible gracias a internet. Segn datos del INE abrir un negocio cuesta de media 65.000 euros, cunto 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 dlares para crear un proyecto web 2.0:

4500 dlares en programacin 4824,14 dlares en abogados 399 dlares por el logo a Logoworks 1115,05 dlares registrando dominios

Una cifra que abre la oportunidades de hacer sus sueos 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 aos de vida, con la esperanza de ver multiplicada con creces su inversin. En Espaa sera el caso de Tuenti, que complet varias rondas de financiacin antes de ser adquirida por Telefnica en agosto de 2010 por 70 millones de euros. Una caracterstica 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 pgina con cientos o miles de fans. Un magnfico ejemplo es Etsy, un sitio de Estados Unidos donde puedes vender y comprar artesana. http://www.etsy.com/ Existe mentalidad emprendedora en Espaa? Cundo es el momento idneo para emprender? En una entrevista para CincoDas un directivo de AT Kearney afirmaba: Hace 30 aos el espaol quera trabajar por cuenta propia, ahora ese patrn 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

internetizacin

En cuanto al momento adecuado para emprender, existen dos visiones encontradas: los que abogan por trabajar durante unos aos, ahorrar y luego emprender y los que defienden la va 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 cmo habitualmente no es capital lo que necesitas para crear un proyecto en internet, sino algo de tiempo y un pequeo equipo de 2-3 personas que se complementen. El proyecto espaol Panoramio, vendido a Google en 2007, fue iniciado en sus ratos libres por Eduardo Manchn y Joaqun Cuenca. En cambio, si recurres a financiacin externa para tu proyecto debes tener en cuenta que: El capital sabe ms que t de capital. Suena absurdo pero es as. Tu sabes de Internet y de tu proyecto. Pero el sabe slo de inversiones. Ha hecho cientos y para ti es la primera. Su negocio es este y entonces tendrs siempre a un to que sabe ms que tu de como cerrar clusulas, acuerdos y contratos. Y captar capital lleva tiempo, esfuerzo, negociaciones, discusiones Mucho desgaste para despus 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 estratgica, 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 ampliacin de capital para seguir viviendo y en la que tu posicin ser minoritaria y que pero si ya no es mi empresa y la ilusin se ha desvanecido

En Loogic, blog dirigido a emprendedores, Javier Martn publica cada ao un resumen de las inversiones en start-ups que se han registrado el ao 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

internetizacin

inversores particulares como fondos de capital riesgo, bancos y cajas de ahorros o empresas. Los emprendedores son una comunidad muy activa en internet. Se renen, crean grupos e iniciativas como:

Iniciador. Cuenta con ediciones en varias ciudades espaolas y los encuentros, mensuales, en torno a un emprendedor de xito, se suelen retransmitir por internet First Tuesday se define como una organizacin independiente sin animo de lucro que acta como plataforma global de encuentro entre emprendedores, empresarios e inversores de negocios relacionados con Internet y las Nuevas Tecnologas Thursday, se renen los ltimos jueves de cada mes para analizar cmo las TIC estn cambiando el mundo, aunque su objetivo especfico es reunir empresarios, mandos intermedios y profesionales para intercambiar conocimiento, establecer contactos e identificar oportunidades empresariales y sociales Idame, encuentro universitario de jvenes desarrolladores de videojuegos OpenTalent, concurso del BBVA para premiar la mejor idea de negocio iWeekend, rene a emprendedores de internet de diversos perfiles para crear una empresa en un slo fin de semana. Seedrocket proporciona a los emprendedores acceso a una red de inversores y Business Angels que apuestan por proyectos de base tecnolgica en una fase inicial

tica en los negocios Guy Kawasaki dedica el ltimo captulo de su libro para emprendedores El arte de empezar a la tica. Lo llama El arte de ser buena persona. En internet, donde existen tcnicas 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 tcnicas censurables. 153

internetizacin

Para no caer en la tentacin, 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 ms difcil Corresponde a la sociedad, no necesariamente con dinero sino con tiempo, experiencia, apoyo emocional

154

internetizacin

Y ahora qu? ltimas tendencias

Abordamos el ltimo captulo del libro y nos damos cuenta de que ya tenemos una visin global de lo que supone gestionar un proyecto web pero somos conscientes de que es un universo emergente y en constante evolucin. Los principios generales que hemos aprendido a lo largo de Internetizacin nos deberan ayudar a desenvolvernos en este mundo cambiante pero, no obstante, dedicaremos unas pginas a describir las principales tendencias que veremos crecer en los prximos aos.

Internet en el mvil
Internet en el mvil ha sido la eterna promesa que nunca se cumpla. Durante aos 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 nmero limitado de sistemas operativos y resoluciones de pantalla, el mercado de la telefona mvil se ha caracterizado por la coexistencia de infinidad de configuraciones posibles. Esto haca muy difcil disear una web para mviles que se visualizara adecuadamente en todos los dispositivos disponibles. Cuando no era el tamao de la pantalla, era el puntero o la pantalla tctil que haca complicada la navegacin. A esto haba que sumar la inexistencia de tarifas ajustadas y tarifas planas de navegacin. Un mercado en evolucin entorpeca la creacin de una verdadera internet en el mvil. La irrupcin del iPhone El iPhone dio lugar a un dispositivo con una pantalla con una resolucin que permita navegar por las webs preexistentes diseadas para ser vistas desde un PC. Adicionalmente, permita 155

internetizacin

desarrollar aplicaciones especficas para el mvil, las apps, pequeos programas diseados para cumplir una funcionalidad concreta. El ejemplo ms tpico es consultar la previsin del tiempo pero el grado de sofisticacin 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 mayora de estas aplicaciones tiene una versin gratuita de prueba y los precios de la mayora no superan los 2 3 dlares, lo que no ha impedido que surjan grandes empresas a la sombra de estos microprecios. Identificamos, por tanto, tres tipos de internet en el mvil:

las webs tradicionales, que se pueden navegar, si bien no de forma ptima las versiones para mviles de las webs clsicas, que muestran slo parte de los contenidos y una interfaz adaptada las apps diseadas especifcamente para entornos mviles y que aprovechan todo su potencial

Cul de ellas se impondr? Es un debate abierto pero los expertos apuntan a que las versiones web para mviles, por su interoperablidad, tienen ventaja frente a las aplicaciones. Las webs para mviles, al igual que la propia internet, se visualizan en todo tipo de mviles. En cambio, las aplicaciones deben adaptarse a cada sistema operativo dependiendo del mvil en el que se vaya a usar. Es decir, se deben programar tantas aplicaciones como tipologas de mviles existen si queremos que se visualicen en todas ellas: iPhone, Android, Blackberry, Nokia... En cualquier caso, lo que es seguro es que el internet mvil ha creado un nuevo escenario en el que todos los incumbentes estn reclamando su papel. Google Android y otros competidores El sistema operativo para mviles de Google se llama Android y es de cdigo 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 prcticament todas las apps son admitidas. 156

internetizacin

Los primeros telfonos equipados con Android fueron fabricados por la coreana HTC aunque a da de hoy ms compaas se han sumado, entre ellas, Motorola y Samsung. Nokia, Blackberry y otras marcas tambin han lanzado sus tiendas de apps y en febrero de 2011 as se reparta el nmero de aplicaciones por stores o markets, segn Distimo:

Apple 310.000 Android 175.000 Nokia Ovi 30.000 BlackBerry 25.000

Estos datos, sin embargo, pronto quedarn obsoletos.

Movilizacin A medida que ms y ms usuarios se sumen al uso de internet en el mvil ms necesaria ser una estrategia de movilizacin de nuestros proyectos. Numerosos medios online han desarrollado aplicaciones para el iPhone captando as a los primeros usuarios en adoptar esta tecnologa y siendo pioneros en experimentar con ella. Ahora debern ir preparando sus versiones para el cada vez ms pujante Android. Si, por el contrario, optamos por adaptar nuestra pgina web a la navegacin con telfonos mviles aplicaremos las normas especficas del W3C para mviles, englobadas en la Mobile Web Initiative.

Geolocalizacin La geolocalizacin es la identificacin de tu posicin geogrfica a travs del GPS del mvil o por la posicin de las antenas de telefona. Es un servicio que cada vez incorporan ms terminales y servicios y que ms expectativas ha generado. Son muy utilizados servicios que proporcionan informacin relacionada con tu posicicin geogrfica, por ejemplo, restaurantes cercanos.

157

internetizacin

El servicio ms pujante, en el momento de escribir estas lneas, es Foursquare, que permite a los usuarios indicar a su red social en qu lugar estn en cada momento. En teora, para poder saludarse si descubren que se encuentran en lugares prximos.

Realidad aumentada La combinacin de la cmara y el mvil est dando lugar a servicios espectaculares. Google present Google Goggles, que proporciona informacin o la procesa al enfocarla con la cmara o al tomar una fotografa. Por ejemplo:

si fotografas la portada de un libro detecta cul es si fotografas una tarjeta de visita almacena los datos categorizadamente (telfono, e-mail...) y hasta permite telefonear al nmero que aparece si enfocas un comercio en una calle ofrece datos del mismo

Expectativas de crecimiento Las cifras de crecimiento en el uso del telfono mvil como dispositivo de acceso a internet son las propias de un mercado en plena explosin: nmero de usuarios con tarifa plana, terminales vendidos, aplicaciones descargadas, inversin y formatos publicitarios... Japn y otros pases asiticos nos llevan gran ventaja en el uso de internet en el mvil. Cada vez son ms los servicios que apuestan por este mercado y crecen a su alrededor, veamos ejemplos:

servicios de geolocalizacin, te indican farmacias o restaurantes cercanos, si un amigo est en los alrededores o si un comercio prximo tiene una oferta para ti. Ejemplos: Foursquare, Facebook Places

158

internetizacin

tiempo real, esto es, retransmitir qu haces, dnde ests, qu ves en cada momento, ya que tu mvil siempre est contigo, en el restaurante o en tus vacaciones. Ejemplos: Twitter para mviles, Instragram emisin de vdeo en directo desde el mvil. Qik

Una realidad en s misma La potencia de estos telfonos mviles, 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 prximos aos. Dejaremos de hablar de internet en el mvil 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 ingls, es la forma en que se denomina a hecho de que cada vez ms nuestros datos estn 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 conexin a internet y desde cualquier lugar del mundo. No obstante, perdemos control sobre ellos, ya que no los poseemos, no estn en el disco duro de nuestro porttil y, si perdemos la conexin a internet o el servicio de Gmail est cado no podemos acceder a nuestros correos. El correo es el ejemplo ms manido pero puede aplicarse a fotos, blogs, conversaciones en Facebook, documentos, listas de tareas, mensajera instantnea y mil ejemplos ms. En el entorno empresarial son tambin abundantes los servicios en la nube, tambin 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 aos no se haban convertido en una realidad. Ofrecen las 159

internetizacin

mismas ventajas que para los usuarios particulares, los obstculos principales que impedan su desarrollo, como la lentitud o la escasa potencia se han solucionado y los problemas siguen quitando el sueo a muchos. Nos referimos al temor que siempre nos acompaa a que nuestros datos sean accedidos por personas que infringen las barreras de seguridad. En algunos casos, lase datos bancarios o mdicos, la informacin es muy sensible.

Web semntica o web 3.0

El concepto de web semntica tiene dos caras. Para las mquinas, los ordenadores, la web semntica es aquella en la que la informacin viaja por las redes etiquetada, es decir, marcada con parmetros que indican que un dato es una fecha, o el autor de un libro o una direccin postal. Actualmente, eso ocurre con muy pocos datos, pero si se lograra un consenso para que la informacin se marcara las mquinas podran facilitar a los humanos informacin ms ajustada a nuestras necesidades. Y esa es la otra cara de la web semntica. Las personas para navegar por internet debemos adaptarnos a la forma de trabajar de las mquinas. Si buscamos en Google introducimos palabras clave, que, simplificadamente no son ms que las palabras ms empleadas en el texto. Con la web semntica podremos realmente hacer preguntas en lenguaje natural a los buscadores y webs. Podremos escribir En qu ao naci Bob Dylan? en lugar de ao nacimiento Bob Dylan. Ya existen grandes experiencias en este terreno. Entre mis favoritos se encuentran:

Yahoo! Respuestas. Es parecido a un buscador semntico 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 pginas. Su creador fue profesor de Sergey Brin, uno de los fundadores de Google. Supone un gran avance en la interpretacin de informacin. Por ejemplo, si buscamos New York:

160

internetizacin

161

internetizacin

Mundos virtuales y 3D
Conocemos casos de xito de mundos virtuales y casos que se han quedado en meros titulares de peridicos. World of Warcraft, por ejemplo, es un juego online multijugador (MMORPG) en el que el usuario crea su personaje o avatar e interacta con los dems viviendo aventuras. Es un tremendo xito tanto desde el punto de vista de la satisfaccin de sus millones de usuarios como de negocio, ya que requiere suscripcin. 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 pequeas 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 aos. Su futuro parece ligado al de los videojuegos y entornos en tres dimensiones. El tiempo nos dir en qu desembocan.

162

internetizacin

163

internetizacin

164

internetizacin

La autora
Gemma 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 tecnologas de la informacin 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 extensin el proceso de creacin de proyectos y estrategias web, que ha plasmado en Internetizacin.

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

165

internetizacin

No olvides visitar: internetizacion.com

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

166