Blueprint vs Wireframes :Tipos de diagramas o prototipos

Los dos principales tipos de diagramas o prototipos que se suelen utilizar para
representar la propuesta arquitectónica de una página web son los técnicamente
denominados blueprints y wireframes

Blueprints (plano o mapa): Se conocen también como “mapa de la página” o “mapa del sitio” (“sitemap”) y representan la estructura arquitectónica del sitio web con todas sus páginas, las relaciones existentes entre ellas y los contenidos que las componen.

Se utilizan para plasmar los aspectos esenciales de los sistemas de organización, etiquetado y navegación, y son una herramienta clave para trabajo de los desarrolladores del sitio web y para la orientación de los usuarios. Existen dos tipos de blueprints:

> Blueprints para la arquitectura general: muestran de forma esquemática, partiendo de la página principal, las páginas que conforman un sitio web, las relaciones existentes entre estas a través de los enlaces que las conectan y cómo se agrupan en el sistema de organización y navegación.

> Blueprints para la arquitectura detallada: muestran de forma esquemática, para cada página que conforma un sitio web, las páginas que a su vez cuelgan de éstas y el sistema de navegación que las articula.

Normalmente ambos van acompañados por una leyenda que explica el significado de los símbolos del lenguaje visual para que puedan ser correctamente interpretados.

Wireframes (o maquetas): Son prototipos arquitectónicos de cada tipo de página que conforma un sitio web. Son un esquema donde se representa el contenido y la arquitectura de la información de cada tipo de página, mostrando su aspecto desde la perspectiva de su arquitectura haciendo hincapié en cómo se agrupan y ordenan sus  componentes. Pueden ser considerados como la intersección entre la arquitectura de la información de una página con su diseño. En ellos se representan por ejemplo la posición del sistema de navegación, la ubicación de los enlaces o el sistema de búsqueda y la estructura de la página.

Dependiendo de la granulidad que presentan se distinguen tres tipos de wireframes:

> Wireframes de baja fidelidad: muestran los aspectos arquitectónicos básicos de una página sin incluir elementos gráficos y sin contenido real. Representan los elementos de navegación global, local y contextual de la página.

> Wireframes de fidelidad intermedia: muestran los aspectos arquitectónicos básicos de una página incluyendo algunos elementos gráficos y algunas unidades de contenido real. Representan los elementos de navegación global, local y contextual de la página completados con otros elementos finales que aparecerán en la versión de la página web que se ofrecerá al usuario. 

> Wireframes de fidelidad alta: muestran los aspectos arquitectónicos básicos de una página  incluyendo todos los elementos gráficos y el contenido real que completarán la página. Representan los elementos de navegación global, local y contextual de la página completados con todos los elementos finales que aparecerán en la versión de la página webque se ofrecerá al usuario.  

Algunas recomentaciones para el desarrollo de wireframes son:

• Mantener la consistencia en cada tipo de página e implementarlos con un mismo nivel de granulidad (uniformidad y consistencia).
• Establecer las leyendas y notas explicativas que regirán el lenguaje visual utilizado para construir el prototipado, que permiten explicar la funcionalidad de los elementos de la página y facilitan la comunicación de los aspectos de la arquitectura de la información.
• Llevar un control y una gestión de wireframes, que permita una explotación más eficaz del prototipado, teniendo identificada y ubicada cada propuesta de representación.
• A partir de la información recabada mediante estrategias de benchmarking, mediante el análisis de páginas web competidoras tratar de adoptar las mejores prácticas y evitar las malas prácticas arquitectónicas de sitios web. 
• Tratar de incorporar algún tipo de interactividad a los wireframes que facilite la comunicación de las propuestas de prototipado con otros profesionales involucrados en el desarrollo del sitio web, y para su utilización en test de tareas con usuarios.  También se debe tratar de respetar los estándares de accesibilidad en el prototipado.

Ejemplos de wireframes

 Fuentes:

http://eserranomaster2.wordpress.com/unidad-didactica-1-10/
http://natiiionlyyou.blogspot.com.es/2010/05/blueprint-web-b-guided.html

Analisis y evaluacion herramientas informáticas para facilitar creación de prototipados web.

Para establecer el diseño y la planificacion de la arquitectura de la informacion de los distintos componentes de una web es necesaria una propuesta de prototipado de la estructura arquitectonica de ese entorno informacional.

HERRAMIENTAS DE ESCRITORIO
El primer grupo de soluciones analizadas está formado por un conjunto de
herramientas de escritorio (comerciales y gratuitas) muy utilizadas por los profesionales
dedicados al diseño de interacción en general y a la arquitectura de la información en
particular: Axure, Visio Profesional, OmniGraffle, Denim, Conceptdraw Pro, Smartdraw y
Pencil Project.1
3.1. AXURE
Axure (http://www.axure.com), junto a Visio de Microsoft, es una de las
herramientas de prototipado más utilizadas por los arquitectos de la información. Se trata
de una solución de escritorio en inglés y de pago, diseñada específicamente para el
prototipado, en Windows y Apple, de entornos web (wireframes y blueprints).
1 Las versiones analizadas y evaluadas de estas herramientas han sido: Axure PR Pro 5.6, Visio Profesional
2007, OmniGraffle 5, Denim 2.1, Conceptdraw Pro, Smartdraw 2010 y Pencil Project.
6
Figura 1. Vista parcial de los widgets (componentes) para wireframes de Axure
Incorpora una librería estándar formada por una veintena de elementos gráficos para
el prototipado web que permite la gestión y edición de sus elementos y la incorporación de
nuevos componentes gráficos externos.
Axure permite la exportación de a formatos como Html, Word, Cvs, algunos formatos
de imagen (Bitmap, PNG, JPG o GIF) o RP. En cambio, sólo importa directamente el formato
RP de Axure. Destaca, además, por permitir anotaciones y notas a pie de página, la edición
colaborativa con un sistema de control de versiones y la creación de prototipos dinámicos y
navegables.
En su página oficial aparecen una importante biblioteca de plantillas de wireframes y
blueprints, tutoriales de ayuda, un blog de novedades, un espacio de soporte sobre el
producto, e incluso un foro (en inglés) para los usuarios.

7
3.2. VISIO PROFESIONAL
La herramienta Visio (http://office.microsoft.com/es-es/visio/default.aspx) es uno de
los programas informáticos, exclusivamente para Windows, más versátiles y comúnmente
utilizado en el desarrollo de propuestas de diseño web.
Figura 2. Interfaz de trabajo de Visio
Nos permite trabajar con un interfaz en inglés o en español. Nos ofrece una librería
estándar formada por una cincuentena de elementos gráficos para el diseño del prototipado
web, que puede ser enriquecida con nuevos elementos gráficos externos y que aporta una
caja de búsqueda para facilitar el acceso al elemento a partir de su nombre.
Visio permite la exportación a formatos como PDF, Html, SGV, TIFF, JPEG, GIF, PNG o
Visio; e importa formatos como Html, SGV, TIFF, JPEG, GIF, PNG o Visio. La solución permite
8
incluir anotaciones y notas a pie de página, la edición colaborativa de prototipado y la
creación de prototipos dinámicos.
En su página oficial aparecen una importante biblioteca de plantillas de gráficas (sin
plantillas de wireframes y blueprints), tutoriales de ayuda, un espacio con videos de
formación, un apartado de soporte y comentarios, e incluso unos grupos de discusión (en
español).

3.3. OMNIGRAFFLE
OmniGraffle (www.omnigroup.com/applications/OmniGraffle) es una de las
herramientas de prototipado más utilizadas en el entorno de Apple. No existe versión para
ningún otro sistema operativo.
Es una herramienta de escritorio muy versátil diseñada, exclusivamente en lengua
inglesa, para la creación de representaciones graficas en general, aunque permite también la
creación de prototipado web.
No incorpora una librería estándar de elementos gráficos para el prototipado web.
Aunque permite la gestión y edición de los elementos y la incorporación de nuevos
componentes gráficos externos. No es difícil encontrar e incorporar los elementos
necesarios para el prototipado web (y de entornos móviles) como, por ejemplo, desde su
propia página oficial.
Permite la exportación a diferentes formatos como OmniGraffle, PDF, TIFF, PNG,
JPEG, EPS, HTML, OmniOutliner, SVG, PICT, Photoshop, BMP o Visio; y la importación de
formatos como OmniGraffle, Visio, DOT, Xcode o EOModeler.
Como en los casos anteriores, ofrece la posibilidad de incluir anotaciones y notas a
pie de página, prototipos dinámicos y, también, la edición colaborativa de prototipado. En su
página oficial podemos encontrar una importante biblioteca de plantillas gráficas, video
tutoriales de ayuda sobre la herramienta, un espacio de soporte al usuario, y también un
foro.
9

3.4. DENIM
Denim (http://dub.washington.edu:2007/projects/denim) es una sencilla
herramienta de escritorio específicamente desarrollada para el prototipado de interfaces de
usuario.
Es una solución gratuita de código abierto y en lengua inglesa disponible para
Windows, Unix o Mac OS X. Aunque su uso es muy intuitivo y sencillo, se trata de una
solución pobre en prestaciones. Permite desarrollar, además de prototipado, diagramas de
flujo y storyboards. Sin embargo, incluye una librería reducida de elementos gráficos para el
prototipado web que admiten una edición posterior muy limitada. Lamentablemente, la
librería no puede ser enriquecida con ningún tipo de nuevos elementos gráficos externos.
Sólo permite la exportación de sus propuestas de prototipado a Html, o a su propio
formato Denim. Admite exclusivamente la importación de su propio formato.
Permite la creación de prototipos dinámicos y navegables, pero no anotaciones y
notas a pie de página, ni la edición colaborativa. Aunque su página oficial no incluya
plantillas de wireframes y blueprints, ofrece documentación de ayuda con ejercicios
prácticos, un apartado de soporte y comentarios, e incluso una lista de distribución donde
solucionar dudas sobre su utilización.

3.5. CONCEPTDRAW PRO
Conceptdraw Pro (http://www.conceptdraw.com) es una aplicación comercial de
escritorio en lengua inglesa y muy versátil para Windows y Apple.
10
Figura 3. Galería de herramientas de diseño y tipos de diagramas que pueden realizarse con
un software versátil (en este caso, Conceptdraw Pro)
Completada con el plug-in WebWave, nos ofrece una librería estándar de más de
ciento veinte elementos gráficos para el prototipado web, que puede ser enriquecida con
nuevos elementos gráficos externos. Incorpora el Site Mapper wizard, que genera de forma
automática el blueprint o mapa del sitio de una web ya existente.
Conceptdraw Pro permite la exportación a formatos como PDF, Html, Xml, Power
point, Macromedia Flash, los principales formatos gráficos, SVG, o Conceptdraw; y la
importación de los formatos Xml, los principales formatos gráficos, Power point, BMP, Visio
o Conceptdraw. Aunque no incluya la opción de insertar anotaciones, sí permite las notas a
pie de página, la edición colaborativa y la creación de prototipos dinámicos.
En su página oficial aparecen una importante biblioteca de plantillas de gráficas,
tutoriales de ayuda, un espacio de soporte e incluso un espacio (community) en inglés para
sus usuarios.

11
3.6. SMARTDRAW
Smartdraw (http://www.smartdraw.com) es una versátil herramienta de escritorio,
en inglés y sólo para Windows, diseñada para la realización de tareas gráficas en el contexto
de las organizaciones que incluye también recursos para el prototipado de páginas web.
Incorpora una librería estándar que incluye un extenso conjunto de elementos
gráficos para el prototipado web. Permite la gestión y edición de los elementos que ofrece y
la incorporación de nuevos componentes gráficos externos.
Facilita la exportación a diferentes formatos como PDF, Word, Power Point, Exel,
Word Perfect, Formatos gráficos, Html, Metalife, o Smartdraw; pero sólo importa los
formatos Visio o Smartdraw. Permite anotaciones y notas a pie de página, la edición
colaborativa de prototipado y la creación de prototipos dinámicos e interactivos.
En su página oficial aparecen, entre otros recursos, una importante biblioteca de
plantillas de wireframes y blueprints, tutoriales de ayuda, un glosario para la aclaración de
términos y un foro para sus usuarios.

3.7. PENCIL PROJECT
Pencil Project (http://www.evolus.vn/pénsil) es una solución informática en lengua
inglesa, gratuita y de código abierto disponible para ordenadores con sistema operativo
Windows o GNU/Linux. También puede ser instalada como una extensión (addon) en el
navegador Firefox.
Es una solución muy versátil que nos ofrece una librería formada por más de
cincuenta elementos gráficos para el prototipado web, que admiten una edición posterior y
la incorporación de nuevos elementos gráficos externos. Permite la exportación a diferentes
formatos como Html, Png, Openoffice, Word, PDF o Pénsil; pero sólo importa su propio
formato.
Permite la creación de prototipos dinámicos y anotaciones; pero no las notas a pie de
página ni la edición de proyectos de creación colaborativa de prototipado. Su página oficial
12
ofrece ejemplos y plantillas de wireframes y blueprints, tutoriales de ayuda e incluso un
espacio para la discusión.

Card Sorting

En esta página tenemos una explicación básica de la realización y ejecución de un card sorting. Es una presentación básica pero desde mi punto de vista muy clara para empezar a tener una pequeña idea

card-sorting-conceptos-basicos-

¿GRAFENO..........perece ciencia ficcion? ¿Aplicaciones cercanas para cuando?

Esta entrada está dedicada al Grafeno, un material que puede cambiar el mundo de la tecnología. Una de las empresas que se dedican a la fabricación de este material está en nuestro país.

Os dejo un video en la que aparecen prototipos hechos con este material: