Hasta aquí la noticia no deja de ser un curiosidad que utilizaría un blogger vago como yo para lavarse la conciencia de unos cuantos días sin escribir. Pero el motivo real por el que lo publico es porque el diseño no salió de la gente de Tumblr sino de uno de sus usuarios: el excelente blog The Oatmeal.

La idea surgió como una broma por la reciente caída de Tumblr que duró ¿varios días? The Oatmeal publicó un divertidísimo cómico llamado This is the web right now en el que con mucha ironía ilustra algunas de las últimas noticias de 2010 en la red.

Genial jugada de Tumblr que por supuesto indica los créditos de la imagen así el blog tiene su promoción correspondiente y ellos su página una mantenimiento a la altura de su servicio.

Os dejo con un par de ilustraciones de este comic de Oatmeal:

Comprarte How to be a Rockstar WordPress Designer es probablemente lo mejor que puedes hacer si quieres empezar a montar blogs de WordPress por tu cuenta y estás cansado de patearte Google en busca de tutoriales.

Sé que este primer párrafo suena a promo pero es que me da una rabia enorme no haberme topado con este libro antes ¡y la primera edición es de 2008! Por supuesto está disponible en su eMule o Rapidshare más cercano pero es de las pocas veces que si no lo encontráis, merece la pena pagar. Que no os eche para atrás que sea para WordPress 2.7. Todavía lo estuve ojeando ayer y sigue siendo totalmente útil. Y no, aunque lo parezca no llevo comisión, que parece que siempre que uno recomienda algo de pago en la red hay gato encerrado. Como digo, el P2P es tu amigo en caso de que no os fiéis de mí o andéis mal de cuartos.

Creo que a los que la aparición de los blogs nos pilló haciendo nuestros pinitos con páginas web nos ha pasado que sabemos un poco de todo y mucho de nada. Sabemos bastante de XHTML, algo de CSS, intuimos por dónde van PHP y MySQL a base de usarlos, alguna cuestión de SEO, somos capaces de pegarnos con Photoshop, etc… Pero con un poco de todo no tiene por qué salir un buen plato.

Así pues, el tema del desarrollo web nos gusta y queremos hacernos nuestro propio blog desde cero o intentar sacarnos un dinero haciendo proyectos sencillos para otras personas ¿por dónde empezamos?

Pues es un proceso bien largo. Ya sólo diseñar un tema decente en Photoshop es para romperse la cabeza. Photoshop es un programa monstruoso y si eres principiante lo más fácil es que naufragues en la tercera o cuarta capa.

¿Y luego pasar del Photoshop al XHTML+CSS? ¿Y de ese XHTML a la estructura de WordPress?

Efectivamente: el camino está lleno de momentos en los que resoplarás ante la visión de lo que te queda por delante. Y Google lejos de ayudar, estorba: en castellano la resolución de las dudas está monopolizada por foros y sitios tipo Yahoo! Respuestas donde las preguntas sin respuesta quedan indexadas de una forma lamentable. Y en inglés encuentras cositas pero es fácil acabar con la sensación de que pasas más tiempo en una carrera de obstáculos que disfrutando de tu hobby.

Ahora échale un vistazo al índice de contenidos Rockstar WordPress Designer. Es un libro hecho para la gente que está a medio de camino de no saber nada y de ser un especialista. No te explica las cosas en profundidad sino que te explica justo lo que necesitas saber y lo que es más importante, con un lenguaje claro y bien organizado.

Este me parece el mejor valor del libro: la estructura, el paso a paso necesario para hacer un primer proyecto más que respetable. Especialmente útil me resultó en su momento la sección que adapta el XHTML + CSS a la plantilla de WordPress. Muy didáctica e intuitiva.

Si no quieres perderte con tu primer desarrollo sobre WordPress, aquí tienes la brújula Y para ampliar conocimientos en la red, mucho mejor Delicious que Google.

(imagen del Club de odiadores del Power Point)

Efectivamente, el primero es “NO uses Comic Sans“. Pero como ese va calando con el paso del tiempo, hoy me voy a centrar en el segundo: no hagas la presentación para tí, sino para tus oyentes.

Vaya por delante: no me considero un tipo que hagas unas presentaciones espectaculares. En el último EBE por ejemplo, después de ver la presentación de David Karp de Tumblr tuve que pasar varios minutos limpiando mis babas del suelo. Me siento a años luz de ese nivel. Pero en estos últimos meses, a base de dar charlas a gente que desde 5º de primaria a 5º de IMSERSO he aprendido a no cometer determinados errores. Y el principal es ese: muchas veces hice la presentación para mí, no para la gente que me escuchaba.

Dentro de los consejos básicos para hacer una presentación está que no debe ser un guión para no perderte. No sé vosotros pero yo recuerdo con horror esos profesores de Universidad que se pasaban la clase leyendo lo que ponían las diapositivas. El Power Point como ahorro de tiza está bien, pero debe valer para bastantes cosas más.

En mi caso el problema me lo encontré cuando me pasé al lado contrario, al de las presentaciones Zen tan de moda en el mundo dospuntoceril. Es decir ¿qué pasa cuando en lugar de cuatro bullet points utilizas una sola imagen para representar un concepto? Pues que la presentación queda mucho más mona pero la reacción del público… depende.

Un ejemplo: hace poco estaba dando una charla a un 1º de la ESO (12/13 años) sobre Identidad Digital. En una parte de la presentación tenía una diapositiva con esta imagen:

Mi idea era ilustrar el concepto de que al día de hoy, Google es “tu tarjeta de visita” . Es decir: si alguien pone tu nombre en Google puede encontrar información sobre ti y por lo tanto hay que cuidarla y mimarla.

Al terminar mi exposición de la idea un niño me levantó la mano y me pregunta “¿Quién es Ji Lee?”

Os parecerá una detalle sin importancia pero yo lo tomé como un error mío. Al poner una imagen como casi única referencia de la diapositiva le estaba dando toda el protagonismo, y así lo entendieron los chavales. Y suponer que un chaval va a ser capaz de abastraer la idea de la imagen fue suponer que tenía una madurez intelectual que aún no tiene.

La mayoría de los niños de esa edad no saben qué es una captura de pantalla ni cómo se hace. Es duro pero es así. Y hay veces que me tengo que parar a explicar que lo que están viendo en el Power Point son capturas de pantalla, no las pantallas reales. Y ver en sus ojos cómo se pierden por esa explicación es duro y fascinante a la vez.

Pero no hace falta que me vaya a un 1º de la ESO para hablaros de estos errores. Las presentaciones Zen tienden a dar tanta importancia al diseño que por el camino se pierde el hilo argumental y la estructura o ideas que se quiere transmitir. Las presentaciones “de nueva generación” casi nunca llevan un resumen al final y pocas veces un índice al principio y personalmente ambos me parece fundamentales y perfectamente compatibles con una exposición amena y agradable de ver.

A veces son tantos los efectos especiales que salimos del cine contentos de haber pagado la entrada pero incapaces de hacer un resumen de la historia.

En el momento que empecé a hacerme estas preguntas:

1. ¿Qué nivel de conocimientos informáticos tiene tu público?
2. ¿Qué nivel de síntesis y razonamiento tiene tu público?
3. ¿En qué zona geográfica vas a dar la charla?
4. ¿A qué hora del día vas a dar la charla?
5. ¿Cómo es el aula o sala donde vas a realizar la presentación?

Mejoré muchísimo. Quizás alguno se sorprenda con estos 5 puntos porque lo que estamos cansados de leer es lo de la regla del 10-20-30 , no usar excesivas transiciones, etc… Eso es lo básico, y ya lo tratamos en Blogoff en el post Recopilación de consejos para Power Point. Pero aún siendo lo básico, en estos meses me lo estoy replanteando. En una presentación no hay reglas estándar, sino que estas dependen de la situación en la que la des.

Esta mañana di una charla con tiza y pizarra porque no había cañón (no tuve en cuenta el punto 5). Y fue duro, no os lo negaré, pero me valió muchísimo porque si no eres capaz de exponer tu idea sin la presentación, la presentación no va a ser capaz de hacerlo por ti.

Y si os parece que los puntos 3 y 4 son especialmente raros, no os hacéis una idea de hasta qué punto ayuda a los asistentes a meterse en la historia oir ejemplos locales o adaptados al momento en el que haces la presentación.

En realidad los 5 puntos giran sobre una única idea: el mismo tiempo que dedicas en tu casa a preparar la charla, dedícalo también a pensar en tu público porque es para ellos. Y si tienes dos ideas clave que quieres que queden claras, en mi opinión, pon todas las fotos que te apetezca para ilustrar los conceptos pero al final pon las dos ideas por escrito y bien grandes. El 99% de los asistentes se irán a casa con la sensación de haber disfrutado los fuegos artificiales y de haber aprendido.

Por cierto, una de las mejores charlas a la que he asistido en mi vida fue la de Berto Pena en Iniciador Oviedo. Y por no usar, no usó ni tiza ni pizarra: sólo su voz.

Ya os adelanto a los que vengáis en busca de algún método para volver al anterior diseño que esta vez no parece que haya acción posible para revertir el cambio: el nuevo diseño lo usas sí o sí. De todos modos seguro que te acabas acostumbrando como pasó con el anterior, ten un poco de paciencia.

Además los rediseños de Tuenti para mi gusto siempre han sido a mejor. En este último es increíble lo limpia que aparece la página de inicio. De hecho la única pega que le pondría es que es excesivamente limpia. Es decir, en la sección de novedades me pone que algunos amigos han hecho algo hace 9 minutos pero queda del todo claro qué: sin han actualizado su estado, subido una foto u otra cosa. Ejemplo:

Pero me parece que es cuestión de estabilidad de la nueva versión. O problemas míos con la usabilidad (sigo sin entender que en la parte superior del menú, el texto Gente sea equivalente a ver quiénes son mis amigos) o qué se yo. El caso es que podéis ver una galería de fotos del nuevo diseño en Flickr.

En mi opinión, tanta limpieza le da indirectamente (o a propósito) mucha más presencia al chat y es un movimiento acertado que probablemente ya esté destrozando al messenger en el sector 14-20 años.

Pero a lo que voy. Abro el e-mail y me encuentro correos de chavales a los que no les gusta nada el nuevo diseño. Como me comentaba Ícaro Moyano hace un tiempo, estos son los que arman jaleo pero a los que les gustan los cambios o les dan igual (que son la mayoría) nunca dicen nada ni hacen un nuevo evento que se llame “A mí también me gusta el rediseño del Tuenti“. Con Facebook todos sabemos también lo que escuecen los cambios de rediseño así que ¿por qué no dejar cierta personalización en la estructura de la página al usuario?

Ya sé, ya sé: imagen de marca, menor cantidad de pruebas que hay que hacer cuando se cambia el diseño, etc… pero el caso es que esta idea tan típica de las páginas de inicio 2.0 como Netvibes o iGoogle, lo de arrastrar bloques de un lado a otro y ponerlo como tú quieras me parece muy pobre en las dos redes sociales de mayor calado en nuestro país.

Además la demanda está ahí: existen decenas de hacks y plugins para cambiar el aspecto de  las redes ¿por qué no incorporarlo por defecto? No sugiero algo tan bestia como la personalización de los MySpace que da lugar a cosas horribles pero sí pequeños aspectos de cómo quieras que sea visualmente tu red social favorita que actualmente no tienen o si los tienen están escondidos bajo varias capas de submenús.

Los que somos unos analfabetos del Photoshop, cuando nos ponemos a hacer un diseño web en tonos oscuros fácilmente caemos en unas combinaciones radioactivas que hacen daño a la vista y que podrían pasar por una web de 1997 (siempre que incluya un buen banner amarillo con “en construcción”) sin mayor problema.

Por eso, como estos días me estoy pegando con un diseño sobre fondo negro, tengo de tutorial de cabecera este estupendo artículo de Kabytes.com, que es una traducción-adaptación de The Do’s and Don’ts of Dark Web Design

• Cuestiones de los diseños oscuros [Kabytes]

¿Serif o Sans-Serif? ¿Que tono de blanco debo usar? ¿Con qué paleta de colores debo jugar? Todas estas cosas se tocan en el tutorial y más ampliamente en la versión original en inglés.

Y si además queréis algo de inspiración, os dejo dos listados de estos míticos de “Los mejores diseños oscuros” para que intentéis no caer en lo barroco (al menos de forma inconsciente):

• 30 Dark Designs You Should’ve Seen [Smashing Magazine]
• 25 Beautifully Dark website Designs [Vandelay]

¿Pueden cambiar mucho los clicks que recibo en la publicidad de mi blog si coloco los banners a la izquierda en lugar de a la derecha? ¿Recibiré más correos si cambio el texto del formulario de contacto? ¿Puedo mejorar la cabecera de mi web para que aumenten las reservas en mi hotel?

Obviamente cada proyecto es un mundo y aunque existen recetas más o menos estándar para mejorar la usabilidad de un sitio web y las conversiones en sitios de compras y reservas, siempre hay pequeños detalles que nos sorprenden y que no seríamos capaces de detectar a no ser que estuviéramos sentados codo con codo con los visitantes de nuestra página web.

ABtests.com es una página muy chula que descubrí en Microsiervos y donde distintos desarrolladores hacen públicas las pruebas de los llamados Test A/B, es decir, hacen un pequeño cambio en el diseño de su web y observan cómo afecta al comportamiento de los usuarios.

Aunque por el momento no hay muchas colaboraciones, sí que podemos encontrar ejemplos interesantes como el de Mozilla que sencillamente cambiando el texto de su botón de descarga de “Try Firefox 3″ a “Download now” aumentó las conversiones en un 3,6%.

Algunas cosas uno las ve y piensa “caray, esto era obvio” pero con tantas obviedades es bastante probable que se nos pase alguna a la hora de diseñar nuestro sitio web :-)

La mayoría de los test vienen con información de cómo se han hecho, conclusiones enlaces a la fuente original.

Parece que los avances del tipo recomendación de libros, recomendación de películas y recomendación de recetas nunca vienen de las editoras, productas y canales de televisión respectivamente sino de emprendedores que piensan “¿Por qué demonios no están haciendo esto?”

Sin embargo Canal Cocina ha dado un paso al frente con una web muy atractiva, en la que hacía mucho que no entraba porque las primeras veces no me aportaba mucho más que saber la programación. Y es que si el gran valor de canal cocina es precisamente que hace vídeos de recetas (lo cual para los que somos unos gañanes en los fogones viene de lujo) ¿por qué no llevar ese valor a la red?

En la página disponemos de miles de recetas a las que podemos acceder a través del buscador superior que en principio nos ofrece tres opciones: con foto, con vídeo (marcada por defectos porque estamos en las videorecetas) y que incluya usuarios de la comunidad de Canal Cocina. Si hacemos click en el botón de Ver más, el buscador se vuelve muy completo:

También podemos acceder a las recetas a través del menú lateral donde tenemos miles de submenús. Especialmente importante es el de “Cocineros” por si estás enganchado al programa 22 Minutos y te apetece repasar las recetas de Julius:

Una vez estemos en la página de la receta podremos ver el vídeo a buena calidad y a pantalla completa así como una explicación escrita de la receta, recetas relacionadas y muchas más opciones. Todo muy usable en mi opinión.

Estemos donde estemos en la web, en la parte superior derecha de la pantalla habrá un botón animándonos a registrarnos. El proceso de registro es muy cómo ya que los campos obligatorios son mínimos: nick, contraseña y correo.

Una vez activada la cuenta las opciones se multiplican:

Podemos crear un blog, recomendar restaurantes, interactuar con otros usuarios y hasta hacernos un menú semanal con las recetas de la página:

Podría comentar mucho más de la web pero voy a acabar con su aplicación para iPhone que sacaron hace algo más de un mes y que podéis descargar gratuitamente y sin necesidad de estas suscrito a este canal en tu televisión desde la iTunes Store. La pantalla de inicio es bastanta peculiar con un menú de “máquina tragaperras” donde seleccionamos un tipo de ingrediente base, un tipo de plato y un tiempo para luego mostrar recetas que coincidan con esos resultados.

Sin embargo este apartado no es tan usable como la web porque lo que te pide el cuerpo (sobre todo acostumbrado al modo de fijar las alarmas en el iphone) es que tu selección sea lo que queda en la fila central pero no es así. Sencillamente vas pulsando las opciones una a una (pueden ser más de una en la misma rueda) y luedo le das a ver resultados con lo que has marcado. Por ejemplo algo así:

En el iPhone tenemos casi 6000 recetas pero no todas tienen vídeo. Las que lo incorporan pues de lujo también. El vídeo es de calidad osea que puede tardar un poquito en cargar pero luego se reproduce sin problemas.

En la página de la receta también la tenemos por escrito y con los ingredientes aparte:

La aplicación se puede sincronizar con nuestra cuenta de Canal Cocina y así tener nuestras recetas favoritas en los dos sitios. El buscador, por último, respeta el espíritu de la web de internet y está muy conseguido:

Quizás a la gente alguien le sorprenda que haga este tipo de análisis sin que los señores de Canal Cocina me paguen un duro pero es que me parece que hay valorar el trabajo bien hecho y en el mundo de adaptar canales de televisión a internet a través de la web los fracasos y cosas mal hechas son el pan nuestro de cada día. Las mejores iniciativas como decía al principio suelen venir de gente de fuera del sector pero en esta ocasión el esfuerzo por mejorar la página y adaptarla los tiempos que corren ha sido notable y con buenos resultados.

• También en blogoff: Aplicación para el iPhone de Marca.com

Cuando leí un comentario de agradecimiento a un post de blogoff escrito por el responsable de diseño de Marca.com me quedé gratamente sorprendido. Pensaba que la gente que estaba al otro lado de esa página roja y blanca que visitamos yo y otros 2 millones de usuarios más al día, había una especie de semidioses que te miraban con la cabeza recostada en su nube. Sin embargo, detrás de ese comentario me encontré con un humilde y sensato Álvaro Varona (trabajó para las web de El País, As o 40 Principiales) y con la oportunidad de esta gozada de entrevista que os traigo para los que tengáis curiosidad en saber cómo es la otra cara de Marca.com.

Escuchar [Blip.TV] |Descargar [Megaupload] | Suscribirse | Entrevistas anteriores

“Una web se parece a su versión en papel lo que un huevo a una castaña”

“Quien trabaja en la web cuenta las cosas según están pasando. Quien lo hace en un periódico las cuenta cuando ya han pasado. Son diferentes lenguajes y diferentes criterios”

“En el momento de crisis en el que estamos, tener que encajar un nuevo anuncio en la portada es un lujo”

“La participación del usuario tiene un punto de modernez pero la realidad es que los grandes medios no hacen casi nada con ella”

“Los comentarios de Marca.com los modera una compañía externa”

“Que el usuario tenga que estar registrado para comentar ha hecho que la gente comente más: su nick tiene un valor”

“Si la gente se da cuenta de que hay alguien escuchando, se reduce el ruido de los comentarios”

Como siempre, para realizar esta misma operación hay otros muchos programas pero éste me parece el más sencillo.

• Descargar Instant Eyedropper

Una vez instalado, cuando arranquemos el programa éste se situará en la bandeja del sistema de Windows:

Lo único que tenemos que hacer es un click encima de ese icono y sin soltar el botón del ratón arrastrarlo a la parte de la pantalla donde queramos identificar el color:

Al soltar el botón del ratón el código quedará guardado en el cortapapeles de Windows. Esto significa que podremos pegarlo en cualquier sitio pulsando Ctrl + V o en el habitual menú Edición/Pegar.

Si hacemos click con el botón derecho encima del icono veremos que podemos cambiar de forma sencilla el formato en el que queremos que nos de el color. Por ejemplo en RGB:

• También en blogoff: Combinaciones de colores para tu blog o web
• También en blogoff: Colores en hexadecimal, una introducción