Avisar de contenido inadecuado

Diseno en obokaman.com

Pruebas de diseño para OboLog

El pasado miércoles estuvo con Toni en un interesante seminario sobre redes sociales ofrecido por la gente de Yahoo! Barcelona en la UPF, impartido por 5 investigadores japoneses. Aunque el evento en un principio estaba orientado al personal docente y alumnos de la UPF, tuvimos suerte y nos enteramos del mismo a través de un compañero de trabajo.

Las charlas estuvieron realmente interesantes, reveladoras. Todos los participantes habían estado en grupos de investigación relacionados de un modo u otro con el análisis de relaciones entre individuos en entornos de comunidades online o redes sociales, métodos de extracción y análisis de datos, elaboración de algoritmos para definir afinidades, etc... ( Trataré de hacer un resumen la semana que viene, a partir de los apuntes que tomamos. ) Finalmente sacamos algunas ideas de aplicación directa a nuestro I+D sobre redes sociales y, cómo no, para OboLog.

Y entre éstas nuevas ideas y una nutrida lista de "tareas pendientes" que mantengo en el Basecamp de OboLog, se me ha ocurrido hoy que quizás tendría sentido aglutinarlas todas para una nueva versión, el primer "Service Pack" del nuevo OboLog. Mensajería privada, foros de soporte, agrupación de blogs por intereses, redes de usuarios por afinidades, posibilidad de marcar como favoritos posts, blogs, usuarios... y un nuevo diseño para la web!

De momento es poco más que un boceto inicial para probar algunos cambios sutiles en el logo, en las tonalidades de color, la distribución general de contenidos en 3 columnas, el encaje de algún nuevo elemento... Más o menos será la base que utilice para desarrollar esta próxima versión. Puedes ampliar el boceto haciendo clic sobre la imagen.

12990-13493.jpg

Microsoft realizó el video-parodia sobre la caja de Ipod

Hace algo menos de un año, comentaba un curioso vídeo en el que se planteaba qué hubiera ocurrido si Microsoft hubiera diseñado la caja del Ipod. El video estaba planteado como un ejercicio de diseño en que se parodiaba la tendencia de Microsoft a sobrecargar el diseño de los paquetes de sus productos, versus la sencillez y la elegancia de los de la competencia, Apple.

Ahora ( un poco tarde, he de reconocer ) me entero de que aquel video no fué fruto de algún diseñador graciosillo, ni siquiera de la propia competencia, Apple, ¡si no de los propios diseñadores de Microsoft! Al parecer, el vídeo se montó como divertimento, sencillamente para distribuirlo de forma interna entre empleados de la propia Microsoft, pero se acabó filtrando.

En palabras de Tom Pilla, portavoz de Microsoft:

[...] It was an internal-only video clip commissioned by our packaging [team] to humorously highlight the challenges we have faced RE: packaging and to educate marketers here about the pitfalls of packaging/branding [...]

[...] While MS did not release the video, it's natural to share funny things with friends. So while we didn't publicly share the video, it was shared with appropriate teams internally. We're happy to see others enjoy the laugh as well. [...]

En cualquier caso, reírse de ellos mismos y reconocerlo de forma abierta es algo que les honra.

Lavado de cara

Por fin. Llevaba ya tiempo dando vueltas a un cambio de diseño para el blog... el último restyling nunca me acabó de convencer, y quería un diseño más limpio, claro y legible. Aunque ya había cogido cariño a esa combinación de grises y naranjas/amarillos que venía usando desde el principio de los tiempos, tocaba renovarse.

Hay algunos detalles que aún me hacen dudar: el tagline, "pensamientos en red" tenía más sentido al tratarse obokaman de un diario colectivo... o el tema del fotón en la cabecera... quizás demasiado grande?

Al fin y al cabo, la idea era también darle un aire más "personal" al blog. Me estoy planteando precisamente crear un blog paralelo donde escribir sobre los temas más relacionados con mi trabajo: diseño, desarrollo web, tecnología, etc... y reservarme el obokaman como lo que fué: mi blog personal.

Últimamente tengo la impresión de que mezclo demasiado a menudo unas cosas y otras, resultando al final en un batiburrillo de temas difícil de seguir ( Xavi ha llegado a decirme que desde hacía un tiempo no entendía una palabra de lo que explicaba en mi blog... y había dejado de leerlo, por aburrido. ¬¬U )

Así que poco a poco iré "traspasando" todos los mensajes sobre desarrollo web a este nuevo blog, y espero que pueda ver la luz dentro del próximo mes. A ver si consigo convencer a Ruben para que se anime a escribir conmigo ( un blog más para nexoBlogs ! ). En cualquier caso, te mantendré informado sobre los "cambios".

En definitiva: Espero que te sientas a gusto en el nuevo obokaman y que este punto de inflexión sirva para que ambos retomemos las buenas costumbres. Yo: escribir más a menudo ( que esa es otra... ) y tú: dejarte caer por mi hogar "virtual". Las puertas están siempre abiertas.

Ipod Begins

En Wired han publicado un reportaje sobre el reproductor musical de Apple, Ipod . En él hablan sobre el proceso de diseño del interfaz.

¿Os imagináis la reunión alrededor de ese prototipo de cartón? "Uhm... Sí, es bonito, es simple... 5 únicos botones... ¡Pero os aseguro que podemos mejorarlo!" Y vaya si lo hicieron...

Visto en No lo entiendo .

Limpieza de floats en IE 7

Durante los últimos meses, Microsoft nos ha tenido en vilo ( sobretodo a los desarrolladores web ), pendientes del soporte a la especificación de CSS que tendría su nuevo navegador, Internet Explorer 7 . Después de unos 5 años sin publicar una nueva versión, parecía que la cosa iba a salir "fina": El modelo de caja se ha implementado correctamente, se soportan propiedades tan útiles como min/max-width, ... ¿¡Se acabaron las reglas sólo para IE!? No...

Por poner un ejemplo, no se han implementado los pseudo-elementos :before y :after. ¿Trivial? Para nada. Entre otros muchos usos, como la inclusión de elementos que afecten a la presentación de ciertos bloques ( comillas antes y después de elementos cite, pipelines después de listas de enlaces horizontales... ) o la limpieza de floats a través del easy clearing method quedan totalmente inutilizada.

El antiguo hack para explorer es ignorado por el nuevo IE y además, al carecer éste de soporte para :before, tampoco la regla genérica funciona. Esto se traduce en un montón de sitios descuajeringados: el anterior método permitía que aquellos contenedores que tuvieran hijos flotantes obtuvieran una altura correcta, correspondiente a su hijo más alto.

Cuando ya había perdido toda esperanza de disponer, de nuevo, de un método lo más genérico posible que permitiera disponer de un marcado "limpio" para conseguir el deseado efecto... me encontré con el artículo de Roger Johansson, New clearing method needed for IE7?, en que justo se plantea esto mismo, y en el que, a través de la discusión generada por sus lectores, consigue llegar a una versión funcional para IE y que hace uso exclusivamente de CSS.

La solución:

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

Con un pequeño añadido para IE 6, que se podría implementar de esta forma:

* html .clearfix {height:1px;}

Información adicional:

Fundamentos Web en directo desde torresburriel.com

Si no habéis podido acercaros a Oviedo para asistir a Fundamentos del Web , recordad que podéis seguir las ponencias en directo desde El Mundo, en formato video.

Además, Daniel Torres Burriel está realizando un seguimiento exhaustivo de cada una de las sesiones. Desde su weblog podéis seguir, prácticamente al minuto, la evolución de las charlas. ¡Realmente impresionante!

Fundamentos Web 2006: A sólo dos días

El próximo martes, día 3 de Octubre, empieza en Oviedo uno de los eventos de mayor importancia a nivel nacional en el ámbito del diseño web: Fundamentos Web 2006 .

Expertos de la talla de Andy Clarke , Dave Shea , Kevin Yank , Vinton Cerf ( y muchos más ... ) intentarán, a lo largo de varias sesiones, durante 3 días, echar algo de luz y entablar discusión sobre nuevas tendencias, buenas prácticas, diseño con estándares, casos de éxito... ¡Y un servidor ha tenido la suerte de poderse contar entre los participantes!

Dos días de charlas y coloquios ( con algún que otro encuentro informal de por medio ) y un día destinado enteramente a un taller práctico bajo el título "Designing for Web 2.0". No podría estar más impaciente.

Sí, esto me apasiona: trato de estar al día, intento seguir varias listas de correo y estar atento a mi lector de notícias... pero en un evento de este tipo tendré la ocasión de escuchar en directo a aquellos a quienes leo a diario, aquellos que crean las tendencias que otros en la mayoría de los casos simplemente nos esforzamos en seguir... Una ocasión sin igual, desde luego.

Aunque sea a modo de resumen, intentaré ir publicando un seguimiento de las sesiones.

Nueva home de Yahoo

Ya habían corrido por ahí algunas screenshots, ahora es públicamente accesible:

http://www.yahoo.com/preview

Fijaos en la manera que tienen de presentar las nuevas opciones desde el "Take a quick tour" ( superponen un PNG transparente, o cómo ponen en práctica algunas de los últimos patrones de diseño de su librería en las opciones laterales, "mail", "messenger", "radio"...

Destacable también el uso de CSS Sprites para ahorrar ancho de banda en lo que se refiere al uso de iconos pequeños. Se trata de usar una sola imagen que contiene un grupo de iconos pequeños, y mediante CSS mostrar sólo aquella que corresponde al elemento en cuestión. ( CSS Sprites -> http://www.alistapart.com/articles/sprites/ ). De esta manera la imagen para todo un grupo de iconos sólo se descarga una vez.

Respecto al ancho de pantalla, pues no sé por qué opción se decidirán al final, quizás opten, como download.com, por obviar a la franja de usuarios con 800x600, lo que no me parecería muy buena idea. Y más teniendo en cuenta que el nuevo layout no hace un uso excesivo de elementos gráficos complejos, si no de contenedores bastante simples: Pocos redondeados y mucha cajita con fondo degradado.

Verémos cómo queda la versión final.

De momento lo que más me ha sorprendido es que el rediseño visual es sólo una pequeña parte de esta nueva BETA, todos los elementos interactivos han sido muy bien implementados. Fijaos además que han seguido técnicas no obtrusivas, es decir, las funcionalidades avanzadas no impiden que un usuario sin javascript o con un navegador antiguo saque partido de ellas. Sin javascript, los links siguen comportándose como toda la vida. Es una buena práctica, no os parece?

Comentan más a fondo los cambios que implica esta nueva home, y los patrones de diseño que han utilizado, en su blog http://yuiblog.com/blog/