Also available in English

Inf@Vis!

La revista digital de InfoVis.net

DENIM, del l√°piz a la web
por Juan C. D√ľrsteler [mensaje nļ 122]

El dise√Īo de sitios web suele empezar con bosquejos hechos con papel y l√°piz. Denim convierte directamente los diagramas que salen de una tableta gr√°fica o del dibujo con el rat√≥n en prototipos de sitios web funcionales.

DENIMStory.gif (177365 bytes)
DENIM: El nivel de zoom "storyboard" que permite ver y editar un conjunto de p√°ginas junto con sus enlaces. Resulta apropiado para crear enlaces entre p√°ginas. Aqui se muestra el ejemplo disponible en l p√°gina de DENIM.
Captura de pantalla en el ordenador del autor.
Pulse sobre la imagen para agrandarla 

Los que mantenemos un sitio web lidiamos con la necesidad de redise√Īar de vez en cuando las p√°ginas (si, al m√≠o ya le est√° haciendo falta), a√Īadir nuevos recursos o dise√Īar nuevas secciones.¬†

No nos enga√Īemos, por mucho FrontPage, Dreamweaver o cualquiera que sea el sistema en que montas tu web site, al final o, mejor dicho, al principio, est√°n los esquemas y diagramas hechos con el viejo y amigable recurso del papel y el l√°piz.

James Landay profesor asociado en la Universidad de California en Berkeley considera que el trabajo en las fases tempranas de creación o modificación de un sitio web tiene lugar habitualmente mediante esquemas y dibujos sobre papel.

‚ÄúEl lapiz y el papel son esquem√°ticos, ambiguos y r√°pidos‚ÄĚ comenta Landay en el articulo de Wired News ‚ÄúEtch a Site as Easy as Pie‚ÄĚ por Leander Kahney¬† ‚ÄúLos dibujos son inherentemente ambiguos. La ambig√ľedad fomenta la creatividad. Anima a la gente a considerar diferentes opciones‚ÄĚ.

Por ello Landay y sus colegas del GUIR  (Group for User Interface Research) de la Universidad de California en Berkeley han puesto en marcha un proyecto llamado DENIM que permite hacer el sketch de un sitio web o una interfaz de usuario a mano alzada, sobre una tableta gráfica, Tablet PC o simplemente a golpe de ratón.

Hasta aquí la cosa no parece muy interesante, pero DENIM genera, a partir del sketch, un sitio web esquemático pero funcional, que se puede consultar y modificar sobre la marcha. El objetivo que se pretende es crear rápidamente un prototipo que permita discutir directamente con el cliente las ideas y soluciones a lo que se pretende que haga el sitio web. De esta forma se puede tener feedback y jugar con las ideas para modificar el esqueleto y la funcionalidad del sitio antes de gastar más energía en construirlo.

El navegador que incorpora DENIM permite consultar los enlaces entre páginas y moverse por el web. El sketch se puede exportar también en html y publicarlo en Internet (véase por ejemplo un sitio web creado con DENIM y publicado en la web).

DENIM se puede bajar gratuitamente (entre 5 y 12 Mb dependiendo de si te bajas tambien el SDK de Java2). El código fuente está también disponible libremente. Tiene versiones para Windows y Linux. 

DENIMOverview.gif (142149 bytes) DENIMPage.gif (114704 bytes) DENIMDetail.gif (117155 bytes)
DENIM: Visión general de todo el sitio web generado. Se aprecian solamente las páginas y sus enlaces.
Captura de pantalla en el ordenador del autor.
Pulse sobre la imagen para agrandarla 
DENIM: Vista a nivel de página. Nótese la posición del cursor a la izquierda. El zoom nos permite editar las caracterisiticas de páginas enteras.
Captura de pantalla en el ordenador del autor.
Pulse sobre la imagen para agrandarla 
DENIM: Vista a nivel de detalle. Se pueden editar los contenidos de la página en cuestión. Es el máximo detalle que permite el zoom.
Captura de pantalla en el ordenador del autor.
Pulse sobre la imagen para agrandarla 

DENIM tiene una estructura muy simple. En la parte izquierda hay una barra deslizante (zoom slider) con la que puedes escoger el nivel de detalle en el que quieres trabajar. Cambiándolo de posición (arriba menos detalle, abajo más detalle) no sólo varias el zoom de la visualización de tu sketch, sino que cambias el nivel conceptual de trabajo. 

El resto de la pantalla lo constituye la ‚Äútela‚ÄĚ (canvas) sobre la que pintas, un curioso men√ļ en forma de gr√°fico de pastel, en el que cada porci√≥n es una opci√≥n del men√ļ y una barra o caja de herramientas (toolbox) donde residen las cuatro utensilios con los que se dibuja: un l√°piz, una goma de borrar, un tamp√≥n para etiquetar y una mano que te permite mover la ‚Äútela‚ÄĚ, al estilo de Acrobat. (Entre nosotros, no entiendo porque usan el men√ļ-pastel, no hay mejora respecto al men√ļ tradicional y resulta m√°s engorroso).

Así, puedes empezar dibujando el esquema general del sitio con unos cuantos trazos para la página principal y las secciones básicas del web, para luego mover el zoom y editar página a página los enlaces entre sus contenidos, que pueden ser simples garabatos simbolizando las imágenes o los textos escritos.

Lo interesante es que puedes borrar, cambiar e interactuar continuamente, probando las ideas que se te van ocurriendo, sin escribir una línea de html, simplemente dibujando como lo harías sobre papel.

Seg√ļn sus creadores DENIM es ideal para el Tablet PC, pues en √©l la forma natural de entrada de datos es con el l√°piz, emulando el modo habitual de hacer esquemas sobre papel. Un PC normal con una tableta gr√°fica tambi√©n da buen resultado, aunque se puede tambi√©n usar con el rat√≥n, con menos rendimiento.

La √ļltima versi√≥n, con la que he estado jugando algunos d√≠as resulta bastante atractiva de usar, aunque, en mi ordenador, es un poco lenta en algunas situaciones.

La idea tiene un gran potencial, si bien probablemente requiera de refinamientos en versiones ulteriores. Especialmente atrayente para los dise√Īadores de webs es la posibilidad de sentarse con el cliente, TabletPC en mano, y esbozar unos cuantos diagramas con sus enlaces entre si para discutir ideas y modificarlas sobre la marcha hasta obtener una funcionalidad apropiada.

Para los interesados solo hay una recomendación posible: bájense DENIM y jueguen con él unos días. Sólo así conseguirán el criterio necesario para saber si la idea tiene futuro o sólo es una brillante idea más.

Enlaces de este artŪculo:

http://www.microsoft.com/frontpage/   P√°gina de Microsoft FrontPage
http://www.macromedia.com/software/dreamweaver/   P√°gina de Macromedia Dreamweaver
http://www.cs.berkeley.edu/~landay/   P√°gina personal de John Landay
http://www.wired.com/news/technology/0,1282,58794,00.html   Art√≠culo "Etch a Site as Easy as Pie" por Leander Kahney
http://guir.berkeley.edu/   Group for User Interface Research
http://guir.berkeley.edu/projects/denim   P√°gina web del proyecto DENIM
http://guir.berkeley.edu/projects/denim/denim_daily_files/page149.html   Sitio web de ejemplo creado con DENIM
© Copyright InfoVis.net 2000-2018