Una aplicación usable

La tecnología debe estar al servicio de las personas, adaptarse a ellas y ofrecer facilidades para su vida diaria, no complicarla.

Con esa idea salió de nuestro “laboratorio” el proyecto Navimad (Navidad en Madrid). Una página web que se convierte en aplicación si se navega desde móviles y que facilita exprimir la Navidad a las familias que visiten o vivan en Madrid, acercando las posibilidades que ofrece la ciudad de forma rápida y directa a las manos de quienes preguntan ¿qué podría hacer hoy? Seguir leyendo

Primero, el de la derecha

Rendimiento selectores CSS

Rendimiento selectores CSS

Normalmente cuando hablamos de rendimiento, nos acordamos de Javascript, pero olvidamos el CSS. A veces tan sólo comprimimos el documento para que el archivo sea más liviano. Así como en Javascript influye la forma en que escribimos el código afecta al rendimiento, en CSS ocurre lo mismo. Existen algunas prácticas conocidas como por ejemplo incluir los archivos externos el css usando la etiqueta <link> dentro del nuestro <head>, utilizar estilos de internet explorer que puede generar bucles que hacen la página lenta o usar demasiados estilos en el documento ya que aumentaría el tamaño de descarga.

Pero antes de hablados de cómo escribir selectores eficaces voy a recordar los tipos de selectores que hay:

Selectores de ID

#elemento {}

Este selector se refiere a un elemento único de la página, es decir a un elemento con el atributo id=»elemento», en este caso.

Selectores de clase

.elementos {}

Se refiere a todos los elementos que contienen el mismo nombre del selector. Se usa en este caso el atributo class=»elementos».

Seguir leyendo

Una oferta de trabajo

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 😉

Logotipos en html con SEO: ¿H1, texto o imagen?

¿h1, texto o imagen?

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.

Seguir leyendo

Un cartel tipográfico en un bar de Madrid

cartel tipográfico Times Roman

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.

Caso de Estudio – Hertz Energy Services

Hertz, la compañía conocida por dedicarse al alquiler de coches, tiene múltiples líneas de negocio. Hertz Energy Services se dedica a la generación de energía, la climatización y servicios desde pequeños a eventos de gran formato, así como Rock in Río, Benicassim, Fórmula 1, etc… Gracias a la colaboración con Iconik, quien ha gestionado el proyecto y se ha encargado de los vídeos y 3D, hemos podido desarrollar este site en flash/php.

Hertz Energy Services - Web

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

Prefall 135

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.

¿Flash o Html?

En las reuniones previas al desarrollo de un sitio web siempre llega el momento de la pregunta del millón ¿Lo hacemos en Html o en Flash?

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.

Seguir leyendo