• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Internetización: manual de internet
 

Internetización: manual de internet

on

  • 1,391 views

Manual que describe los pasos a seguir al crear una web, desde que surge la idea hasta que la comunicas al público: análisis, arquitectura de información, diseño gráfico, programación, SEO, ...

Manual que describe los pasos a seguir al crear una web, desde que surge la idea hasta que la comunicas al público: análisis, arquitectura de información, diseño gráfico, programación, SEO, publicidad, analítica web.

Statistics

Views

Total Views
1,391
Views on SlideShare
1,386
Embed Views
5

Actions

Likes
0
Downloads
37
Comments
0

3 Embeds 5

http://pinterest.com 3
http://www.linkedin.com 1
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Internetización: manual de internet Internetización: manual de internet Document Transcript

    • internetización 1
    • internetización2
    • internetizaciónInternetización Gemma Ferreres 3
    • internetización© 2011 Gemma Ferreres1ª ediciónISBN: 978-84-9981-718-7DL: M-21314-2011Impreso en España / Printed in SpainImpreso por Bubok4
    • internetización A los blogueros y tuiteros 5
    • internetización6
    • internetizaciónÍndiceIntroducción...................................................................................................9Creación de sitios web.................................................................................11 Análisis y fuentes de información............................................11 Arquitectura de información...................................................17 Diseño.....................................................................................35 Maquetación............................................................................53 Programación y plataformas....................................................63 Contenidos...............................................................................68 Gestión y mantenimiento........................................................81 Analítica web...........................................................................85 Control de calidad (estándares web, usabilidad, accesibilidad )..........91Comunicación y promoción de sitios web....................................................99 Comunicación y Relaciones Públicas........................................99 Publicidad (display, SEM, e-mail, móvil)................................111 Posicionamiento en buscadores (SEO)...................................123 Social Media Marketing (SMM).............................................129Comienza tu propio proyecto....................................................................133 Internet en España y en el mundo.........................................133 De la web 2.0 a la web2 .........................................................140 7
    • internetización Modelos de negocio ..............................................................142 Legislación aplicable..............................................................148 Emprendedores.....................................................................150¿Y ahora qué? Últimas tendencias.............................................................155 Internet en el móvil...............................................................155 The Cloud (la nube)................................................................159 Web semántica o web 3.0......................................................160 Mundos virtuales y 3D...........................................................162La autora....................................................................................................1658
    • internetizaciónIntroducciónMuchos usuarios de internet, cuando tienen que diseñar una webpara su empresa o definir una estrategia de social media no disponende información suficiente para tomar decisiones. ¿HTML? ¿CMS?¿SEO? Multitud de siglas y conceptos han surgido en internet en laúltima década. Internetización pretende arrojar luz y presentar de unmodo conciso y didáctico respuestas a las principales dudas queencuentra un profesional o un recién graduado cuando se enfrenta asu primer proyecto online.El libro está organizado en cuatro grandes bloques:Creación de sitios web describe las principales tareas que realizanlos profesionales que construyen un sitio web, desde la recogida deinformación inicial hasta la elección de la plataforma más adecuadapasando por la arquitectura de información, el diseño gráfico o lamaquetación.Promoción de sitios web se ocupa del marketing y la comunicaciónen estos nuevos tiempos, en los que figuras como Facebook yTwitter se han sumado a los ya complejos mundos del SEO y elSEM, revolucionando la forma de vender y promocionar nuestrosproductos. Todo ello, sin olvidar la importancia de medir nuestrosprogresos a través de la analítica web.Comienza tu propio proyecto es el capítulo en el que el lector, unavez conocidos los pasos que debe seguir para crear una web,encontrará información sobre el sector internet en el mundo y sobrela pujante comunidad de emprendedores, que le animará a lanzarsus iniciativas.Por último, el bloque ¿Y ahora qué? Últimas tendencias, resumebrevemente algunos sectores que se espera que experimenten ungran crecimiento en los próximos años, como el cloud computing o elya potente mercado de internet en el móvil.Dicho esto, te invitamos a leer Internetización y a dar tus primerospasos en el mundo profesional de internet. 9
    • internetización10
    • internetizaciónCreación de sitios webAnálisis y fuentes de informaciónUn profesional, al iniciar un proyecto, necesita mucha información.Sólo de esa forma sus decisiones estarán fundamentadas. Nopodemos diseñar una tienda online, por ejemplo, sin saber cuál es elproducto más demandado o qué artículo se desea promocionar estatemporada. Por ello, la fase previa de cualquier proyecto será larecopilación de información. Ésta se encontrará en manos del cliente,si trabajamos en una agencia, o de un directivo, si somos eldepartamento de desarrollo web de una empresa o, tal vez, laconozcamos de primera mano si se trata de nuestro negocio.Las principales fuentes de información a explotar suelen ser: • estadísticas del sitio web, si ya existía previamente • informes externos generales y específicos sobre la temática • informes internos generales y específicos sobre la temática • entrevistas con clientes y usuarios (focus group, tests de usuarios...) • entrevistas con proveedores • entrevistas con empleados • investigaciones ad hoc • cualquier otra de la que dispongamos: material audiovisual, folletos, reporting, memorias, merchandising...Analizaremos toda la información y prepararemos un informe deconclusiones con recomendaciones que guiarán el enfoque del sitioweb. Ya sabremos, por ejemplo, cómo es nuestro público y sinuestros usuarios se conectan por las mañanas o por las tardes, sientran una vez a la semana o al mes, si quieren recibir boletines o noy cómo dar respuesta a sus necesidades y demandas. 11
    • internetizaciónAsimismo, conoceremos: • Objetivos • Competencia • ReferentesObjetivosLos objetivos son las metas que queremos alcanzar con el diseño dela web. Deben ser sólo unos pocos y medibles. Por ejemplo: vendermás zapatos. Los objetivos están íntimamente relacionados con laestrategia y el posicionamiento de nuestra empresa o proyecto. Sinos posicionamos como “tu pedido en casa en 24 horas” lasdecisiones se verán condicionadas por esta realidad y tendremosque dejar en un segundo plano otros servicios o ventajas para elusuario.CompetenciaEl análisis de la competencia es inevitable realizarlo para conocer enqué grado de avance se encuentran los demás actores de misegmento y valorar si podemos superarlos o al menos igualarlos. Elbenchmark es el instrumento más extendido de análisis de lacompetencia. Usualmente, consiste en un listado de contenidos yfuncionalidades de los competidores que nos permite conocer cuál esel más avanzado o rezagado y en qué posición nos encontramosnosotros.ReferentesComplementario al análisis de la competencia es el de los referentes,muy importante en internet. Pueden existir negocios web que notengan mucho en común con mi empresa pero de los que puedaextraer aprendizajes. Google, Apple, Amazon y otros gigantes suelenser ejemplos de buenas prácticas.12
    • internetizaciónFuentes de informaciónGracias a internet, la tarea de recopilar información se ha vuelto milveces más sencilla que hace 15 ó 20 años. Aún así, hay que saberbuscar y manejar algunas fuentes de referencia, las revisaremossegún un doble criterio: • Públicas y privadas • Generalistas y especializadasDejaremos para más adelante, en el capítulo Analítica web, lossistemas de estadísticas internos y nos centraremos ahora en lasfuentes externas.Los organismos públicos son grandes fuentes de información.Continuamente generan ingentes cantidades de datos de dominiopúblico. Suscribirse a las notas de prensa del Instituto Nacional deEstadística (INE) es altamente recomendable. El INE publica datosdemográficos, económicos, sectoriales de todo el país segmentadospor Comunidades Autónomas e incluso por edades, sexos, etc.Los Ministerios son otra fuente privilegiada de información. Resultamuy útil recibir las noticias que emiten los más afines a nuestrosector de actividad: turismo, telecomunicaciones, sanidad, energía...Los Ministerios, así como los organismos públicos, generanperiódicamente extensas memorias que recopilan toda la informaciónsobre un sector. Es conveniente bucear en sus webs cada ciertotiempo para ver si hay novedades.Además de la Administración central también las autonómicas ylocales disponen de webs en la que publican documentación deutilidad para cualquier emprendedor: desde modelos de planes denegocio al formulario para solicitar la apertura de un local.Una fuente constante de información son los estudios y papers quepublican consultoras y asociaciones. En parte para su propiapromoción y en parte por vocación de servicio, cada cierto tiempoven la luz investigaciones sobre los más variados temas. Uno de losinformes más consolidados es Navegantes en la Red de la AIMC, sepublica anualmente y en sus casi doscientas páginas desgrana elperfil de los usuarios de internet punto por punto. Es de elaboraciónpropia, por lo que estamos ante datos primarios. Estudios 13
    • internetizacióndestacados basados en datos de terceros son, por ejemplo, elinforme eEspaña de la Fundación Orange o La Sociedad de laInformación en España que edita la Fundación Telefónica. Elorganismo público Red.es, por su parte, a través del ONTSI(Observatorio Nacional de las Telecomunicación y la Sociedad de laInformación) elabora numerosos estudios generales y sectorialescomo el Perfil del internauta o el informe anual La Sociedad en Red.OJD interactiva es una fuente muy valiosa en el ámbito de los mediosonline ya que certifica la audiencia de decenas de sitios web. Esposible que tus principales competidores sean auditados por OJD ypor tanto sea sencillo conocer sus datos de tráfico.Además de estos prestigiosos estudios de tipo genérico, las agenciasy consultoras publican a menudo informes específicos sobre suárea de especialización. Así por ejemplo, existen, análisis sobreinternet en el móvil, publicidad en internet, SEO, banca online,accesibilidad, navegadores más usados, social media...Los estudios a los que tenemos acceso no se limitan al ámbitonacional. Eurostat ofrece estadísticas a nivel europeo; la UniónInternacional de Telecomunicaciones (UTI), a nivel mundial.Comscore o Pew son entidades respetadas que emitenperiódicamente informes que sirven de referencia para muchosgerentes.Como no podía ser de otro modo, internet también permite el “sírvaseusted mismo”. Google aporta numerosas herramientas gratuitas deanálisis, como Google Insights, que permite comparar la popularidadde uno o varios términos a lo largo del tiempo, por países etc.Las fuentes de información que hemos venido citando son todasgratuitas pero algunas tienen modalidad de pago, lo que permite elacceso a funciones más avanzadas o potentes, o directamente sonde pago. Forrester o Nielsen NetRatings son algunos de los serviciosque nos pueden proporcionar información de pago.14
    • internetizaciónCaptura de pantalla de Google Insights 15
    • internetizaciónPodríamos citar muchas más fuentes: Infoadex para datos deinversión publicitaria, CMT para transacciones con tarjeta de crédito,incluso los diarios digitales o cualquier blog pueden contenerinformacion valiosa. En definitiva, el mensaje que queremostransmitir es que no debemos descansar hasta tener identificadas lasfuentes de información más apropiadas para nuestros intereses:sean públicas o privadas, generales o específicas de nuestro sector,gratuitas o de pago. Y no olvidemos suscribirnos y consultarlas yaque estar al día es fundamental en un sector tan cambiante comointernet.Una vez finalizada la etapa de recogida y análisis de informaciónestamos listos para iniciar propiamente el proyecto, diseñaremos uncronograma con las fases del mismo, tiempos estimados para cadatarea, recursos humanos y técnicos que vamos a dedicar, hitos quecumplir, reuniones de seguimiento y todo aquello necesario para queel proyecto llegue a buen puerto.16
    • internetizaciónArquitectura de informaciónSi hay algo que caracteriza a internet es precisamente sumultidisciplinariedad: arquitecto de información, diseñador gráfico,maquetador web, programador, periodista, community manager,consultor de negocio, jefe de proyecto... todos ellos participan en lacreación y mantenimiento de un sitio web. Comenzaremosrefiriéndonos al primero de ellos.La arquitectura de información (o de contenidos) se nutre dediversas disciplinas: • Biblioteconomía y Documentación • Periodismo • Psicología • etcDe la Documentación toma el sentido de la organización yclasificación de la información para facilitar su acceso posterior. DelPeriodismo, su capacidad para comunicar. De la Psicología, elconocimiento sobre los procesos mentales y cognitivos de losusuarios. No obstante, muchas otras fuentes de saber son aplicables:diseño visual, diseño industrial, sociología...Y muchas dosis de sentido común, de horas frente al ordenador, elmóvil, peleándose con la interfaz del GPS del coche o buscando elbotón de encendido del mando a distancia del aire acondicionado.Ser observador, detallista y tener empatía para ponerse en el lugarde los demás también ayudan.Al inicio del proyecto, el arquitecto de información dispone de todoslos datos obtenidos durante la fase de recogida de información. Estáen condiciones de saber cuáles son los objetivos del sitio, el públicoal que va dirigido, los contextos en los que va a ser usado, etc. Estaaproximación metodológica es válida tanto si lo que va a diseñar esuna web como una aplicación para móvil o para iPad. Lo que noserá similar son los casos de uso: no es lo mismo consultarinformación desde el móvil mientras esperas el tren que cuando 17
    • internetizaciónestás sentado frente al ordenador. Todo ello afectará a las decisionesde diseño que tomemos.Imaginemos que el arquitecto de información (AI) tiene ante sí unlistado con los contenidos y funcionalidades de las que dispondrá elsitio web. Sus tareas consistirán en organizar la información ydistribuirla visualmente.Organización de la informaciónPensemos por un momento que nuestra web es una casa. Antes deempezar a construirla deberemos contar con unos planos. Elequivalente en diseño web sería el árbol de contenidos, que es eldocumento o entregable que generará el AI en esta fase delproyecto.Un ejemplo de árbol de contenidos es el que vemos en el gráficoadjunto y que corresponde a la web de Inditex.18
    • internetización 19
    • internetizaciónLa arquitectura de información de los sitios web más comunes se haido estandarizando y las secciones en webs del mismo sector suelenser las mismas. La de Inditex responde a la de una empresa quecotiza en bolsa, de ahí la pestaña con Información para accionistas einversores o la dedicada a la Responsabilidad Social Corporativa(RSC). Si dispones de un análisis de la competencia (benchmark)habrás comprobado estas similitudes.El árbol de contenidos, en la mayoría de los casos, es una estructuraramificada compuesta de una home, varias subhomes y numerosaspáginas finales. La forma en que agrupemos los contenidos ensecciones o, dicho de otra forma, las páginas en subhomes puedeser muy variada. Imaginemos que los contenidos son productos deuna tienda online. Podemos organizarlos: • por marcas (Nokia, Apple, Samsung...) • por categorías (hombre, mujer, jóvenes, niños...) • por fechas (2012, 2011, 2010...) • Incluso en algún caso puede tener sentido el orden alfabéticoSerá nuestra tarea determinar qué clasificación es la más adecuada.En algunas ocasiones, en lugar de a un árbol de contenidos, nosenfrentaremos a un proceso, por ejemplo, una compra o un alta deusuario en un registro. En tales casos, generaremos un diagrama deflujos en el que se plasmarán los distintos pasos que hay queatravesar hasta completar el proceso y las decisiones que habrá quetomar durante el mismo.Distribución visual de la informaciónLos planos de nuestra casa no estarán completos sin el prototipo owireframe. El wireframe es un dibujo de la interfaz de la web queestamos diseñando. En él distribuimos visualmente los componentesde cada tipo de página.Un sitio web habitualmente cuenta con tres tipos básicos de página: • Home, también llamada portada o página de inicio • Portadilla o subhome • Página interior, destino o ficha20
    • internetizaciónUn 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 planade un periódico, ambos modelos pueden servirnos. El ejemplo deportada de libro es apropiado para webs con un único mensaje. Encambio, para webs con muchos contenidos y de actualizaciónfrecuente es más adecuado un modelo de “primera plana”.La home debe identificarse como tal al primer vistazo. Esto seconsigue con recursos como: mayor tamaño de la marca opredominio de la imagen.En la home deben tener cabida todas las áreas de contenidos de laweb pero, para evitar que esto sobresature la página es precisoutilizar principios y recursos como: • jerarquización: dar mayor tamaño y visibilidad a los contenidos más importantes o que convenga destacar • rotación: si todo no puede estar en la home, definir un calendario de rotaciones para los contenidos que queramos comunicar • priorización: decidir qué es más importante en cada momento • actualidad: un contenido secundario puede convertirse en relevante por el hecho de ser noticiaSi tenemos usuarios o clientes que visitan la página a menudopodemos tomarnos algunas libertades y dar menos peso a lapresentación, pues ya nos conocen y mostrarles más contenidos queal usuario que nos acaba de conocer. Esta dualidad, en todo caso,siempre se va a producir, por lo que siempre tendremos en cuenta aambas tipologías de usuarios al plantear una web.Las subhomes son las portadas de las secciones o canales de laweb. Mientras que la home es única y alberga contenidos de todaslas áreas de la web o la compañía, las subhomes son temáticas, esdecir, la subhome del canal de Deportes de un periódico únicamenterecoge contenidos deportivos. Puede haber varios niveles desubhomes; siguiendo con el mismo ejemplo, el canal de Deportespuede contener varias subsecciones: Fútbol, Baloncesto, Ciclismo,F1, etc.Es aconsejable que las subhomes sean muy operativas. Resultatedioso para el lector tener que atravesar portada tras portada hasta 21
    • internetizaciónllegar al contenido. Esto se consigue evitando mensajes estáticos ypublicando directamente en la portadilla los contenidos. Por ejemplo,en la sección “Trabaja con nosotros” de una web lo más lógico serápublicar las ofertas de empleo en vigor y no una serie de enlaces a:ofertas de empleo, política de RRHH, envía tu CV. Todos estoscontenidos deben aparecer pero de la forma más eficiente posible.Por último, tenemos la página interior. En número es la másimportante, porque en un sitio web hay una home, varias subhomes(o ninguna puesto que no son obligatorias) y cientos o miles depáginas finales de contenidos. Son equivalentes a la noticia o fichade producto. Un sitio web periodístico tendrá como destino final de lavisita de cada lector a la página de una noticia y un sitio webcomercial deseará que el usuario se dirija a la ficha de un producto ypulse el botón de “comprar”.En esta fase del proyecto ya dispondremos de un set de plantillas otipologías de páginas más algunas complementarias como la de lapágina de contacto o de la nota legal.Un concepto importante al hablar de páginas es la estandarización.Tenemos que ver las tipologías de páginas como los lineales de unsupermercado, en los que cambia el contenido, no el continente. Endiseño web cambiar el contenido de una página es muy sencillo,basta con sustituirlo, pero modificar el “contenedor” es complejo, yaque afecta a la programación. Por ello, hay que identificar los tipos depágina y convertirlos en “plantillas”. Así, tendremos la plantilla“home”, la plantilla “subhome”, la plantilla “noticia” y varias plantillasmás para otros usos. El proceso de estandarización significa quecada página de noticia seguirá el patrón de la plantilla “noticia” yestará compuesta por los mismos elementos o campos. Por ejemplo: • titular • antetítulo y/o subtítulo • entradilla • texto • imagen o imágenes • vídeo(s) embebidos • pie de foto • autor22
    • internetización • fecha de publicación y de última actualización • documentación relacionada (ej: pdf completo de un informe) • opción imprimir • comentarios de los lectores • opción compartir en Twitter • opción compartir en Facebook • y los demás que definamosEl conjunto de bocetos de las distintas tipologías de páginasforman el wireframe o prototipo. Éste puede ser estático o puedeestar construido en HTML y ser navegable como si de la web final setratara. Para diseñarlo existen programas como Axure que facilita lacreación de prototipos navegables incluso si no sabes programar. Lamaqueta navegable es especialmente útil en la fase final dedesarrollo, una vez cerrado el diseño gráfico, para testarla conusuarios finales antes de programarla.Ejemplo de página de un prototipo: 23
    • internetización24
    • internetizaciónAl diseñar un prototipo es preciso seguir una serie de principios.Son muy útiles tanto los principios básicos de diseño, que veremosen el siguiente capítulo como los principios del diseño de interacción,que exceden los límites de este manual pero sobre los queencontrarás abundante información en internet.Navegación e interacciónSería imposible enumerar todos los componentes de un sitio webpero dedicaremos unas líneas a algunos tan importantes como lanavegación, el buscador y los enlaces y botones de acción.El menú de navegación es el elemento de un sitio web que permitedesplazarnos de una sección a otra. Podríamos compararlo con elascensor de un edificio, que te permite subir de una planta a otra odirectamente a una en concreto. Sirve también para transmitirnosuna idea de la dimensión y contenidos del sitio: si tiene 5 ó 25secciones, sobre qué temáticas, etc.Tradicionalmente el menú de navegación más usado era el verticallateral. Se ubicaba generalmente a la izquierda de la página,inutilizando dicha zona para la publicación de otros contenidos. Estetipo de menú, no obstante, ha desaparecido, en buena parte, porqueno se correspondían con los patrones de navegación de los usuarios.El modelo que se ha impuesto es el de navegación horizontalsuperior en uno o dos niveles. Su gran ventaja es que libera todo elespacio de la página para contenidos. Una variante de este tipo denavegación es el menú horizontal desplegable. Ejemplo de navegación horizontal en la web de Apple 25
    • internetizaciónEl segundo nivel de navegación, es decir, las subsecciones, puededesplegarse horizontal o verticalmente, aunque si es posibleutilizarla, es más eficiente la navegación horizontal tanto para primercomo para segundo nivel. Navegación horizontal y segundo nivel desplegado en la web de ChevronUna tendencia cada vez más extendida, sin embargo, es que estenivel, en forma de “categorías” desaparezca u ocupe un módulodentro de la página. Esto se debe a que los usuarios no navegan porcategorías más que cuando buscan algo concreto y tienden a pincharen los contenidos para moverse por la web.Aunque no sea la predominante, la navegación vertical no sólo no hadesaparecido sino que gigantes como Amazon o Yahoo!, coningentes secciones y contenidos en sus webs, la han recuperado.Es frecuente organizar la navegación en dos bloques: • navegación principal, para los contenidos más relevantes del sitio • navegación secundaria, para aspectos importantes pero que no representan el comportamiento clave de los usuarios. Ejemplo: política de privacidad, aviso legal, contactoLos nombres de las secciones, llamados generalmente “etiquetas”o “rótulos”, deben ser breves y descriptivos, de esa forma,facilitaremos la labor de lectura y selección de los usuarios.La navegación ha de ser consistente en todo el sitio: las mismassecciones, la misma ubicación, la misma apariencia. Es la brújula conla que navegamos y nos orientamos. Esto deberá tenerse en cuentaal definir el diseño de la página.26
    • internetizaciónMenú vertical de Amazon. El segundo nivel de navegación también se despliega verticalmente. 27
    • internetizaciónEn las siguientes páginas vemos los sistema de navegación delNYTimes en sus versiones para web, móviles e iPad.Como podemos observar, aunque el periódico es el mismo, hanadaptado el volumen de contenidos y la interfaz a las característicasde cada dispositivo y de uso del mismo. Así: • En la versión web la navegación es vertical y la home presenta un gran volumen de contenidos. • En la versión para móviles dan prioridad a la última hora. La navegación por secciones está escondida tras una pestaña para que la utilicen los usuarios con más tiempo para realizar la consulta. • En la versión para iPad también se priorizan los contenidos. El menú aparece oculto y se despliega en vertical siguiendo las pautas de diseño marcadas por AppleLa forma de interacción en cada dispositivo también es distinta: delratón que pincha en los enlaces en la web, al manejo rápido con unsólo dedo en el iPhone al uso reposado del iPad y con mayor espaciofísico para la interacción y también mayor presencia de elementosaudiovisuales.28
    • internetizaciónThe New York Times para iPhone (tamaño superior al real) 29
    • internetización The New York Times para iPad30
    • internetizaciónThe New York Times para web 31
    • internetizaciónBuscadorCuando un sitio web contiene grandes volúmenes de información,millones de noticias, miles de productos, la navegación puederesultar insuficiente para permitir a un usuario que localice la noticia oartículo que necesita. En tal caso es conveniente disponer de unbuscador que, a través de palabras clave introducidas por el usuario,arroje una página de resultados, la denominada SERP (searchengine results page). Todos estamos familiarizados con elcomportamiento de los buscadores ya que somos usuarios asiduosde Google.La página de resultados de un buscador consiste en unaenumeración de páginas, imágenes, vídeos u otros elementos quepueden corresponderse con lo que esté buscando el usuario. Decada resultados se mostrará un resumen, información sobre losdatos más relevantes (tipo de fichero, peso, fecha...) e incluso unaminiatura de la imagen. De esta forma, el usuario podrá rastrearlosrápidamente y pre-seleccionar los que más se aproximen a lo quenecesita.Es muy práctico para el usuario que el buscador ofrezca filtros pararefinar los resultados. Dos modalidades son las más frecuentes: • búsqueda avanzada: el buscador permite especificar características adicionales de aquello que busca. Por ejemplo: posteriores a una determinada fecha, tamaño de las imágenes, idioma • filtros dinámicos: son una versión moderna de las tradicionales búsquedas avanzadas. Una vez tiene ante sí la página de resultados, el usuario puede marcar o borrar opciones y la página se actualiza dinámicamente. Por ejemplo: busco hoteles en Semana Santa en Sevilla y, como aparecen más de 100, marco opciones adicionales: • categoría • con desayuno incluido • con parking32
    • internetizaciónEnlacesLos enlaces son la esencia de la Red. No sólo nos permitenmovernos de un contenido a otro dentro de una web sino saltar aotras webs.A simple vista debe percibirse qué es un enlace. Es lo que va amarcar la diferencia con el diseño de un periódico o una revistaimpresos.En esta página de El País, por ejemplo, ¿somos capaces deidentificar qué textos son enlaces y a dónde llevan?Un enlace debe identificarse sin tener que acercar el ratón para ver sicambia el cursor.Debe ser descriptivo, en dos otres palabras ha de explicar a quépágina te lleva, qué encontrarás en la página de destino: “ir al blog”,“Fotogalería: una ciudad en llamas”. No, “pinchar aquí”. 33
    • internetizaciónBotones de acciónLos botones de acción son aquellos elementos que inician unproceso. Aunque a simple vista puedan parecer enlaces,desencadenan toda una serie de funciones informáticas.Se enmarcan en esta categoría desde el tradicional “login” o registrode usuario, al botón de acción de un buscador o el “play” de unvídeo.Todos estos elementos, al igual que los que hemos ido enumerandoa lo largo del capítulo deben ser definidos tanto en su forma, como suubicación, como en su estética. En una guía de estilo seconsignarán sus características para que el equipo de desarrollo ymantenimiento de la web pueda aplicarlos cada vez que los necesitede manera consistente en toda la web.34
    • internetizaciónDiseño¿Con qué marca asocias el color rojo?¿Coca cola? ¿Ferrari? ¿Vodafone? ¿Banco Santander?¿Y si lo contextualizamos un poco?Un poco más 35
    • internetización¿Te basta una imagen para reconocer a qué marca pertenece elanuncio que estás visualizando?¿O necesitas ver el logotipo?Este ejemplo resume los elementos básicos que hay que tener encuenta a la hora de diseñar una identidad visual corporativa.Elementos fundamentales de diseñoAl diseñar tu sitio web o aplicación para móviles o tablets debesdeterminar si ya tienes una identidad definida y, por tanto sólo debesaplicarla o si, por el contrario, has de desarrollar también unaidentidad para tu web o aplicación. El símbolo, los colores y latipografía son los elementos fundamentales de tu marca que deberásaplicar pero es preciso tener en cuenta una serie de implicaciones.Volvamos a los ejemplos. Ikea o BMW se caracterizan por mimar susmarcas, también en internet.36
    • internetizaciónLa marca, con todos sus elementos (tipografía, colores, márgenes)aparece en la posición preferente, la esquina superior izquierda.El color amarillo de Ikea predomina, junto al gris oscuro para lostextos y el azul como complementario y para indicar elementosinteractivos (enlaces). El fondo blanco elegido se caracteriza porfacilitar la legibilidad. 37
    • internetizaciónLa marca BMW, acompañada del lema “¿Te gusta conducir?”,aparece esta vez a la derecha. Los colores corporativos dominan lapaleta. De nuevo se recurre al fondo blanco para facilitar lalegibilidad, al gris oscuro, por su contraste con el blanco, para lostextos y al azul, que aparece al pasar el ratón por encima de losenlaces, indica interactividad. Ambos colores, gris y azul, son propiosde la marca. Los espacios son tan importantes en torno al símboloencuadrado de BMW como guiando la mirada y organizando loselementos en la página.Con estos dos ejemplos tenemos ya algunas pistas para analizar loselementos fundamentales del diseño visual de una web.ColorLa paleta de colores debe estar basada en los colores corporativos.Se pueden utilizar en estado puro o gradaciones de los mismos. Elpeso que asignemos a cada uno de ellos y las funciones que van arealizar deberá tener aspectos tan variados como la psicología delcolor y la accesibilidad.Existen numerosos estudios que analizan las connotaciones quetienen los distintos colores en la cultura o en el ánimo de laspersonas. Dependiendo de la función que predomine en una web o38
    • internetizaciónde los públicos a los que vaya dirigida optaremos por unos colores uotros. Una web puede ser seria y respetable e ir dirigida a inversoreso un público profesional o, por el contrario, tener un tono distendido ydivertido y apelar a niños o jóvenes. Los colores y la forma en que losapliquemos ayudarán a enfatizar el carácter emocional de la web.Desde un punto de vista más funcional, los colores que se utilicen enel diseño de una web deben cumplir criterios de accesibilidad, unaspecto que trataremos en mayor profundidad en el capítulo sobreControl de calidad. Para garantizar un nivel básico de accesibilidad,los colores deben tener un nivel de luminosidad y contrastesuficiente. En ocasiones, los colores corporativos no alcanzan losniveles mínimos recomendados y es necesario adaptarlos para suversión online. En la imagen que vemos a continuación, por ejemplo,la legibilidad se ve perjudicada porque no hay suficiente contrasteentre el el color del texto y el del fondo: TextoLos colores corporativos se aplicarán a todos los elementos queintegran la web, sean encabezados, enlaces, tablas o gráficos. 39
    • internetizaciónEn los gráficos de la página de BP se puede observar cómo aplican loscolores verde y amarillo corporativos.MarcaDenominamos marca, desde un punto de vista gráfico, a los colores,símbolo y tipografía que identifican a una organización. El diseño desímbolos es una ciencia tan especializada que requeriría un libroentero para explicar cómo se conciben elementos a la vez tansimples y a la vez tan complejos como los de Repsol o Nike.El logotipo es la tipografía que adquiere corporeidad, bien por serpropia o por asociarse indefectiblemente a una marca.El símbolo es el elemento gráfico que la acompaña. Ejemplo: un solsobre el horizonte.Nike ha conseguido que su símbolo sea suficiente para identificar ala marca.Coca-cola únicamente dispone de logotipo.Una marca, además de su versión principal, debe contar conversiones secundarias para utilizar sobre fondos claros u oscuros oen otros soportes o circunstancias.40
    • internetizaciónTipografíaLas fuentes tipográficas, o tipografías, que se pueden emplear enuna web tienen algunos condicionantes. Los ordenadores vienenequipados con una serie de tipografías que dependen del sistemaoperativo usado. Los usuarios pueden instalar nuevas tipografías ensus sistemas pero la oferta de fuentes disponibles es infinita y lasconfiguraciones que pueden tener definidas nuestros usuarios sonilimitadas. Por ello es conveniente basarse en las fuentes comunes atodos los ordenadores, las denominadas, fuentes “de sistema”.Si al diseñar un sitio web utilizamos fuentes que no son del sistemacorremos el riesgo de que el usuario no las tenga instaladas en suequipo y que su sistema operativo las sustituya por una similar perono la nuestra, poniendo en riesgo nuestra identidad visual. Parasolucionarlo, lo más adecuado es seguir estas sencillas reglas: • utilizar la tipografía corporativa únicamente en la marca y elementos destacados, mediante el uso de imágenes • emplear tipografías de sistema en la mayor parte de los textos y contenidos • definir cómo queremos que los ordenadores sustituyan nuestras tipografías predefinidas cuando no estén disponiblesUna forma de evitar que el ordenador cambie la tipografía corporativapor otra cuando no la tiene instalada es utilizar imágenes. Estasolución, sin embargo, presenta problemas de accesibilidad y por lotanto sólo debe usarse cuando las ventajas superen a losinconvenientes, por ejemplo, en la marca y elementos importantespero acotados.La marca, lo que comúnmente llamamos logo, en una web sirve paraidentificar al propietario del sitio y, usualmente, para volver a lapágina de inicio. Su finalidad no es ser leída y su capacidadcomunicacional se perdería si no utilizase la tipografía corporativa.Por ello, siempre debemos respetar la tipografía de la marca.En los textos de una web la situación es opuesta a la de la marca; sufinalidad es totalmente práctica: ser leídos, desde el PC o desdeotros dispositivos, por lo que la accesibilidad debe ser máxima.Recurrir a formatos gráficos como las imágenes o la tecnología flashpueden dar mayor espectacularidad a la página pero nos crearán,inmediatamente, numerosos problemas cuando queramos: 41
    • internetización • editarlos • traducirlos • llevarlos a la pantalla de un móvil u otro dispositivoPara editarlos necesitaremos tener el archivo original, un programainformático específico y un diseñador cerca. Para traducirlosdeberemos previamente extraerlos de la imagen o fichero flash yluego de nuevo recurrir a un diseñador con el softwarecorrespondiente (Photoshop, Flash...). En un móvil, casi con todaseguridad, no se visualizarán. En cambio, un texto en HTML que usatipografías de sistema podemos editarlo nosotros mismos, traducirlo,publicarlo, leerlo en el móvil o en el agregador RSS.Por último, debemos definir por qué fuentes deseamos que elnavegador sustituya las nuestras si no las tiene instaladas. Esto sedefine en las “hojas de estilo” y suele tener esta gramática:p{font-family:"Times New Roman",Georgia,Serif}Esta línea de código le está diciendo al navegador: “utiliza TimesNew Roman, si no la encuentras utiliza Georgia, que es otra fuentecon serif y si tampoco la encuentras, usa la fuente con serif de la quedispongas”.Como es sabido, las familias tipográficas son básicamente dos: Seriff Sin seriff a a42
    • internetizaciónSe aprecia mejor al aumentar el tamaño. La primera es “con serif”, enconcreto, la serifa más popular en la informática, la “Times NewRoman”, llamada así por haber sido diseñada para el diario The NewYork Times. La segunda “a” es una “sans serif”, es decir, sin esosrabitos en las terminaciones; “Verdana”, junto a “Arial”, es la másconocida.Un aspecto fundamental de las fuentes tipográficas, además de sufamilia, es su tamaño, “cuerpo” en la jerga profesional. Al diseñar unaweb, los tamaños de las tipografías se pueden expresar en absolutoo en relativo. Por ejemplo: • en absoluto: 10 px (10 pixels) • en relativo: 5 em (5 veces el tamaño de una m)Lo recomendable es definir el tamaño en relativo, de esa forma elusuario puede cambiar el tamaño de la letra con los comandos de sunavegador:Afortunadamente, las últimas generaciones de navegadores permitenaumentar o disminutir el tamaño del texto aunque se codifique envalores absolutos e incluso si está dentro de una imagen.Una última recomendación. Es tentador emplear numerosas fuentespara el diseño de una página: una para titulares, otra para laentradilla, otra para sumarios, otra para enlaces, otra para textos deayuda... No obstante, “menos es más” y siempre será más efectivopara lograr una identidad consistente y más eficiente en cuanto aluso de recursos limitarse a una o dos familias tipográficas.Un punto importante que hay que conocer al seleccionar lastipografías para una web es que están surgiendo iniciativas que,simplemente añadiendo un enlace a nuestra hoja de estilo (másadelante aprenderemos qué es esto), nos permiten utilizar fuentesque no son del sistema. Un ejemplo es Google Web Fonts, unalibrería de tipografías que no cesa de crecer. 43
    • internetizaciónElementos genéricos de diseñoLas reglas del diseño han sido ampliamente estudiadas y explicadaspor los expertos. Recordaremos algunas de ellas sin intentar suplir elpapel de un profesor o un director de arte. • Consistencia. Los estilos definidos se aplican siempre de la misma forma en todo el site • Jerarquía. Mediante recursos como el tamaño y la posición podemos comunicar al lector qué contenidos son más importantes. • Simetría/asimetría. Un diseño puede buscar el dinamismo mediante la asimetría.44
    • internetización • Equilibrio o balanza. El peso visual de las distintas zonas ha de ser equivalente. Por ejemplo: un destacado con titular a 20 puntos y con fotografía puede equilibrarse con dos destacados de menor tamaño y fotografías más pequeñas ubicados a la derecha del primero. • Ritmo. Se crea mediante la repetición de elementos. • Énfasis. Negritas y tamaño confieren énfasis a los elementos. • Alineación. Los elementos no deben flotar en la página, una forma de anclarlos visualmente es la alineación: todos los elementos se inician en una línea imaginaria. • Espacio. Los espacios en el diseño son como los silencios en la música. Mídelos con cuidado. Una imagen con unos márgenes alrededor puede ser la diferencia entre un sitio bien diseñado y uno descuidado en el que los textos se pegan o superponen a las fotografías.Ejemplo de alineación de los elementos sobre una retícula. Siemprese alinean con el inicio de una de las columnas de la retícula:Estos principios serán de aplicación al diseñar cada componente (untitular, una entradilla, un sumario, una tabla, un enlace) y también aelementos estéticos de la página: 45
    • internetización • líneas • iconos • viñetas o bolosMerecen especial atención dos elementos:Los enlaces y botones de acción poseen varios estados, que eldiseñador debe definir visualmente de modo que el usuario losperciba como lo que son, elementos de interactividad. Si los iconosrealizan la función de un botón, también se aplican las mismasnormas.Las imágenes de un sitio web, especialmente si es una webcorporativa o comercial y el propietario tiene la posibilidad de elegirsu estilo, lo que no ocurre en la misma medida en un diarioinformativo, influyen grandemente en la personalidad de la web. Eldirector de arte tendrá un papel destacado en la definición del estilode imágenes que se empleen: apaisadas o cuadradas, en color o enblanco y negro, con marcos o sin marcos, con efectos o sin efectos.Los formatos de imágenes más usados son: • JPG (o jpeg). Se trata de un formato versátil, visualizado por todos los navegadores y que es apto tanto para fotografías como para ilustraciones. Se deben optimizar las imágenes para web (reducir su peso) antes de publicarlas. Se pronuncia jotapegé. • GIF. Adecuado para dibujos e ilustraciones, pero no para fotografías. Permite transparencias y animaciones sencillas. Se pronuncia guif. • PNG. Es un formato más moderno que puede cumplir las funciones tanto de los GIF como de los JPG aunque algunos navegadores no lo muestran por lo que no ha logrado sustituir totalmente al JPG.Elementos específicos de diseñoA la hora de diseñar el aspecto de una página web, el diseñadortrabaja sobre un prototipo elaborado por el arquitecto de información.Debe “vestir” el wireframe aportando las mejoras que sean46
    • internetizaciónadecuadas. Dependiendo del equipo con el que contemos, iniciará latarea un director de arte y la desarrollará un diseñador junior osimplemente realizará todo el proceso un diseñador gráfico senior. Eldiseñador con más experiencia esbozará las líneas maestras queguiarán la aplicación de la identidad visual de la marca y su asistentela extenderá a todas las plantillas necesarias. Recuerda al procesode pintar un cuadro. Van Dyck plasmaba la fisonomía de susretratados y sus ayudantes terminaban la obra pintando atuendos,fondos y otros detalles.Al diseñar para internet conviene tener en cuenta que: • es un diseño funcional, para ser usado, por lo que la estética debe supeditarse al objetivo principal (informar, vender, acción...) • se asemeja al diseño editorial pero no es estático, sino que debe incitar a la acción y esto se debe reflejar y percibir al primer vistazo: ¿dónde están los enlaces? ¿dónde está el botón que activa el buscador? • minimalismo, en la Red la eficiencia y optimización debe ser máxima y en el diseño se logra a través del minimalismo, utilizando los mínimos recursos para lograr los objetivos.No debemos pensar que el minimalismo es un obstáculo para lacreación de diseños imaginativos. Un ejemplo habitual esCSSzengarden, una web en la que se muestra cómo, con unosmismos contenidos, se pueden realizar infinitos diseños.Como vemos en los ejemplos, estas webs son iguales en suscontenidos pero la disposición de los elementos en la página y eldiseño visual cambia alterando únicamente las CSS: 47
    • internetizaciónLos diseñadores gráficos suelen trabajar con el programa informáticoPhotoshop para el diseño estático y Flash para animaciones. Sonherramientas informáticas que requieren un entrenamiento específicopara aprender a utilizarlas. Están dirigidas a un público profesional,por ello, su precio no suele ser accesible para usuarios amateurs. Enel caso de Photoshop, existen alternativas gratuitas como Gimp, Kritao Paint.NET. En el post 10 excelentes alternativas gratuitas alPhotoshop puedes obtener información más detallada sobre los48
    • internetizaciónmismos. Una vez acabado el diseño, se entregará, preferentementeen dos formatos: • PSD (Photoshop Document). Es el documento fuente, está organizado en capas y permite el mantenimiento futuro del sitio. Requiere un programa específico para ser visualizado. • JPG, el mismo documento en un formato estándar que podrá visualizar cualquier persona del equipo o con capacidad de decisión, sin necesidad de tener instalado el programa profesional Photoshop. • Opcionalmente, impresiones en papel pluma para realizar presentacionesLas animaciones se entregan en: • FLA. Son los ficheros fuente que genera el programa Flash. Para visualizarlos y editarlos se necesita el programa profesional Flash y su correspondiente licencia. • SWF. Es el formato para publicar en la web. Puede ser visualizado si se tiene instalado el plug-in Shockwave Flash, que es gratuito.¿Y si no sé diseñar?Como hemos podido comprobar a lo largo del capítulo, diseñar no esuna tarea sencilla. Además de la creatividad y el foco es precisomanejar con destreza herramientas como Photoshop, Illustrator yotros programas informáticos. Si no es tu caso, existen recursos quete permitirán suplir estas carencias, aunque no alcancen el nivel deun diseño profesional.Desde webs que te permiten configurar tu logo en un minuto con sóloelegir color, forma, efectos, hasta plantillas y temas que te darán eltrabajo hecho y sólo necesitarán unos toques de personalización.Nos detendremos unos instantes en este tema.Temas y plantillasLa mayor parte de las webs se gestionan actualmente con un CMS(Content Management System o Gestor de contenidos), sonaplicaciones que permiten crear y actualizar una web sin tenerconocimientos de programación. 49
    • internetizaciónLos CMS gratuitos suelen incluir diseños predefinidos o inclusocontar con numerosos diseños desarrollados por miembros de sucomunidad.Algunos de los CMS más populares son Drupal, Joomla, WordPresso Blogger. Página de selección de plantilla de Blogger.com¿Cómo elegir un diseño para tu web? Los CMS suelen incluir unbuscador de diseños que permite elegir las características (númerode columnas, color base... ). Una vez te hayas asegurado de que laestructura de plantilla elegida se adecua a tus necesidadesselecciona el diseño que más te guste y personalízalo con tuscolores y tu marca.Una web se compone de diversas capas; la de diseño es una más yno tiene por qué interferir con la capa de contenidos, que se50
    • internetizaciónconservarán y adaptarán al diseño si lo has construido según lasdirectrices que vamos exponiendo en este manual de internetización.Los diseños predefinidos suelen denominarse Plantillas, Themes oTemplates. Cambiarlos es tan simple como cambiar de abrigo, elcontenido no cambia pero la apariencia se transforma sin afectar alos textos, imágenes etc.Ejemplos de plantillas o templates de Joomla:Para personalizar una plantilla necesitas unos conocimientosbásicos. Los elementos que deberás adaptar serán,fundamentalmente: • marca • colores • imágenes y contenidos • elementos complementarios: iconos, bullets, líneas • textos 51
    • internetizaciónPara cambiar el logo por el tuyo debería bastar con subir una imagencon el tamaño adecuado.Para cambiar los colores deberás abrir el fichero CSS y sustituir loscódigos hexadecimales de los colores.Aunque la plantilla pueda incorporar fotografías de bancos deimágenes y textos de ejemplo, como es obvio, tendrás quesustituirlos por contenidos sobre tu empresa.Por último, existen numerosos detalles que necesitarán unaadaptación. Generalmente se trata de imágenes de pequeño tamañoque sirven como separadores, decoración, etc. Al ser imágenes, sólotendrás que editarlos o sustituirlos por los tuyos.En sistemas centralizados como Blogger.com en los que la empresapropietaria actualiza continuamente tanto las funcionalidades delCMS como las plantillas no suelen surgir problemas.En los CMS que el usuario instala, como la versión descargable deWordPress, es posible que el creador del theme no lo actualice o noa la velocidad con que se actualiza el CMS. Por ello, si tusconocimientos son limitados, recomendamos realizar únicamente loscambios imprescindibles en la plantilla.Primeros testsLlegado este punto del proyecto ya podemos mostrar a personasajenas al mismo, que puedan aportar una visión objetiva, losprimeros bocetos y testar sus impresiones, tanto del diseño gráficocomo de la usabilidad de la arquitectura de información y de lanavegación. Si detectan fallos, estamos a tiempo de corregirlos, yaque aún no se ha iniciado la fase de desarrollo propiamente dicha.Esto es muy importante, imaginemos la construcción de un edificio,es más sencillo introducir cambios cuando se encuentra en fase deplano que cuando ya está construido.52
    • internetizaciónMaquetaciónHasta ahora hemos tratado de la parte visible de una web: suscolores, su número de columnas o sus secciones, pero para que esainformación viaje a través de la red debe estar codificada, de ellotrataremos en este capítulo. La maquetación web es una profesiónque requiere un grado elevado de especialización; no se aprende enuna tarde. Es una tarea que debemos dejar en manos deprofesionales cualificados ya que un trabajo bien hecho facilitará laperdurabilidad de nuestra web y su extensión a otras plataformas dela mejor forma posible. No descuidemos, por tanto, este aspecto sóloporque no se visualiza.Qué es el código fuente¿Has visto alguna vez el código fuente de una web? ¿sabes cómomostrarlo? Los navegadores web disponen de una opción en sumenú llamada “Ver código fuente”. En Internet Explorer se accede aella desde Página > Ver código fuente. Si la despliegas podrás veralgo similar a esto:<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="W3C, World Wide Web, Web, WWW,Consortium, computer, access, accessibility, semantic, worldwide, W3, HTML, XML,standard, language, technology, link, CSS, RDF, XSL, Berners-Lee, Berners, Lee,style sheet, cascading, schema, XHTML, mobile, SVG, PNG, PICS, DOM, SMIL,MathML, markup, Amaya, Jigsaw, free, open source, software" /> <title>World Wide Web Consortium - Web Standards</title> 53
    • internetización <link rel="meta" href="/Overview-about.rdf" /> <link rel="stylesheet" type="text/css" href="/StyleSheets/home.css" /> <link rel="bookmark" href="#technologies" title="Technologies |" /> <link rel="bookmark" href="#news" title="News |" /> <link rel="bookmark" href="#search" title="Search |" /> <link rel="contents" href="#contents" title="Contents |" /> <link rel="bookmark" href="#Offices" title="Offices |" /> <link rel="bookmark" href="#systems" title="Systems |" /> <link rel="bookmark" href="#donors" title="Supporters |" /> <link rel="bookmark" href="#footnotes" title="Footnotes |" /> <link rel="alternate" type="application/rss+xml" title="W3C Home Page News RSSChannel" href="http://www.w3.org/2000/08/w3c-synd/home.rss" /> <style type="text/css"></head>Se trata de código HTML, el lenguaje en el que está escrita la worldwide web. Los navegadores, como Internet Explorer o Firefox son losencargados de traducir dicho código a un lenguaje que nosotrospodamos entender: las páginas web.El HTML es un lenguaje universal, como la música o las matemáticasy, aunque atemorice un poco a simple vista, no es excesivamentecomplejo. Aunque no lo dominemos, es conveniente que seamoscapaces de reconocer algunos de sus parámetros, del mismo modoque sabemos algunas palabras en francés, italiano o japonés. Estonos será útil en numerosas ocasiones, por ejemplo: • si tenemos que editar manualmente un texto de una página web • si tenemos que saber con qué palabras se intenta posicionar una web en buscadores54
    • internetización • si queremos saber si la web se ciñe a estándaresHTML, el lenguaje de la WWWHTML es el lenguaje de internet. Significa Hypertext MarkupLanguage o lenguaje de marcado de hipertexto, que no esprecisamente muy autodescriptivo. Ha alcanzado recientemente laversión 5.0 y está en constante evolución y mejora para darrespuesta a las siempre crecientes necesidades de los usuarios yposibilidades de la WWW, como incluir vídeos o mayor interactividad.No es, propiamente dicho, un lenguaje de progamación, sino dedescripción o “marcado” de páginas web.El Consorcio de la World Wide Web es el organismo que define losestándares de diseño web con el fin de que sea accesible desdecualquier dispositivo, independientemente de cuál sea el hardware osoftware que utilice.Del mismo modo que hay palabras del castellano que han caído endesuso, el HTML ha atravesado varias versiones y etiquetas(comandos) que hace diez años eran aceptadas ahora serecomienda no usarlas.Las primeras webs mezclaban en el mismo fichero de código elcontenido, la estructura, la presentación. Es decir, si queríandestacar un titular con letras rojas y un tamaño de fuente de 24 píxelsescribían algo así:<font size=24px color=red>Victoria de la Selecci&oacute;n española def&uacute;tbol</font>Este esquema bastaba para webs de tan sólo unas páginas, noobstante, cuando se deseaba cambiar el diseño los procesos eranmuy manuales y tediosos.Las CSS, Cascade Style Sheets u hojas de estilo, es un conceptoque escucharás muy a menudo durante el desarrollo de una web.Permitieron separar en otro fichero las instrucciones sobre laapariencia de una web. 55
    • internetizaciónEn el fichero principal HTML se enlaza al fichero CSS como vemosen este ejemplo:<link rel="stylesheet" href="http://h3.hipertextual.com/c/h3v2/ie.css"type="text/css" />En el fichero invocado se describe el diseño: Ej:h2 { font-size:160%; color:#11aa11;}De este modo, si se desea cambiar el diseño, basta con modificar elfichero CSS y los cambios se aplicarán a toda la web, sin tener quecambiar cada página una a una.La gramática del lenguaje HTML fue evolucionando y lasinstrucciones más antiguas fueron quedando obsoletas. Esteaspecto, aparentemente anodino, es clave porque si en los próximosmeses los navegadores dejan de aceptar instrucciones antiguas,nuestra web dejará de visualizarse correctamente.Además de HTML en sus diversas versiones, existen otros siglas conlas que es bueno que te familiarices: • XML (Extensible Markup Language). El formato XML se utiliza para normalizar e intercambiar datos. Por ejemplo, una base de datos de automóviles en la que sólo cambian los contenidos (Toyota Avensis, Renault Megane, Seat Altea...) pero no los campos, que son siempre los mismos (marca, modelo, CV, combustible...). • CSS (Cascading Style Sheets u Hojas de Estilo). Las hojas de estilo sirven para definir la presentación de una página web. Indican aspectos como tamaño de letra, color, márgenes, estilo, alineación... • XHTML. Es una combinación de HTML 4.0 y XML. Fue el lenguaje dominante entre los expertos durante los diez años56
    • internetización que ha durado la definición de HTML 5.0. Existe una versión estricta y una transicional menos restrictiva en sus reglas. • RSS. Significa Really Simple Syndication y es una tipología de XML utilizada para sindicar o distribuir contenidos entre distintas webs. Se utiliza para suscribirse a las actualizaciones de blogs y páginas de noticias a través de programas específicos, como Google Reader, iGoogle o los incluidos en los propios navegadores.¿Página o sitio web?Solemos usar indistintamente los términos “página” y “sitio” web peroen realidad un sitio web se compone de varias páginas. Los sitiosmás pequeños pueden tener cuatro o cinco páginas pero son cadavez más escasos, predominan las webs con cientos o incluso milesde páginas, por ello, los sitios creados con HTML escritomanualmente van desapareciendo y siendo sustituidos por webs conun gestor de contenidos detrás. Los CMS (Content ManagementSystems o gestores de contenidos) son motores que creanautomáticamente las páginas necesarias a partir de unas tipologíaspreviamente definidas. Por ejemplo: si en la fase de arquitectura deinformación definimos el tipo de página “noticia”, que se componía decinco campos (título, entradilla, fecha, autor, texto), con un CMS lapodremos crear automáticamente, sólo rellenando los campos, perosin necesidad de escribir el código HTML.En el capítulo anterior veíamos que existen diseños predefinidos quepodemos usar para nuestra web, dichos diseños o themes incluyen elcódigo HTML necesario. Si usamos gestores de contenidos (CMS)como Drupal o WordPress para crear nuestra web podemosgarantizar al 100% que existirán themes básicos listos para usar ymuy fáciles de instalar.Perfil del maquetador webDel mismo modo que hay personas que aman una bonita caligrafíahay verdaderos enamorados de un código fuente bien formateado.Velan por que las páginas se maqueten de la mejor forma posible,siguiendo los estándares que la harán perdurable y accesible desdemúltiples plataformas. Si encontramos a un profesional así haremos 57
    • internetizaciónbien en conservarlo, ya que escasean, y porque serán el mejorgarante de que nuestra web tenga una larga vida.Un maquetador web debe tener una mente muy estructurada y sercapaz de sacar el máximo partido al HTML. Formará un buen equipocon los arquitectos de contenidos y los diseñadores para, juntos,encontrar las fórmulas óptimas para llevar a la web lo que todostienen en mente.Uno de los principales quebraderos de cabeza de los maquetadoresweb es la coexistencia en el mercado de multitud de navegadoresque hacen que sea muy difícil que una web se visualice de la mismaforma en todos ellos: Internet Explorer, Firefox, Opera, Safari,Chrome... Su número es cada vez mayor pero esto no debeobsesionarnos. El diseño web no es tan preciso como el diseñoimpreso. Es más, si nos empeñamos en eliminar todas lasdiferencias obtendremos un código menos elegante que si buscamossoluciones más gráciles. Al fin y al cabo ¿qué importa que un botónse mueva dos píxeles a la izquierda en Internet Explorer al lado delas grandes ventajas que aporta internet frente a la entrañableimprenta de Guttenberg?A la hora de comprobar cómo se visualiza nuestra web en lasdistintas versiones de cada navegador podemos disponer de variosordenadores con distintos navegadores instalados o usaraplicaciones que realizan este trabajo automáticamente, generandocapturas de pantalla.La herramienta de trabajo de un maquetador es un editor HTML. Enprincipio, el código fuente se puede escribir con un simple note pad obloc de notas de Windows pero los editores profesionales, muchosde los cuales se pueden obtener gratuitamente en internet, ahorranmucho tiempo destacando los errores que detectanautomáticamente, mediante opciones de vista previa o coloreandolas distintas partes de un documento. Al elegir uno debemoscerciorarnos de que no agrega código por sí mismo que escape anuestro control.La importancia de los estándares webLos estándares web son los cimientos de una web, por eso es tanimportante su solidez. El uso de estándares es la base que nos58
    • internetizaciónpermitirá garantizar que nuestra web seguirá siendo accesible en elfuturo y que nuestros contenidos podrán llevarse a: • cualquier navegador que respete estándares • teléfonos móviles • widgets • redes sociales • flash • audio • otra web • otros idiomas • buscadores • ayudas técnicas usadas por personas con discapacidadComo hemos señalado en el epígrafe anterior, los estándaresestablecen una separación entre el contenido y su presentaciónvisual. Hagamos la siguiente prueba: 1. Abre el navegador Firefox 2. Abre la web de elpais.com 3. Selecciona en el menú la opción “Ver> estilo de página > sin estilo” 4. Podrás ver el contenido de elpais.com pero sin diseñoGracias a ello, ese contenido se puede exportar a móviles o widgetsy aplicarles otro diseño, codificado en las CSS.Breve guía de instrucciones HTMLDedicaremos unas líneas a explicar el significado de algunasinstrucciones HTML muy comunes.Las etiquetas HTML afectan a todo aquello contenido entre suapertura y su cierre. Las etiquetas HTML se distinguen porque 59
    • internetizaciónaparecen encerradas entre los símbolos menor (<) y mayor (>). La decierre lleva además una barra (/). Veámoslas:<tag></tag>Para poner una palabra en negrita dentro de una frase escribiríamoslo siguiente: El actor <b>George Clooney</b> protagoniza los spots de NespressoY el resultado sería: El actor George Clooney protagoniza los spots de NespressoTodos los tags o etiquetas funcionan de la misma forma y deben sercerrados siempre.b → abreviatura de bold (negrita)i → abreviatura de italic (cursiva)strong → Sirve para destacar una palabra o frase importanteem → Sirve para dar énfasis a un textocite y quote → Se utilizan cuando se reproducen fragmentos de textode otros autoresul → 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 elementode una lista)Una de las etiquetas más útiles es <a>, ya que sirve para insertarenlaces en un texto. Por ejemplo: <a href=”http://dominio.com/direccion”>Consulta la oferta de la semana</a>60
    • internetizaciónEl resultado visualmente sería “Consulta la oferta de la semana” yconstituiría un enlace a la página alojada en la URLhttp://dominio.com/direccion.Si lo que queremos insertar es una imagen haremos lo siguiente: <img src=”http://dominio.com/ruta-a-la-imagen.jpg” alt=”Pie de foto”>Como vemos, se trata de una excepción que no lleva etiqueta decierre. La extensión de la imagen no necesariamente es un jpg,puede ser gif o png.La etiqueta img es conveniente que lleve siempre, por cuestiones deaccesibilidad, el atributo alt. Alt alberga el texto alternativo de unaimagen para que lo puedan leer las personas que no visualizan lasfotografíasA continuación reproducimos, con permiso del autor, el gráfico WhatBeautiful HTML Code Looks Like, una chuleta que explica a grandesrasgos en qué consiste el lenguaje HTML. Agradecemos a ChrisCoyier de CSS-tricks.com que nos haya permitido su reproducción. 61
    • internetización62
    • internetizaciónProgramación y plataformasA lo largo del capítulo sobre construcción de sitios web hemos idodescribiendo tareas cada vez más complejas y que requieren mayorespecialización. En este epígrafe, Programación y plataformas, nosadentramos en el área más inasequible para el usuario medio. Si unaweb fuera un ser vivo, los programadores serían los cirujanos queoperan un corazón o realizan un transplante de riñón. ¿Dejaríamosuna operación de bypass a un aficionado? Para programarfuncionalidades de una web también debemos contar con losmejores profesionales: los ingenieros informáticos.Tal vez te estés diciendo, “esto es demasiado difícil para mí”. Si esasí, tengo buenas noticias, no siempre hace falta saber programarpara crear una web, existen multitud de plataformas en el mercadolistas para usar y en ello ha tenido gran protagonismo el movimientode software libre.Antes de continuar, aclaremos que entendemos por “plataforma” eneste contexto: plataforma es el software que proporciona el serviciocompleto para una actividad: venta, enseñanza, red social, etc. Así,por ejemplo, una plataforma de e-learning permitirá dar de alta a losalumnos, publicar material didáctico, actividades, tests, chat...Dicho esto, el primer gran dilema al que nos enfrentaremos al decidirqué plataforma usar es ¿la desarrollamos nosotros mismos o usamosuna creada por terceros? Para ello es importante ser consciente decuál va a ser el valor diferencial de nuestro producto o servicio. Sirecae en el software deberemos desarrollar nuestra propiaplataforma, total o parcialmente.Si estás empezando y tu negocio no se diferencia en lasfuncionalidades que aporta la plataforma puedes apoyarte endesarrollos preexistentes. Así, puedes crear una tienda online sobreuna plataforma de “marca blanca” como Prestashop. Con el tiempo,no obstante, querrás incluir mejoras que no formen parte de laplataforma elegida y seguramente acabarás realizando desarrollospropios. 63
    • internetizaciónLos desarrollos propios requieren grandes inversiones en tiempo ydinero pero cuando no existe un software que realice lo que andasbuscando no existe otra opción. Google, Twitter o Facebook songrandes ejemplos de plataformas desarrolladas desde cero.Nos ocuparemos a continuación de las dos posibilidades descritas:uso de plataformas de terceros y programación propia.Plataformas para tu proyectoNo saber programar o no disponer de programadores en el equipo nodebe desanimarnos a la hora de poner en marcha una web.La primera plataforma que realmente puso en manos de las personassin conocimientos de progamación toda la potencia de la web fue Blogger,un gestor de contenidos o CMS muy sencillo, pero hoy en día hayplataformas para casi todo lo que puedas pensar: • gestión de contenidos • comercio electrónico • educación (campus virtuales) • redes sociales • analítica web • gestión de proyectos • vídeo • blogs • foros • social media • ...A la hora de seleccionar una plataforma elegiremos una que llevealgún tiempo en el mercado. Lo podemos averiguar por su númerode versión. No es lo mismo una plataforma que se encuentra en laversión 0.68 que una en la versión 4.0. Esto nos garantizará una64
    • internetizaciónmínima estabilidad y reducirá el número de errores y fallos en elrendimiento.Es muy importante en una plataforma que haya generado unaimportante comunidad a su alrededor. Si tiene fans y desarrolladoresserá más fácil su supervivencia y más difícil que nos encontremos undía con que se ha dejado de actualizar el software. Esto aplica a lasplataformas de software libre, en el caso de las plataformascomerciales, es la empresa que las respalda la que decide cuandoha finalizado su ciclo de vida.Sea cual sea tu proyecto online seguramente necesitarás un gestorde contenidos. Los más populares son Drupal y Joomla. El primeroes más veterano y en 2009 fue adoptado por los responsables de laweb de la Casa Blanca, lo que nos permite hacernos una idea de supotencia. Puedes descargarlo en http://drupal.org/project/drupalgratuitamente pero no olvides hacer una donación si decidesfinalmente usarlo en tus proyectos. Del mismo modo, puedescontribuir con desarrollos propios y donarlos a la comunidad para quetodos puedan beneficiarse.Si tu web es más modesta puedes recurrir a CMS más ligeros comoWordPress que, aunque pensado para blogs, permite crear páginasque no se vayan a actualizar con frecuencia como un CV o lapresentación de tu tienda.Operar con estos gestores de contenidos como editores es sencillo,no obstante, para su instalación se requieren conocimientos medios.El administrador deberá disponer de un alojamiento web y teneracceso al servidor, donde deberá crear las bases de datos y realizartransferencias de ficheros.Si queremos ir un poco más allá y empezar a vender por internet esposible instalar carritos de la compra. Existen soluciones específicaspara cada CMS: Virtuemart para Joomla, Ubercart para Drupal,eShop para Wordpress. Se puede profundizar en el mundo de lastiendas online en el blog de Jordi Oller, que también hacerecomendaciones de software de comercio electrónico para creartiendas desde cero. OsCommerce es el más veterano mientras queMagento es el que está experimentando más crecimiento. Convienedejar constancia de que necesitarás conocimientos avanzados paraconfigurar y poner en marcha estos sistemas de comercioelectrónico. 65
    • internetizaciónLos lenguajes de programación en internetSi has estado días rastreando la web en busca de una plataformaque se ajuste a tus necesidades y ningún software lo consigue, talvez sea hora de que te plantees contratar a un desarrollador o a todoun equipo de programadores si el proyecto es de gran alcance.En el ámbito de los lenguajes propietarios destaca ASP.Net deMicrosoft. Antes de empezar a operar es preciso adquirir lascorrespondientes licencias y contar con el software IIS instalado en elservidor.En el campo del software libre son populares PHP, Python y Ruby.PHP permite aumentar las posibilidades de webs construidas conHTML y CSS. Python es una de los lenguajes oficiales en los queGoogle programa sus aplicaciones para el gran público, lo que nosda una idea de sus ventajas. Ruby es el más joven de los lenguajesmencionados y el más emergente, con una comunidad dedesarrolladores cada vez mayor.En cualquier proyecto es preciso innovar contínuamente pero siademás los desarrollos son propios no habrá referencias a las queseguir, el futuro lo marcaremos nosotros. Muchas de esas ideasserán rápidamente copiadas por la competencia pero eso no es óbicepara seguir investigando e invirtiendo en I+D+i.El fenómeno de las APIAPI son las siglas de Application Program Interface. Google y otrascompañías como Facebook las han “liberado”, lo que en la jergasignifica que permiten que otras empresas desarrollen programasque interactúen con los suyos. El resultado son programas mixtos(“mash up”) que mezclan funcionalidades de uno y otro programa.66
    • internetizaciónEjemplo de mash up con Google Maps 67
    • internetizaciónContenidosContenidos es la palabra con la que en internet se denomina a lainformación. Es un concepto más amplio y pretende englobar a todosaquellos datos que circulan a través de la red, se trate de una poesía,una canción o la retransmisión de un partido de fútbol. Es decir, noimporta su género ni su formato: textual, imágenes, gráficos, sonido,vídeo, descargables o aplicaciones.La mayor capacidad de las redes de banda ancha y de losdispositivos ha permitido que sólo hayamos tardado unos años enpasar de las páginas de texto al vídeo en directo y los mundos entres dimensiones.Compárese este avance con estos otros ejemplos. Entre la imprentade Guttenberg y la impresora multifunción que tenemos en casamedian 500 años. El periodismo tardó trescientos años en recorrer sucamino desde las gacetas y los diarios impresos hasta los inicios dela radio en los años 20 del siglo pasado y la generalización de latelevisión en los hogares en los años 60 y 70.Si algo caracteriza a los contenidos en internet es susobreabundancia: • medios de comunicación de todo el mundo, desde el NYTimes a RTVE pasando por la BBC, están digitalizando sus archivos y publicándolos en internet • Google está escaneando bibliotecas enteras para poner a disposición de los usuarios el saber acumulado por la Humanidad • millones de usuarios escriben cada día en sus blogs o en sus cuentas de Twitter y FacebookAnte esta avalancha informativa lo que diferencia a unos contenidosde otros no es la calidad, que debería estar sobreentendida, sino elvalor añadido, como veremos al final de capítulo, primero,ocupémonos de temas más operativos como quién puede crear loscontenidos de una web, cuál debe ser el tono editorial, qué temastratar, formatos existentes y sus reglas correspondientes al68
    • internetizacióntrasladarse a la web así como la gestión de la publicación y difusiónde los contenidos.QuiénDependiendo del tamaño de la web los contenidos los escribirá elpropio autor, dispondrá de un equipo o contratará a terceros pararealizar esta tarea. Veámoslo con ejemplos: • en un blog generalmente escribe una sola persona que controla todo el proceso • un medio de comunicación cuenta con una plantilla de profesionales dedicados a la generación de contenidos, además de con una red de colaboradores que envían sus materiales periódicamente • en una empresa puede haber un equipo multidisciplinar dedicado a la creación de contenidos para la web corporativa o se pueden externalizar y ser realizados por terceros total o parcialmenteCon internet el modelo comunicacional del siglo XX ha sidosuperado. La forma de comunicarnos con nuestros lectores o connuestros clientes se vuelve más humana y personal. Podemos grabarun vídeo o escribir un post para anunciar una fusión con otraempresa. Si operamos en distintos mercados podemos abrir un blogdirigido a cada uno de ellos que será redactado por una vozautorizada que pueda representar a la empresa.La especialización es una de las tendencias más fuertes que muevenla Red. En un mercado con cientos de millones de usuarios casicualquier tema encuentra su público, y en un mundo donde todo estáestandarizado, desde la ropa a los muebles, cuanto más personal esuna voz más atrayente resulta.Los formatos a través de los que nos podemos expresar en internetson cada vez más variados y ricos. No sólo disponemos de lapalabra escrita, sino que podemos grabar un podcast o hacer unshow televisivo en directo a muy bajo coste. La posibilidad está alalcance de todos y el grado de profesionalidad dependerá del perfilde cada emisor. Un estudiante puede publicar un vídeo grabado conla cámara de su teléfono móvil mientras que una gran empresapuede optar por contratar todo un equipo de producción:maquilladores, iluminadores, cámaras de alta definición... 69
    • internetizaciónEn ocasiones lo que necesitaremos para elaborar un contenido sondos perfiles: la persona que crea el contenido propiamente dicho y elespecialista que diseña una infografía o programa una aplicaciónpara calcular el importe de tu seguro de coche.Estilo y tono editorial“La gente se reconoce como tal por el sonido de esta voz”. Comoreza el Cluetrain Manifesto en internet quienes hablan son personas.La tecnología no debe alejarnos de esta premisa básica.Independientemente de quién sea el autor de los contenidos, éstosdeben compartir una misma línea de comunicación, lo que no debeser obstáculo para que cada redactor o fotógrafo pueda expresarlade acuerdo con su personalidad.Por ejemplo, si una empresa se posiciona como fabricante deproductos de calidad, todas sus comunicaciones deben transmitireste concepto, independientemente de que el contenido sea un texto,una imagen o de que el emisor sea un directivo o un técnico.Esta uniformidad ayuda al usuario a identificar a la empresa oinstitución que emite el mensaje con unos valores y unposicionamiento.Como vemos, se trata de la misma filosofía explicada en el capítulosobre diseño aplicada a la comunicación.TemáticaDe acuerdo con la línea de consistencia que estamos describiendo,los temas que elijamos a la hora de crear contenidos deben estartambién alineados con nuestra especialidad o nuestro negocio. Es loque nos va a diferenciar de la competencia y lo que más va a valorarnuestro lector, ya que nos identificará como especialista en esecampo. Ejemplos: • blog sobre Marketing • consejos sobre eficiencia y uso racional de la energía en la web de una petrolera • recetas de cocina en la web de un fabricante de vitrocerámicas70
    • internetización • gráficos interactivos en el informe de una agencia de investigación de mercadosLa elección de la temática puede ser más laxa en webs másinformales, como un blog personal o un Twitter en el que usuariocomparte su vida cotidiana, tanto los ingredientes de su desayuno,como fotos de sus viajes o enlaces a noticias de su interés.Un medio generalista, dentro de la amplitud de materias que abarca,también se caracterizará por abordar una serie de temas con undeterminado tono y estilo.FormatosResulta asombroso observar cómo los formatos disponibles eninternet han avanzado a pasos de gigante. Ya no es suficiente conincluir noticias ilustradas con imágenes, el público exige vídeos yaplicaciones.Todos estos formatos ya existían antes de la invención de internetpero al trasladarse a la Red han tenido que adaptarse; algunos aúnno lo han conseguido, estas son algunas pautas para “internetizar”los contenidos.TextoEl texto es sin duda el formato que más ha avanzado en suadaptación a la gramática de internet, desde un doble punto de vista: • tecnológico • estiloHTML es el lenguaje en el que se codifican los contenidos de la web.En Internetización defendemos encarecidamente su uso porque es elque permite que fluyan los contenidos dentro de una web y de unaweb a otra.Crear un texto en HTML es sencillo. Los CMS o gestores decontenidos, que son los programas web a través de los cualespublicamos en internet, son versiones sencillas de editores de textocomo Microsoft Word que permiten añadir negritas, cursivas,enlaces, fotografías... 71
    • internetizaciónDada la sencillez de crear contenidos en HTML no hay excusa parapublicar textos en otros formatos, como imágenes o pdf. Un texto enHTML es indexable por buscadores y, por tanto, localizable por losusuarios que utilizan Google o Yahoo! Un texto embebido en unaimagen no es rastreable. Haz esta prueba: • abre una página web e intenta seleccionar y copiar un texto • a continuación, pégalo en un documento Word • trata ahora de hacerlo con el texto que aparece en un banner o logo • no es posible ¿verdad?Seguro que alguna vez has intentado pasar un texto a un amigo y nohas podido copiarlo porque estaba dibujado en una imagen. Ese yotros problemas de accesibilidad vienen provocados por no usaradecuadamente los formatos.Y ¿cuántas veces te ha ocurrido que has pinchado en un enlace sinsaber que dirigía a un documento pdf y te ha molestado que se inicieel programa Adobe Reader? O, tal vez no tenías instalado dichoprograma en el portátil o el teléfono y el enlace no funcionaba. Paraevitar estas incomodidades al usuario, lo mejor es: • hacer disponible en HTML los contenidos • si no es posible o quieres ofrecer también una versión en pdf, indicar siempre que el enlace lleva a otra aplicación distinta al navegador. En este caso es un pdf, pero podría ser un excel, word...El BOE, por ejemplo, que desde 2009 sólo se publica online, estádisponible en HTML para su búsqueda por palabra clave en todo elhistórico y también en pdf para preservar el formato original.Escribir para internet tiene sus propias reglas. El usuario tiene ante sítoneladas de información para consumir, por ello, valora los textosque van al grano y agradecen la brevedad.Estas podrían ser sus características: • Títulos descriptivos • Frases cortas • Brevedad72
    • internetización • Ausencia de barroquismos • Enlaces, enlaces, enlacesEl usuario de internet siempre tiene prisa, no tiene tiempo para leertextos de más de una página o complicadas metáforas que leimpiden llegar a los datos importantes. Lo solemos llamar“escanear”, el usuario rastrea la página en busca del verdaderocontenido informativo o del enlace que le lleve al mismo, los adjetivosy adornos son como una selva que hay que desbrozar para ver la luz.Es aconsejable el uso de titulares intermedios y negritas que resaltenla información clave.El tono podríamos situarlo entre el lenguaje propio de las noticias,que se centra en los hechos y elimina adjetivos y el coloquial, que esdirecto y de igual a igual.Por supuesto, hay lugar para la poesía y las metáforas pero sólo paralectores especialmente afines. La mayoría, buscará datos relevantes.Compárense estos titulares:El director ejecutivo de Google abandona el consejo de AppleUn cementerio de obras inmortalesSi en un diario impreso la curiosidad del lector es un recurso paraincitarle a leer un contenido en internet nuestra atención recibe tantasllamadas que no podemos pinchar en cada enlace para averiguarqué esconde un titular poético sin contextualizar. 73
    • internetización Fragmento de infografía realizada por 2mdc.comInfografíasLas infografías son muy útiles a la hora de resumir información,especialmente datos cuantitativos y para reproducir acontecimientosde los que no se dispone testimonio fotográfico o audiovisual.Pueden ser estáticas o estar animadas, en cuyo caso deben seguirpautas de usabilidad para facilitar a los lectores la navegación de lasmismas.74
    • internetizaciónLa sobreabundancia de información ha hecho que cada vez seanmás necesarias las infografías, para resumir grandes volúmenes dedatos en un formato de fácil lectura.Vídeo y sonido (Audiovisual)El vídeo es el formato con más éxito del momento. Cada vez es másutilizado y más consumido. No sólo los Parlamentos emiten sussesiones en directo sino que millones de usuarios graban, publican,visionan y comentan vídeos en Youtube y otras plataformascolaborativas. Incluso “en vivo” mediante servicios como Ustream,Lifestream o Qik, para móviles.Al principio, para publicar vídeos en internet se subían en formato.avi o .mpeg, el usuario los descargaba y los reproducía en su PCcon el programa adecuado. Posteriormente se fue generalizando elvídeo en streaming, que se visualizaba al tiempo que se descargabay cuya explosión se produjo con la llegada de Youtube quegeneralizó la conversión a Flash de los vídeos. Hoy en día se abrecamino HTML 5 como nueva fórmula para servir vídeos por internet.Las ventajas que tienen el vídeo y el audio es que existendispositivos de grabación al alcance de cualquier usuario, que puedegrabar un vídeo casero sin esfuerzo. Además, se están realizandograndes avances en el reconocimiento de la voz y la imagen. EnYouTube existe una funcionalidad, aún en fase experimental, quepermite transcribir las palabras pronunciadas por los protagonistas deun vídeo e incluso traducirlas a tu idioma gracias a la tecnología deGoogle, propietario del canal de vídeos. Por otro lado, losbuscadores, como Bing, son capaces de clasificar imágenes enfunción de su color predominante o identificar si aparece una personao un objeto.El diario The New York Times, en su edición online, dispone de unaplataforma que permite buscar términos en un discurso delPresidente Obama o acceder directamente al momento en quepronuncia una determinada frase. RTVE ha implementado algosimilar en España.El vídeo, sin embargo, plantea algunos inconvenientes, por ejemplo,hay usuarios que no disponen de altavoces o auriculares en sucentro de trabajo y no pueden escuchar el sonido. Similar obstáculoencuentran personas sordas. Para solucionarlo, es recomendable 75
    • internetizaciónacompañar los vídeos con transcripciones y subtítulos en formatosestándar para que puedan beneficiarse: • buscadores, que sólo rastrean texto • personas sin altavoces • personas sordasEn definitiva, los contenidos que publiquemos en nuestra webpueden haber sido creados específicamente para internet o paraotros soportes. En ambos casos, deben aplicarse las “gramáticas” deinternet y realizar las adaptaciones necesarias en el caso de loscontenidos diseñados para ser impresos o retransmitidos portelevisión, radio u otros canales. Ejemplos: • Un vídeo de una convención puede publicarse en la web pero no sin un resumen de pocos minutos y, si es posible, una transcripción en HTML. • No basta con escanear un catálogo de productos, es preciso adaptarlo a internet siguiendo las reglas que hemos descrito en los capítulos sobre AI y Diseño. El pdf para descarga será una opción pero no un sustituto de un verdadero catálogo. Ejemplo: mangoshop.esAplicacionesLa Universidad de Columbia ha creado una master que combinaPeriodismo e Informática porque considera que los periodistas delfuturo, los informadores, deberán dominar ambas técnicas. Ellenguaje no se limitará al texto o las imágenes sino que deberán sercapaces de programar aplicaciones que realicen funcionescomplejas. Me gusta el ejemplo del Consumer Profile Tool de laconsultora de negocio Forrester. Es un gráfico interactivo en el que elusuario puede elegir cómo visualizar los datos: por edades, por sexo,por país...76
    • internetizaciónUn ámbito en el que son tremendamente populares las aplicacioneses el de los smartphones o teléfonos de última generación conacceso a internet, como el iPhone. En lugar de navegar por páginasweb, que generalmente no están adaptadas a teléfonos móviles, losusuarios prefieren descargarse pequeños programas, llamadoscoloquialmente “apps” o “aplis” (de aplicaciones) que realizanfunciones determinadas: consultar el tiempo, compartir fotografías,indicar a tus amigos tu localización...ComunidadEn torno al contenido se crean comunidades. Los contenidos segeneran, se votan, se retuitean, se comparten, se comentan. Elparadigma de comunicación de uno a uno, de uno a muchos eincluso de muchos a muchos ha recibido una nueva vuelta de tuercay ahora los contenidos tienen un ciclo de vida mucho más complejo.Este ciclo de vida, que puede durar minutos (el 70% de los tuits no 77
    • internetizaciónobtiene ninguna respuesta) o días es posible gracias a las redessociales. Emerge entonces una figura, la del community manager,que no sólo dinamiza los contenidos sino también mima la relacióncon los usuarios: les interpela, les responde, les ayuda si encuentranproblemas... La simpática infografía The Hectic Schedule of a SocialMedia Manager resumía 24 horas en la vida de un communitymanager: 1. Se levanta y revisa el correo que ha llegado mientras dormía 2. Escanea la red buscando información interesante para compartir 3. Tuitea y retuitea 4. Publica un post o actualiza su estado en Facebook. Lo comparte. 5. Se reúne con el equipo comercial 6. Responde comentarios o mensajes 7. Almuerza con otros compañeros de profesión 8. Sin olvidar hacer check in en Foursquare 9. Graba un vídeo con el CEO o algún empleado y lo sube a YouTube 10. Escribe otro post 11. Habla por Skype sobre microblogging corporativo 12. Revisa las métricas en Google Analytics 13. Programa tuits para publicar por la noche dirigidos a usuarios de otros países 14. Mira el correo por última vez en el móvil antes de acostarseValor añadidoCada vez más, los usuarios esperan recibir contenidos de mayorvalor añadido. Es un tema clave en el reparto de papeles eninternet. Las utilidades para generar contenidos están al alcance detodos los públicos y cada día son capaces de realizar tareas máscomplejas. Redactar un texto, tomar una fotografía, grabar un vídeo,78
    • internetizaciónpreparar una presentación no requieren programas sofisticados.Tampoco su edición ni su publicación. Por tanto, cada vez es mayorel valor añadido que el profesional debe incorporar a sus creacionespara diferenciarse y reivindicar su trabajo. No es lo mismo grabar unvídeo de una hora de tus últimas vacaciones que montar un clip de 2minutos con las frases principales de un discurso de Barack Obama.Es lo mismo que ocurrió con el aire acondicionado o el ascensor,comenzaron siendo un lujo y hoy son básicos en un automóvil o unavivienda. Los usuarios los demandan por defecto y las empresas yprofesionales deben seguir innovando para ser competitivos.El valor añadido en un contenido puede tomar diversas formas: • noticia de última hora. Estoy suscrita a un servicio que me envía alertas al móvil cuando se produce una noticia de alcance. No me envía todas las noticias, sino que las filtra y sólo me interrumpe cuando realmente es importante. • ahorrar trabajo al destinatario final, sea en forma de recopilaciones, resúmenes o análisis en profundidad. Muchos diarios online, acuciados por la falta de ingresos de sus ediciones digitales, están definiendo servicios de pago basados es estas premisas. 79
    • internetización80
    • internetizaciónGestión y mantenimientoA veces es fácil olvidar que una web, una vez creada, requiere unmantenimiento que será, además, lo que más tiempo nos exija. Crearuna web puede llevar dos semanas, seis meses o un año pero elmantenimiento no termina jamás. En este epígrafe sobre gestión deuna web nos vamos a centrar en el mantenimiento diario no enrediseños o implementación de nuevas funcionalidades, que seríanproyectos o mini-proyectos en sí mismos.Perfil del gestorEn el día a día de una web intervienen numerosos perfiles: editoresde contenidos, vendedores, diseñadores, técnicos... Idealmente,deben conocer tanto el negocio o especialidad de la web en la quetrabajan, la disciplina a la que se dedican y tener conocimientos degestión de webs. ¿De qué nos sirve un comercial que no conoce losformatos publicitarios online? ¿y un editor de contenidos que no sabeinsertar un enlace en HTML? ¿puede gestionar un canal una personaque no sabe cómo consultar las estadísticas de acceso del díaanterior?Internet es un ámbito multidisciplinar por excelencia, por eso esconveniente que los empleados estén acostumbrados a trabajar enequipo y a compartir conocimientos de sus respectivas áreas deespecialización.CoordinaciónCoordinación, coordinación y coordinación, es la palabra que másrepetirás al intentar gestionar una web. Es preciso coordinar a todoslos niveles: • a los miembros del equipo: diseñadores con editores y con comerciales y con técnicos y jefes de proyecto... • con traductores • con editores en otras ciudades o países 81
    • internetización • con el equipo offline. Por ejemplo, vendedores en concesionarios o puerta a puerta • con la dirección y equipo de management • las fechas de publicación • las fases de proyectos • las distintas secciones y páginas de la web: querrás que algo aparezca publicado en el boletín el mismo día que en la home • con las webs en las que participes: sea Facebook o Twitter • con las distintas versiones de tu presencia online: móviles, tabletas... • etcCon la aparición de las redes sociales y los social media la gestiónde un proyecto web se ha descentralizado en buena medida. No sólohay que actualizar la web sino los perfiles en Facebook, Twitter oLinkedin y monitorizar la respuesta de los usuarios y el impacto delas distintas acciones. Es una labor de dinamización, diálogo ymoderación.MantenimientoEl software que utilicemos en nuestra web también nos exigirá tareasde mantenimiento. Un día será un parche de seguridad y otro ellanzamiento de una actualización. Esto implicará primero realizarcopias de seguridad y posteriormente instalar las novedades.Además de estas tareas no programadas una web requiere unmantenimiento diario y semanal. Un ejemplo es la realización deback 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 lanzamientode nuestra web y ya estaremos pensando en nuevasfuncionalidades, algunas serán tan sencillas como la inclusión de la82
    • internetizaciónopción de “compartir” en los posts del blog y otras requerirándesarrollos que durarán semanas.Una necesidad que surgirá con los años será un rediseño o uncambio de enfoque. Esto lo han vivido ya empresas webs veteranasque han tenido que adaptar su lay out (apariencia) concebido pararesoluciones de pantalla de 800x600 píxeles a 1024.AlojamientoLos sitios web se alojan en ordenadores llamados servidores. Existenempresas dedicadas a proveer estos servicios denominados hosting.En esta tabla de ejemplo podemos ver una comparativa de distintosplanes, desde el más sencillo, apropiado para un blog hastaservidores dedicados. 83
    • internetizaciónEn función del tamaño de nuestra web y del tráfico que vaya a recibirnuestra web necesitaremos mayor capacidad de almacenamiento, detransferencia de datos, más cuentas de correo etc.Los precios son muy variados, desde 30 euros al año a muchos milesde euros.84
    • internetizaciónAnalítica webSabemos perfectamente qué clientes son los más asiduos a nuestrorestaurante o a nuestro comercio pero a simple vista puede parecerque los visitantes de una web son invisibles. Nada más lejos de larealidad, cada movimiento que un usuario realiza en un web quedaregistrado. Existen numerosos programas, algunos gratuitos, otrosrealmente caros, para monitorizar la actividad de los usuarios quevisitan nuestra web que permiten extraer conclusiones y tomardecisiones en la gestión de un proyecto web.Monitorización de un sitio webAl interactuar con una web el usuario deja un rastro, log en inglés.Numerosos programas traducen estas huellas a datos interpretables.Por ejemplo, un periódico online puede saber en tiempo real quenoticia está siendo la más leída y, consecuentemente, dejarla mástiempo en portada o ampliarla con nuevos datos. En una web conmenos actividad puede ser suficiente con analizar los datos deactividad de los usuarios una vez al día para detectar evoluciones ytendencias.Es importante ser capaz de averiguar por qué unas páginas son másvisitadas que otras o por qué las visitas no se convierten en compras.Para ello, deberemos conocer qué variables intervienen, es posibleque se aproxime el Día de la Madre, por lo que la sección “ramos deflores” esté creciendo en visitas. O que sea primero de mes ymuchos usuarios consulten su extracto bancario o su factura. Elenvío de un e-mail promocional es otro motivo frecuente detrás de unincremento significativo del tráfico de una web. Lo importante, entodo caso, es ser capaz de extraer conclusiones, tomar decisiones yejecutar acciones a la vista de los datos ofrecidos por la analíticaweb.La monitorización de un sitio web no se limita a cifras, herramientascomo los tests multivariable o el eye tracking nos proporcionaráninformación sobre las preferencias de nuestros usuarios y cómo eldiseño o la rotación de productos afectan a su comportamiento. 85
    • internetizaciónVariables principalesNo es lo mismo gestionar un gimnasio con socios en un barrio queuna peluquería en un centro comercial y tampoco todas las webs soniguales. Con el tiempo iremos identificando las variables másimportantes para monitorizar el día a día de nuestro proyecto onegocio en internet. Son las KPI o Key Performance Indicators(indicadores clave).Para empezar será necesario conocer el número de usuariosúnicos que nos visitan. Un usuario único es una persona que visitala web independientemente del número de veces en que acceda anuestras páginas. Si entra en repetidas ocasiones hablaremos devisitas. Un lector de un diario online puede entrar todos los días eincluso muchas veces al día mientras que las compras en elsupermercado las realizamos una vez al mes o cada quince días. Portanto, el número de visitas será superior al de usuarios. Páginasvistas es el número de páginas que un usuario recorre al visitarnuestra web. El tiempo que el usuario permanece en la web es unaalternativa a las páginas vistas para calcular si los contenidos queofrecemos al usuario son de su agrado.Muy relevante es la información que obtengamos sobre laprocedencia de nuestros usuarios. Una web con usuarios fielespuede obtener ratios de acceso directo a la misma del 80% mientrasque otras webs optan por dirigirse a usuarios que navegan desdebuscadores y diseñar sus contenidos para personas que sóloentrarán una vez en su web.De los usuarios que llegan a través de buscadores,fundamentalmente Google, nos interesa saber qué palabras claveutilizaron para encontrarnos. Asimismo, descubrir cuáles son lasprincipales páginas de entrada, ya que la home no es siempre laprimera página que ve un usuario.Además de los accesos directos de usuarios que conocen a fondonuestra web y los que llegan casualmente desde buscadores comoGoogle son importantes las visitas que acceden a nuestra web desdeenlaces en otras páginas, llamadas referers. Existen webs con granpoder de influencia y lograr que nos enlacen puede suponercrecimientos exponenciales de tráfico a nuestra web durante los díasque dure el efecto del enlace. No obstante, esto debe ser el resultadode trabajado constante y no de trucos o artificios que inflen86
    • internetizaciónartificialmente la audiencia que, a los pocos días, se marchará con lamisma facilidad que llegó.Un dato importante que es conveniente conocer es la llamadabounce rate o tasa de rebote. Indica el porcentaje de usuarios queabandonan la web sin realizar ninguna acción. Sólo visualizan unapágina y se marchan. En un blog puede no ser un dato negativo: elusuario llega, encuentra lo que busca y se marcha. Sin embargo enotras webs puede ser preocupante tener un bounce rate superior a50-60%.Cada vez cobran más peso como fuentes de tráfico las redessociales y, más en concreto, Facebook y Twitter. Para algunosmedios de comunicación las visitas que procedentes de Facebook yasuponen el 5%. Las redes sociales, sin embargo, no se miden sólocomo fuente de tráfico sino que también hay cada día másherramientas para monitorizar la actividad de nuestros usuarios ensocial media: • tamaño de la red (seguidores, fans, suscriptores...) • actividad de la misma (retweets, favoritos, “me gusta”, comentarios...) • compromiso (menciones positivas, negativas).Conocer qué páginas o qué contenidos son los preferidos por losusuarios es una de las funciones que más me gustan de lasherramientas de analítica web. Puedes mantener una web sobrecocina pero si además llegas a conocer a tus usuarios y sabes queprefieren la comida asiática o las recetas para microondas te serámuy útil para mejorar el servicio. Personalmente, me gusta tener unlistado con los contenidos más leídos y agruparlos por temas, escomo escuchar en el silencio las voces y las opiniones de tusclientes.El análisis de los contenidos más visitados se puede sofisticarenormemente, llegando a trazar funnels o recorridos que realizan losvisitantes al llegar a una página, identificándose patrones. Porejemplo, usuarios que llegan a la home → seleccionan una categoría→ seleccionan un producto → lo introducen en el carrito de lacompra → introducen sus datos y así hasta llegar a la compra. Estetipo de análisis se denomina “de embudo” o “túnel” (funnel) porque lo 87
    • internetizaciónhabitual es que en el recorrido se vayan perdiendo usuarios y sólounos pocos lleguen a completar la tarea.Los datos socio-demográficos y de contexto se pueden obtenerigualmente por medio de Analytics, Nielsen u otra herramienta enmayor o menor medida. Así, podemos saber la procedenciageográfica de las visitas, con mayor detalle dependiendo del país o laprovincia; las horas de máximo tráfico; incluso los ingresos, la edad oel sexo de los usuarios a través de encuestas.En el aspecto técnico, los navegadores, resoluciones de pantalla,sistemas operativos desde los que acceden los usuarios nos puedendar pistas acerca de en qué dirección deberían enfocarse nuestrospróximos desarrollos. Por ejemplo, es posible que empiecen a crecerlos accesos desde iPhone.Por último, nos referiremos a uno de los datos clave: la conversión.No es suficiente con monitorizar las estadísticas de acceso sino quehay que fijar objetivos y verificar que se alcanzan. Veamos unejemplo: contratamos una campaña publicitaria que supone unincremento del tráfico del 20% y que esperamos aumente las ventasun 5%. Deberemos medir que efectivamente los nuevos visitantes nose han quedado en meros espectadores sino que han realizadocompras. Otro ejemplo de conversión serían los formatospublicitarios que se pagan en función de la acción que generan,imaginemos que estrenamos una película y queremos que el públicoobjetivo vea el trailer; podemos acordar que se pague únicamentepor el número de veces que se activa el “play” en el visor y no sólopor mostrar el robapáginas.Herramientas más usadasAunque en los primeros años de la analítica web se trataban losficheros log que se generaban hoy en día se han generalizadoprogramas que traducen los datos “en crudo” a formatos fácilmenteinterpretables. El más popular y además gratuito es Google Analytics.Si quieres conservar el control sobre tus datos y no facilitárselos aGoogle existen alternativas de pago como las que ofrecen Nedstat,Webtrends o Nielsen NetRatings.88
    • internetizaciónHabitualmente, estos programas exigen insertar unas breves líneasen el código fuente de cada página mediante un procesoautomatizado. De esa forma, cada vez que un usuario “solicita”página o realiza una acción en ella ésta queda registrada.Si tu empresa concentra buena parte de su actividad en internet esposible que desees que tus datos sean públicos, por ejemplo, paravender espacio publicitario. Esto es frecuente en los medios decomunicación online, que reciben cientos de miles o millones devisitas de usuarios segmentados. Por ejemplo, la sección de Fórmula1 del diario deportivo Marca puede ser un soporte publicitarioadecuado para un fabricante de automóviles ya que sus lectores sonamantes de la conducción. En tal caso, existen organismos queauditan tus cifras de audiencia, como OJD Interactiva en España. Losdatos de los medios que audita son públicos y puedes consultarlosgratuitamente en su web: www.ojdinteractiva.es. 89
    • internetización90
    • internetizaciónControl de calidadLlegado este punto, ya sabemos lo esencial para construir una web,sin embargo, la inexperiencia nos puede jugar una mala pasada y darlugar a errores, inconsistencias y diversos tipos de fallos que pondránen peligro la correcta evolución de nuestra web. Para evitar malasprácticas, disponemos de diversas metodologías y disciplinas quegarantizarán que no sólo tenemos una web sino que además es lamejor web posible.Hemos decidido analizar: • Estándares web • Accesibilidad • UsabilidadEstándares webEl W3C o World Wide Web Consortium es el organismo que definelos estándares para el diseño web. Sus grupos de trabajo puedendedicar años a debatir la mejor solución para un problema. El HTML,XHTML, CSS o XML que tantas veces hemos citado son algunas delas tecnologías que han definido. Entre sus integrantes seencuentran instituciones, investigadores, multinacionales, y gigantesdel software como IBM o Microsoft ya que persiguen el mayorconsenso posible en sus decisiones.El director del W3C es Tim Berners-Lee, inventor de la WWW. Lasoficinas del W3C en España tienen sede en Gijón y periódicamenteorganizan jornadas y eventos divulgativos.El objetivo del W3C es la interoperabilidad, es decir, lograr que losdesarrollos web sean accesibles desde cualquier dispositivo yversión, ahora y en el futuro. 91
    • internetizaciónLos estándares que definen podemos compararlos a una gramáticaque marca las normas para escribir en un determinado idioma. Si lasseguimos, nos aseguramos de que todo el mundo nos comprenda.En internet ocurre algo similar, si seguimos las instrucciones del W3Cy escribimos el código HTML de nuestra web como marca el W3Cincluso los navegadores más antiguos leerán nuestra web y lamostrarán, en tanto que si somos descuidados en poco tiemponuestra web irá perdiendo usuarios que, al disponer de navegadoresdiferentes o antiguos, no las podrán visualizar.Suele ser especialmente molesto cuando ocurre en un serviciopúblico o en la web de un banco, ya que crean una situación deindefensión en el usuario que quiere realizar una operaciónimportante. Afortunadamente esta circunstancia se da cada vez conmenor frecuencia.Cuando diseñamos una web la diseñamos también para el futuro ypara el pasado. El W3C continuamente está desarrollando nuevosestándares, cada vez más potentes y exigentes y si descuidamos elcódigo fuente de nuestra web los nuevos navegadores, comoChrome, que se diseñan siguiendo dichos estándares, no seráncapaces de mostrar correctamente nuestra web. Del mismo modo, notodos los usuarios disponen de las últimas versiones de losnavegadores, bien porque no son conscientes de que debenactualizarlos o porque tienen restricciones para acceder a lasversiones más recientes. El W3C se preocupa de que el código quesigue sus estándares “degrade grácilmente”, es decir, que muestre loesencial aunque pierda algunos detalles o elementos accesorios.Una página web diseñada conforme a estándares incluso se podríavisualizar, con limitaciones, en un teléfono móvil.“¿Es más caro mantener una web conforme a estándares?” nospreguntan a veces. Podríamos responder ¿es más caro conseguir untexto redactado sin errores gramaticales? Se trata, en definitiva, deuna buena práctica que, si se conoce a fondo, surgeespontáneamente en el desarrollador web. Lo que sí es cierto es quepuede conllevar más días de desarrollo y comprobaciones. Uno delos puntos críticos que más dolores de cabeza traen a losdesarrolladores web es la compatibilidad entre navegadores. Losnavegadores web, como Firefox, Internet Explorer, Chrome, Safari,Opera, están en constante evolución y conviven, asimismo,92
    • internetizacióndiferentes versiones de los mismos, no todos siguen estándares o noen la misma medida por lo que lograr que una web se visualiceexactamente igual en todos ellos puede ser tarea imposible. Esto noes grave si las diferencias son accesorias y las funcionalidadesbásicas son accesibles en todos ellos.El W3C facilita en su página web validadores que analizanautomáticamente si el código de una web es conforme a estándaresy marca los errores que detecta para facilitar su corrección.Asimismo, es posible encontrar en la web servicios que comparan elaspecto de nuestra web en múltiples navegadores, sin tener quetener todos ellos instalados en nuestros ordenadores.AccesibilidadLa accesibilidad es una rama de los estándares web especializadaen facilitar el acceso a las webs a personas con discapacidad.En un sentido estricto, la accesibilidad, hace referencia a las ayudasque necesitan las personas con ceguera, sordera, movilidad reducidao discapacidad intelectual para navegar por internet. En un sentidoamplio, todos nos beneficiamos de una web accesible, del mismomodo que nos beneficiamos de las rampas en las aceras o de losascensores para minusválidos.Según el INE, en España hay más de 3 millones de personas conalgún tipo de discapacidad, pensemos en las personas con vistacansada que difícilmente pueden leer la diminuta tipografía dealgunas webs. Estas personas utilizan ayudas técnicas para navegary se benefician de algunas buenas prácticas de diseño web quedebemos conocer, por ejemplo: • Lectores de pantalla. Software que lee en voz alta las páginas web. Leen el código HTML por lo que no pueden leer texto escrito en una imagen. • Software reconocimiento de voz. Personas con movilidad reducida que no pueden manejar un ratón dan instrucciones de voz a sus ordenadores, que las interpretan y les permiten navegar. Ejemplo: “abre Google” 93
    • internetización • Una persona sorda se beneficia ampliamente de los vídeos subtitulados y, como es obvio, también lo agradeces si no dispones de altavoces o si no conoces el idioma y los subtítulos son además una traducciónPara diseñar webs accesibles existen unas guías denominadasWCAG. En 2008 se publicó la segunda versión. Son unas guíasextensas y complejas y seguirlas al pie de la letra puede resultartarea imposible. Por ello, hay que distinguir entre a accesibilidad realy la certificación. La real es aquella que, aunque no sigue todas laspautas al 100% facilita inmensamente la navegación y el consumo decontenidos de la web a personas con discapacidad. La accesibilidadcertificada es aquella que busca obtener el visto bueno deorganismos que revisan el nivel de accesibilidad de webs,especialmente las de la Administración. Según las pautas deaccesibilidad de la WAI (Web Accesibility Iniciative, dependiente delW3C) existen tres niveles de accesibilidad: • A . Es el nivel más básico y el que toda web debería cumplir • AA . Supone avances respecto al nivel A y es un añadido altamente recomendable • AAA . Es una gran accesibilidad y supone un esfuerzo lograrlo y mantenerloPara determinar si una web es accesible existen validadoresdisponibles gratuitamente en la Red, adicionalmente, me gustaaplicar algunos trucos: • Imágenes. Aunque las personas no notemos la diferencia, los navegadores no pueden leer los textos escritos en una imagen. Para averiguar si esto ocurre, intentaremos seleccionar y copiar un texto. Si no es posible, es que es una imagen y por tanto no accesible • Los lectores de pantalla de que disponen las personas ciegas tienen una opción que permite extraer todos los enlaces de una página y navegar por ellos sin necesidad de leer toda la página. Por ello, si usamos las mismas palabras para cada enlace, no hay forma de distinguirlos. Ejemplo incorrecto: “pincha aquí”, “pincha aquí”, “pincha aquí”. Ejemplo correcto: “accede a la factura” “accede al extracto” “accede a tus94
    • internetización puntos”. Además, si usamos textos significativos en los enlaces, también mejoraremos el SEO de nuestra web. • Uso de flash. Una infografía diseñada en flash debe ser navegable con el tabulador y ha de ser posible activar los enlaces pulsando “intro”. Si no es así, no es accesible.Una de las grandes ventajas de seguir estándares y pautas deaccesibilidad es que facilitamos el acceso de todo tipo dedispositivos, no sólo navegadores web. Los móviles, con suspequeñas pantallas, su ausencia de teclado o de ratón y tambiénGoogle, al que a menudo se alude como el “usuario ciego” másimportante, ya que su forma de rastrear la Red es similar a la de uninvidente, también podrán recorrer nuestras webs y contenidos ymostrarlos más fácilmente si seguimos las pautas del W3C.UsabilidadUsabilidad es un término que hace referencia a la facilidad de uso deun sitio web. Estamos acostumbrados a que la lavadora o elmicroondas vengan con un manual de instrucciones que consultamoscon desgana. Con internet y millones de páginas web leer lasinstrucciones para aprender a usar cada web sería imposible, por ellodeben ser tremendamente intuitivas y fáciles de usar. Esto se haconseguido a partir de las buenas prácticas de disciplinaspreexistentes como el diseño de software o la ergonomía así comode convenciones no escritas.En mis inicios como profesional de internet me dediqué a lausabilidad. Por aquel entonces estaba íntimamente ligada a laarquitectura de información y sigue estándolo aunque en realidad soncomo dos caras de una misma moneda. La arquitectura deinformación ayuda a realizar diseños usables y la usabilidad verificaque lo son. La aplicación de una metodología a lo largo del procesode diseño ayudará a alcanzar la máxima usabilidad.AntesEl proceso de diseño comienza con una fase de recopilación deinformación y análisis, es entonces cuando un focus group (grupode discusión) con usuarios representativos puede aportar datos 95
    • internetizaciónvaliosos sobre sus preferencias y expectativas que podremosincorporar al diseño de la web.Si ya existe una web previa y lo que queremos es mejorarla unexperto puede realizar una análisis heurístico en el que, medianteun checklist, revisará los puntos críticos.DuranteLos usuarios pueden tener su propio mapa mental sobre cómoesperan que sea la web, intentemos descubrirlo con técnicas como elcard sorting: escribiremos en fichas los nombres de las secciones ofuncionalidades de nuestra futura web y veamos cómo lasordenarían. Esto nos dará pistas sobre qué secciones oagrupaciones son más lógicas para ellos y evitaremos llamar a unasección Ocio cuando todo el mundo la llamaría Turismo.En este punto podremos ya definir “personas” o usuariosprototípicos que representan los casos de uso de nuestra web.DespuésEl instrumento para medir la usabilidad por excelencia es el test deusuarios, por eso le dedicaremos más espacio. Al contrario que elfocus group en el que un grupo de unos ocho usuarios se juntan enuna sala a debatir sobre una web o un tema, en el test los usuariosse enfrentan a solas a la web, en diversas etapas de su diseño(prototipo, boceto, primera versión...) para detectar errores básicos.Es especialmente útil antes de lanzar la web, para corregir problemasfundamentales que saldrán a la luz en cuanto la web comience a serusada por el público.Estos test se conducen por un especialista y consisten en una seriede tareas que simulan una sesión de navegación. El usuario debecompletarlas en un tiempo determinado o abandonarlas indicando asíque la usabilidad es mejorable. El propietario de la web puedeobservar el test desde otra sala a través de una cámara de circuitocerrado o de vídeos si el usuario acepta que se grabe la sesión.Un test de usuarios casero se puede realizar con un boceto en papelde nuestra web y unos amigos o familiares que no conozcan elproyecto. Se les muestran las hojas y se les pide que realicen unaacción, por ejemplo, hacer login en la página. Si pulsan en el botón o96
    • internetizaciónenlace adecuado les mostraremos otra página en la que introducirusuario y contraseña. La imaginación no tiene límites :-)El grado de sofisticación de los test no deja de avanzar, al lado de lostest caseros con unos pocos amigos tenemos: • tests automatizados que pueden realizarse a cientos de usuarios a la vez. • eye tracking: una cámara sigue el movimiento de nuestra pupila por las páginas de la web y detecta donde detenemos la mirada, qué zonas no visualizamos, hasta dónde hacemos scroll... • tests multivariable: si dudamos entre varias cabeceras o eslóganes para una página podemos testar las diversas combinaciones con ayuda del Optimizador de Páginas Web de GoogleUna fórmula alternativa si nuestros amigos no quieren hacer deconejillos de Indias es recurrir a webs que, por unos pocos euros,someterán nuestros diseños a usuarios voluntarios que testan webs.Existen múltiples técnicas para detectar a tiempo problemas en unaweb, conviene consultar con especialistas cuáles son las másadecuadas y aplicarlas. Su coste no es alto y ahorra gastos dedesarrollo al evitar tirar a la basura funcionalidades que el usuario nonecesita o no consigue usar tal como se diseñaron. Es importanteincluirlas en el ciclo de vida del producto y repetirlas periódicamentepara validar avances, detectar nuevos fallos, obsolescencias etc.Aunque hemos seleccionado los estándares, la accesibilidad y lausabilidad como las principales fórmulas para medir la calidad de unsitio existen metodologías mucho más exigentes y estrictas,especialmente en el campo de la programación que exceden elámbito de este manual. 97
    • internetización98
    • internetizaciónComunicación y promoción desitios webUna empresa, para dirigirse a su público objetivo, dispone dediversos recursos que están transformándose profundamenteempujados por la fuerza de internet. Nos referimos a laComunicación, las Relaciones Públicas (RRPP) y la Publicidad, cadavez más entrelazadas.Para entender mejor las diferencias entre unas y otras se puedetrazar un paralelismo entre estas tres disciplinas y lo que losanglosajones denominan medios owned (en propiedad), earned(ganados) y paid (comprados). La Comunicación equivaldría a losmedios owned, la Publicidad a los medios comprados o pagados y enun territorio intermedio se encontrarían los medios ganados gracias alas RRPP o a las otras dos técnicas.Comunicación y Relaciones PúblicasSi hay algo que ha cambiado y está cambiando con internet es lacomunicación. A menudo se habla místicamente de “laconversación”, en alusión a la primera tesis del Manifiesto Cluetrain:“los mercados son conversaciones”. Fue publicado en 1999 y merecela pena detenerse en algunos de sus puntos:1. Los mercados son conversaciones.4. Si las conversaciones humanas (...) son usualmente abiertas ynaturales ¿por qué cambiarlo?6. Internet está permitiendo conversaciones entre seres humanosque eran imposibles en la era de los Medios de Comunicación deMasas. 99
    • internetización15. En tan solo unos pocos años la homogénea voz de los negocios(el sonido de la visión, la misión y los folletos publicitarios) va a sonartan artificial como el lenguaje de la corte francesa del siglo XVIII.19. Las compañías pueden ahora comunicarse con su mercadodirectamente. Puede ser su última oportunidad si la desperdician.53. Se están llevando a cabo dos conversaciones. Una en el interiorde las compañías. La otra con el mercado.56. Estas dos conversaciones quieren encontrarse. Hablan el mismoidioma. Reconocen sus voces mútuamente.64. Queremos tener acceso a tu información corporativa, a tus planesy estrategias, a tus mejores ideas y a tu conocimiento genuino. Nonos vamos a conformar con tus folletos a cuatro colores, o con tuweb sobrecargada de chucherías visuales pero con muy pocasustancia.75. Si quieres que te dirijamos la palabra, dinos algo. Que sea algointeresante para variar.83. Queremos que trates a 50 millones de nosotros tan seriamentecomo tratas a un reportero de The Wall Street Journal.84. Conocemos algunas personas en tu empresa. Son buena gentecuando están "online". ¿Tienes más de esos escondidos por ahí?¿Pueden salir a jugar?90. Aún en el peor de los casos, nuestra nueva conversación es másinteresante que la mayoría de las ferias comerciales, más entretenidaque un programa de televisión y ciertamente más apegada a la vidareal que cualquier web corporativo que hayamos visitado.95. Estamos despertando y conectándonos. Estamos observando.Pero no estamos esperando.Instructivo ¿verdad? El paradigma de la comunicación estácambiando y en él conviven dos niveles. Se mantiene lacomunicación a través de intermediarios, si bien ésta estáexperimentando grandes cambios y crece con fuerza lacomunicación directa.La comunicación a través de intermediarios, fundamentalmente laprensa, sigue siendo ampliamente utilizada. El mecanismo habituales la nota de prensa que se remite a las agencias de noticias y a los100
    • internetizaciónmedios de comunicación para que la publiquen y llegar así a losusuarios finales.Los blogs irrumpen en escena desde una doble perspectiva decomunicación directa e indirecta. No siempre entran en el circuitohabitual de las notas de prensa, no obstante, su audiencia a veces esconsiderable y al estar dirigidos a nichos muy especializados puedenser el lugar idóneo para hacer llegar nuestro mensaje a nuestropúblico. Dirigirse a un blogger puede resultar atemorizante ya quereivindican una forma de comunicación más natural que la de lasanquilosadas notas de prensa y comunicados oficiales, pero esto nodebe paralizarnos. Seleccionar los blogs más afines temáticamente yleerlos durante un tiempo nos permitirá familiarizarnos con losautores y descubrir puntos de interés comunes. Ellos quierenproporcionar a sus lectores la mejor información y nosotros también,por ello, anunciarles una primicia o invitarlos a una demo de unproducto pueden ser fórmulas válidas para acercarnos a ellos.Los blogs, por otra parte, son una excelente vía de comunicacióndirecta con nuestros clientes. Empresas como Google, Facebook ytambién todos los pequeños negocios que surgen al calor de internet(start ups) cuentan con blogs corporativos donde hacen sus anunciosoficiales. Los periodistas no olvidan suscribirse a los mismos, perotambién bloggers y ciudadanos interesados en conocer las noticiasde primera mano.Los social media son otra de las fuerzas que está cambiando lacomunicación entre las empresas y su público. Engloban, no sólo alos blogs, un formato ya veterano, sino a las fanpages de Facebook,los micromensajes de Twitter, las fotos alojadas en Flickr, los vídeossubidos a Youtube, las presentaciones compartidas en Slideshare...Esto significa que internet ya no es sinónimo de página web. Lapresencia en internet se ha desdoblado en múltiples facetas. Delmismo modo que dábamos a nuestros clientes nuestro teléfono ynuestra dirección postal para que eligieran la mejor forma decomunicarse con nosotros, en estos momentos debemos abrir víasde comunicación en blogs, Facebook, Twitter, Youtube, Flickr,Slideshare, Linkedin y usar cada uno de estos canales de la formamás adecuada. Nuestro público más joven se encontrará en Tuenti,mientras que para distribuir información urgente será más útil Twitter.Si nos quedan dudas sobre si es conveniente que nuestra empresautilice estas herramientas planteémonos lo siguiente: si creáramos 101
    • internetizaciónuna empresa hoy en día ¿cómo nos comunicaríamos con nuestrosclientes y grupos de interés? Probablemente elegiríamos un blog.Entonces, ¿por qué no lo aplicamos a una empresa que ya tenga 5,10 ó 50 años?Y ¿quién es la persona idónea para ser el portavoz de nuestraempresa? Cualquier persona de nuestra empresa está transmitiendouna imagen de la misma y cualquiera puede representarla, sólo hacefalta encontrar el interlocutor más adecuado para cada foro. Si a uncongreso enviamos a nuestros mejores investigadores, ¿por qué nodesignar a las personas más adecuadas para dialogar a través decada canal? Una segunda opción es hacer recaer estaresponsabilidad en la figura del community manager (CM), elprofesional que gestiona, dinamizando y moderando la conversación,los social media.El protagonismo del usuarioDel mismo modo que nosotros tenemos múltiples vías paracomunicarnos con nuestro público y clientes, directa oindirectamente, ellos también pueden hacerlo, pueden elegir recibir lainformación e interactuar con nosotros a través de uno o varios deesos canales o preferir hacerlo a través de intermediarios. Losintermediarios son los medios de comunicación, los blogs deterceros, los amigos en Facebook que comentan nuestros productoso incluso nuestros hijos pueden serlo.Esta comunicación es bidireccional y los usuarios pueden respondera nuestros mensajes, de nuevo, directa o indirectamente. Puedenescribirnos a través del formulario de contacto de nuestra web oenviarnos un mensaje en Twitter. Pueden comentar nuestrosdocumentos publicados en SlideShare. Pueden marcar con un “megusta” nuestros mensajes en Facebook. O, por el contrario, puedenpublicar una opinión sobre nuestros productos en sus blogs o en lazona de comentarios de un periódico.En esta nueva comunicación el usuario, no lo olvidemos, seconvierte en protagonista al ser él mismo emisor y, si tiene graninfluencia a través de su blog o un grupo en Facebook, un prescriptorcapaz de influir en la opinión de otros consumidores.Es de este modo cómo las marcas han dejado de depender deldepartamento correspondiente y han pasado a ser lo que los102
    • internetizaciónusuarios dicen de ellas, incluso participando en la definición de losproductos. Millones de conversaciones, como vaticinaba el ManifiestoCluetrain, tienen lugar en la red y buena parte de ellas giran en tornoa artículos de consumo.La siguiente pregunta que nos hacemos es ¿cómo escuchamos anuestro público? Cuando se comunican directamente con nosotros,a través de nuestros canales de presencia en internet es sencillo,basta con escuchar y responder, en público o en privado. Cuandoeligen otros foros debemos utilizar herramientas para medir el buzz o“ruido” que generan y elegir el mejor canal para nuestra respuesta,porque no podemos quedarnos de brazos cruzados.Gestión de la reputación onlineSi cada vez el acceso de las personas a herramientas decomunicación social es más sencillo es lógico que los mensajes semultipliquen exponencialmente. El press clipping que recibía undirectivo a primera hora de la mañana recopilando las menciones enprensa a su persona o su compañía ya no es suficiente. Serviciosgratuitos como Socialmention o Addictomatic rastrean numerososmedios sociales y de masas para extraer lo que se está comentandoen torno a un concepto. Y van más allá, los categorizan, en unaaproximación a la web semántica, en mensajes positivos, neutros onegativos. La monitorización es en tiempo real y la cantidad de datosque arrojan es tal que comienza a ser necesaria la figura de unprofesional que analice la información, detecte errores y propongamejoras.La gestión de reputación online u ORM (online reputationmanagement) es una profesión emergente que consiste en hacer unseguimiento de un determinado tema en social media para lograr unaimagen positiva. Sin embargo, a menudo se queda en una operaciónde maquillaje o estética que no aborda el fondo de la cuestión. 103
    • internetización104
    • internetización 105
    • internetizaciónUn servicios pionero en España en la monitorización de los socialmedia fue Lastinfoo, tal vez muy adelantado a su tiempo. Unainiciativa más reciente es Gestiondereputacion.com, que nace de lanecesidad de gestionar nuestra identidad y reputación digital.Relaciones PúblicasLas fronteras entre Comunicación, Relaciones Públicas (RRPP) eincluso Atención al Cliente se están difuminando. Este es uno de losrasgos que caracterizan a la comunicación en la era 2.0, porque,cuando un usuario escribe una queja en su blog sobre un producto yla empresa responde en los comentarios ¿no está realizandofunciones de atención al cliente?Las RRPP se valen generalmente de los siguientes recursos pararealizar su función: presencia en ferias, exposiciones, congresos,patrocinio de eventos, mecenazgo cultural, publicacionescorporativas, notas y ruedas de prensa, plublirreportajes y siguenapareciendo nuevos formatos cada día.Al mencionar las fórmulas para acercarnos a los bloggers noshemos referido a este tipo de técnicas. Si deseamos dejar esta tareaen manos de terceros existen agencias de comunicación queidentifican blogs, tuiteros, grupos y comunidades afines a nuestrosector y posicionamiento. Bloguzz, por ejemplo, es una web quepone en contacto con bloggers a las marcas que desean lanzar opromocionar un producto. No existe un intercambio económico,simplemente, las empresas confían en la bondad de su producto ylos bloggers interesados en la temática eligen si lo reseñan y en quésentido, positivo o negativo.Una forma de identificar bloggers o tuiteros relacionados connuestros productos es recurrir a los rankings. En España el veteranoranking de Alianzo filtra por país, Comunidad Autónoma, categoría eidioma.En febrero de 2010 el ranking absoluto de blogs quedaba así:1 Microsiervos2 Barrapunto106
    • internetización3 Genbeta4 El blog de Enrique Dans5 Xataka6 Escolar.net7 VidaExtra8 Gadget Tecnologia9 Error50010 Kirai.NETY el de usuarios de Twitter más populares:1 @marilink - Marilín Gonzalo2 @edans - Enrique Dans3 @meneame_net - Menéame4 @HombresG - Hombres G5 @jlori - José Luis Orihuela6 @JavierCapitan - Javier Capitán7 @patxilopez - Patxi López8 @twittes - Rafael Peláez9 @alexpuig - Alex Puig10 @fotomaf - Mauro FuentesEste tipo de acciones también se pueden realizar directamente conconsumidores. TRND (The Real Network Dialog) es una comunidadde marketing participativo. Sus usuarios reciben en primicia nuevosproductos relacionados con sus intereses y los comentan con otrosmiembros o con sus familiares y amigos. Como dice su director, Sven 107
    • internetizaciónMulfinger, en declaraciones a Marketing News “En los tiemposactuales, cuando la publicidad unidireccional deja de convencer alconsumidor, se necesita cambiar las reglas del juego. El consumidorquiere ser escuchado e integrado en las estrategias de las marcas. Siel producto cumple con las expectativas, realizamos el sueño decada responsable de marketing: planificamos y desarrollamos unacampaña de boca a oreja a consumidores para que sean ellosquienes prescriban el producto a sus amigos, conocidos y familiares”.La multinacional de productos de limpieza del hogar Henkel, porejemplo, ha probado ya este sistema con los artículos de limpiezaTenn Brillante o Estrella.Nos hemos referido a fórmulas para llegar a nuestro público objetivodirecta e indirectamente y hemos mencionado la posibilidad de quese conviertan en prescriptores. Pues bien, gracias a internet lasRelaciones Públicas ha encontrado nuevas formas de amplificar losmensajes. Pensemos en la aplicación de Twitter, por ejemplo, en unCongreso o conferencia. Es posible: • retransmitir el congreso desde una cuenta oficial habilitada en Twitter • ser resumido por los propios asistentes o por quienes lo siguen a través de la retransmisión en vídeo mediante mensajes de menos de 140 caracteres. • Publicar imágenes del mismo tomadas con el móvil • seguirlo a través de la funcionalidad hashtag que agrupa todos los mensajes sobre un tema que se han marcado con una almohadilla (#) seguida de una palabra consensuada • ser comentado por los asistentes y por quienes lo siguen desde sus casas, generando conversación • enviar preguntas a los ponentes a través de Twitter, estés o no en la sala • proyectar los mensajes en una pantalla • en definitiva, generar conversaciónComo vemos, algo tan sencillo como Twitter crea un ecosistema deun potencial increíble.108
    • internetizaciónHemos elegido un ejemplo de aplicación de Twitter pero casossimilares se producen con otras herramientas de social media.Pensemos por ejemplo en la retransmisión de una carrera demotociclismo por rtve.es a la que se añade un módulo de Facebookpara que los aficionados comenten los adelantamientos entre sí.Retomando el Manifiesto Cluetrain que mencionábamos al principio,el lenguaje corporativo ha quedado anticuado, hay un nuevo diálogode tú a tú, entre personas, basado en la naturalidad y en larelevancia de los contenidos. Estamos invitados a participar, si no lohacemos, la conversación seguirá sin nosotros. 109
    • internetización110
    • internetizaciónPublicidadEn la Facultad de Periodismo nos enseñaron que la publicidadtambién es información pero... sólo la primera vez que la ves.Muchas personas admiran la creatividad publicitaria o son fieles amarcas que les han acompañado desde su infancia, sin embargo, elbombardeo y la saturación irrita a los usuarios, tanto a los que ven latelevisión y contemplan cómo la entrega de medallas de una finaldeportiva es interrumpida para insertar cinco minutos de spots comoa los que visitan una web y se encuentran un intersticial ocultando loscontenidos. Los usuarios, además, aprenden y son capaces de evitarlas zonas de la pantalla que ocupan los anuncios, fenómenoampliamente estudiado.La gestión de la publicidad en internet constituye, en sí misma, unaprofesión. Es un campo que no cesa de crecer, innovar yreinventarse. Desde los antiguos banners a los juegos para iPhonediseñados para dar a conocer un producto ha transcurrido unadécada pero lo mejor de todo es que estamos sólo en los inicios.En este capítulo repasaremos los principios básicos de lasprincipales modalidades de marketing online.Gestión de campañas publicitariasUna campaña publicitaria siempre perseguirá unos objetivosconcretos. Si es una nueva empresa la que se da a conocer o si hacambiado de nombre estará interesada en realizar campañas debranding o reconocimiento de marca. Una tienda puede marcarsecomo objetivo incrementar un 5% sus ventas o captar 5000 leads ocontactos de usuarios con los que establecer una relación comercial.Para lograr estos objetivos el ejecutivo de marketing dispondrá de unpresupuesto que deberá distribuir y una planificación que indiquela duración de las campañas en el tiempo o el número de impactosque se van a realizar.El reparto presupuestario tendrá en cuenta anuncios(“creatividades”), soportes y formatos. A partir de un documento de 111
    • internetizaciónbriefing en el que se habrán descrito los objetivos la agencia creativacontratada diseñará los anuncios en sus diversos formatos:robapáginas, rascacielos, banner... La agencia de planificación, porsu parte, seleccionará los mejores lugares (“soportes”) donde ubicarlos anuncios y establecerá el número de veces que se mostrará cadacreatividad, lo que en la jerga se conoce como “impresiones”. Por“soportes” en el mundo publicitario se hace referencia a las webs enlas que se insertan las creatividades y que normalmente son mediosonline, aunque también pueden ser aplicaciones como LiveMessenger.Para una correcta planificación se hace imprescindible lasegmentación; debemos conocer el perfil de nuestro público opúblicos y saber dónde localizarlos. Los usuarios más jóvenes, porejemplo, son muy activos en redes sociales mientras que existenwebs orientadas a aficionados al mundo de los deportes o de losviajes. Si buscamos un público generalista o un gran impacto nadacomo una campaña en la página principal de los medios online másvisitados, dato que se puede obtener en la web de OJD Interactiva.Ejemplo ficticio de campaña:Soporte Sección Formato CPM Impresiones TotalElmundo.es Home intersticial 20 € 250.000 5000 €Paginas Callejero robapáginas 25 € 100.000 2500 €AmarillasYahoo! Finanzas rascacielos 30 € 150.000 4500 €Un análisis continuo de la rentabilidad de cada inversión nospermitirá corregir desviaciones y realizar cambios en la campaña entodo momento.112
    • internetizaciónPublicidad gráfica (display)Los anuncios gráficos que vemos al navegar por internet sedenominan banners o display, por oposición a los anuncios que sólocontienen texto.Sus características están normalizadas por la IAB, InternetAdvertising Bureau, con matriz en Estados Unidos y con oficinatambién en España. En sus webs encontrarás documentosespecificando los formatos existentes con sus correspondientesdimensiones, los pesos máximos aconsejados y otras normasprácticas.Este proceso de estandarización de los formatos es necesario yaque permite diseñar las creatividades una sola vez e insertarlas enmúltiples webs que tienen un espacio reservado para mostrarpublicidad. Si los tamaños no fueran homogéneos deberíamosdiseñar banners específicos para cada soporte.Los primeros banners y botones publicitarios tenían unasdimensiones moderadas pero la tendencia de los lectores a evitarlosllevó a los anunciantes a definir formatos de mayor tamaño, es asícomo el banner de 468x60 píxeles quedó en desuso y fue sustituidopor: • megabanners (728x90) • robapáginas (300x250; 300x300 y 200x200) • rascacielos (100x600 y 120x600)Existen formatos más agresivos, como los intersticiales, que tapan lapantalla por completo durante unos segundos.Un anuncio siempre debe llevar un enlace a una página dedestino en la que el usuario encontrará más información. Estapágina de destino puede ser una página genérica o preexistente opuede ser diseñada específicamente para la campaña, se denominalanding page o página de aterrizaje.Los anuncios de tipo display han evolucionado sin cesar desde queaparecieron los primeros GIFs animados. Hoy en día, son capacesde incorporar vídeo y sonido, desplegarse al posar el ratón sobreellos o incorporar interactividad (juegos, selección de opciones,botones de control...). Esto es posible gracias a la tecnología flash, 113
    • internetizaciónque es dominante en el mercado publicitario, gracias a su potencialcomunicativo.Para evitar irritar a los usuarios la IAB ha establecido algunasrecomendaciones como no activar el audio por defecto, ya que esrealmente molesto abrir una página web y que se inicie el sonido porsorpresa. Asimismo, los intersticiales y otros formatos invasivosdeberán incluir un aspa en un extremo que permita cerrarlos y un “iral contenido”.Si tenemos dudas sobre la efectividad de una creatividad o queremosdirigirnos a públicos distintos es buena idea diseñar varias versionesque incluyan algún matiz. Esto nos servirá también para testar cuálobtiene mejores resultados y analizar el por qué: el claim, lasimágenes...Al contratar una creatividad a un diseñador o una agencia lo másadecuado es redactar un briefing en el que detallemos los objetivos yrequerimientos que deben cumplir, tanto técnicos como de identidadcorporativa y tono del mensaje. Es conveniente que esté alineadacon el resto de campañas en curso.Al contratar la campaña debemos tener en cuenta el número deveces que una página es visualizada. Por ejemplo, la portada de undiario de gran audiencia como Marca recibe cientos de miles devisitas mientras que hay webs con sólo unos centenares de usuarios.Windows Live Messenger es capaz de solicitar millones deimpresiones del anuncio al servidor donde está alojado, llegando asaturar la plataforma si no está preparada para un uso tan intensivo.Una forma de maximizar nuestra inversión publicitaria es limitar elnúmero de impresiones a una por sesión, de forma que el usuariosólo reciba una vez por visita el impacto publicitario, aunque estévarios minutos navegando por la misma web. Las posibilidades desegmentación son muy variadas, por ejemplo, es posible mostraranuncios específicos a usuarios que se conectan desde undeterminado país o en ciertas franjas horarias.Una modalidad de publicidad gráfica son los patrocinios, mediantelos cuales una empresa esponsoriza una sección o unafuncionalidad. Por ejemplo, una operadora de telefonía móvil puedepatrocinar la sección de tecnología de un diario o una empresa delIBEX 35 asociar su marca a una página de finanzas.114
    • internetización El buscador de Expansion.com está patrocinado por IberdrolaMarketing en buscadores (SEM)El marketing en buscadores (SEM o search engine marketing)surge para dar respuesta a los anunciantes que no logran apareceren la primera página de resultados cuando el usuario realiza unabúsqueda de palabras clave en las que se quiere posicionar.Imaginemos que nos especializamos en la venta de “naranjas parazumo” pero no aparece nuestra web cuando alguien realiza dichabúsqueda en Google o Bing, la solución que ofrece el SEM es“comprar” las primeras posiciones.Estos anuncios se componen sólo de texto, generalmente constande: • título clicable • entradilla • dominio del anuncianteSiempre están identificados como “enlaces patrocinados” pero deforma tan sutil que muchos usuarios no lo perciben. 115
    • internetización Los enlaces patrocinados permiten aparecer en los primeros puestosPara contratar estos anuncios se especifican las palabras clave porlas que se desea aparecer. Algunas están muy competidas, como“viajes” y puede resultar muy caro comprar una buena posición.Tanto Google como Yahoo! y Bing aceptan esta modalidadpublicitaria. En el caso de Google, es su principal fuente de ingresosy dispone de utilidades gratuitas para calcular cuánto puede costaruna campaña. Ejemplo:116
    • internetización Google permite calcular el coste de una campañaAdWords de Google fue el primer ejemplo de esta modalidadpublicitaria. Al no necesitar creatividades y adaptarse a todo tipo depresupuestos, desde 50 € a millones de dólares, se hizo rápidamentepopular. Progresivamente, ha ido extendiendo el formato AdWords aotros de sus servicios, como Gmail o Youtube.El sistema se basa en la “lectura” de los textos a los que acompaña,mostrando información relacionada. Por ejemplo, si escribimos uncorreo mencionando que queremos aprender italiano es muyprobable que aparezcan anuncios por palabras de academias deidiomas o de viajes a Roma. Cuando fue incorporado a Gmail,Google recibió duras críticas de usuarios que consideraban que elbuscador estaba violando la privacidad de las comunicaciones al“leer” sus correos.Google extendió este modelo publicitario a todos los sitios web que losolicitaran mediante el programa AdSense. Si gestionas un sitio webpuedes abrir una cuenta de Adsense, obtener el códigocorrespondiente, insertarlo en los espacios de tu web que consideresmás adecuados y en pocas horas comenzar a mostrar anunciosrelacionados con tus contenidos. Por ejemplo, si escribes un blogsobre literatura se mostrarán anuncios relacionados, como nuevos 117
    • internetizaciónlibros, talleres de escritura, editoriales... Es lo que se denominapublicidad contextual.El anunciante paga por clic, es decir, cada vez que un usuario pinchaen el anuncio y es dirigido a su web Google recauda una pequeñacantidad que comparte con el dueño de la web en la que haaparecido el anuncio. La cantidad que se paga por cada clic puedevariar desde unos céntimos a varios euros, aunque esto último no eslo habitual.El sistema siempre ha sido criticado por su falta de transparencia yperiódicamente surgen noticias y debates sobre el porcentaje que sereserva Google o si limita los ingresos máximos que puede obtenercada web.El programa Adsense ha dado origen a toda una generación dewebmasters que han logrado gracias a este sistema ingresossuficientes para pagar los gastos de mantenimiento de su web, algúncapricho o incluso el equivalente a un sueldo mensual. No obstante,se crea una dependencia de Google y su algoritmo. Un día puedesrecibir miles de visitas y a los pocos meses empeorar tuposicionamiento y ver desaparecer estos ingresos. Por ello, esrecomendable combinarlo con otras fuentes de ingresos, publicitarioso no.En el lado más gris de los anuncios contextuales se encuentrancasos como los clics fraudulentos o los clics involuntarios. Losanuncios contextuales se pueden personalizar para que encajenmejor con el diseño de tu web, sin embargo algunos websmasterseligen colores que hacen que se confundan con contenidos, llevandoa usuarios inexpertos a hacer clic por error. Adsense también da laposibilidad de configurar en qué lugar de la página se inserta lapublicidad y no es extraño llegar a páginas en las que es difícilencontrar los contenidos entre tantos anuncios. Un error que no hayque cometer es hacer clic en un anuncio publicado en nuestra páginaweb, ya que eso genera un pago fraudulento para el anunciante. Estapráctica está penalizada por Google, que continuamente introducemejoras en los formatos para ofrecer a sus clientes mayoresgarantías.Para lograr ingresos significativos mediante Adsense una webnecesita muchas visitas y visualizaciones de página, ya que se tratade nanopagos, esto a veces lleva a los generadores de contenidos acentrarse más en la cantidad que en la calidad. Al ser un modelo muy118
    • internetizaciónimitado y crecer a mayor ritmo que la inversión publicitaria, se hallegado a producir un efecto burbuja.Un debate que se reabre periódicamente es el de la compra depalabras clave que se corresponden con marcas. ¿Sería licito, porejemplo, que Movistar comprara aparecer en los primeros resultadosde búsqueda cuando alguien introduce el término “Vodafone”? La UEha dicho que sí.El modelo publicitario que acabamos de estudiar ha significado todoun éxito para Google, ya que constituye su principal fuente deingresos.E-mail marketingDesde sus inicios, el email fue considerado un eficiente instrumentode marketing directo. Los correos electrónicos publicitarios permitenenviar mensajes segmentados a clientes actuales o potenciales. Sonútiles para comunicar el lanzamiento de un nuevo producto o unaoferta especial. Antes de enviar este tipo de contenidos debemoscontar con la autorización expresa del destinatario para recibirmensajes publicitarios.Los usuarios reciben decenas de correos al día por lo que, paradiferenciarnos y llamar su atención, debemos controlar aspectoscomo el “asunto” del mensaje o la periodicidad de los correos. Amedida que realicemos más envíos aprenderemos a identificar qué“asuntos” son mejor recibidos por los receptores y detectaremos elritmo más adecuado. Por ejemplo, enviar correos semanales conofertas pueden hacer que los correos pasen desapercibidos mientrasque remitirlos cuando el usuario más los vaya a necesitar, porejemplo, una oferta de vacaciones justo antes del verano, aumentaráel ratio de respuesta.Las aplicaciones de emailing permiten medir la efectividad de lascampañas y conocer cuántos correos llegaron a su destino, cuántosfueron abiertos, en qué enlaces pincharon los usuarios, si fueronreenviados o si las cuentas de correo ya no existen. Especialatención debemos prestar a las solicitudes de baja, que puedenindicar malestar entre los usuarios. 119
    • internetizaciónLa solicitud de baja es un requisito que debe incluir cualquieremailing, así como la identificación del mensaje como publicitario.No todos los programas de correo electrónico muestran igual losmensajes, especialmente si son HTML. Es habitual que, para evitarusos fraudulentos, muchos bloqueen las imágenes y no lasmuestren. Para garantizar que el destinatario pueda leer el mensajees una buena práctica incluir al principio un enlace a una versión webdel contenido.La publicidad no solicitada o spam es ampliamente rechazada por losusuarios. Más aún, los fraudes a través del correo electrónico(phishing, scam...) han sensibilizado al público, que sólo abreaquellos correos de remitentes en los que confía.Publicidad en el móvil, en vídeos y videojuegosLa inversión en publicidad en el móvil crece cada año y lasprevisiones son optimistas. Los anunciantes valoran lapersonalización, la cercanía y el acceso al cliente en cualquiermomento del día. Diversos estudios recogen la disponibilidad demuchos usuarios a recibir publicidad en sus móviles a cambio dellamadas gratis.Es un formato que aún se está desarrollando, los códigos BIDI(bidimensionales) pueden ser “leídos” por la cámara del móvil yampliar así la información sobre una promoción. Mediante bluetooth,muchas compañías lanzan guiños a los usuarios que mientrascaminan cerca de una valla publicitaria o cuando entran en un centrocomercial reciben mensajes personalizados.Con el iPhone y terminales diseñados para navegar por internet lapublicidad en el móvil amplía sus posibilidades, limitadas hasta ahorapor el tamaño de las pantallas o la ausencia de tarifas planas paradatos. En abril de 2010 Apple anunciaba el lanzamiento de iAd, suplataforma de publicidad en el móvil, que pretende extraer todo elpotencial a los anuncios y no limitarlos a diminutos banners.Un ejemplo imaginativo de publicidad en el móvil son los juegos quehan utilizado algunos fabricantes de coches para comunicar susnuevos modelos. Por ejemplo, Toyota lanzó una aplicación paraiPhone para promocionar su vehículo híbrido Toyota Prius.120
    • internetizaciónMientras se generalizan estos terminales, los formatos máshabituales son: • enlaces • SMS y MMS • bannersComo siempre, la IAB ha normalizado las dimensiones, pesos ybuenas prácticas.El consumo de vídeo ha cautivado a los usuarios, que no cesan decrear y visionar contenidos audiovisuales. La explotación publicitariade los vídeos, sin embargo, aún no está resuelta. Los vídeos incluyenpublicidad de tipo Adwords en la página en la que están insertados,pero, al no estar transcritos los textos o descritas las imágenes quecontienen no es sencillo aplicar este formato a material audiovisual.Las breves inserciones publicitarias que se emiten antes del inicio deun vídeo se denominan pre-roll, pero también existe in-roll y post-roll.Asimismo, la publicidad se puede superponer a la imagen sin llegar aocultar por completo el contenido. Siempre se debe dar al usuario laposibilidad de saltar o cerrar la publicidad y, por supuesto, tambiénincluir un enlace a una web de destino con más información.La publicidad en los vídeos está en sus fases iniciales de desarrollo ypor el momento no es cómoda para el usuario ya que imita el modelotelevisivo de interrumpir al espectador. En internet, donde lavelocidad y la multitarea son la norma, los usuarios son reacios aesperar 15 segundos a que transcurra un spot.Un modelo inspirador para la publicidad en los vídeos es el mercadode los videojuegos, que incorpora el product placement ointegración de marcas en el escenario del juego. Por ejemplo,marcas de coches en un videojuego de carreras. Periódicamente esnoticia alguna aplicación que permite comprar la cazadora que vistetu actor favorito en tu película favorita, pero de momento no se puederealizar con un simple clic sobre la prenda. 121
    • internetización122
    • internetizaciónPosicionamiento en buscadores (SEO)SEO son las siglas de Search Engine Optimization, es decir,optimización de sitios web para buscadores. La profesión está muyvinculada al buscador dominante en estos momentos, Google. Antesde la aparición de Google en 1998 los buscadores no eran muyeficientes. Si encontrabas una web interesante la guardabas en“favoritos” ya que no era probable que la volvieras a encontrar. ConGoogle todo eso cambió. Google revolucionó la forma en que secategorizaba la información al idear un nuevo sistema: si muchasweb enlazaban a un mismo sitio cuando hablaban de pesca esodebía significar que era la mejor web sobre pesca. Googleaprovechaba la labor de clasificación que realizaban los sereshumanos para construir su índice. Este principio fue la base de sualgoritmo de búsqueda que ha evolucionado mucho desde entoncesy sigue actualizándose continuamente. Es una fórmula secreta y losprofesionales SEO siempre intentan desvelar sus claves.Google acapara el mercado de buscadores, en España las fuentessiempre le atribuyen una penetración en torno al 95% y en EstadosUnidos ronda el 65%. Si a ello sumamos que habitualmente elusuario selecciona uno de los primeros resultados que aparecenentenderemos la obsesión de los webmasters por aparecer losprimeros en Google. Es así como surge el SEO como profesión.El posicionamiento obtenido en buscadores se denomina orgánicopor oposición a los anuncios patrocinados que aparecenartificialmente en las primeras posiciones y que se compran condinero.Muchas webs desarrolladas antes del nacimiento de Google noseguían las “gramáticas” del W3C, siendo muy difícil para losbuscadores rastrear su contenido. Los desarrolladores pronto sedieron cuenta de que siguiendo algunas de estas pautas sus websposicionaban mejor: • construcción de webs con HTML en lugar de tecnologías como Flash, que dificultan la indexación • separar los contenidos de la web de la capa de presentación (colores, márgenes, estilos...) mediante hojas de estilo (CSS) 123
    • internetización • inclusión de las etiquetas <title> y <meta> con el título individualizado de cada página y las palabras clave y descripción de la página. Son los contenidos que aparecen en buscadores y que utilizan los usuarios para hacer clic en una web o en otra: • imágenes con texto alternativo • encabezados (h1, h2) con palabras clave • evitar javascript y frames, ya que no son fácilmente indexables por los buscadoresLas webs de nueva creación incorporaban estas prácticas y seposicionaban mejor, por lo que las webs veteranas necesitabanadaptarse para no perder visibilidad. Este fue el caldo de cultivo parala profesión de SEO.La lista de recomendaciones SEO es extensa y se actualizacontinuamente. Citamos algunas más: • URL semánticas, amigables, inteligibles por el ser humano • mapa web que pueda rastrear el buscador (sitemap) • adecuada densidad de palabras clave en los contenidos • alta frecuencia de actualización • contenidos originalesEste es un ejemplo de URL que favorece el posicionamiento:www.ejemplo.com/los-mejores-trucos-para-escritoresEn el extremo opuesto se situarían las URL formadas por caracteresilegibles. La URL es valorada positivamente por Google pero tambiénes útil a los usuarios que nos gusta leer una URL antes de pinchar enella. En el fondo, los buscadores imitan a las personas y premian124
    • internetizaciónaquello que nos facilita el uso de la web, penalizando las malasprácticas.Además de estos aspectos internos de cada web, para el SEO esimportante una adecuada política de enlaces: a qué webs teasimilas, a cuáles admiras, a quién enlazas... Todo eso da pistas alos buscadores para clasificarte.No son menos importantes los enlaces entrantes. Los expertos enSEO saben perfectamente lo valioso que es un enlace de sitios comoMenéame. Menéame es una web en la que los usuarios proponennoticias leídas en otros medios y las más votadas aparecen enportada. Ricardo Galli, su fundador, explica que el título de lasnoticias publicadas en Menéame se marcan en el código fuente conun h1, lo que significa que le dan la máxima importancia dentro de lapágina. Esto supone que al poco de ser promocionada a portada enMenéame una noticia indexa la primera en Google y, a las pocashoras, una vez el buscador ha identificado la fuente original, ésteaparece ya en primer lugar. Esto ha llevado a muchos SEO a crearseperfiles falsos en este social media para poder votar repetidamentelas noticias que envían y falsear así el ranking.La estrategia de consecución de enlaces entrantes se denomina linkbuilding y link baiting a la consecución de enlaces a través de uncontenido muy atractivo que muchas webs enlazan.Un concepto asociado al SEO es el denominado PageRank, queclasifica del 1 al 10 las webs. Muy pocas tienen la categoría 10 y un 7ya es un gran éxito. Un enlace desde una web con un PR elevadoaupaba a la web a la que enlazaba. Sin embargo, se considera queeste criterio cada día tiene menos peso. Nadie sabe con certeza quévalora el algoritmo de Google, entre otras cosas porquecontinuamente cambia, tan sólo tenemos pistas. Por ejemplo, laantigüedad de una web suma puntos y las URL no semánticas peroindexadas desde hace años no se ven penalizadas.Un proceso al que tarde o temprano se enfrenta toda web es a unrediseño o una migración que puede incluir un cambio en la sintaxisde sus URL. Una web puede tener cientos de enlaces entrantes ydejarlos rotos por un cambio de URL es dramático. Por eso, Googletiene previstos unos redireccionamientos (301 y 302) para atravesarsin daños un proceso como este. 125
    • internetizaciónEl sitemap es otra herramienta que Google pone en manos de losdesarrolladores web para facilitar la indexación de sus páginas,especialmente cuando son dinámicas. Se trata de una recopilaciónde todas las URL de un sitio web destinada a ser indexada por losbuscadores. Puede darse el caso de que no deseemos que la websea indexada o se excluyan del rastreo algunas de sus páginas, paraello, editaremos el fichero robots.txt, que es el primero que lee unbuscador.Se denomina white hat SEO al que realiza prácticas éticas y blackhat SEO a quien recurre a técnicas dudosas para mejorar lavisibilidad de su web. Por ejemplo: incluir texto oculto para losusuarios pero no para las robots “araña” que rastrean las webs paraindexarlas o lograr enlaces en webs de dudosa reputación. Losingenieros de Google continuamente rastrean este tipo de prácticaspara contrarrestarlas, llegando a banear (prohibir, vetar) las páginassi es necesario.Lo cierto es que en SEO, el proceso para arañar algunas posicionesen el ranking se parece un poco a una carrera de F1 en la quepequeños detalles pueden dar la victoria.Los profesionales SEO no trabajan solos sino que los buscadorescuentan con aplicaciones que les facilitan la revisión de los sitios webpara mejorar su posicionamiento. Entre las herramientas máspopulares se encuentran las Webmasters Tools de Google o Bing ola Keyword Tool de Google Adwords.La gran clave para un buen posicionamiento son los contenidos decalidad, tanto desde el punto de vista del usuario que los va aconsumir y que quiere encontrar la mejor información y las mejoresreferencias como desde el punto de vista de los robots que recorrenlas webs y que estan ávidas de enlaces a contenidos relacionados yde palabras clave, aunque sin pasarse. Los buscadores, además,valoran que se publiquen contenidos con frecuencia. Una web quepublique varias veces al día puede conseguir que sus contenidosaparezcan en los resultados de Google en minutos mientras quewebs que se actualizan pocas veces al año tardan mucho mástiempo en ver sus nuevos contenidos indexados.La disciplina SEO evoluciona con internet. La penúltima batalla deGoogle por mejorar su algoritmo, criticado por ofrecer contenidoscada vez menos fiables, es discriminar a las denominadas granjasde contenidos, webs que producen contenidos de baja calidad en126
    • internetizacióngrandes volúmenes y que, sacando el máximo partido al SEOposicionan muy bien, relegando de los primeros puestos a páginascon mejores contenidos pero no tan orientadas al SEO.Uno de los últimos cambios que admitido Google que ha introducidoen su algoritmo es la consideración de los social media como factorimportante para posicionar una web: un sitio que reciba numerosasmenciones en Twitter o Facebook, aunque no tenga enlacesentrantes de otras webs puede obtener un magníficoposicionamiento.En internet se pueden encontrar gráficos y recursos que resumen lastareas que hay que llevar a cabo para definir una adecuadaestrategia SEO: comienza con la creación de contenido de actualidadfácilmente accesible por buscadores, continúa con un proceso deselección de palabras clave en las que nos deseamos posicionar ytermina con el uso de los social media, las relaciones con losusuarios para conseguir más visibilidad para nuestros contenidos.Uno de los más conocidos es La Pirámide SEO de SEOmoz.org queamablemente nos ha permitido reproducir. También la puedes visitaren http://www.seomoz.org/img/upload/seo-pyramid-large.gif. 127
    • internetización Courtesy of SEOmoz at SEOmoz.org128
    • internetizaciónSocial Media Marketing (SMM)A grandes rasgos, por “social media” entendemos el conjunto demedios de comunicación en los que la información es generada porlos usuarios: Facebook, Twitter, YouTube, Menéame, Flickr,Slideshare, Instagram, blogs... El Social Media Marketing persigueutilizar dichos canales como herramienta de marketing de una formaorganizada y coordinada por un Social Media Manager.La publicidad en internet ha atravesado al menos dos etapas y seadentra en una nueva. La primera la protagonizaron los “banners”,denominados display por oposición a los anuncios sólo de texto queaparecieron de la mano de los programas de Google AdWords yAdSense.Google trajo el automatismo y el “sírvase usted mismo” al mundo dela publicidad creando un mercado en el que los anunciantes creabansus mensajes, elegían los criterios por los que deseaban serencontrados. El buscador cruzaba los datos y mostraba en suspáginas de resultados los anuncios que habían pagado por laspalabras clave de búsqueda.Posteriormente, este sistema fue extendido por Google a todas laswebs que desearan mostrar publicidad en sus páginas. Elmecanismo era el mismo: los anunciantes creaban los textos, loswebmasters habilitaban el módulo de Adsense en sus webs y Googlemostraba los anuncios en las páginas con contenido relacionado.En los últimos años, algunos proyectos han atraído a millones deusuarios, creando un entorno propicio para la venta de espaciopublicitario, pero ¿cómo hacerlo? Lo cierto es que aún se estáinventando. Para adentrarse con éxito en este territorio se haceimprescindible comenzar por el diseño de una estrategia, alineadacon la estrategia de compañía, que incorpore como pasos inevitablesla escucha y monitorización de las redes sociales, como veíamos enel apartado sobre Gestión de Reputación, y la posterior actuación encada uno de los canales, escuchando y dialogando con los clientesde la marca. Finalmente, realizaremos una medición de los avancesy de los resultados para continuar afinando nuestras acciones ensocial media. 129
    • internetizaciónFacebookFacebook, con 500 millones de usuarios en el verano de 2010 es elequivalente al cuarto país más poblado del mundo. Las formaspublicitarias de comunicar un contenido en Facebook sonfundamentalmente dos: • comprando espacio publicitario • viralidadEn ambos casos nos encontramos formatos novedosos, si bien aúninmaduros.La publicidad incorpora como grandes novedades la máximasegmentación y las votaciones de usuarios. En función de los datosque has declarado (sexo, edad, intereses, localidad...) verásanuncios diferentes.En Facebook puedes ver la actividad de tus amigos y conocidos porlo que, una aplicación o una noticia, tiene una audiencia cautiva. Estaaudiencia, a su vez, puede comentarla, participar o amplificarla enotras redes sociales o en el propio FB invitando a tus amigos aprobar el juego o competir en el test. Grupos iniciados porciudadanos anónimos han conseguido decenas de miles deseguidores basándose únicamente en esta forma de viralidad.130
    • internetizaciónTwitterJapón fue el primer país en el que el popular programa de micro-blogging comenzó a obtener ingresos gracias a la publicidad. En elresto del mundo sus ingresos se basaban en acuerdos con losgrandes buscadores para que éstos puedan incluir sus contenidos ensus resultados hasta que en abril de 2010 comenzó a aceptar“promoted tweets”, que aparecen en primer lugar al realizarbúsquedas. La cadena de cafeterías Starbucks fue uno de losprimeros anunciantes: 131
    • internetizaciónEn estos momentos, además de los tuits promocionados losanunciantes pueden contratar “trends” o “accounts”, es decir puedenpublicitarse en los “trending topics” (temas del momento) o en “Whoto follow” (a quién seguir, cuentas sugeridas).El social media marketing no se refiere únicamente a la compra deespacios publicitarios sino a la optimización de la presencia enblogs y redes sociales: generando contenidos que atraigan laatención de los usuarios, dinamizando los perfiles en Facebook oTwitter... En definitiva, buscando incrementar nuestra presencia y elconocimiento y valoración positivos por parte de los usuarios.Retorno de la inversión (ROI)Coca-cola ha cambiado la forma de remunerar a sus agencias depublicidad y ha introducido el pago por resultados. Esta práctica, muyconocida por los profesionales, se comienza a trasladar al mundo dela publicidad. Ignacio del Corro, profesor de marketing en ESIC,recalca una y otra vez a sus alumnos que la mejor publicidad no es laque gana más premios sino la que incrementa las ventas. Coninternet, donde todo es medible, una nueva forma de entender elmarketing se impone. El ROI, siglas de Return of Investment o “retorno de lainversión” hacen alusión a los ingresos obtenidos por cada unidad degasto. Simplificadamente, si pagamos 1 euro por cada clic que serealiza en un anuncio de nuestros productos el margen queobtengamos por la venta debe ser superior a un euro. En las campañas publicitarias este cálculo se realizaconstantemente y los ratios son diferentes para cada soporte. Sidetectamos que la inversión no se está rentabilizando, es elmomento de hacer ajustes. En el caso de las campañas de branding la medición norecae únicamente en datos cuantitativos y es necesario recurrir aencuestas y estudios sobre reconocimiento, notoriedad, lealtad a lamarca.132
    • internetizaciónComienza tu propio proyectoHemos realizado un recorrido por las distintas fases que atraviesa unproyecto web. Si antes de leer el libro ya sentías el gusanillo de crearun proyecto seguramente ahora el sentimiento se ha incrementado.Por ello, es conveniente conocer un poco sobre el mercado deinternet en España y en el mundo, cuántos usuarios hay, cómo son,qué significan conceptos como web 2.0, qué modelos de negocioexisten, qué casos de éxito se han producido y saber más sobre lacomunidad de emprendedores online españoles.Internet en España y en el mundoSi comparamos internet con tecnologías anteriores, como laelectricidad o el ferrocarril nos damos cuenta de que queda muchocamino por recorrer, aún no se han iluminado todas las calles, no seha inventado la lavadora y el tren se mueve a vapor. Se ha logradoque internet llegue a millones de hogares y contamos con anchos debanda que nos permiten ver películas pero la historia no ha hechomás que comenzar. En el mundo hay 2000 millones de internautas,la mayoría viven en Asia y los mayores porcentajes de penetraciónse dan en los países nórdicos, con ratios que superan el 80%. EnEspaña somos 25 millones pero otra revolución se está fraguando:internet en el móvil. 5000 millones de personas disponen de teléfonomóvil y en torno a 2014 se espera que el acceso a internet desde elmóvil supere al acceso desde ordenadores. Y nuevas fronterasesperan en el horizonte, como la “internet de las cosas”, que auguraun futuro en el que los objetos, conectados mediante sensores,enviarán también información.Pero ¿cómo somos los usuarios de internet? Veamos algunos datosde Estados Unidos que se pueden extrapolar a otros países.Las actividades que realizamos online varían según nuestra edad.Los veinteañeros son los que marcan el ritmo: el 67% usa redessociales, el servicio más popular del momento y son los responsablesdel éxito de YouTube, ya que son grandes aficionados al consumo devídeos. Los treintañeros llevan más tiempo usando internet y realizanun uso más “adulto”, como transacciones bancarias o lectura de 133
    • internetizaciónnoticias. Los adolescentes, por el contrario, nos indican qué serviciosserán populares en los próximos años, como los mundos virtuales.Son también muy activos en el uso de mensajería instantánea ycreación y lectura de blogs. Los usuarios de más edad, por último,son los más proclives a buscar información sobre salud online.A continuación podemos ver una tabla elaborada por USA Today apartir de diversas fuentes.134
    • internetización 135
    • internetizaciónLa consultora Forrester ha clasificado a los usuarios por su grado departicipación en internet. En un extremo de la escala se encuentranlos “Creadores”, que escriben blogs y publican vídeos en YouTube.En el otro extremo tenemos a los “Espectadores” y a los “ Inactivos”que se limitan a consumir lo que los primeros crean o directamenteno consumen contenidos. En la zona intermedia encontramos aperfiles como los “Críticos”, que comentan en blogs o los“Coleccionistas”, que clasifican las páginas, se suscriben, etc.Hemos hablado de los usuarios pero ¿y las empresas? Según elorganismo público Red.es el 96,2% de las empresas españolas tieneacceso a internet y el 59% tiene página web, aunque este porcentajevaría según el tamaño de la empresa. Entre las grandes empresas elporcentaje asciende al 91%.Los objetivos o servicios de las webs de empresa son,fundamentalmente, presentar la compañía y dar acceso a sucatálogo de productos, como se puede observar en el gráfico delONTSI.Por sectores, es el de la Construcción el que menos explota elpotencial de internet.136
    • internetización 137
    • internetizaciónPor último, cerramos el epígrafe refiriéndonos a los rankings de websmás visitadas en Estados Unidos y en España.Según Quantcast:1 google.com2 facebook.com3 yahoo.com4 msn.com5 youtube.com6 microsoft.com7 live.com8 aol.com9 wikipedia.org10 ebay.com11 amazon.com12 ask.com13 weather.com14 answers.com15 blogspot.com16 myspace.com17 craigslist.org18 about.com19 bing.com20 ehow.comPara que nos hagamos una idea del orden de magnitudes de quehablamos, Google sumaría 155 millones de usuarios mensuales yFacebook 136.En la cúspide de la lista aparecen representantes de los que se hallamado “internet de los buscadores”, que ha dado paso a una138
    • internetizacióninternet más social protagonizada por servicios de comunicaciónentre personas, con Facebook a la cabeza.En España, según la AIMC, a finales de 2010 el ranking quedaba así: 1. Google 2. Facebook 3. Elpais.com 4. Marca 5. Live.com 6. Elmundo.es 7. Elotrolado.net 8. AS 9. Tuenti 10. YouTubeEl liderazgo lo ostenta Google pero seriamente amenazado porFacebook e importante presencia de actores locales como losmedios online elpais.com, marca.es y elmundo.es y la red social paraadolescentes Tuenti, adquirida por Telefónica en el verano de 2010. 139
    • internetizaciónDe la web 2.0 a la web2En el año 2004 un licenciado en lenguas clásicas dueño de unaeditorial de libros de tecnología publicó un documento titulado “Whatis Web 2.0?”. Su nombre es Tim O´Reilly y en su texto comparabacómo era internet en los años noventa con la internet de 2004.No debe confundirse el término “web 2.0” con el de “redes sociales”.“Web 2.0” es un concepto que engloba todos los cambios que sufrióinternet desde sus inicios hasta el estallido de la burbuja puntocom yel modelo que surgió tras la debacle. “Redes sociales” soncomunidades de amigos, aficionados o profesionales que serelacionan entre sí a través de aplicaciones como Facebook o Flickr.Lo que sí es cierto es que la tendencia es que detrás de cada webhaya una red social, bien creada expresamente bien a través de lasfacilidades que ponen Facebook o Twitter para que estés en contactocon tus amigos.En la famosa tabla que reproducimos a continuación OReillyexplicaba con ejemplos cómo había cambiado la forma de hacer lascosas entre los tiempos de la web 1.0 y la llegada de la 2.0. Así, si enun principio el modelo publicitario era Doubleclick, en la denominadaweb 2.0 había sido sustituido por Google AdSense. Si en 1998podías abrir una página personal en Geocities en 2004 creabas unblog en Blogger.com. Y así mil casos más.Web 1.0 Web 2.0DoubleClick --> Google AdSenseOfoto --> FlickrAkamai --> BitTorrentmp3.com --> NapsterBritannica Online --> Wikipediapersonal websites --> blogging140
    • internetizaciónevite --> upcoming.org and EVDBdomain name speculation --> search engine optimizationpage views --> cost per clickscreen scraping --> web servicespublishing --> participationcontent management systems --> wikisdirectories (taxonomy) --> tagging ("folksonomy")stickiness --> syndicationLo bueno del modelo de O´Reilly era su visión 360º; no se centrabaen un aspecto de la web sino en su conjunto: publicidad, música,fotografías... Aún así, había cuestiones que no eran tratadas en sumodelo.En 2009 Tim O´Reilly actualizó el concepto y, en vez de web 3.0 lobautizó como “web squared” o “web al cuadrado”. La web2 es la webde la gente y pone de manifiesto cómo internet ha dejado de ser unreducto de geeks o forofos de la tecnología, cómo el potencial de lared se ha puesto al alcance de la mayoría y éstas se han puesto ausarla. En cierto modo, casi diez años después de su crisis, internetcumple las promesas que hizo y vuelve a poner la ruleta enmovimiento. Algunos lo han llamado “back to basics”, otros lodenominamos “internetización”. Lo cierto es que existe unsentimiento compartido de que debemos compartir lo que sabemospara que cada persona saque lo mejor de sí mismo y lo ponga adisposición del mundo a través de la WWW. En un planeta que seacerca a los 7000 millones de habitantes, no necesitamos clonessino que cada uno realice lo que mejor sabe hacer, también eninternet. 141
    • internetizaciónModelos de negocio¿Se puede hacer negocio por internet? Es la gran pregunta de todoaquel que inicia o piensa en iniciar su andadura en la Red. Eninternet hay básicamente dos modelos de negocio: publicidad ocobro por contenidos y las reglas de cada uno son claras.PublicidadPara que un sitio web pueda vivir de la publicidad tiene que tener unagran audiencia, cifrada en millones, o una audiencia grande, aunqueen cifras más modestas, pero especializada. La publicidad es elmedio que tienen las empresas de llegar a su público. Si su públicoestá en una web comprarán espacio publicitario en la misma. Esto esválido para sitios como elmundo.es o elpais.com. Su publicacióncontinua de contenidos para todo tipo de públicos los hace muyatractivos para grandes anunciantes, tanto generalistas (bancos,automóviles, telefonía y utilities...) como segmentados (exposicionesy museos, vinos, aerolíneas low cost, productos premium...).En publicidad es habitual cotizar en función de los impactos visualesconseguidos o las conversiones realizadas, es decir, si lavisualización de la publicidad se transforma en clics, visitas a la web,compras.... Según este esquema y con la calculadora en la mano esfácil llegar a la conclusión de que a mayor número de páginas, mayornúmero de impactos publicitarios y mayor número de conversiones.Son muchas las webs que se basan en este sencillo cálculo. Noobstante, cuantos más competidores existen en el mercado laporción de tarta que corresponde a cada uno es menor,especialmente si la tarta no crece tan rápido como el número decomensales.El modelo imperante en internet basado en ofrecer contenidos oservicios gratis a cambio de publicidad es antiguo pero tiene unreferente fundamental: la prensa gratuita. Recuerdo cuandoaparecieron Diario Médico o Gaceta Universitaria, dos medios que sedistribuían en centros de salud y de enseñanza superior. Se dirigíana un público segmentado y, en cierto modo cautivo, se distribuían deforma localizada y se financiaban a través de publicidad específicapara su target (médicos, enfermeros, estudiantes). Luego llegaron los142
    • internetización20minutos y los Qué!, aplicando el mismo modelo a la prensageneralista.En 2010 la inversión publicitaria en internet ascendió a 798,8millones de euros según la IAB; esto sitúa a internet como tercersoporte publicitario, sólo por detrás de la televisión y los diarios.Son numerosos los ejemplos de empresas de internet que sefinancian a través de la publicidad. Facebook esperaba facturar 1200millones de dólares en 2010 y YouTube entrará en números verdesen 2011 tras ingresar 350 millones de euros en publicidad.Cobro por contenidosEmpecemos puntualizando que entendemos por “contenidos”cualquier producto o servicio ofrecido a través de internet en unsentido amplio. A través de una página web puedes comercializar tusproductos o servicios, físicos o virtuales, el problema es que esaltamente probable que otros den gratis aquello por lo que tú deseascobrar. En los productos físicos es más difícil pero en los digitales,como textos, música, vídeos o aplicaciones es relativamente habitual.Para entender el dilema de gratis vs. pago es conveniente hacer unpoco de historia. Chris Anderson ha explicado muy bien en su libroLa larga cola el modelo de consumo que imperó en el siglo XX. Era laépoca de los best sellers, los discos, las películas o los libros que,según recetas mágicas, eran diseñados para llegar a la mayoraudiencia posible. Para crear una película de éxito se pagaban cifrasastronómicas a los actores y actrices más populares, se rodaba enlos parajes más inhóspitos y espectaculares, para grabar un disco losmúsicos se encerraban durante meses en un estudio. El engranajeera perfecto y el modelo funcionaba, al menos para la industria, peroadolecía de ciertas ineficiencias que con la llegada de internet fueronevidentes. El amante de los libros puede buscar un ejemplar editadoen los años 70 que está descatalogado y no encuentra espacio en eltamaño limitado de la librería de su barrio. Te puede gustar unacanción de Shakira pero no quieres comprar todo el disco por 20euros. Alquilas una película en el videoclub pero no la puedes grabary prestar a un amigo. Todas esas incomodidades que encontraba elusuario a su paso desaparecieron de un plumazo con internet. Elcatálogo infinito de Amazon, las radios a la carta, Youtube y otros 143
    • internetizaciónmiles de sitios aparecieron para hacerle la vida más fácil a losusuarios. ¿Significa esto que los usuarios no quieren pagar por unlibro o una canción? Las millonarias ventas de la tienda de cancionesde Apple, iTunes, demostró que sí están dispuestos a pagar, pero nocualquier precio. El esquema de la venta de canciones se estárepitiendo ahora con el alquiler de películas online.La fijación del precio es una de las claves de los negocios online yaquí el modelo offline más cercano en el que buscar inspiración sonlas aerolíneas low cost. Como bien dicen en el libro El fenómeno LowCost, las compañías de vuelos baratos no se llaman así porque losbilletes tengan precios ridículamente bajos, sino porque los costesson bajos. Es decir, ajustan su estructura de costes al precio de losbilletes. ¿Y cuál es el precio de los billetes? El que los usuarios estándispuestos a pagar. ¿Cuánto pagarías por un vuelo a Londres?¿cuánto por una conexión a internet? ¿cuánto por un vestido de estatemporada? ¿cuánto por una hamburguesa? ¿cuánto por un libro ouna canción?iTunes empezó a vender canciones sueltas, no sólo discos, a $ 0.99.Ahora no sólo vende música sino podcasts, juegos, películas y otrosmuchos descargables y los precios son más variados. En 2008fueron líderes en la venta de música en Estados Unidos, por encimade Wal-Mart. Pero internet, como sabemos, también tiene sus reglasy una de ellas es que todo cambia. En 2009 apareció Spotify, unaaplicación similar a iTunes para oir canciones gratis, entre otrasfuncionalidades y muchos usuarios están empezando a abandonariTunes porque, no olvidemos que otra de las reglas de internet esque los productos se convierten en commodities a velocidad devértigo. Lo que un día es un producto elaborado como por ejemplo eltexto de una noticia y la imagen que la acompaña en poco tiempo essólo una matería prima para producir contenidos y productos máselaborados, que también se convertirán en commodites al pocotiempo. No puedes detenerte nunca ni dejar de innovar.FreemiumFreemium es un concepto que surge de combinar free con premium,es decir, “gratuito” con acceso privilegiado de pago. Hace referenciaa modelos como el del Wall Street Journal, que ofrece informacióngratuita e información reservada a suscriptores. Es un modelo que la144
    • internetizaciónprensa tradicional desea abrazar en sus ediciones online y empieza ahaber ejemplos viables como el español Orbyt o The New YorkTimes, que al mes de cerrar parcialmente sus contenidos onlinehabía logrado 100.000 suscriptores.El modelo híbrido o freemium debe analizarse con cautela para cadaposible negocio y ver si el producto de pago reúne los alicientessuficientes para que el usuario decida comprarlo. Un caso de éxito esel antes mencionado Spotify, un millón de usuarios ya se hanconvertido en suscriptores para eliminar la publicidad que escuchanlos usuarios de la modalidad gratuita.Casos de éxitoUn análisis de los modelos de negocio online no puede zanjarse sinreseñar la presencia de algunas empresas que demuestran que sepuede hacer dinero en internet.GoogleVio la luz en 1998 y comenzó licenciando su tecnología de búsquedaaunque su negocio actualmente es la gestión de espaciospublicitarios mediante sus productos AdSense y Adwords. Googlelanza productos al mercado continuamente y el sello que loscaracteriza es su gratuidad. Su objetivo es ser la gran plataforma deinternet, dar servicio a todas las necesidades que se plantean ausuarios y empresas: desde correo gratuito de gran capacidad aservidor de DNS.AmazonSe inició en 1995 como tienda de libros online pero ha evolucionadoa un gran hipermercado que sirve a todo el mundo todo tipo deartículos y que en los últimos años se ha especilizado en losservicios en la nube para empresas. Veremos más adelante quésignifica en la nube. Kindle es su éxito más reciente, un lector delibros electrónicos que permite encontrar y descargar un libro ensegundos y almacenar decenas. 145
    • internetizaciónEbayFue fundado en 1995 como sitio de subastas y actualmente operatambién como plataforma de comercio electrónico y sistema depagos (PayPal). Al contrario que Amazon, que se basa en la ventadirecta, 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 elprincipal impulsor de su crecimiento, habiendo incrementando susventas en un 28% respecto el año 2008.FacebookLa red social por excelencia no necesita presentación. Fundada en2004 por el jovencísimo Mark Zuckerberg como una forma decontacto para estudiantes universitarios, en 2010 alcanzó los 500millones de usuarios repartidos por todo el mundo. Como suelebromear su fundador, si Facebook fuese un país ocuparía el puestonúmero 3 en población. Entre sus accionistas se encuentra Microsoft.Blizzard Entertainment son los creadores de World of Warcraft, unjuego de rol multijugador online que a finales de 2008 contaba con11,5 millones de suscriptores en todo el mundo. Fundada en 1994,su juego estrella cuenta con una legión de fanáticos seguidores quepasan 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 llevadoa alcanzar la rentabilidad.En España tenemos igualmente ejemplos de casos de éxito decomercios electrónicos:Mangoshop, de Mango, vendió por valor de 11 millones de euros ensu tienda online en 2009. Mango vende ropa y complementos onlinedesde el año 2000. Hoy en día se puede comprar online desde 32países. A pesar de las buenas cifras, las ventas online de Mango noalcanzan al 1% del total de ventas de la marca.146
    • internetizaciónIdealistaLos hermanos Jesús y Fernando Encinar fundaron en el año 2000,junto a César Oteiza, la web de anuncios inmobiliarios Idealista.com.Una década después sigue siendo el lugar de referencia en internetpara buscar vivienda. Es rentable desde 2003 y cerró el año 2008con 20 millones de facturación y 5 de beneficios de explotación.BuyVipEl club de compras privadas fue fundado en 2006 por GustavoGarcía Brusilovsky. Su negocio se basa en la oferta de artículosrebajados entre un 30 y un 70%. Los artículos están a la ventadurante un breve periodo de tiempo. Alcanzó la rentabilidad en elsegundo trimestre de 2010. En el verano de 2010 sumaba 5 millonesde usuarios registrados. En octubre de 2010 fue comprada por laestadounidense Amazon por 70 millones de euros.PrivaliaClub de compras fundado en 2006 por Lucas Carné y José ManuelVillanueva. Facturó 168,43 millones de euros en 2010. Su número deusuarios asciende a 6,27 millones.El éxito de estos outlets, que comercializan fundamentalmente moda,ha dado un giro al panorama del comercio electrónico, situando a lasprendas de vestir entre los artículos más vendidos por internet.En sus inicios se accedía por invitación, creando una sensación deexclusividad entre sus miembros. Ahora lo habitual es poderregistrarse libremente.Su propia evolución ha llevado a los clubes de compras a creartiendas permanentes para algunas firmas y a utilizar Facebook comonuevo canal de venta.Deliberadamente hemos dejado fuera de este epígrafe a aquellasempresas dedicadas a proporcionar infraestructura para que otroshagan negocios online como proveedores de acceso, alojamiento,creación de sitios web. 147
    • internetizaciónLegislación aplicableEl legislativo es un territorio altamente especializado cuyo ámbitoexcede el de este manual. Sólo pretendemos en este epígrafeseñalar las principales normas jurídicas que aplican a los sitios web yrecomendamos encarecidamente que se recurra a abogadosespecializados en nuevas tecnologías e internet para resolvercualquier duda.La Ley de Servicios de la Sociedad de la Información y ComercioElectrónico entró en vigor en 2002 y es la que rige la actividad eninternet. La LSSI afecta a las empresas que realizan actividadescomerciales a través de internet, a las que impone una serie deobligaciones. Si además la empresa emite publicidad ésta deberáaparecer identificada claramente y obtener el consentimiento expresodel receptor antes de realizar envíos por correo electrónico omensajes al móvil. Las webs de usuarios particulares que incluyanpublicidad también están sujetas a esta ley.De gran importancia, especialmente por los riesgos en que se incurresi se incumple, es la Ley Orgánica de Protección de Datos o LOPD.El artículo clave para los propitarios de una web es el que especificaque hay que solicitar y recibir expresamente del usuario autorizaciónpara conservar sus datos en una base de datos que debe estar dadade alta en la Agencia de protección de datos. El usuario tienederecho a pedir que se borre su registro y se imponen fuertes multassi se incumple esta norma.Además de normas genéricas que aplican a todas las webs existennormas que afectan a aspectos concretos de algunas webs y no atodas en su conjunto. Algunos ejemplos: • Accesibilidad. Afecta a webs de Administraciones Públicas y grandes empresas. • Empresas que cotizan en bolsa, que deben cumplir una serie de obligaciones • Copyright y otras formas de protección de derechos de propiedad intelectual • IVA y comercio electrónico148
    • internetizaciónAdemás de normas con rango de ley existen especificaciones, sellosde calidad y otros tipos de acuerdos y compromisos a los quetambién se puede adherir una web para mostrar su respecto haciasus usuarios. Ejemplos: Sello Confianza Online. Sello de laAsociación Española de Comercio Electrónico (AECE). Norma UNEAccesibilidad. Lista Robinson.Antes de cerrar este breve epígrafe centrado en las leyes que aplicana internet resulta conveniente aclarar que internet es un territorio tannuevo que la legislación no está a menudo preparada para losenvites que surgen. Las leyes de internet caminan detrás en unámbito donde prima la innovación.Finalmente, no se debe olvidar que en aspectos no específicamenteonline, una web o un perfil en Facebook se someten a la legislaciónde ámbito general. 149
    • internetizaciónEmprendedoresMe gusta la frase del profesor José Luis Orihuela, publicada en sublog eCuaderno: “aprende a convertir tus ideas en proyectos y tusproyectos en negocios”.Internet ha eliminado muchas barreras de entrada a la creación de unnegocio. Sea tu ocupación en tus ratos libres o tu principal fuente deingresos, en este epígrafe recopilaremos los consejos para el éxitodel fundador de Amazon, trataremos sobre el arte de emprender yveremos las dificultades que conlleva encontrar financiación para unaidea de negocio.Qué mejor forma de iniciar este capítulo que con los consejos de JeffBezos, fundador de Amazon, exponente del éxito en internet.Amazon comenzó como tienda de libros online en 1995, desdeentonces, se ha convertido en un gran hipermercado online, condistribución a todo el mundo y sedes en numerosos países, cotizadaen bolsa y centrada en los últimos años en las soluciones en la nubepara empresas web y en revolucionar el mundo editorial con su lectorde ebooks Kindle. Ha vivido momentos buenos y malos pero hasabido capear el temporal y estos son, según su fundador, lossecretos de su éxito: 1. Orientación al cliente 2. Innovación 3. Pensar en el largo plazoLo que quiere decir Bezos es que para liderar un sector no hay queestar obsesionado con la competencia sino con el cliente, el usuariode nuestro producto que es quien realmente nos hace ganar dinero.Para darle el mejor servicio posible y adelantarnos a susnecesidades debemos innovar continuamente, lo que nos lleva alpunto uno de orientación al cliente. Por último, recomienda pensar enel largo plazo, en nuestros planes futuros y no frustrarse por laspequeñas decepciones del día a día y otros contratiempos. En elmismo vídeo que ofrece estos consejos, disponible en YouTube (http://www.youtube.com/watch?v=-hxX_Q5CnaA ), Bezos deslizauna última lección: hay que trabajar como si cada día fuera el primerdía y no dar nada por hecho.150
    • internetizaciónLa democratización en la apertura de un negocio online se hahecho posible gracias a internet. Según datos del INE abrir unnegocio cuesta de media 65.000 euros, ¿cuánto cuesta crear unproyecto 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 quegastó 12107,09 dólares para crear un proyecto web 2.0: • 4500 dólares en programación • 4824,14 dólares en abogados • 399 dólares por el logo a Logoworks • 1115,05 dólares registrando dominiosUna cifra que abre la oportunidades de hacer sus sueños realidad eninternet a muchas personas.Pero no todas las historias son iguales. Numerosas empresas queempiezan, las denominadas start-up, son financiadas por socioscapitalistas que invierten millones de euros en su lanzamiento y enlos primeros años de vida, con la esperanza de ver multiplicada concreces su inversión. En España sería el caso de Tuenti, quecompletó varias rondas de financiación antes de ser adquirida porTelefónica en agosto de 2010 por 70 millones de euros.Una característica muy relevante del nuevo emprendedor de internetes que es tanto vendedor como consumidor, esta dualidad se repiteen muchos aspectos de la Red: puedes escribir en tu blog ycomentar en otro, puedes comentar el estado de otra persona enFacebook y tener una página con cientos o miles de fans. Unmagnífico ejemplo es Etsy, un sitio de Estados Unidos donde puedesvender y comprar artesanía. http://www.etsy.com/¿Existe mentalidad emprendedora en España? ¿Cuándo es elmomento idóneo para emprender? En una entrevista para CincoDíasun directivo de AT Kearney afirmaba: Hace 30 años el español quería trabajar por cuenta propia, ahora ese patrón se ha invertido. Y la tendencia a partir de ahora es revertir todo esto. Tenemos todas las condiciones para volver a ser emprendedores, un perfil optimista, un tejido empresarial internacional y el tejido del conocimiento 151
    • internetizaciónEn cuanto al momento adecuado para emprender, existen dosvisiones encontradas: los que abogan por trabajar durante unosaños, ahorrar y luego emprender y los que defienden la vía derecurrir a un inversor. Para estos últimos, recomendamos leer elpost de Antonio Mas sobre los “Mitos del Capital Riesgo”. Desde laexperiencia, Mas explica cómo habitualmente no es capital lo quenecesitas para crear un proyecto en internet, sino algo de tiempo yun pequeño equipo de 2-3 personas que se complementen. Elproyecto español Panoramio, vendido a Google en 2007, fue iniciadoen sus ratos libres por Eduardo Manchón y Joaquín Cuenca. Encambio, si recurres a financiación externa para tu proyecto debestener en cuenta que: El capital sabe más que tú de capital. Suena absurdo pero es así. Tu sabes de Internet y de tu proyecto. Pero el sabe sólo de inversiones. Ha hecho cientos y para ti es la primera. Su negocio es este y entonces tendrás siempre a un tío que sabe más que tu de como cerrar cláusulas, acuerdos y contratos. Y captar capital lleva tiempo, esfuerzo, negociaciones, discusiones… Mucho desgaste para después darte cuenta que la velocidad no era tan importante como pensabas, que los buenos proyectos siempre tienen un hueco aunque pienses que llegan tarde, que la ventaja del first mover no es tan estratégica, que el mercado siempre reconoce el trabajo bien hecho y que resulta que estas dejando tu vida en una empresa en la que -vaya por dios- necesitas otra ampliación de capital para seguir viviendo y en la que tu posición será minoritaria y que… pero si ya no es mi empresa y la ilusión se ha desvanecidoEn Loogic, blog dirigido a emprendedores, Javier Martín publica cadaaño un resumen de las inversiones en start-ups que se hanregistrado el año anterior. En 2010 las inyecciones de capitaloscilaron entre los 115.000 euros y los 250 millones por la compra deeDreams. Entre los inversores se encuentran tanto business angels e152
    • internetizacióninversores particulares como fondos de capital riesgo, bancos y cajasde ahorros o empresas.Los emprendedores son una comunidad muy activa en internet.Se reúnen, crean grupos e iniciativas como: • Iniciador. Cuenta con ediciones en varias ciudades españolas y los encuentros, mensuales, en torno a un emprendedor de éxito, se suelen retransmitir por internet • First Tuesday se define como “una organización independiente sin animo de lucro que actúa como plataforma global de encuentro entre emprendedores, empresarios e inversores de negocios relacionados con Internet y las Nuevas Tecnologías” • Thursday, se reúnen los últimos jueves de cada mes para “analizar cómo las TIC están cambiando el mundo, aunque su objetivo específico es reunir empresarios, mandos intermedios y profesionales para intercambiar conocimiento, establecer contactos e identificar oportunidades empresariales y sociales” • Idéame, encuentro universitario de jóvenes desarrolladores de videojuegos • OpenTalent, concurso del BBVA para premiar la mejor idea de negocio • iWeekend, reúne a emprendedores de internet de diversos perfiles para crear una empresa en un sólo fin de semana. • Seedrocket “proporciona a los emprendedores acceso a una red de inversores y Business Angels que apuestan por proyectos de base tecnológica en una fase inicial”Ética en los negociosGuy Kawasaki dedica el último capítulo de su libro paraemprendedores El arte de empezar a la ética. Lo llama “El arte de serbuena persona”. En internet, donde existen técnicas dudosas odirectamente ilegales como spam, phishing o el black hat SEO puedeser tentador, si atraviesas una mala racha, deslizarse por lapendiente de la falta de ética e incurrir en estas técnicas censurables. 153
    • internetizaciónPara no caer en la tentación, Kawasaki aconseja seguir este otrocamino: • Ayuda a mucha gente, especialmente a aquellos que tal vez nunca te puedan devolver el favor • Haz lo correcto, aunque a veces sea el camino más difícil • Corresponde a la sociedad, no necesariamente con dinero sino con “tiempo, experiencia, apoyo emocional”154
    • internetización¿Y ahora qué? ÚltimastendenciasAbordamos el último capítulo del libro y nos damos cuenta de que yatenemos una visión global de lo que supone gestionar un proyectoweb pero somos conscientes de que es un universo emergente y enconstante evolución. Los principios generales que hemos aprendidoa lo largo de Internetización nos deberían ayudar a desenvolvernosen este mundo cambiante pero, no obstante, dedicaremos unaspáginas a describir las principales tendencias que veremos crecer enlos próximos años.Internet en el móvilInternet en el móvil ha sido la eterna promesa que nunca se cumplía.Durante años se lanzaron propuestas que quedaban en el diqueseco. En 2007, con el lanzamiento del iPhone por parte de Apple,comenzó a convertirse en una realidad.Al contrario que los ordenadores, que utilizan un número limitado desistemas operativos y resoluciones de pantalla, el mercado de latelefonía móvil se ha caracterizado por la coexistencia de infinidad deconfiguraciones posibles. Esto hacía muy difícil diseñar una web paramóviles que se visualizara adecuadamente en todos los dispositivosdisponibles. Cuando no era el tamaño de la pantalla, era el puntero ola pantalla táctil que hacía complicada la navegación. A esto habíaque sumar la inexistencia de tarifas ajustadas y tarifas planas denavegación. Un mercado en evolución entorpecía la creación de unaverdadera internet en el móvil.La irrupción del iPhoneEl iPhone dio lugar a un dispositivo con una pantalla con unaresolución que permitía navegar por las webs preexistentesdiseñadas para ser vistas desde un PC. Adicionalmente, permitía 155
    • internetizacióndesarrollar aplicaciones específicas para el móvil, las apps,pequeños programas diseñados para cumplir una funcionalidadconcreta. El ejemplo más típico es consultar la previsión del tiempopero el grado de sofisticación de estos programas no deja de avanzary en la iTunes Store desde la que se descargan podemos encontrardesde pianos virtuales hasta juegos online. La mayoría de estasaplicaciones tiene una versión gratuita de prueba y los precios de lamayoría no superan los 2 ó 3 dólares, lo que no ha impedido quesurjan grandes empresas a la sombra de estos microprecios.Identificamos, por tanto, tres tipos de internet en el móvil: • las webs tradicionales, que se pueden navegar, si bien no de forma óptima • las versiones para móviles de las webs clásicas, que muestran sólo parte de los contenidos y una interfaz adaptada • las apps diseñadas especifícamente para entornos móviles y que aprovechan todo su potencial¿Cuál de ellas se impondrá? Es un debate abierto pero los expertosapuntan a que las versiones web para móviles, por suinteroperablidad, tienen ventaja frente a las aplicaciones. Las webspara móviles, al igual que la propia internet, se visualizan en todo tipode móviles. En cambio, las aplicaciones deben adaptarse a cadasistema operativo dependiendo del móvil en el que se vaya a usar.Es decir, se deben programar tantas aplicaciones como tipologías demóviles existen si queremos que se visualicen en todas ellas: iPhone,Android, Blackberry, Nokia...En cualquier caso, lo que es seguro es que el internet móvil hacreado un nuevo escenario en el que todos los incumbentes estánreclamando su papel.Google Android y otros competidoresEl sistema operativo para móviles de Google se llama Android y esde código abierto. Cualquier desarrollador puede programaraplicaciones para el mismo y publicarlas en el Android Market, latienda de aplicaciones de Google. Al contrario que en la App Store deApple no existen apenas restricciones, por lo que prácticament todaslas apps son admitidas.156
    • internetizaciónLos primeros teléfonos equipados con Android fueron fabricados porla coreana HTC aunque a día de hoy más compañías se hansumado, entre ellas, Motorola y Samsung. Nokia, Blackberry y otrasmarcas también han lanzado sus tiendas de apps y en febrero de2011 así se repartía el número de aplicaciones por stores o markets,según Distimo: • Apple 310.000 • Android 175.000 • Nokia Ovi 30.000 • BlackBerry 25.000Estos datos, sin embargo, pronto quedarán obsoletos.MovilizaciónA medida que más y más usuarios se sumen al uso de internet en elmóvil más necesaria será una estrategia de “movilización” denuestros proyectos. Numerosos medios online han desarrolladoaplicaciones para el iPhone captando así a los primeros usuarios enadoptar esta tecnología y siendo pioneros en experimentar con ella.Ahora deberán ir preparando sus versiones para el cada vez máspujante Android. Si, por el contrario, optamos por adaptar nuestrapágina web a la navegación con teléfonos móviles aplicaremos lasnormas específicas del W3C para móviles, englobadas en la MobileWeb Initiative.GeolocalizaciónLa geolocalización es la identificación de tu posición geográfica através del GPS del móvil o por la posición de las antenas detelefonía. Es un servicio que cada vez incorporan más terminales yservicios y que más expectativas ha generado. Son muy utilizadosservicios que proporcionan información relacionada con tu posicicióngeográfica, por ejemplo, restaurantes cercanos. 157
    • internetizaciónEl servicio más pujante, en el momento de escribir estas líneas, esFoursquare, que permite a los usuarios indicar a su red social en quélugar están en cada momento. En teoría, para poder saludarse sidescubren que se encuentran en lugares próximos.Realidad aumentadaLa combinación de la cámara y el móvil está dando lugar a serviciosespectaculares. Google presentó Google Goggles, que proporcionainformación o la procesa al enfocarla con la cámara o al tomar unafotografía. Por ejemplo: • si fotografías la portada de un libro detecta cuál es • si fotografías una tarjeta de visita almacena los datos categorizadamente (teléfono, e-mail...) y hasta permite telefonear al número que aparece • si enfocas un comercio en una calle ofrece datos del mismoExpectativas de crecimientoLas cifras de crecimiento en el uso del teléfono móvil comodispositivo de acceso a internet son las propias de un mercado enplena explosión: número de usuarios con tarifa plana, terminalesvendidos, aplicaciones descargadas, inversión y formatospublicitarios...Japón y otros países asiáticos nos llevan gran ventaja en el uso deinternet en el móvil.Cada vez son más los servicios que apuestan por este mercado ycrecen a su alrededor, veamos ejemplos: • servicios de geolocalización, te indican farmacias o restaurantes cercanos, si un amigo está en los alrededores o si un comercio próximo tiene una oferta para ti. Ejemplos: Foursquare, Facebook Places158
    • internetización • tiempo real, esto es, retransmitir qué haces, dónde estás, qué ves en cada momento, ya que tu móvil siempre está contigo, en el restaurante o en tus vacaciones. Ejemplos: Twitter para móviles, Instragram • emisión de vídeo en directo desde el móvil. QikUna realidad en sí mismaLa potencia de estos teléfonos móviles, su facilidad de uso, laconectividad 3G con sus tarifas planas asociadas y el wi-fi que casitodos ellos incorporan han dado un protagonismo al acceso a internetdesde estos dispositivos que seguirá creciendo fuertemente en lospróximos años. Dejaremos de hablar de internet en el móvil paraconsiderarlo un entorno en sí mismo, con sus reglas propias, susproductos propios, sus oportunidades propias.The Cloud (la nube)La nube, the cloud en inglés, es la forma en que se denomina ahecho de que cada vez más nuestros datos estén en manos deterceros, en servidores y ordenadores centrales de grandesempresas como Google, Amazon o Microsoft. Lo hacemos porquenos supone una gran ventaja, son accesibles desde cualquierordenador con conexión a internet y desde cualquier lugar delmundo. No obstante, perdemos control sobre ellos, ya que no los“poseemos”, no están en el disco duro de nuestro portátil y, siperdemos la conexión a internet o el servicio de Gmail está caído nopodemos acceder a nuestros correos.El correo es el ejemplo más manido pero puede aplicarse a fotos,blogs, conversaciones en Facebook, documentos, listas de tareas,mensajería instantánea y mil ejemplos más.En el entorno empresarial son también abundantes los servicios enla nube, también denominados SAAS, siglas de Software As AService. Se trata de soluciones que facilitan gigantes como IBM,Amazon o Microsoft y, aunque son un tema recurrente, hasta losúltimos años no se habían convertido en una realidad. Ofrecen las 159
    • internetizaciónmismas ventajas que para los usuarios particulares, los obstáculosprincipales que impedían su desarrollo, como la lentitud o la escasapotencia se han solucionado y los problemas siguen quitando elsueño a muchos. Nos referimos al temor que siempre nos acompañaa que nuestros datos sean accedidos por personas que infringen lasbarreras de seguridad. En algunos casos, léase datos bancarios omédicos, la información es muy sensible.Web semántica o web 3.0El concepto de web semántica tiene dos caras. Para las máquinas,los ordenadores, la web semántica es aquella en la que lainformación viaja por las redes “etiquetada”, es decir, marcada conparámetros que indican que un dato es una fecha, o el autor de unlibro o una dirección postal. Actualmente, eso ocurre con muy pocosdatos, pero si se lograra un consenso para que la información semarcara las máquinas podrían facilitar a los humanos informaciónmás ajustada a nuestras necesidades. Y esa es la otra cara de laweb semántica. Las personas para navegar por internet debemosadaptarnos a la forma de trabajar de las máquinas. Si buscamos enGoogle introducimos palabras clave, que, simplificadamente no sonmás que las palabras más empleadas en el texto. Con la websemántica podremos realmente hacer preguntas en lenguaje naturala los buscadores y webs. Podremos escribir “¿En qué año nació BobDylan?” en lugar de “año nacimiento Bob Dylan”.Ya existen grandes experiencias en este terreno. Entre mis favoritosse encuentran: • Yahoo! Respuestas. Es parecido a un buscador semántico pero operado por los usuarios, por personas que dejan sus preguntas para que otros usuarios las respondan. • Wolfram Alpha. Un buscador que ofrece datos concretos en lugar de enlaces a otras páginas. Su creador fue profesor de Sergey Brin, uno de los fundadores de Google. Supone un gran avance en la interpretación de información. Por ejemplo, si buscamos “New York”:160
    • internetización 161
    • internetizaciónMundos virtuales y 3DConocemos casos de éxito de mundos virtuales y casos que se hanquedado en meros titulares de periódicos. World of Warcraft, porejemplo, es un juego online multijugador (MMORPG) en el que elusuario crea su personaje o avatar e interactúa con los demásviviendo aventuras. Es un tremendo éxito tanto desde el punto devista de la satisfacción de sus millones de usuarios como de negocio,ya que requiere suscripción. Habbo Hotel es otro ejemplo de mundovirtual que obtiene ingresos, aunque con un modelo centrado en laventa de objetos virtuales.Second Life acaparó muchos titulares en prensa durante algunosmeses para luego pasar a un segundo plano. Uno de los principalesproblemas de Second Life es su baja usabilidad. Tanto el proceso deregistro, tremendamente enrevesado como el aprendizaje necesariopara manejar el personaje son barreras no pequeñas para muchosposibles usuarios.En cierto modo, los mundos virtuales se encuentran en una fase dedesarrollo similar a la que pudieron atravesar las redes sociales hace5 años. Su futuro parece ligado al de los videojuegos y entornos entres dimensiones. El tiempo nos dirá en qué desembocan.162
    • internetización 163
    • internetización164
    • internetizaciónLa autoraGemma Ferreres (Vall dUixó, 1974) es profesional de internet desde1999. Licenciada en Periodismo por la UCM de Madrid y Experta eneLearning por la UNED, ha impartido talleres y seminarios sobreInternet y nuevas tecnologías de la información en variasuniversidades. Coautora del libro La blogosfera hispana (2006), haimpulsado numerosas iniciativas que ayuden a conocer mejor elpanorama de internet y, especialmente, el de los contenidosgenerados por los usuarios. Destacan la Encuesta a Bloggers y elWiki de Historia de los Blogs. Su experiencia profesional en diversasempresas del sector le ha permitido conocer en toda su extensión elproceso de creación de proyectos y estrategias web, que haplasmado en Internetización.Escribe habitualmente en su página personal gemmaferreres.com yen Twitter (@gferreres). Sus otras webs son: tintachina.com,historiadelosblogs.com e internetizacion.com. 165
    • internetización No olvides visitar: internetizacion.comNota: las ilustraciones que aparecen en este libro sonpropiedad de sus respectivos autores.166