• Blueprint
• Wireframe

Blueprint: En el diseño de interacción y la arquitectura de la información entendemos por blueprint (o arquitecture map) el diagrama que muestra la relación entre las distintas páginas o acciones del sistema que estamos creando. Es el esquema de funcionamiento del site.

Wireframe: El wireframe (o mockup, o maqueta) nos permite definir como se estructuran los elementos en la interfaz y la relación entre ellos. Es el esqueleto de la página.

Hay distintas propuestas gráficas para llevar a cabo estas tareas pero ninguna de ellas definitiva. Lo mejor es trabajar con lo que te interese de cada propuesta y, finalmente, tener la tuya propia.
Lo importante es que sea fácil de entender, de explicar y que cubra nuestras necesidades. Al fin y al cabo los sistemas de prototipado son, ante todo, una herramienta de comunicación con nosotros mismos y con el resto del equipo.

Hay mucho y variado software para realizar estas tareas y, de hecho, cualquiera nos sirve. Podemos realizar-las hasta en papel, que a mi me parece una buena opción para plasmar nuestra primera estructura mental y para empezar a desarrollar en las primeras fases del proyecto, pero floja para hacer una diagramación detallada y comunicable.
Aquí varios enlaces interesantes sobre diagramación en papel

Tal vez los más usados son:

• Microsoft Visio (Windows): aquí una interesante review
• Omnigraffle (Mac): mi favorito para Blueprint
• Fireworks (Windows / Mac): mi favorito para Wireframe. Aquí una interesante review

Os dejo otro enlace con más información sobre herramientas de prototipado

En cuanto a iconografía para blueprint, a mi me gusta especialmente la propuesta de Jesse James Garrett perfectamente traducida al castellano por Javier Velasco:

• Un vocabulario visual para describir arquitectura de información y diseńo de interacción

En cuanto a wireframe, fireworks ya tiene por defecto la mayoría de elementos que necesitaremos. De todas formas, por la red encontramos muchas otras alternativas para ésta y para las otras herramientas.

En nosolousabilidad.com hay un interesante artículo sobre AI acompañado de buenos enlaces para encontrar, entre otras cosas, iconografía.

También son interesantes los iconos para diagramación en isométrico de Peter Van Dijck.

La propiedad float de CSS es muy útil y muy usada para posicionar elementos en la interfaz pero presenta un pequeño problema: Al estar situada dentro de otro elemento (por ejemplo un div), este elemento contenedor no envuelve al elemento flotante dentro de ella (colapsa).

Una forma común y de muy extendida utilización, entre otros por mi, es usar el método clearfix. Este método consiste en crear una clase “clearfix” en nuestro CSS y aplicarla a los elementos contenedores.

Por ejemplo, en un código html tal que…

<div id=”contenedor” class=”clearfix”>
    <div id=”divflotante”>
        Div flotante.
    </div>
</div>

…el css sería:

.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 */
#divflotante {
    float:left;
}

El problema de este método es que, si queremos ser puros y castos, estamos ensuciando nuestro html con una clase que no es semántica. No habla del contenido o tipología del elemento al que está aplicada.

Para ser semánticos, leo en CSSLab una metodología que por un lado es muy sencilla y, por otro, no ensucia la semántica de nuestro html ni del código de nuestro archivo de estilos:

Overflow para evitar el colapso en contenedores que envuelven elementos flotantes

No conocía la técnica y es realmente buena.

Teórica es una palabra clave.

Por ejemplo, Sclipo es una web “estilo youtube” donde los usuarios comparten conocimientos sobre diferentes temas en forma de explicaciones en vídeo o videotutoriales. ¿Qué diferencia esta web de youtube? El software es el mismo y el contenido lo publican los usuarios ¿no? Que una sea una red generalista y la otra una enfocada al aprendizaje es una decisión de marketing basada en el modelo de negocio de cada plataforma.

¿Porqué Tuenti es una red social de universitarios y Yunu de “ligoteo”? ¿A caso el contenido no es generado por el usuario? ¿Y si uso Tuenti para ligar y Yunu para hacer amigos? El software lo permite.

Podría darse que una herramienta sea utilizada por los usuarios para finalidades que los desarrolladores del sofware ni siquiera habían imaginado.

Podría darse y, de hecho, se da.

Uno de los casos en que se dan un gran número de usos creativos son las herramientas de microblogging como Twitter.

Twitter te ofrece una herramienta de comunicación asíncrona en la que puedes escribir, publicar y compartir, mensajes de hasta 140 carácteres. Twitter te pregunta “What are you doing?” y los usuarios lo usan para explicar lo que hacen en cada momento, claro. Y como recordatorio de tareas, y para publicar los últimos conciertos añadidos a un website de conciertos y para… y para… y para. Yo mismo utilizo Twitter, entre otras cosas, como una extensión de este blog donde publico enlaces interesantes que encuentro en internet a lo largo del día.

Qué grande es internet.

Un ejemplo de esta imprevisibilidad que me ha sorprendido grata y especialmente está en Youtube, que recientemente ha incorporado la posibilidad de añadir, superpuestas a los vídeos, anotaciones con enlaces. En Corderotv se han servido de esta nueva funcionalidad para crear Tube-Adventures, utilizando las anotaciones para enlazar distintos vídeos entre sí creando, dentro del mismo Youtube, una aventura interactiva en forma de videojuego. No os lo perdáis.

Como dice Think Wasabi: “así tenía que haber sido iDisk“.

Tiene una versión gratuita con 2Gb de almacenamiento y una versión de pago por 9.99$/mes o 99$/año en la que puedes disponer de hasta 50Gb.

Entras en la web, te instalas una pequeña aplicación multiplataforma, te registras y te crea una carpeta llamada Dropbox. Todo lo que copies en esta carpeta se sincronizará, al momento, con tu espacio on-line. Así de fácil. Copiar / Pegar.

Personalmente, le estoy dando un uso bastante intensivo, a nivel profesional, a la opción de compartir una carpeta manteniéndola sincronizada entre todos los usuarios con los que esté compartida.

Tiene otras funcionalidades interesantes como la posibilidad de poner archivos en una carpeta “Public” generando una url pública para cada archivo o la posibilidad de crear álbumes de fotos automáticamente.

Y, por supuesto, también puedes gestionar toda tu información y documentos directamente desde la web en la que hay implementado, incluso, un sistema de control de versiones.

A parte de la útilidad más directamente obvia para Dropbox están apareciendo otros usos creativos como el que propone Joel on Software para gestionar passwords de manera sincronizada o la posibilidad de sincronización de los datos de distintas aplicaciones entre máquinas. Como el ejemplo de Yogur Griego, que nos explica como sincronizar Things. El fantástico programa de tareas (GTD) para Mac.

Simplemente decir que en el poco tiempo que he utilizado Dropbox se ha vuelto, para mi, imprescindible.

Enlace: Dropbox

¿Cómo?

Para muestra un botón (bueno, dos):

Flip / Flip 2 (probad valores como, por ejemplo, 45)

Otras funcionalidades interesantes de la propiedad:

Skew / Skew 2

NOTA: sólo funciona en navegadores con motor WebKit (Konqueror, safari …)

Vía: Anieto2K

Esta vez la recopilación consiste en 40 recursos para diseño de layouts con css.
Entre ellos encontramos tutoriales, tips y “best practices” para el diseño y diagramación de sites en (X)HTML y CSS.

Imprescindible en los favoritos de cualquier diseñador / maquetador web.

Vía: noupe.com

ver ilustración: “The State of the Web”

Si hiciésemos la misma ilustración en años anteriores, ¿creéis que cambiaría algo más que los logos? ¿podríamos definir situaciones parecidas de forma cíclica cual materialismo histórico?

No estoy seguro de ello, pero imagino, por ejemplo:

• En la propia ilustración vemos que a Twitter le pasa lo mismo que le pasó a Friendster.

• Plantea a Firefox como el “world dominator”… ¿No era Microsoft? ¿Pasará lo mismo con Apple en unos años? Y no olvidamos a Google, claro.

• Para el caso del cambio de precio del iphone seguro que podéis ofrecer miles de ejemplos parecidos. A mi me pasó con la Sega Dreamcast (sí, sí, yo compré una de las 4 que vendieron).

• Por 25 pesetas la respuesta, decidme nombres de software liberado este último año:
  por ejemplo, el código fuente del uploader de Flickr.

• Yahoo copia a Google, Microsoft copia a Mac, etc…

• Los “Glossy Buttons” han pasado de moda. Tuvo que haber un momento en que se pusieran de moda.

• “Facebook gets bigger and bigger”. “Google gets bigger and bigger” (aunque esto sirve igual para cada año).

• En la propia ilustración dice que “two girls one cup” es el nuevo Goatse.

• La araña de Google indexa… todo en general.

Esto no pretende ser una crítica a la ilustración. Al contrario, creo que es una buena instantánea de lo que está pasando en la red que nos permite iniciar muchas reflexiones al respecto.

Vía: Microsiervos

Como sabreis, Joomla! es un muy potente Gestor de Contenidos para web.

Si queréis saber como fué Javier Gómez, moderador y publisher de Joomlashpanish.org y amigo personal de este foro ha hecho una review del mismo en el site de joomlaspanish.

Vía: Joomlaspanish.org

Enlace: Flickr Code

Vía: Ojo Buscador

Como sabréis el salón del cómic es una especie de enorme mercadillo de cómics enmarcado por una serie de exposiciones, presentaciones de novedades, mesas redondas y firmas de autores.

Personalmente voy al salón para ver las exposiciones, ver las novedades y por una especie de extraño sentido de la obligación. Si eres aficionado al cómic es un evento al que simplemente tienes que ir. Y punto.
Casi nunca compro ni un solo tebeo en el salón, exceptuando alguna novedad que espere con interés (bastante rabia, este año, al comprobar que no han publicado el nuevo tomo de 100 Balas que esperamos hace meses). Me agobia bastante tener que decidir una compra peleándome con las espaldas y sobacos que, habitualmente, abarrotan tiendas y editoriales.

Aunque es algo que jamás he compartido, mucha gente ve en el salón la oportunidad de que el autor admirado, cual estclassla por un día (tampoco es que salgan a menudo en los medios los autores de cómic), les firme una de sus obras.

Sea por lo que sea, es algo, especialmente si no se ha visto nunca, que merece la pena de ver.

De este año destaco el nivel y cantidad de las exposiciones. Algo que cada año tiene más importancia en el salón y cada año se cuida más.
De entre las mismas destacaría la de Miguelanxo Prado, la de Davíd Rubín y las ilustraciones originales de Tim Sale para la serie Héroes.
Aunque tal vez la mas visitada, no entré en la exposición de DDT ya que había hasta cola para verla. En ella exponían parte del trabajo realizado para películas como Hellboy o El Laberinto del Fauno. La pude ver un poco por fuera y la verdad es que tenía bastante buena pinta.

Como puntos negativos estarían la crecida, año tras año, del espacio dedicado al manga, que por suerte no se contagia a las exposiciones (tienen su propio salón, carajo), el caos en la distribución de la exposiciones (unas poraquí otras porallá…) y la, supongo inevitable, desorientación que pueden sentir las personas que no tengan muy claro lo que van a buscar entre tantísima oferta de cómics.

P.D: Quería poner algo sobre toda la gente que va disfrazada al salón (de algunos, cada vez tengo menos claro si van disfrazados o simplemente es su atuendo habitual), pero la verdad es que no tengo palabras.