Que en la web 2.0 los usuarios son los generadores de contenido es algo ya conocido. Esos contenidos se publican en plataformas preexistentes, que no tienen contenido por sí mismas y que, por lo tanto, son básicamente software. Software que es desarrollado para que el usuario lo utilice para algo en concreto, con una finalidad teórica clara.

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.

De la forma en la que nos tiene habituados, en noupe.com han hecho una nueva recopilación.

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

Mathew Inman ha creado una ilustración a modo de resumen del estado de la web en este verano de 2008:

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

Muchos os habréis encontrado con el problema del colapso de los contenedores de elementos flotantes.

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.

Podemos dividir la tarea de prototipado y defenición de la funcionalidad de un site en dos grandes bloques consecutivos:

• 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.

Hoy nace SeedRocket, una iniciativa de ayuda a la creación de proyectos relacionados con las nuevas tecnologías, con colaboradores como La Caixa, European University, Cambra de Comerç de Barcelona, Bongo, Area Interactiva, Anpro21, First Tuesday y Startup 2.0.

Seedrocket seleccionará 10 proyectos y compartirá con sus responsables 8 días de trabajo intenso, workshops y asesoría para definir las acciones a tomar para desarrollar el proyecto.

Me parece una muy buena oportunidad y creo que todos aquellos que tengáis pensado empezar alguna iniciativa no deberíais dudar en apuntaros.

Enlace: Inscripción

Vía: Carlos Blanco

Leo en Anieto2K sobre la propiedad propuesta por WebKit para hacer transformaciones directamente al html de una página con CSS.
Una de las curiosas utilidades de esta propiedad es la de rotar el html mismo.

¿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

Google Street View es un servicio añadido a google maps con el que podemos pasearnos por las calles de la ciudad que deseemos con una navegabilidad de 360º.

Aquí os dejo un ejemplo

El servicio, por el momento, sólo se encontraba disponible en Estados Unidos pero esta semana hay nuevas noticias sobre el tema:

Googleneta ha visto, y fotografiado, el coche de Google Street View en Madrid:

Hoy, Lucia Navarro, publica en Seraccesible la fotografía de otro coche, esta vez en Barcelona:

Parece que en poco tiempo podremos pasearnos por las calles de nuestra ciudad (y muchas otras) sin necesidad de salir de casa. Si esto lo añadimos a la integración de gogle maps con panoramio y con wikipedia, para mi al menos, el binomio google maps / google earth, que ya era un servicio muy potente, se está convirtiendo en un servicio imprescindible.

Update:

Haciendo una pequeña búsqueda, veo que empieza a ver-se por todas partes:

• En sevilla
• En carretera
• Seguro que en breve veremos más… Estad ojo avizor chicos.

Vía: Un montón

El pasado sábado 19 de Marzo se celebró en Madrid el primer Joomla! Day oficial en el territorio del estado español.

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

Yahoo! ha creado un site para desarrolladores donde centralizar toda la información para desarrollo e implementaciones y la API completa de su popular servicio de gestión de fotografías Flickr.

Enlace: Flickr Code

Vía: Ojo Buscador