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 SpainI...
internetización                  A los blogueros y tuiteros                                          5
internetización6
internetizaciónÍndiceIntroducción............................................................................................
internetización         Modelos de negocio ..............................................................142         Legis...
internetizaciónIntroducciónMuchos usuarios de internet, cuando tienen que diseñar una webpara su empresa o definir una est...
internetización10
internetizaciónCreación de sitios webAnálisis y fuentes de informaciónUn profesional, al iniciar un proyecto, necesita muc...
internetizaciónAsimismo, conoceremos:     •   Objetivos     •   Competencia     •   ReferentesObjetivosLos objetivos son l...
internetizaciónFuentes de informaciónGracias a internet, la tarea de recopilar información se ha vuelto milveces más senci...
internetizacióndestacados basados en datos de terceros son, por ejemplo, elinforme eEspaña de la Fundación Orange o La Soc...
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 co...
internetizaciónArquitectura de informaciónSi hay algo que caracteriza a internet es precisamente sumultidisciplinariedad: ...
internetizaciónestás sentado frente al ordenador. Todo ello afectará a las decisionesde diseño que tomemos.Imaginemos que ...
internetización                  19
internetizaciónLa arquitectura de información de los sitios web más comunes se haido estandarizando y las secciones en web...
internetizaciónUn 80% de las webs se pueden construir con este modelo tan simple.La home es el equivalente a la portada de...
internetizaciónllegar al contenido. Esto se consigue evitando mensajes estáticos ypublicando directamente en la portadilla...
internetización   •   fecha de publicación y de última actualización   •   documentación relacionada (ej: pdf completo de ...
internetización24
internetizaciónAl diseñar un prototipo es preciso seguir una serie de principios.Son muy útiles tanto los principios básic...
internetizaciónEl segundo nivel de navegación, es decir, las subsecciones, puededesplegarse horizontal o verticalmente, au...
internetizaciónMenú vertical de Amazon. El segundo nivel de navegación también se despliega                               ...
internetizaciónEn las siguientes páginas vemos los sistema de navegación delNYTimes en sus versiones para web, móviles e i...
internetizaciónThe New York Times para iPhone (tamaño superior al real)                                                   ...
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 produc...
internetizaciónEnlacesLos enlaces son la esencia de la Red. No sólo nos permitenmovernos de un contenido a otro dentro de ...
internetizaciónBotones de acciónLos botones de acción son aquellos elementos que inician unproceso. Aunque a simple vista ...
internetizaciónDiseño¿Con qué marca asocias el color rojo?¿Coca cola? ¿Ferrari? ¿Vodafone? ¿Banco Santander?¿Y si lo conte...
internetización¿Te basta una imagen para reconocer a qué marca pertenece elanuncio que estás visualizando?¿O necesitas ver...
internetizaciónLa marca, con todos sus elementos (tipografía, colores, márgenes)aparece en la posición preferente, la esqu...
internetizaciónLa marca BMW, acompañada del lema “¿Te gusta conducir?”,aparece esta vez a la derecha. Los colores corporat...
internetizaciónde los públicos a los que vaya dirigida optaremos por unos colores uotros. Una web puede ser seria y respet...
internetizaciónEn los gráficos de la página de BP se puede observar cómo aplican loscolores verde y amarillo corporativos....
internetizaciónTipografíaLas fuentes tipográficas, o tipografías, que se pueden emplear enuna web tienen algunos condicion...
internetización     •   editarlos     •   traducirlos     •   llevarlos a la pantalla de un móvil u otro dispositivoPara e...
internetizaciónSe aprecia mejor al aumentar el tamaño. La primera es “con serif”, enconcreto, la serifa más popular en la ...
internetizaciónElementos genéricos de diseñoLas reglas del diseño han sido ampliamente estudiadas y explicadaspor los expe...
internetización   •   Equilibrio o balanza. El peso visual de las distintas zonas ha       de ser equivalente. Por ejemplo...
internetización     •   líneas     •   iconos     •   viñetas o bolosMerecen especial atención dos elementos:Los enlaces y...
internetizaciónadecuadas. Dependiendo del equipo con el que contemos, iniciará latarea un director de arte y la desarrolla...
internetizaciónLos diseñadores gráficos suelen trabajar con el programa informáticoPhotoshop para el diseño estático y Fla...
internetizaciónmismos. Una vez acabado el diseño, se entregará, preferentementeen dos formatos:   •   PSD (Photoshop Docum...
internetizaciónLos CMS gratuitos suelen incluir diseños predefinidos o inclusocontar con numerosos diseños desarrollados p...
internetizaciónconservarán y adaptarán al diseño si lo has construido según lasdirectrices que vamos exponiendo en este ma...
internetizaciónPara cambiar el logo por el tuyo debería bastar con subir una imagencon el tamaño adecuado.Para cambiar los...
internetizaciónMaquetaciónHasta ahora hemos tratado de la parte visible de una web: suscolores, su número de columnas o su...
internetización <link rel="meta" href="/Overview-about.rdf" /> <link rel="stylesheet" type="text/css" href="/StyleSheets/h...
internetización    •   si queremos saber si la web se ciñe a estándaresHTML, el lenguaje de la WWWHTML es el lenguaje de i...
internetizaciónEn el fichero principal HTML se enlaza al fichero CSS como vemosen este ejemplo:<link rel="stylesheet" href...
internetización       que ha durado la definición de HTML 5.0. Existe una versión       estricta y una transicional menos ...
internetizaciónbien en conservarlo, ya que escasean, y porque serán el mejorgarante de que nuestra web tenga una larga vid...
internetizaciónpermitirá garantizar que nuestra web seguirá siendo accesible en elfuturo y que nuestros contenidos podrán ...
internetizaciónaparecen encerradas entre los símbolos menor (<) y mayor (>). La decierre lleva además una barra (/). Veámo...
internetizaciónEl resultado visualmente sería “Consulta la oferta de la semana” yconstituiría un enlace a la página alojad...
internetización62
internetizaciónProgramación y plataformasA lo largo del capítulo sobre construcción de sitios web hemos idodescribiendo ta...
internetizaciónLos desarrollos propios requieren grandes inversiones en tiempo ydinero pero cuando no existe un software q...
internetizaciónmínima estabilidad y reducirá el número de errores y fallos en elrendimiento.Es muy importante en una plata...
internetizaciónLos lenguajes de programación en internetSi has estado días rastreando la web en busca de una plataformaque...
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 a...
internetizacióntrasladarse a la web así como la gestión de la publicación y difusiónde los contenidos.QuiénDependiendo del...
internetizaciónEn ocasiones lo que necesitaremos para elaborar un contenido sondos perfiles: la persona que crea el conten...
internetización   •    gráficos interactivos en el informe de una agencia de        investigación de mercadosLa elección d...
internetizaciónDada la sencillez de crear contenidos en HTML no hay excusa parapublicar textos en otros formatos, como imá...
internetización   •   Ausencia de barroquismos   •   Enlaces, enlaces, enlacesEl usuario de internet siempre tiene prisa, ...
internetización               Fragmento de infografía realizada por 2mdc.comInfografíasLas infografías son muy útiles a la...
internetizaciónLa sobreabundancia de información ha hecho que cada vez seanmás necesarias las infografías, para resumir gr...
internetizaciónacompañar los vídeos con transcripciones y subtítulos en formatosestándar para que puedan beneficiarse:    ...
internetizaciónUn ámbito en el que son tremendamente populares las aplicacioneses el de los smartphones o teléfonos de últ...
internetizaciónobtiene ninguna respuesta) o días es posible gracias a las redessociales. Emerge entonces una figura, la de...
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Internetización: manual de internet
Upcoming SlideShare
Loading in …5
×

Internetización: manual de internet

1,949 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,949
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
40
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Internetización: manual de internet

  1. 1. internetización 1
  2. 2. internetización2
  3. 3. internetizaciónInternetización Gemma Ferreres 3
  4. 4. internetización© 2011 Gemma Ferreres1ª ediciónISBN: 978-84-9981-718-7DL: M-21314-2011Impreso en España / Printed in SpainImpreso por Bubok4
  5. 5. internetización A los blogueros y tuiteros 5
  6. 6. internetización6
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. internetización10
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. internetizaciónCaptura de pantalla de Google Insights 15
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. internetización 19
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. internetización24
  25. 25. 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
  26. 26. 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
  27. 27. internetizaciónMenú vertical de Amazon. El segundo nivel de navegación también se despliega verticalmente. 27
  28. 28. 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
  29. 29. internetizaciónThe New York Times para iPhone (tamaño superior al real) 29
  30. 30. internetización The New York Times para iPad30
  31. 31. internetizaciónThe New York Times para web 31
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62. internetización62
  63. 63. 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
  64. 64. 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
  65. 65. 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
  66. 66. 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
  67. 67. internetizaciónEjemplo de mash up con Google Maps 67
  68. 68. 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
  69. 69. 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
  70. 70. 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
  71. 71. 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
  72. 72. 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
  73. 73. 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
  74. 74. 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
  75. 75. 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
  76. 76. 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
  77. 77. 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
  78. 78. 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

×