Dis

eño

Inte

ract

ivo

Shel

line

Ros

as R

och

Julio 2012

1Diseño Interactivo

¿Que es diseño interactivo?

El diseño interactivo esta modificando nuestras vidas por medio de tecnologías interactivas, computadoras, tele-comunicaciones, celulares y otras cosas. Va modificando nuestra vida cotidiana por medio de artefactos digitales.

Necesitamos diseñar estas tecnologías de manera correc-ta para que hagan gratificante nuestra vida diaria.

3 etapas del uso de la tecnología

David Liddle, ha hablado de 3 etapas en el desarrollo de tecnologías y cómo la gente interactúa con ellas.

La primera etapa es la entusiasta, a los entusiastas no les importa si la tecnología es fácil o difícil de usar porque están tan emocionados por lo que hace por ellos.

La segunda etapa es la profesional, en donde los que usan la tecnología no son los que la compraron. A los que la compraron les importan otras cosas como el precio y las especificaciones.

La tercera etapa es la del consumidor, no les interesa de-dicar mucho tiempo en aprender como usar las cosas, y si es fácil de entender no la van a comprar.

De la usabilidad a la sociabilidad

La usabilidad es la primera de las cualidades que debe-mos de esperar de un sistema, debemos empezar por pensar en diseñar cosas que sean las adecuadas para la gente en lugar de pensar primero en como hacerlas. Para diseñar con usabilidad, utilidad y satisfacción debemos agregar primero sociabilidad, que no rompa con los es-tándares sociales.

Buen diseño interactivo

Un sistema bien diseñado tiene una retroalimentación en donde sabemos que lo que hicimos fue lo correcto y saber en donde lo hicimos.

Forma de diseñar la información por medio de una interfaz para ser utilizada e intervenida por el usua-rio a través de la tecnología.

Diseño Interactivo

Navegabilidad es una característica básica, el usuario debe de saber lo que el sistema puede hacer, en donde y como ir a otros lugares y regresar.

Igual de importante es la consistencia, un comando debe de tener el mismo efecto en un lugar que en otro para que el usuario vaya entendiendo su uso y no confundirlo.

Cuando diseñamos un sistema no sólo se diseña la aparien-cia si no también el como se va a comportar, diseñamos la calidad de cómo interactúa el sistema con el usuario.

Lenguajes del diseño interactivo

Aunque no hay un lenguaje definido para el diseño in-teractivo podríamos clasificarlo dependiendo de sus di-mensiones: 1D, 2D, 3D o 4D.

1D incluye palabras y poesias, el tono de voz de las cajas de dialogo en nuestro sistema.

El 2D habla de una jerarquía que podemos lograr por me-dio de tipografía, símbolos y otros elementos, podemos hacer que las cosas tengan un orden de lectura y una perspectiva en el espacio.

El 3D son figuras físicas, por ejemplo si tiene una agarra-dera, el usuario sabe que se puede agarrar, en este len-guaje se puede jugar con las expectativas del usuario.

El 4D incluye sonidos, videos y animaciones, que haya una reacción para una acción, por ejemplo en la mac cuando llevas algo al bote de basura este hace un sonido que te hace saber que ya entro a la basura.

Diseño Interactivo

Información

Dispositivo

Comportamiento

Espacio/tiempo

Usuario

Multimedia

Medio de publicación

Código

Jerarquía

Arquitectura

Diseño

Interfaz

AcciónReacción

Repetible

Aprendible

Navegación

Participa

Decide

Cubre necesidad

Texto, imágen,sonido,

animación

Características de productos interactivos

• Hacer eficaz la comunicación humana• Usabilidad y utilidad• Mejorar la experiencia de la gente• Búsqueda de información= poder• Interfaz y diálogo • Dominio de la interfaz= control sobre contenido• Red• Bidireccional= acción y reacción• Accesibilidad - cualquier persona puede utilizarlo• Diseño de la información en cuanto a estructura y

jerarquía• Requiere de una experiencia previa• Capacidad de aprendizaje• Búsqueda • Uso de tecnología• Grado de potencialidad, se espera algo del sistema• Genera sorpresa• Resuelve problemas en contexto determinado • Multimedia • Interactividad en niveles• Transforman al espectador pasivo en reactivo • Facilita la comprensión de la información• Narrativa no lineal • Multisensorial • Se establece un patrón

¿Que es diseño interactivo?

Es la habilidad utilizada para la creación de una interfaz a través de la cual la tecnología de la información puede ser manipulada.

Interactividad- es la acción que ejercen dos agentes en-tre sí, hay un diálogo, retroalimentación y cooperación.

Comunicación bi direccional

Autor UsuarioInformación

Los productos interactivos se caracterizan por estar diri-gidos a grandes grupos de usuarios y hay una recepción grupal para una acción individual.

Palabra/ textos

Multimedia

Foto

Video

Audio

Info gráfica

Interacción

Un sitio web constituye todo un sistema de publicación y distribución de información conformado por una colección de páginas que pueden ser visualizados por medio de un navegador. El éxito de un sitio web está en lograr un equilibrio entre los aspectos funcionales y estéticos para de esta forma satisfacer las necesidades del publico al que va dirigido.

1. Analizar la información( organización y descripción detallada del contenido).2. Definición y planeación del sitio (Arquitectura de la información, navegación).3. Concepto y estrategia narrativa 4. Desarrollo de diagramas y prototipos5. Diseño de la interfaz gráfica 6. Especificación de los recursos técnicos necesarios7. Producción8. Prueba con usuarios reales9. Retroalimentación de pruebas

• Recopilación de la información• Segmentación de la información, hacer unidades

lógicas. • Establecer una jerarquía entre las unidades.• Utilizar la jerarquía para establecer relaciones y

estructurar los vínculos entre unidades.

Exactos: dividen la información en secciones bien defi-nidas y excluyentes entre sí. Estos esquemas requieren que el usuario conozca exactamente lo que busca. Ej. Cronológico y alfabético.

Ambiguos: divide la información por categorías, son versátiles pero difíciles de diseñar, mantener y utilizar. Son útiles para usuarios que no saben lo que buscan. La búsqueda en los sistemas ambiguos es iterativa e interactiva.

Gran parte del éxito de un producto interactivo esta en lograr una comunicación clara y efectiva con el usuario, la arquitectura de la información se refiere a detallar tan-to la organización como los contenidos de un producto interactivo, concretar su organización. Los diseñadores gráficos somos esencialmente arquitectos de la informa-ción. La arquitectura de la información es indispensable para el diseñador y el equipo técnico para el desarrollo del marco conceptual, navegación e interfaz de un pro-yecto interactivo.

Arquitecto de la información

Persona que organiza los patrones inherentes a los datos de tal modo que haga claro lo complejo, crea la estructura o mapa de la información que permite que

¿Que es un sitio web?

Metodología

¿Cómo se organiza la información?

Esquemas de organización

Arquitectura de la información

otras personas encuentren sus propios caminos hacia el conocimiento. Se ocupa en la claridad y comprensión humana.

Temático: organización de la información por materia o tema.

Funcional: organiza la información entorno a un con-junto de procesos. Tienes que aprender como funciona el sistema para poderlo utilizar. Ej. Illustrator

Por públicos específicos: Ej. para papas, para hijos etc.

Conducidos por metáforas: ayudan al usuario a en-tender lo nuevo a través de lo conocido. Ej. El escritorio de una compu simula una oficina, tiene sus carpetas, archivos papelería etc.

Híbridos: no son muy utilizados porque generan una gran confusión entre los usuarios.

1.Secuencial- una presentación secuencial es aquella que de una te vas a otra y a la que sigue, no puedes irte aleatoriamente.

2.Jerárquica- el usuario tiene cierto control sobre la secuencia de presentación de la información. De arriba abajo, permite obtener de inmediato una visión de las dimensiones del proyecto. Ej. Árbol genealógico.

Debe contar con lo siguiente:

• Amplitud- cantidad de opciones a cada nivel de la jerarquía, categorías principales.

• Profundidad- número de niveles, submenú.

3.Hipertextualidad- puede ser pensada como infor-mación web interrelacionada en la que el usuario se encuentra en control absoluto del ritmo, secuencia y contenido de la presentación. Los vínculos proveen un acceso a la información de forma aleatoria.

Comprende dos tipos de componentes principales que pueden conformar sistemas de hipermedios que unen

Estructura de la información

partes de texto, datos, imágenes, video y audio. Elementos o fragmentos de info que van a vincularseVínculos entre esos fragmentos

Uno de los objetivos del diseño interactivo es facilitar el acceso y comprensión de la información.

El diseño de la info ayuda a la gente a entender el mundo a través de la interpretación de la información compleja.

La esencia del diseño de la info es analizar, organi-zar, entender y solucionar, su objetivo principal es la traducción de la info compleja, se necesita dar sentido y facilitar el acceso. El componente estético ocupa un lugar secundario.

Tareas simples, interfaces simples. Tareas complejos interfaces complejas.

Mantener simple lo que es simple, no hacer a los usua-rios batallar si no es necesario, no es bueno que hagan más clicks de los necesarios.

Una interfaz no puede ser confusa y debe facilitar al usuario su utilización.

Una mal diseño no considera las necesidades del usua-rio.Se debe de conocer al usuario

Es importante determinar las diferencias entre indivi-duos y grupos para así satisfacer las variantes de reque-rimientos en sus tareas.

Realización de pruebas de diseño para observar las acciones de usuarios concretos con el fin de comprobar si los conceptos de diseño son lo que esperabas.

Es importante que no se pierda el sentido de ubicación en un sitio.

Que el usuario encuentre con facilidad lo que busca.

Simplicidad y consistencia, no jugar con la mente del usuario.

Tiene que ver con el conjunto de enlaces interactivos y gráficos que permiten a un usuario desplazarse y acce-der a la información.

Una navegación consistente y predecible, permite percibir visualmente la estructura y organización de un producto interactivo, así como su lógica.

Diseño interactivo y diseño de la información

La interfaz

Diseño centrado en el usuario

Navegación

La representación mediante diagramas permite estable-cer la estructura, funcionamiento y comportamiento de un producto interactivo.

Consiste en la representación de la organización de los contenidos, funcionamiento, relaciones entre si y la ubicación.

En el diseño de productos interactivos se utilizan dis-tintos tipos de diagramas: de flujo, de navegación y de interacción.

Hay dos tipos básicos:

Blueprints o mapa de arquitectura: parten de lo ge-neral a lo particular, tiene como objetivo presentar áreas de organización y rotulado, están enfocados en los as-pectos estructurales y de funcionamiento del producto.

Prototipos o wireframes: son diagramas que definen el contenido y funcionalidad de un producto interactivo, son la principal herramientas del arquitecto de la infor-mación, son representaciones esquemáticas de un sitio. Son bocetos gráficos a nivel muy básico.

Diseño centrado en el usuario

Blueprint

Wireframe

Conjunto de programas de un sistema de computo destinado a administrar y compartir sus recursos y coordinar todas sus funciones. Es como un manual de cómo hacer las cosas. Comienza a trabajar cuando se enciende el equipo, las mas comunes son: Windows, Macintosh, Unix y Linux.

Programa que permite visualizar la información que contiene una página web. Los documentos pueden estar ubicados en la computadora en donde esta el usuario, pero también pueden estar en cualquier otro dispositivo que este conectado a un servidor a través de Internet. Los mas comunes son: Safari, Chrome, Netscape, Mozila y Firefox.

Sistemas operativos Resolución de pantalla

Web safe area

Navegadores

La resolución se refiere al número de pixeles medidos horizontal y verticalmente, que utiliza un monitor de computadora para mostrar contenido multimedia. No tiene que ver con el tamaño de la pantalla, si no con la resolución con la que esta hecha la pantalla.

Las mas utilizadas son: 1024 x 7681280 x 8001280 x 10241400 x 9001680 x 10501920 x 1200800 x 600

Como muchos navegadores tienen ya herramientas preestablecidas es importante considerar cual es el área segura para que tu página no se corte.

2Ejercicios de clase

Análisis de sitios A continuación se presenta un análi-sis de algunos sitios para determinar aspectos formales, informativos y estructurales durante la creación de un sitio web.

Sitio: Moma

URL http://www.moma.org/

¿A quién esta dirigido? Gente interesada en el arte y en visitar el museo

Descripción del Home Page Tiene la barra de navegación en la parte inferior.Imágenes que van cambiando, con temas importantes.Tiene barra buscadora

¿Cómo se encuentra estructura el sitio? (esquema de organización)Tiene 5 opciones en el menú y cada una despliega más opciones, el menú esta siempre situado en el mismo lugar aunque todo lo demás cambia.

Descripción del contenido y jerarquía de la informaciónLa información esta bien jerarquizada, puedes encontrar fácilmente lo que buscas. Tiene mucha información pero bien organizada.

Descripción de la Interfaz y NavegaciónLa interfaz cuenta con 3 niveles de navegación, el menú principal, uno secundarios con datos del museo, y uno ya completo de cada sección. El diseño se ajusta al contenido.

¿La interfaz es funcional? ¿Se accede fácilmente a la información?La navegación es muy rápida y sencilla, puedes ir y venir a los lugares sin problemas, cada sección tiene una barra mas de navegación que ayuda a organizar mejor la nave-gación por el sitio. Es amigable y fácil de usar a pesar de la cantidad de información que se muestra.

Recursos que utiliza (texto, imagen, animación, video, etc)Usa texto, imagen y video.

Diseño de la Información (Relación Función/Estética)La información esta bien estructurada en cuanto a la función y cumple con la estética también, el diseño es muy simple y sencillo.

¿Qué te gusta? ¿Qué te desagrada? Me gusta que usa cuadros de colores para dividir la información.

Características peculiares del SitioTiene unos iconos especiales para crecer o reducir el tamaño de la fuente.

¿Qué propones para mejorar el sitio?Usar algo de audio y animación.

Sitio: Citrico Gráfico

URL http://citricografico.com

¿A quién esta dirigido?Clientes interesados en un despacho de diseño.

Descripción del Home PageEn el home se muestra una selección de los trabajos más recientes o importantes, del lado derecho esta la barra de navegación dividida en 3 categorías, también tiene los datos de contacto del despacho.

¿Cómo se encuentra estructura el sitio? (esquema de organización)El sitio tiene 3 secciones, una habla del despacho, otra son las categorías de los proyectos y la ultima son redes sociales y cosas así para contactar. En la parte de los tra-bajos hay 7 secciones principales en las cuales accedes a cada sección de proyectos.

Descripción del contenido y jerarquía de laiInformaciónLa información esta bien jerarquizada, en su mayoría son fotos, hay muy poco texto, pero esta muy bien estructu-rada la información.

Descripción de la Interfaz y NavegaciónLa interfaz cuenta con 2 niveles de navegación, el menu

principal y otro ya en cada sección con el titulo de los proyectos como para no tener que ver todo y buscar lo que quieres.

¿La interfaz es funcional? ¿Se accede fácilmente a la información?Se puede acceder muy bien a la información, el menu es muy sencillo.

Recursos que utiliza (texto, imagen, animación, video, etc)Usa texto, imagen y video.

Diseño de la Información (Relación Función/Estética)El diseño es muy limpio y bien estructurado.

¿Qué te gusta? ¿Qué te desagrada?Es muy sencillo el sitio pero funcional.

Características peculiares del SitioLa imágenes salen en blanco y negro y cuando pasas sobre ellas se ponen de color.

¿Qué propones para mejorar el sitio?Usar algo más interactivo, siendo un despacho de dise-ño que hace ese tipo de proyectos también sería bueno que su página usara algo de eso.

Sitio Hersheys

URL http://www.hersheys.com.mx/

¿A quién esta dirigido?Consumidores de productos hersheys, mujeres, chefs.

Descripción del Home PageEl home es muy sencillo, con la barra de navegación en la parte de arriba, y un slider que va pasando sus productos y marcas. En la parte inferior hay otro menu pequeño para ubicarte.

¿Cómo se encuentra estructura el sitio? (esquema de organización)El sitio tiene 4 secciones principales, se esas secciones sale un submenu en la parte de abajo con otras seccio-nes de la misma categoría.

Descripción del contenido y jerarquía de la informaciónLa información y los contenidos son muy claros, usa muchas imágenes y gráficos para dar importancia y je-rarquía a los temas. Las fuentes hacen que se entiendas cuales son títulos y cuales textos.

Descripción de la Interfaz y NavegaciónLa interfaz es muy fácil de usar y sencilla, tiene varios

niveles de navegación pero claros y sencillos, tienes bo-tones para regresar o ir fácilmente a lo que buscas. Tiene acceso al micrositio de cada producto para conservar la estética corporativa.

¿La interfaz es funcional? ¿Se accede fácilmente a la información?Se puede acceder muy bien a la información, hay boto-nes para llegar a lo que necesitas más fácilmente.

Recursos que utiliza (texto, imagen, animación, video, etc)Usa texto e imágenes.

Diseño de la Información (Relación Función/Estética)El diseño es muy limpio y bien estructurado, tiene muy buen jerarquía de la información gracias al diseño, es estética y funcional.

¿Qué te gusta? ¿Qué te desagrada? Es muy sencillo y usa muchas fotos que lo hacen más dinámico, visual y atractivo.

Características peculiares del SitioNinguna.

¿Qué propones para mejorar el sitio?Usar algo de sonido.

Sitio Paper Source

URL http://www.paper-source.com/

¿A quién esta dirigido?Personas a las que les gusta hacer manualidades y cosas con papel.

Descripción del Home PageEl home page tiene muchas imágenes y poco texto lo que hace que no te de flojera ver el sitio, tiene un menu principal en la parte superior con las distintas secciones de la tienda, también tiene un menú secundario en la parte lateral izquierda en donde ponen las recomenda-ciones y cosas más vistas. En el centro tiene un imágenes de productor que sirven como link hacia esos produc-tos. Hasta abajo se encuentran los legales y formas de contactarlos.

¿Cómo se encuentra estructura el sitio? (esquema de organización)El sitio tiene 12 secciones principales, se esas secciones sale un submenu en la parte de abajo con otras sec-ciones de la misma categoría. Todo esta dividido por categorías lo que hace fácil la navegación.

Descripción del contenido y jerarquía de la informa-ciónLa información y los contenidos son muy claros, tiene muchas imágenes y los menus están divididos de tal manera de que se ve con jerarquía y dividen todo por categorías.

Descripción de la Interfaz y NavegaciónLa interfaz es muy fácil de usar y sencilla, los menus siempre aparecen en el mismo lugar lo que hace que sea fácil encontrar la información. Usa muchas imáge-nes como botones, lo que hace que sepas claramente si estas picandole a lo que necesitas.

¿La interfaz es funcional? ¿Se accede fácilmente a la información?Se puede acceder muy bien a la información, es simple y sencillo el menu. Puedes ir y venir por la página con facilidad.

Recursos que utiliza (texto, imagen, animación, video, etc)Usa texto e imágenes.

Diseño de la Información (Relación Función/Estética)El diseño es muy limpio usa mucho blanco e imágenes atractivas que te ayudan a ver sus productos.

¿Qué te gusta? ¿Qué te desagrada?Me gusta que usa imágenes padres y muchas y no se ve saturado.

Características peculiares del SitioNinguna.

¿Qué propones para mejorar el sitio?Nada

Sitio GGMéxico

URL http://ggili.com.mx/

¿A quién esta dirigido?Personas interesadas en libros de diseño, arte, arquitec-tura, foto y moda.

Descripción del Home PageEl home page es muy sencillo, tiene un slide con nove-dades y publicidad, del lado izquierdo tiene un menu con las distintas categorías a buscar, también se puede encontrar ahí las novedades y libros destacados.

¿Cómo se encuentra estructura el sitio? (esquema de organización)El sitio tiene 10 secciones en el menú en donde cada uno te lleva a la pagina especializada en ese tema, ahí se despliega un menú nuevo con distintas opciones para encontrar lo que buscas.

Descripción del contenido y jerarquía de la informaciónEl contenido es bueno, esta bien organizada la infor-mación y puedes encontrar fácilmente lo que buscas, la jerarquía de los textos es buena, y la descripción de los libros es clara y específica.

Descripción de la Interfaz y NavegaciónLa interfaz es muy fácil de usar la navegación también, el menu es muy especifico y tiene una forma más fácil de buscar un libro en especifico si lo buscan en el botón buscar. Se puede ir y venir dentro de la página y no te pierdes.

¿La interfaz es funcional? ¿Se accede fácilmente a la información?Se puede acceder fácilmente a la información, y te da varias maneras de llegar a lo mismo por distintas partes, lo que lo hace bueno para el usuario ya que no batalla para encontrar lo que busca.

Recursos que utiliza (texto, imagen, animación, video, etc)Usa texto e imágenes.

Diseño de la Información (Relación Función/Estética)El diseño es muy limpio, cada libro tiene su foto bien tomada y estéticamente es bastante claro todo.

¿Qué te gusta? ¿Qué te desagrada? Para el objetivo de la página esta bien estructurado todo.

Características peculiares del SitioNinguna.

¿Qué propones para mejorar el sitio?Nada

Sitio Section Seven

URL http://www.sectionseven.com/index2.html

¿A quién esta dirigido?Personas interesadas en el diseño.

Descripción del Home PageEl home page es muy divertido, es como si fuera un libro y lo puedes abrir y encuentras los distintos proyectos con distintos colores, puedes moverte por todo la pági-na y desplazarte a la derecha para verlos, cuando le das click a uno se abre el contenido de esa parte.

¿Cómo se encuentra estructura el sitio? (esquema de organización)El sitio tiene 13 proyectos que se pueden ver ahí, cada uno de abre y se puede ver el contenido, en la parte de abajo tiene otra navegación que te despliega noticias y comentarios.

Descripción del contenido y jerarquía de la informaciónEl contenido es muy gráfico, en su mayoría son fotos y cuando estas sobre alguna te saca un pequeño texto informativo, la jerarquía de la información es muy clara.

Descripción de la Interfaz y NavegaciónLa interfaz es un poco más compleja por el diseño, es muy divertida y lleva un orden pero es algo a lo que la gente puede no estar acostumbrada.

¿La interfaz es funcional? ¿Se accede fácilmente a la información?Se puede acceder fácilmente a la información y la página solita te va llevando por el camino para que veas todo el contenido de la página.

Recursos que utiliza (texto, imagen, animación, video, etc)Usa texto, imágenes y animación.

Diseño de la Información (Relación Función/Estética)El diseño es muy divertido y estéticamente esta muy padre la página.

¿Qué te gusta? ¿Qué te desagrada? La originalidad, es algo que no había visto antes.

Características peculiares del SitioComo se van desplegando los libritos.

¿Qué propones para mejorar el sitio?Nada

3Blog

Blog Es un sitio web periódicamente actualizado que recopila cronológi-camente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor con-serva siempre la libertad de dejar publicado lo que crea pertinente.

Es un sitio web periódicamente actualizado que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente.

El nombre bitácora está basado en los cuadernos de bitácora, cuadernos de viaje que se utilizaban en los barcos para relatar el desarrollo del viaje y que se guar-daban en la bitácora. Aunque el nombre se ha popu-larizado en los últimos años a raíz de su utilización en diferentes ámbitos, el cuaderno de trabajo o bitácora ha sido utilizado desde siempre.

Los términos ingleses blog y weblog provienen de las palabras web y log (‘log’ en inglés = diario). El término bitácora, en referencia a los antiguos cuadernos de bi-tácora de los barcos, se utiliza preferentemente cuando el autor escribe sobre su vida propia como si fuese un diario, pero publicado en la web (en línea).

El weblog es una publicación online de historias publica-das con una periodicidad muy alta que son presentadas en orden cronológico inverso, es decir, lo último que se ha publicado es lo primero que aparece en la pantalla.

Habitualmente, en cada artículo de un blog, los lectores pueden escribir sus comentarios y el autor darles res-puesta, de forma que es posible establecer un diálogo. No obstante, es necesario precisar que ésta es una op-ción que depende de la decisión que tome al respecto el autor del blog, pues las herramientas permiten diseñar blogs en los cuales no todos los internautas -o incluso ninguno- puedan participar agregando comentarios.El uso o tema de cada blog es particular, los hay de tipo: periodístico, empresarial o corporativo, tecnológico, educativo (edublogs), políticos, personales (variados contenidos de todo tipo), etc.

¿Qué es un blog?

Existen variadas herramientas de mantenimiento de blogs que permiten, muchas de ellas gratuitamente y sin necesidad de elevados conocimientos técnicos, admi-nistrar todo el weblog, coordinar, borrar, o reescribir los artículos, moderar los comentarios de los lectores, etc., de una forma casi tan sencilla como administrar el correo electrónico. Actualmente su modo de uso se ha simplificado a tal punto, que casi cualquier usuario es capaz de crear y administrar un blog personal.

Las herramientas de mantenimiento de weblogs se clasi-fican, principalmente, en dos tipos: aquellas que ofrecen una solución completa de alojamiento, gratuita (como Freewebs, Blogger y LiveJournal), y aquellas soluciones consistentes en software que, al ser instalado en un sitio web, permiten crear, editar, y administrar un blog, directamente en el servidor que aloja el sitio (como es el caso de WordPress o de Movable Type). Este software es una variante de las herramientas llamadas Sistemas de Gestión de Contenido (CMS), y muchos son gratuitos. La mezcla de los dos tipos es la solución planteada por WordPress.

Las herramientas que proporcionan alojamiento gratui-to asignan al usuario una dirección web (por ejemplo, en el caso de Blogger, la dirección asignada termina en “blogspot.com”), y le proveen de una interfaz, a través de la cual se puede añadir y editar contenido. Obvia-mente, la funcionalidad de un blog creado con una de estas herramientas, se limita a lo que pueda ofrecer el proveedor del servicio, o hosting.

Un software que gestione el contenido, en tanto, requiere necesariamente de un servidor propio para ser instalado, del modo en que se hace en un sitio web tradicional. Su gran ventaja es que permite control total sobre la funcionalidad que ofrecerá el blog, posibilitan-do así adaptarlo totalmente a las necesidades del sitio, e incluso combinarlo con otros tipos de contenido.

Alrededor de un blog se forma una comunidad de lectores. Así, si estamos en un blog sobre cine, es fácil reconocer entre sus lectores a los mayores aficionados al séptimo arte de la red enfrascados en mil y un debates. Es más, muchos de esos lectores serán a su vez editores de otro blog y probablemente continúen las historias que leen en sus propios weblogs, aunque conviene destacar que los blogs son esencialmente diferentes de los foros: son los editores los que comienzan la conver-sación y definen por tanto la temática y el estilo del sitio. Este es un rasgo muy importante, un weblog es también la página donde su creador (o creadores) recogen lo más interesante de lo publicado en internet relacionado con la temática que trate, actuando a modo de filtro para sus lectores. Además, al contrario que los foros, los blogs están volcados hacia afuera, no hacia adentro: están muy bien situados en los resultados de los buscadores y enlazan y son enlazados mucho más profusamente.

Crear y editar un blog básico es tan sencillo como acce-der al correo electrónico. Las ganas de contar historias, opinar y conversar estaban ahí, los weblogs se han erigido en la herramienta asequible que necesitaban todas estas voces. Hacer un buen blog comprendiendo los mecanismos que subyacen al género ya es cuestión de conocimiento y talento.

Herramientas para su creación Comunidad

Sencillez

Forma de diseñar la información por medio de una interfaz para ser utilizada e intervenida por el usuario a través de la tecnología.

Unión de foto y blog, blog fotográfico.

Son las entradas que pueden hacer los/as visitantes del blog, donde dejan opiniones sobre la nota escrita por el/la autor/a. En inglés se le llama “comments”.

Documento que contiene pautas de diseño pre-codifica-do de uso sencillo. En inglés se le llama “template”. Estas plantillas, que habitualmente utilizan hojas de estilo en cascada -CSS-, pueden ser modificadas en la mayoría de los casos por los propios usuarios y adaptados a sus necesidades o gustos.

Acción de publicar mensajes en weblogs.

Una particularidad que diferencia a los weblogs de los sitios de noticias, es que las anotaciones suelen incluir múltiples enlaces a otras páginas web (no necesaria-mente weblogs), como referencias o para ampliar la información agregada.

Son pequeñas etiquetas que se le dan a la información para clasificarla por temas.

Es la acción que ejercen dos agentes entre sí, hay un diálogo, retroalimentación y cooperación.

Un sitio web constituye todo un sistema de publicación y distribución de información conformado por una colección de páginas que pueden ser visualizados por medio de un navegador.

Desde esta perspectiva la interfaz es el lugar de la inte-racción, el espacio donde se desarrollan los intercam-bios y sus manualidades.

Conjunto de programas de un sistema de computo des-tinado a administrar y compartir sus recursos y coordi-nar todas sus funciones.

Es un sitio web periódicamente actualizado que recopila cronológicamente textos o artículos de uno o varios autores, apareciendo primero el más reciente, donde el autor conserva siempre la libertad de dejar publicado lo que crea pertinente.

La unidad de publicación de una bitácora. En inglés se le llama “post” o “entry”.

Diseño interactivo Fotoblog

Comentarios

Plantilla

Bloggear

Enlaces

Categorías

Interactividad

Sitio web

Interfaz

Sistema operativo

Blog

Entrada

4Proyecto

Blog Dinfo A continuación se presenta el proceso que se llevo a cabo para la realización del blog Dinfo.

Dinfo surge por la necesidad de tener un medio interac-tivo en dónde los alumnos de la maestría de diseño de la información pudiera plasmar sus trabajos realizados durante cada una de las clases y también usarlo cómo herramienta de trabajo para compartir información de interés, tendencias de diseño y todo lo que tuviera rela-ción con la maestría.

Después de pensar en varias opciones se decidió que un blog era una buena opción para crear esta plataforma ya que es un espacio en dónde se puede ir subiendo infor-mación de una manera sencilla y se podrían tomar algu-nas cosas del blog que se desarrollo por una generación de la maestría que ya termino, ellos tenían su blog en donde compartían sitios, libros y entrevistas.

Lo que pretendí hacer con este blog es crear un espacio en dónde cada uno de nosotros pudiera compartir sus trabajos de cada materias y que sirviera no solo como base para que gente interesada en la maestría viera los trabajos si no que también fuera una herramienta ya informativa y escolar para nosotros.

Me pareció bueno que al final de cada semestre la bitácora se pudiera entregar de esta manera ya que es una forma de conservar todo en un mismo lugar y de compartir a la vez nuestro trabajo con otras personas.

Lo que se necesitaba hacer era crear esta interfaz de la manera más sencilla y practica posible, de esta manera tanto el lector como nosotros podría navegarla sencilla-mente y encontrar la información eficazmente.

¿Qué es Dinfo?

Necesidades

La información que se debe de plasmar en este blog es la siguiente:

Información de la maestría: dar una pequeña introduc-ción a lo que es diseño de la información y lo que abarca la maestría.

Materias y trabajos de cada una de ellas: mostrar el trabajo realizado durante el semestre por cada uno de los alumnos, con las bitácoras.

Información y contacto de alumnos de la generación 2011: una manera de dar a conocer nuestro trabajo.

Sitios y libros de interés: compartir con los compañe-ros y con otros lectores libros y sitos que creamos que pueden ayudar durante la maestría.

Noticias: un espacio informativo, ya sea cosas de la maestría y información como próximas exposiciones y cosas así. Entrevistas: retomar las entrevistas a gente importante que se dedica al diseño y otras actividades relacionadas con diseño de información.

El objetivo final de este blog es que sea un espacio para compartir nuestros trabajos y dar a conocer lo que hace dentro de la maestría de diseño de la información y todo lo relacionado. Que sea una herramienta hecha por y para nosotros y que nos sirva de plataforma para unir todos nuestros trabajos y conocimientos y poderlos compartir.

En este caso la audiencia principal seríamos nosotros mismos, ya que el objetivo del blog es que sea una herramienta para utilizarla en cada clase y durante toda la maestría. La segunda audiencia serían los maestros y gente interesada en cursar esta maestría así como alum-nos ya egresados de la misma.

En el caso de un blog es muy complicado decidir un concepto ya que dependes de muchos factores. En este caso lo que tuve que hacer es buscar primeramente una plantilla que me pudiera ayudar a estructurar la informa-ción que necesitaba que hubiera y que a la vez tuviera un diseño muy limpio y estructurado.

Mi punto de partida era el orden ya que siendo tanta la información que se va a compartir en el blog se necesi-ta algo muy ordenado para que el usuario entienda la forma de utilizar el blog.

Este fue uno de los pasos mas complicados en la crea-ción del blog. Es muy difícil planear una estructura y que la plantilla del blog te permita hacer todo lo que quieres, y mas siendo un dominio gratuito.

Lo primero que se hizo fue buscar varias opciones de plantillas y buscar la que mejor cumplía con las caracterís-ticas funcionales y estéticas que se buscaban. Se proba-ron muchas hasta que encontré una que me daba varias posibilidades de navegación y que me permitía estructu-rar la información de la manera más clara posible.

Información Audiencia

Determinación del concepto

Diseño de la interfáz

Objetivo

dinfo

dinfo novedadese interés

entrevistas alumnos materias

diseño de la info

planes de estudio

sitios

libros

Natalia

Paulina

Marcela

Tatis

Denisse

Shirley

Yaz

Caro

Shelline

Tipografía

Pensamiento

Rep e Int 1

Rep e Int 2

Ética

Editorial

Interactivo

Seminario

Integral 1

Integral 2

Difusión

Escritura

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

Mapa jerárquico Mapa de interactividad

En este mapa se presenta en un diagrama la información que se necesita en el blog y la estructura que debe de seguir de manera jerárquica.

Para lograr que la información sea fácil de acceder y de entender por el usuario es necesario que la interactivi-dad sea clara y que se puede llegar a la información por diferentes lados, a continuación se presenta el mapa de cómo se va a poder llegar de un lado a otro en el blog.

Como se puede ver, la información va a estar conectada una con otro, en el caso de las materias cada una tiene su apartado de bitácoras en dónde se encuentra el trabajo de cada alumno con un vínculo a la página de cada uno para poder ver más información y trabajos de cada alumno.

Cada materia esta relacionada con los libros, sitios y entrevistas por medio de un vínculo que nos lleva a la página de cada materia.

dinfo

dinfo novedadese interés

entrevistas alumnos materias

diseño de la info

planes de estudio

sitio anahuacprograma magisterial

sitios

libros

Natalia

Paulina

Marcela

Tatis

Denisse

Shirley

Yaz

Caro

Shelline

Tipografía

Pensamiento

Rep e Int 1

Rep e Int 2

Ética

Editorial

Interactivo

Seminario

Integral 1

Integral 2

Difusión

Escritura

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

bitácoras

categorías

buscar...

pdf de cada bitácora

Una herramiento muy útil en los blogs es el uso de catégorias que te permiten clasificar la información, en este caso de decidió que las categorías fueran cada una de las materias y los alumnos. Es importante que las catégorías sean claras para no duplicar o revolver la información y fácilitar la busqueda.

El blog también nos da la posibilidad de tener bus-quedas, en este caso nada mas escribes lo que estas buscando y te despliega todo lo relacionado con tu busqueda, es otra forma de acceder a la información.

La parte más complicada del proceso fué encontrar una plantilla en la que se pudiera poner toda la in-formación que se necesitaba y que fuera útil y lo más estética y limpia posible.

La primera plantilla elegida fué esta, el problema era que a la hora de que se desplegaba el menú te tapa la información de lado y estéticamente se veía muy mal. Tampoco nos daba la posibilidad de tener una barra lateral para poner ahí opciones de búsqueda.

Elección de plantilla ( Interfáz)

Esta plantilla si nos daba la posibilidad de una barra lateral pero el menú no era lo más óptimo para poner toda la información que se tenía que poner, se iba desplegando el menú y se amontonaba tapando la página.

Una plantillla muy limpia y estéticamente muy buena pero el problema del menú no era satisfactorio ya que cuando se desplegaba hacia el lado tapaba el menú de alado.

Esta plantilla era una de mejores opciones tanto estética cómo funcionalmente, el único problema era que no tenía una barra lateral entonces para acceder a cierta información tenías que irte hasta abajo para encontrarla y ya teniendo muchas entradas no iba a ser muy funcional.

Esta cumplía con todos los requisitos pero después encontré una mejor así que la descarte por eso.

Selección final

barra de navegación 1

barra lateral

barra de navegación 2

barra de navegación 3

barra inferior

La plantilla elegida es la más completa de todas las que se probaron, tiene 3 barras de navegación y dos columnas, lateral e inferior, para acomodar widgets y más información. Es la plantilla que mejor se acomoda a lo que se buscaba y estéticamente es muy limpia y tiene el orden que se buscaba.

Diseño Gráfico

Por lo general, las plantillas de wordpress ya tienen estilos definidos para cada cosa. Son pocos los cambios que puedes hacer pero eso no imposibilita el poder dar orden y buen estilo a todo.

La cabecera

La cabecera del blog es una de las cosas que te permiten cambiar y poner lo que sea. Para este caso yo decidí po-ner varias imágenes que van a ir cambiando por página y todas están relacionadas con diseño de la información. En esa misma cabecera decidí poner el logo de Dinfo para que la gente ubique que esta en este blog.

Jerarquía de los textos

Es muy importante que la información sea presentada de manera ordenada y que se entienda que es cada cosa. En el caso de los blogs el diseño de los títulos y textos ya esta determinado pero me permitió hacer pequeñas modificaciones para poder dar jerarquía a los textos, los títulos los deje más grandes y los subtítulos los puse en bold para lograr un orden en la forma como se va presentando la información.

Diseño de espacio para bitácoras

Para poder meter las bitácoras de cada uno en cada materia fué necesario subir los archivos de cada una y hacer un link para lograr que cuando le des click te abra el pdf con cada bitácora. Para esta parte decidí meter una pequeña foto de la portada de cada una para que la gente ubique que es el link y lo abrieran.

De esta forma la información no es sólo con texto si no que las imágenes ayudan a darle fuerza al contenido.

Diseño de las entradas

La plantilla del blog ya tiene un estilo para cada entra-da pero aún así es importante considerar ciertas cosas para que la plantilla funcione de la manera correcta, por ejemplo: las fotos de entradas deben de ser del mismo tamaño todas para que tengan una unidad y todo se vea parejo en la página principal.

Una ventaja de blogs es que ya tienen todos los estilos hechos pero para nosotros los diseñadores es un poco desesperante ya que no tienes tanto contro de lo que quieres hacer, aún así se pueden lograr varias cosas. Para poder modificar los estilos se necesita descargar una aplicación que te cobran aparte para poder hacer los cambios que quieras. En este caso se hizo lo que se pudo con lo que nos permitía hacer la plantilla pero aún así creo que el diseño es bastante limpio y ordenado.

5Solución final

Blog Dinfo En esta sección se puede ver el resultado final del blog y las conclu-siones acerca del mismo.

Datos del blog

Sitio URL

http://dinfoanahuac.wordpress.com/

Usuario: dinfoanahuac

Contraseña: dinfo2011

Evaluación del blog Conclusiones

El resultado del blog Dinfo me pareció bastante bueno, creo que quedo bien estructurado, tiene una plataforma fácil de usar y la interfaz también es práctica y cómoda para el usuario. La información se puede ver por dis-tintas rutas lo que permite que el usuario no se pierda de nada o vea lo que realmente le interesa gracias las categorías.

Fue un proceso muy rico ya que cómo nunca había hecho un blog me encontré con muchos problemas que poco a poco tuve que ir resolviendo, creo que la parte más complicada fue encontrar una plantilla que me per-mitiera diseñar la información de tal manera que fuera simple y sencillo de usar pero que a la vez el diseño fuera limpio y con orden.

Finalmente creo que la información quedo bien jerarqui-zada, los menús están divididos de tal manera de que el usuario no se pierda y encuentre fácilmente la informa-ción, las páginas y entradas tienen una buena jerarquía a nivel textual lo que hace que la información sea entendi-da de manera clara.

Creo que el blog cumple con el objetivo que se planteo al principio y nos va a servir como una herramienta más de clases en dónde vamos a poder compartir todo el tra-bajo que realice y darlo a conocer. Espero que podemos utilizarlo realmente los semestres que vienen para hacer nuestras entregas y así ir enriqueciendo el contenido.

El proceso para realizar este blog fue muy interesante ya que yo nunca había trabajado con un blog, no cono-cía bien la plataforma Wordpress ni lo que ofrecía. Me pareció una buena experiencia ya que aprendí algo que no sabía hacer antes y que en la actualidad mucha gente esta usando.

Creo que el resultado final fue bastante bueno y es una herramienta que nos va a funcionar en lo que nos queda de maestría, es una buena fuente para compartir nues-tros trabajos y lo que nos interesa.