A continuación os mostramos una oferta de trabajo que publicamos este verano.

Nuestra intención era segmentar la oferta dirigiéndola inequívocamente a nuestro público objetivo, y evitar recibir cientos de CV’s que no se ajustasen. También necesitábamos destacar de algún modo entre los miles de ofertas que se publican cada día y aprovechar el poder amplificador de internet y las redes sociales para difundir el mensaje a posibles candidatos, o gente susceptible de conocerlos. Esto es lo que sucedió:

¿Qué buscábamos? Un programador back-end bien formado en las tecnologías que usamos habitualmente, polifacético y proactivo y queríamos que desde el principio se identificase con uno de nuestros valores fundacionales: la creatividad.

Necesitábamos una oferta que hablase directamente a nuestro perfil empatizando con él, y a la vez invitase a otros profesionales del medio a compartirla con sus amigos y reenviarla. Tenía que destacar, persuadir y extenderse por si sola en las redes sociales,  sin necesidad de usar los canales habituales de búsqueda de empleo. Al fin y al cabo ese es nuestro trabajo, así que por qué no intentarlo?.

¿Qué hicimos? Publicar una oferta de trabajo redactada en pseudo-código, lo suficientemente explicativa como para que cualquera la entendiese, pero a la que solo alguien cualificado (y curioso) contestaría. Es difícil explicarlo, así que lo mejor es verla.

Lanzamos un simple tweet para comenzar a difundirla.

A la gente le encantó. Comenzaron a retwitearla, lo hicieron más de 500 veces y miles de usuarios la leyeron, la compartieron en Facebook, recomendaron en LinkedIn y menearon más que a cualquier otra historia durante dos días.

Al día siguiene éramos portada en Microsiervos y cientos de webs y blogs de todas partes comentaban la oferta.

¿Qué conseguimos? Cerca de 40.000 personas leyeron la oferta el primer día y unas 100.000 visitaron nuestra web en la siguiente semana. Recibimos cientos de candidaturas con un perfil cualificado.

Pero sobretodo, ahora somos uno más

Una de las cuestiones más debatidas en blogs y foros es cómo tenemos que etiquetar un logotipo en HTML teniendo en cuenta el SEO. Lo que voy a contaros no es una ciencia exacta, y me estoy basando en la consulta de varios Blogs que considero de confianza así como los resultados de mi propia experiencia.

Primero debemos separar dos tipos de logotipos a marcar, el logotipo que es texto y el logotipo que es imagen. Lo segundo que debemos tener en cuenta es si el objetivo de la Web es hacer branding  o es mucho más importante el contenido.

Entonces se me ocurren 4 posibilidades:

1. Logotipo texto sin acción de branding.
2. Logotipo texto con acción de branding.
3. Logotipo imagen sin acción de branding.
4. Logotipo imagen con acción de branding.

1. Logotipo texto sin acción de branding

Bueno en este caso, parece sencillo y no hay mucha complicación.

<span id="logo">Mi logotipo</span>

¿Porque ponemos id=”logo”? Porque de esta forma los buscadores identifican que el contenido que marcamos con dicha id es un logotipo. Si no lo ponemos tampoco pasa nada pero el robot no lo tendrá tan fácil para identificarlo, y nuestra labor es hacerle la tarea más sencilla y conducirlo como debe ser. También podemos poner id=”logotipo”.

Si además queremos que sea un vínculo:

<span id=”logo”><a href="http://www.miweb.com" tittle=”Mi logotipo”>Mi logotipo</a></span>

o simplemente:

<a href=”http://www.miweb.com” id=”logo” title=”Ir a Mi Web”>Mi logotipo</a>

Prefiero esta última forma porque soy partidario de utilizar cuanto menos etiquetas para hacer lo mismo mejor.

Recomiendo además poner la ruta completa de la web en el atributo href de un logotipo, el buscador relaciona el enlace con el logotipo mucho mejor. Y además pondría una descripción en el title y no limitarnos a repetir el atributo alt.. En caso del Alt si recomiendo poner el nombre de nuestra marca o poner “Logotipo de Mi empresa”. La razón es porque si en Google Imágenes ponemos, logotipo mi empresa (que es lo que buscaría un usuario), será resultado de la búsqueda.

Debemos escribir para el usuario y no para Google.

2. Logotipo texto con acción de branding

En este caso debemos destacar nuestro logotipo.  Tenemos un par de posibilidades dependiendo del contenido.

<strong id=”logo”>Mi logotipo</strong>

<h1 id=”logo”>Mi logotipo</h1>

En caso de ser vínculo:

<strong id=”logo”><a href=”http://www.miweb.com” alt=”Mi logotipo”>Mi logotipo</a></strong>

<h1 id=”logo”><a href=”http://www.miweb.com” alt=”Logotipo de mi web”>Mi logotipo</a></h1>

Con la etiqueta strong estamos destacando el texto, strong no es bold o negrita. Hacemos uso de ella si el contenido que tenemos es mucho más relevante y hace uso de h1 y h2.

Pero en caso de que no sea así y decidimos hacer uso de los h2 a partes de la página que consideramos en un rango inferior entonces usamos la segunda forma y podemos poner nuestro logotipo en h1.

Yo recomiendo de todas formas, de que en caso de que estemos titulando nuestras páginas, pongamos el h1 en el título de la página. Podemos tener además varios h1, si lo estamos haciendo una jerarquía coherente. El tema es más complicado de lo que parece.

3. Logotipo imagen sin acción de branding

Bueno esto es más complejo y debemos tener en cuenta cómo leen los buscadores nuestra página web. Sin pensar mucho pondríamos:

<div id=”logo”><img src=”logo.png” alt=”Mi logotipo” /></div>

o en caso de ser vínculo:

<div id=”logo”><a href=”http://www.miweb.com” title=”Logotipo de mi web”><img src=”logo.png” alt=”Mi logotipo” /></a></div>

La forma es correcta.

El buscador leerá el atributo alt de la imagen y lo comparará con el atributo title de nuestro enlace, además le estamos diciendo que se encuentra en el contenedor de logotipo. Pero aquí debemos ser cuidadosos con el title que le ponemos porque hay varios hacks que se han intentado hacer, poniendo palabras clave o descripciones engañosas para posicionar mejor la web. Google aprende, por eso si la descripción no coincide con el contenido de la web o el atributo alt de la imagen la web puede ser penalizada.

¿Pero es la mejor forma? Pues parece ser que no,  google indexa bien imágenes pero no con la misma calidad que lo hace con un texto. Además, hay buscadores que no son tan listos y otros programas como analizadores SEO que no detectan el atributo alt de una imagen.

¿Qué alternativa existe?  Poner nuestro logotipo como texto en html y hacer uso de CSS.

HTML:

<div id=”logo”><a href=”http://www.miweb.com” title=”Logotipo de mi web”>Mi logotipo</a></div>

CSS:

#logo a {display: block; width: 150px(ancho de la imagen); height: 50px(alto de la imagen); text-indent: -9999px; background: url(logotipo.png);}

El resultado es un bloque de vínculo con el texto “Mi logotipo” desplazado 9999px a la izquierda, por lo tanto no se vería a no ser que tengas un monitor de 12000px o asi. Y como fondo tendremos el logotipo imagen.

El debate está en si el text-indent es un hack o no, pues Google nos dice que el contenido oculto es penalizado. Aclaramos esto, Google considera texto oculto a texto detrás de imágenes o en capas con los estilos de display: hidden o display: none de CSS. Pero aún así aunque hagamos esto no vamos a ser penalizados o al menos hay menos probabilidad. Lo que si es ilegal para Google y si puede ser penalizado es que el texto que ocultemos detrás de imágenes, o que intentemos ocultar al usuario no tenga nada que ver con el contenido de la web. Por ejemplo si en el alt de la imagen ponemos, logotipo de adiestramiento de perros, y en el title del vínculo ponemos Michael Jackson, entonces seremos sospechosos de hack.

4. Logotipo imagen con acción de branding

Poco más que decir, como el anterior pero teniendo en cuenta las etiquetas strong y h1. Siempre dependiendo del contenido total haremos uso de uno o de otro.

<h1 id=”logo”><img src=”logotipo.png” alt=”Mi logotipo” /></h1>

<strong id=”logo”><img src=”logotipo.png” alt=”Mi logotipo” /></strong>

Con vínculo:

<h1 id=”logo”><a href=”http://www.miweb.com” title=”Logotipo de mi web”><img src=”logotipo.png” alt=”Mi logotipo” /></a></h1>

<strong id=”logo”><a href=”http://www.miweb.com” title=”Logotipo de mi web”><img src=”logotipo.png” alt=”Mi logotipo” /></a></strong>

Yo recomiendo y suelo usar:

HTML:

<h1 id=”logo”><a href=”http://www.miweb.com” title=”Logotipo de mi web”>Mi logotipo</a></h1>

CSS:

#logo a {display: block; width: 150px(ancho de la imagen); height: 50px(alto de la imagen); text-indent: -9999px; background: url(logotipo.png);}

En definitiva, tenemos varias formas de maquetar un logotipo en HTML y que sea semánticamente correcto. Todo dependerá de nuestro propósito.

cartel tipográfico Times Roman

Cuando sales a tomar una cerveza por Madrid y te encuentras con un cartel así, surge la pregunta si quien lo ha colgado ahí, sabía que es una presentación de una tipografía con mucha historia, o si lo hizo por su contenido humanista / socio-político. Os “presentamos” la Times Roman.

Una pena que no se pueda leer muy bien el contenido ya que como, la foto está tomada en un bar, por la noche y desde un móvil con una cámara de pésima calidad. Intentaré transcribirlo si la vista me lo permite:

“Declaración I de los derechos humano artículo 72
Toda persona, como miembro de
la sociedad, tiene derecho a la
Seguridad Social,
y a obtener, mediante el esfuerzo nacional y la cooperación
internacional, habida cuenta de la organización y los
recursos de cada Estado, la satisfacción de los derechos
económicos, sociales y culturales,

indispensables a su dignidad y al
libre desarrollo
de tu personalidad.
Times

Y como cierre del cartel, una muestra de la tipografía y sus diferentes caracteres, signos, caja alta y caja baja, etcétera, en fin, un ejercicio tipográfico promocional puro y elegante descontextualizado como nunca habíamos visto hasta la fecha.

Hertz Energy Services - Web

A continuación os contamos brevemente como lo hicimos:

Objetivo: Creación de un site corporativo destinado a clientes de varios segmentos, donde se ofrece una amplia gama de productos para climatización, generación de energía y servicios auxiliares.

Visión: La estrategia se basa en un site experiencial, donde la marca transmite al usuario un carácter moderno y tecnológico utilizando elementos de gran potencia visual y que da lugar a una amplia interacción.

Proceso: El tratamiento de color se basa en el uso de colores apoyando los colores corporativos. La imagen ha de ser viva, dinámica, basado en un interface amable, de sencillo acceso a los contenidos, acceso a consulta / contacto presente en todo el recorrido del site, potenciando links transversales y una información sintetizada.

Solución: Un website realizado en flash y PHP, que sorprende al usuario por su inusual interface, articulado con la finalidad de descubrir con gran inmediatez los servicios prestados, mostrando una muestra información sintetizada deslizando el mouse por el escenario.

Su contenido se muestra en dos grandes bloques: fichas de trabajos realizados mostrado por medio de contenidos audiovisuales (vídeo, montajes de imagen animados y fotografía) y sección de productos navegable por medio de un timeline.

Todo esto se puede encontrar en http://www.hertzenergyservices.es

Directores del proyecto
David González de la Cámara
Sergio Estella

Un proyecto urbano, interactivo, hijo de un español ingeniero informático (Javier Chávarri), una
griega con la misma formación (Caterina Antonopoulou) y un
portugués diseñador (Rodrigo Carvalho) que se conocen en Barcelona estudiando un master en artes digitales en la UPF y se juntan para construir PREFALLL 135.

Es una instalación interactiva audio-visual que utiliza la energía de la caída del agua para hacer girar molinos y producir sonido y gráficos.
Dos depósitos situados en la parte superior de una superficie vertical hacen caer el agua en un circuito de canales y molinos. Los canales se pueden girar por el usuario en torno a un punto fijo,
dejando que el agua se dirija hacia los molinos que desea. La rotación de cada molino de agua produce un sonido nuevo o afecta a un sonido ya existente, y al mismo tiempo afecta también a los gráficos proyectados.

Podéis verlo en Qualid.

En la mayoría de los casos el cliente ya tiene una idea creada al respecto, pero por desgracia, una buena parte de ellas están basadas en premisas erróneas o en el mejor de los casos incompletas.

Lo que no puede ser no puede ser, y además es imposible

Incluso un usuario medio, sin conocimientos de lenguajes, protocolos o formatos, distingue perfectamente una página en flash y divide, aunque a veces inconscientemente, la web en dos grandes grupos: Por un lado están las páginas con movimiento, transiciones complejas, contenido gráfico altamente customizado y sistemas de navegación molones que a veces no hay quien entienda. Por otro las páginas que cargan una a una, sin apenas transiciones y en las que generalmente todo funciona mejor (el texto se puede seleccionar, los botones atrás/adelante del navegador hacen lo que deben, los menús están claros y casi todo es previsible).

Entre medias quedan las aplicaciones que mediante javascript consiguen una respuesta inmediata a las acciones del usuario, como la mayoría de las aplicaciones de google (gmail, picasa, finance, etc), y las que como beatport o Photoshop Express utilizan Flex para proporcionar una interfaz rica y altamente estructurada o realizar acciones complejas.

• Es perfectamente posible producir en flash un resultado con look&feel de html, no así la riqueza de metadatos y la carga semántica de una página en html correctamente planeada.
• Seguramente sea perfectamente posible producir en html (ayudándonos de Javascript y java) un resultado parecido a flash en términos de interfaz y respuesta… aunque me duele la cabeza solo de pensar en la compatibilidad con navegadores de algo así (un tema, por cierto, bastante bien enfocado por google y su GWT).

¿Por qué nadar contracorriente? si tu contenido es tipo flash, haz flash, si es tipo html, haz html, si hay partes que precisan de un tratamiento diferente, puedes optar por secciones, subdominios o dominios claramente diferenciados, como hace DoubleYou, si no te encuentras a gusto en ninguno de los anteriores, quizás debas hacerte algunas preguntas más.

¿Es push o es pull?

Si el carácter de tu contenido es push, si una parte importante del mensaje está en la gráfica, el uso de audio o en la interactividad, si consigues tus visitas mediante enlaces patrocinados y mailings, flash puede dar a la web ese carácter especial, haciéndola destacar sobre las demás, diferenciándola y favoreciendo el recuerdo, sin necesidad de que tu web sea invisible a los buscadores (lo visible que sea dependerá del tiempo que te tomes más que del formato)

Por el contrario, si tu contenido es (o tiene partes) pull, si es probable que los usuarios accedan a el mediante buscadores, si es factible que alguien quiera agregar ese contenido para reutilizarlo, o acceder a el mediante dispositivos móviles, en otras palabras, si el contenido trasciende al medio, el xhtml es probablemente lo mejor.

Ser indexable es bueno

La maravilla del html es que permite una indexación salvaje, es pura semántica, palabras clave, vínculos, metadescriptores, tags, ontologías, vocabularios controlados… Cualquiera sabe esto, lo hemos escuchado tantas veces que la frase “El contenido en flash no es indexable, en html sí” es habitual entre desarrolladores, diseñadores y responsables de marketing… y es incorrecta.

El mero hecho de presentar el contenido en html no lo convierte en indexable, accesible o usable, de hecho diría que cerca del 80% de las páginas que visito diariamente presentan problemas de indexabilidad como metadescriptores incorrectos o inexistentes, palabras clave y títulos repetidos, enlaces sin significado del tipo “pulsa aquí”, o contenidos que simplemente desaparecen al desactivar JavaScript.

Por poner un ejemplo, esto es lo que dice sobre sí misma la home española de un conocido fabricante de automóviles:

<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="10 days" />
<meta name="content-language" content="es">

No es demasiada información ¿no? ni siquiera para un mercado tan oligárquico como el de los automóviles. Si miramos en su web internacional encontramos más datos:

<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="Scholz &amp; Volkmer GmbH, Germany (www.s-v.de)" />
<meta name="copyright" content="2008 Daimler AG, Germany" />
<meta name="keywords" content="Mercedes-Benz, Mercedes, Benz, Brand World" />
<meta name="description" content="Daimler official Mercedes-Benz site. Contains car profiles, motor sports and classics." />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="1 day" />

Si dependíesemos de los metadescriptores para organizar la web el primer ejemplo caería en la categoría de “páginas en español sin descripción”, o sea un cajón de sastre.

Además tendemos a olvidar que flash también es html, porque se embebe dentro de una página en html. En muchas ocasiones el contenido de una página es predominantemente visual y no tiene una estructura claramente definida aún teniendo secciones, o se trata de una aplicación secuencial, eminentemente interactiva, o que entendemos como una experiencia completa y no navegable o divisible en “trozos” de contenido, como Navidad Smart o elfyourself.

En estos y otros casos una sola página en flash con un título, descripción, y palabras clave correctamente elegidos, claros e inteligibles funciona mejor en buscadores que un sitio en html con cientos de páginas sin una distinción semántica o títulos y descripciones repetidos o mal planteados. Así por ejemplo la página de la fotógrafa Luana Fischer, programada en flash y “teóricamente” no indexable, aparece con frecuencia en la primera página de resultados de una búsqueda google hecha en España para el término “fotografía profesional” .

Rizando el rizo

Si nuestro contenido tiene una estructura clara con páginas y secciones diferenciadas, actualizaciones frecuentes o contenido semántico que queremos que sea indexable y accesible más allá de las posibilidades de los metas, y al mismo tiempo la interfaz o la experiencia que queremos proporcionar al usuario necesita flash para vivir, va a ser necesario mancharse un poco más las manos.

Crea una arquitectura completa de tus contenidos, y divídelos en secciones y páginas como harías en un proyecto html. Lo que buscamos es un prototipado funcional esquemático (raquítico, diría yo) para poder convertirlo después en una web reducida a su mínima expresión, sin estilos, sin colores, solo texto, hipervínculos y etiquetas estructurales (como h1 o h2).

Crea un mapa del sitio coherente con este prototipado.

Crea una estructura semántica de carpetas para contener cada página (lo ideal) o al menos una estructura de secciones que responda a variables GET, preferiblemente con significado (?seccion=proyectos).

Crea en html las páginas necesarias para cada sección y subsección (o una página dinámica que se actualice convenientemente), embebiendo en ellas el contenido flash mediante JavaScript (hacerlo así ya era recomendable para evitar el molesto “pulse aquí para activar este contenido”).

Programa cada una de estas páginas con sus propios títulos y metadescriptores, e incluye en xhtml simple todo el contenido de la página (incluyendo el menú completo, textos, imágenes e hipervínculos) entre etiquetas <noscript></noscript>

Cuando sea posible, haz que se refleje en la película flash la sección a la que hace referencia la URL. Esto no tiene influencia en cómo los buscadores ven tu web, pero sí en cómo la ven los usuarios.

Inhabilita JavaScript en tu navegador favorito y navega la página. debería ser navegable e inteligible. Aquí puedes ver un ejemplo www.frostnixon.net.

A partir de aquí puedes conformarte con mantener a los buscadores informados de los cambios en tu mapa del sitio o profundizar más utilizando herramientas de SEO. En cualquiera de los casos el sitio será visible e indexable y los resultados no tardarán en hacerse notar.

Como detalle a destacar, podemos hablar de la accesibilidad que se ha aplicado ya que se trata de un web en flash, que se puede navegar por completo por medio de los cursores y de barra espaciadora.

Qualid by NOKIA es uno de los proyectos más interesantes que pueden ofrecerle a cualquiera, y sin duda uno de los que más hemos disfrutado llevando a cabo.

Qualid by NOKIA mecena y difunde proyectos. Cualquiera con cierta inquietud artística, científica o de la disciplina que sea, podrá tener un espacio donde mostrar su idea y si presenta un proyecto del Interés para la gente de Qualid, recibirá el apoyo económico de Nokia para llevarla a cabo.

Marketing Vivo confió en nosotros, supo comprendernos cuando les mostramos un simple garabato hecho a las tantas de la mañana y, desde el minuto cero de partido, nos apoyó con completa libertad creativa en el proyecto que ahora ve la luz.