DGWiki

Anteproyecto de DiseĂąo GrĂĄfico

DGWiki

Universidad del Norte

Brian Franco

DGWiki

Brian Franco

Universidad del Norte.

Departamento de Arquitectura, Urbanismo y Diseño.

Programa de Diseño Gráfico.

Martes, 17 de Abril de 2011.

Barranquilla.

ANTEPROYECTO DE GRADO.

Tabla de Contenido

InformaciÓn General ....................................................v RESUMEN EJECUTIVO .................................................................vii ABSTRACT ..........................................................................................vii

PROBLEMA

Y

SOLUCIÓN

........................................1

Planteamiento del Problema ...............................3

Área y Ámbito ............................................................................7

JustificaciÓn ............................................................................7

Objetivos del Proyecto ...............................................9 Objetivo General ...........................................................................9 Objetivos

MARCO

EspecÍficos ...........................................................................9

TEÓRICO ..................................................................11

DiseNo Web ...............................................................................13 EvoluciÓn de la Web ................................................13

Web Moderna ..............................................................................14

Elementos Que Se Incorporan ...................15 TipografÍa ..............................................................................15 Imagen ..............................................................................17 NavegaciÓn y Experiencia ..................................19 Video y AnimaciÓn .................................................20

Nuevo Medio de ComunicaciÓn ...................22 FusiÓn .............................................................................................22

Mundo Libre ................................................................................24 Conocimiento Libre ................................................................24 Software Libre ................................................................25 Mentalidad Libre ................................................................27

referentes ................................................................................28

glosario

................................................................................38 iii

ejecuciÓn ...............................................................................................41

Impacto Esperado .........................................................43 Usuarios Directos e Indirectos ...................43

Conceptos ..................................................................................45 MetodologÍa .....................................................................47

concepto a la grafica ...............................48

resultados esperados ............................................49

Estrategia Para la Transferencia de

Resultados a los Usuarios Potenciales ........................................................................................................................54

estrategia de comunicaciÓn................................54 Cronograma ..................................................................................55 Presupuesto ..................................................................................56

BibliografÍa ..................................................................................49

iv

INFORMACIÓN

GENERAL

DGWiki es un proyecto que se basa en el concepto de compartir conocimiento libremente, con enfoque en el cuerpo institucional de los estudiantes y la carrera especifica de diseño gráfico.

La propuesta final será hecha de forma multimedia, con una página web que los estudiantes de la Universidad del Norte puedan visitar para encontrar información relevante a sus estudios de diseño.

v

vi

RESUMEN

EJECUTIVO

El proyecto es una propuesta de multimedia: sitio web basado en el software gratis de Mediawiki que busca fortalecer la educación entre los estudiantes de diseño gráfico en la Universidad del Norte a través una experiencia social por internet, donde los conocimientos de todos los semestres se puedan encontrar fácilmente para un mejor entendimiento del material que se estudia.

ABSTRACT This project proposes a multimedia based website using the free software from Mediawiki to strengthen the education of graphic design students in the Universidad del Norte through an online social experience, where the knowledge of all the semesters can be easily found for a better understanding of the studied materials.

vii

viii

PROBLEMA Y SOLUCIÓN

1

PLANTEAMIENTO

DEL

PROBLEMA

Cuando un estudiante de Diseño Gráfico empieza sus estudios en la Universidad del Norte, se enfrentará con la constante necesidad de información relevante sobre los diferentes aspectos de su carrera (investigaciones, trabajos, apuntes de clases, etc.). Eventualmente, el estudiante comenzará a depender de sus compañeros de clase, y ellos de él, para obtener fragmentos de información y el conocimiento necesario para sus numerosas clases a lo largo de los semestres.

Sin embargo, algunos de estos conocimientos son difíciles de adquirir, por lo que, en ocasiones se hace necesaria la ayuda de compañeros que cursan semestres superiores, o tal vez, una simple pero tediosa cantidad de ensayos del método de ensayo y error. Por otro lado, los estudiantes que logran recibir

esta información son pocos y el proceso de distribución a veces puede ser lento e ineficiente. La fiabilidad de la información en parte, llega a ser dependiente de los estudiantes que la suministran.

Estos tres factores: Disponibilidad, Distribución y Fiabilidad, son clave en esta situación, y comprenden diferentes aspectos que pueden mejorarse; De estos, hay dos aspectos principales en los cuales el Diseño Gráfico desempeña un papel importante a la hora de resolver. Una vez disponible la información, se debe analizar la manera en que se presenta. Usualmente, el caso implica un(os) estudiante(s) que obtienen la información, a partir de allí, la manera más probable de distribución es auditiva, por medio de los estudiantes que difunden dicha información que escucharon, al resto de sus compañeros.

3

Aunque el proceso anterior es útil en algunos casos, cuando se trata de pasar anotaciones o información para un parcial, por ejemplo, la óptima solución para el aprendizaje de lo suministrado, sería a través de referencias visuales. Estudios sobre el “aprendizaje visual” muestran que la memoria visual es superior a la memoria auditiva (Cohen, 2009). Esto se puede ver en el uso de diapositivas con imágenes por profesores, y como el simple uso de la semiótica, particularmente, por el estudio las señales y los íconos; esto facilitaría al estudiante aprender más y memorizarlo de la mejor manera.

Una vez se resuelve esto, se puede continuar mejorando el proceso de distribución moviendo toda la información a un medio fácilmente accesible por todos, como una página web, evitando así la innecesaria repetición y la confusión de los intercambios auditivos. Sin embargo, una simple compilación de datos no sería suficiente para organizar la cantidad de información

4

que se maneja en la Universidad, se hace entonces necesario pensar en una manera más ágil de navegar por la página web para encontrar con más rapidez lo que se necesita, y también facilitar en el proceso de compartir información que haga falta.

Esta interacción se hace a través de un interfaz.

La necesidad del hombre de compartir información ha sido clave para su supervivencia a través de la historia de la humanidad. Se ha podido ver como la evolución del lenguaje oral al escrito, habilitó la posibilidad de preservar de una mejor manera los pensamientos. De la piedra se hizo transición al papel; durante esta época el hombre inventó la imprenta, lo cual abrió camino a la introducción de la literatura y al esparcimiento del conocimiento por todo el mundo (Leather, n.d.). Los libros, aunque normalmente no se les ve de esa manera, son un excelente ejemplo de una interfaz fácil e intuitiva para los seres humanos.

Problema y Solución

Más recientemente, en las últimas décadas, se ha llegado a la era digital, y por medio ella se ha logrado tener la capacidad de guardar todo el conocimiento de la humanidad, prácticamente por tiempo indefinido. Este nuevo medio trajo también un nuevo tipo de interfaz, el GUI (graphical user interface o interfaz grafico del usuario).

más conocidos – usualmente usado por los estudiantes para buscar referencias rápidas – Wikipedia. Lanzado en el 2001, Wikipedia es uno de los mejores ejemplos de la colaboración de conocimiento, combinando el trabajo de miles de editores; Wikipedia contiene 17 millones de artículos tocando casi cualquier tema imaginable. 1

Un problema similar a la situación institucional mencionada anteriormente, ocurrió dentro de un círculo de programadores, uno de ellos, Ward Cunningham quien terminaría inventando el “WikiWIkiWeb” en 1995, un software que permitió a los programadores documentar sus códigos en una página fácil y accesible.

Esta nueva página nos trajo el concepto del “wiki”, que simplemente seria una página web que puede ser fácilmente editada por cualquier usuario (Ebersbach, 2008). La evolución del wiki ha servido grandemente para coordinar grupos de personas y su información alrededor del mundo; además, nos ha brindado uno de los wikis

Desafortunadamente, la mayoría de wikis exhiben una tendencia similar en sus interfaces. Tienen gran cantidad de información pero, por su asociación, usualmente centrada de temas más técnicos, no se enfocan en el diseño web de la página. Aunque esto se ha mejorado en los últimos años gracias a la popularidad del wiki en el web, este aspecto sigue siendo esencial a la sobrevivencia del wiki y su meta de atraer colaboradores potenciales (Wiseley, 2009). Esto hay que resaltarlo más cuando se considera que el público objetivo en este caso son estudiantes del diseño gráfico.

1 http://en.wikipedia.org/wiki/Wikipedia

5

Como diseñadores, sus vidas se centran en el mundo del estimulo visual. Ellos serán más sensibles al diseño de una página, y esa impresión inicial será crucial para mantener el diseñador interesado en la página y continuar usándola, además de motivar al usuario para participar en la colaboración del contenido. Un proyecto algo relacionado a la idea de un “wiki visual” es el concepto del “Viki” de LostGarden. Viki es un wiki principalmente visual, enfocado más a los aspectos gráficos y didácticos que los niños están acostumbrados a usar.

6

Ellos usan los mismo principios de los wikis estándar, pero hacen énfasis en la interacción visual de como se presenta la interfaz y las herramientas de edición para el usuario (Dan, 2006). ¿De qué manera se debe realizar una multimedia para los diseñadores gráficos de la U. Norte, para poder obtener la información que requieren durante sus estudios de una base de datos centralizada confiable, y una interfaz más gráficamente elaborada, dirigida específicamente a su carrera?

Problema y Solución

ÁREA

Y

ÁMBITO

Social/Educacional y Multimedia

JUSTIFICACIÓN El proyecto de “DGwiki” busca satisfacer las necesidades de información para el estudiante de diseño gráfico en la Universidad del Norte, proporcionando una base de datos de conocimiento colaborado, abarcando todos los temas o materias encontrados durante los 8 semestres de estudio.

Usando el software de Mediawiki, una página web será creada de forma que sea fácil para acceder y navegar la información contenida en ella. Por diseño, el software del wiki permite que la página sea fácilmente editada, manteniendo la información siempre actualizada.

Como sistema colaborativo, cualquier estudiante podrá compartir sus conocimientos, sin importar por cual semestre estén cursando. Además, los otros estudiantes podrán revisar la información subida al wiki, y hacer cambios y correcciones en cualquier error que encuentren, dejando un alto grado de fiabilidad para la información en el wiki. Este sistema será adaptado específicamente a los diseñadores con su interfaz gráfica, rompiendo el molde del wiki estándar, proporcionando un entorno visualmente más estimulante para los diseñadores gráficamente inclinados.

7

8

OBJETIVOS OBJETIVO GENERAL Desarrollar una multimedia que proporcione la información de valor a un estudiante de diseño gráfico en la Universidad del Norte, con una interfaz de usuario creada específicamente para los diseñadores gráficos.

OBJETIVOS ESPECÍFICOS Proveer a los estudiantes con información detallada de las clases, profesores y tareas de los 8 semestres, incluyendo tutoriales y consejos para el uso adecuado de los principales software usados, y proveer una lista de las tiendas locales para la impresión o compra de materiales.

Hacer un análisis de los estudiantes de diseño gráfico que permita crear un wiki visualmente mejorado, personalizado a los diseñadores.

Identificar estructura y diseño de una página web para facilitar la búsqueda de información sobre el diseño.

Identificar procesos de comunicación dentro la página, cuanto aporta al estudiante y cuanto aprende del material.

9

10

MARCO TEÓRICO

En el proyecto del DGWiki, existen 3 aspectos importantes clave para su desarrollo. Al plantear la propuesta de una página de internet, se debe tener en cuenta el análisis y referencias sobre diseño web, cómo usarlo adecuadamente para el interés y bien común de los estudiantes del diseño gráfico. Esta página depende de las nuevas formas de comunicación e interacción que surgen con la introducción del internet, y se basa en ideologías de un movimiento social para todo lo “libre”.

11

12

Diseno

EvoluciÓn

de

la

web

Web

El internet que conocemos hoy en día es algo totalmente diferente al internet de hace 26 años. Lo que antes era un simple mundo virtual de texto se ha convertido en algo mucho más complejo. Se conocen 2 etapas principales en el diseño web, el “Web 1.0” y “Web 2.0”.

Usualmente, cuando se habla de Web 1.0 se refiere al diseño arcaico del Internet entre los 80’s y 90’s. Durante esta época, el crecimiento de los navegadores rivales más grandes: Netscape e Internet Explorer, lo cual, inició un problema donde cada uno implementaba sus propias normas y estilos de renderizar la información dado por las páginas web (Robbins, 2006).

Afortunadamente, después de un largo proceso, en 1997 salió la cuarta versión del HTML (Hypertext Markup Language), junto con la segunda versión del CSS (Cascading

Style Sheets, u hojas de estilo), un estándar elaborado que abrió puertas a una nueva generación de navegadores, donde el diseñador por fin tendría la posibilidad de diseñar páginas usando lenguajes maduros, y con algo de creatividad, crear páginas que anteriormente no habían sido posibles de diseñar.

Al final de los 90’s y comenzando el nuevo siglo, llegó el pico de la Burbuja Dot Com, fue en ese momento en que, las empresas reconocían la importancia de tener un negocio con algún tipo de presencia en la Web (lo cual hacían comprando un dominio “.com” para crear su sitio web.).

13

web

moderno

Esta nueva forma de ver la Web como una plataforma para aplicaciones, se concedió el nombre de Web 2.0, denominación asignada por Darcy DiNucci en 1999, el cual escribió en su artículo “Futuro Fragmentado”: “La Web que conocemos ahora, que se carga dentro la ventana de un navegador en pantallazos esencialmente estáticos, solo es un embrión de la Web por venir.

Los primeros destellos de la Web 2.0 están empezando a aparecer, y estamos empezando a ver cómo ese embrión puede desarrollarse. La Web será entendido no como pantallazos de texto y gráficos, sino como un mecanismo de transporte, el éter a través del cual pasa la interactividad.”

Con estas nuevas interacciones, vinieron nuevos diseños. Las páginas web movieron de usar textos parpadeantes y el “GIF animado” al AJAX y HTML5/CSS3 (últimas versiones de los lenguajes principales);

14

Colores vibrantes, contenido dinámico, y presentaciones que van desde estilo revista hasta pinturas, convirtiéndose en elementos necesarios para crear una página que el usuario querrá continuar visitar (Friedman, 2006). Tanto ha sido el cambio, que desde principios de la Web 2.0 ha empezado aumentar el uso del término Web 3.0, aunque, hasta el momento no se ha logrado establecer una definición clara de lo que es exactamente.

Lo que sí se sabe, es que solo va continuar aumentando el nivel de interacción entre los usuarios, y de estos con la página.

Aún con un término definido o no, la web seguirá evolucionando dentro un año, y como diseñador simplemente hay que mantenerse actualizado con los trends – patrones populares – que surgen.

Elementos Que Se Incorporan TIPOGRAFÍA Durante el último año, ha ocurrido un fenómeno dentro la tipografía usada en las páginas web. Gracias a la reintroducción a una propiedad conocida como “font-face” en la última versión del CSS, el diseñador puede salir de las típicas fuentes de “Arial”, “Times New Roman”, y “Courier”, que se usan con tan gran frecuencia gracias al hecho de que se encuentran en cualquier sistema operativo. Sin embargo, el uso de una tipografía diferente le da una esencia única a la página y esa diferencia es algo que los navegantes de la página encontrarán visualmente intrigante (Hermann, 2011).

Después de romper la monotonía de las fuentes del sistema, el diseñador debe tener en cuenta diferentes aspectos del texto: tamaño, posicionamiento, medidas, y hasta el uso correcto de la puntuación (Roberts, 2011). El tamaño es algo vital al presentar la jerarquía de la información. Títulos,

conocidos habitualmente como headers, siempre tienen alguna diferenciación con el texto encontrado en el cuerpo.

Con respecto a la jerarquía del contenido establecido, hay que posicionar las cajas de texto dentro la página, usualmente por su nivel de importancia.

Es aquí donde la Web, en estos tiempos modernos, ha podido tomar el buen ejemplo de los formatos impresos y su estructuración de información. Con los sitios ricos en contenidos, como los blogs, esto generalmente implica que el contenido principal este en el centro, con otros artículos viejos, populares, o más discutidos dentro una barra a un lado. Esto en particular es importante para los jóvenes, como los estudiantes de la Universidad, ya que estas formas de presentar la información como algo familiar – el impreso – facilita la navegación dentro la página, y ayuda a encontrar más rápido lo que ellos necesitan.

15

Este posicionamiento del contenido también va directamente conectado a las medidas, márgenes, y guías que el diseñador decide usar en la página.

Finalmente, aunque muy sutil, es bueno que un diseñador pueda usar la puntuación correcta dentro su texto. Un ejemplo es el uso de comillas y apóstrofes, que en el teclado solo están representados por las versiones “ambidextras”.

Las comillas verdaderas, como se ven en este texto tienen una pequeña curva y ángulo, mostrando claramente cuál es la izquierda y la derecha (y por ende, donde está el comienzo y el final). Estos toques sutiles (conocidos como “sutilezas del diseño”) son algo que inconscientemente se perciben como calidad por el navegante, pero casi imposible de ser específicamente señalado por el usuario común (Kopec, 2010). Esto es especialmente importante en la parte gráfica de la página.

16

IMAGEN “…Así que ahora se está convirtiendo en una tendencia en diseño web para hacer cada pixel perfecto, lo cual es una técnica que se puede lograr con paciencia y con un potente software gráfico como Photoshop e Illustrator. La idea del pixel perfecto es que cada detalle ha sido cuidadosamente planeado para que no se vea ninguna área borrosa o pixelada“ (Webdesignshock.com, 2011) Esta teoría del “pixel perfecto”, definido por la página de webdesignshock.com es la esencia de las sutilezas del diseño aplicado a las imágenes. Como se mencionó anteriormente, la percepción de “calidad” por este efecto es importante para el navegante. En el caso de una página como un wiki, el estudiante verá el manejo de las imágenes de 2 formas principales.

La primera sería el del interfaz, donde encontramos la mayor aplicación de la

teoría del pixel perfecto. Esto va relacionado con la experiencia del usuario con el sitio, lo cual se analizara en detalle más adelante.

La segunda forma serían las imágenes de guía o referencia. Estas imágenes simplemente son las que acompañan el texto, mostrando visualmente los ejemplos del artículo en la página, por ejemplo, una captura de pantalla mostrando la opción dentro un menú de algún programa.

Un estudio por Gennadi Gevorgyan y Lance Porter de la Universidad del Estado de Luisiana también encuentra que hay un factor cultural importante en el desarrollo de las características de un diseño web, en las gráficas, símbolos y colores, entre otras cosas. El artículo habla de un experimento hecho con un grupo de estudiantes americanos y chinos, y su percepción de diferentes sitios usando diferentes características del modelo de dimensiones culturales de Hoftstede.

17

Ellos encontraron que la cultura sí tiene su efecto, y que esto se debe tener en cuenta durante el proceso de diseño de una página, y no ser una reflexión donde la página se personaliza después para los usuarios de diferentes partes del mundo. Por el ejemplo, el experimento apoyó la hipótesis de que estudiantes chinos tomarían más en cuenta diseños usando un aspecto de “poder-distancia” alta, una característica común de países asiáticos que ven el poder y la jerarquía como algo natural.

Esto se refleja dentro del diseño como elementos de información e imágenes sobre el dueño de la página; algo que los americanos (“poder-distancia” baja) aprecian menos por su cultural mas “independiente” y tendencia de resistir autoridad total.

18

Además de la calidad y aspectos culturales que conectan al estudiante a una página, las imágenes también son clave en facilitar navegación de información, especialmente cuando vemos que el estudiante usa el método de browsing en comparación con las opciones de búsqueda o métodos híbridos de los dos (Sandvig, 2004).

Sin imágenes como puntos de referencia, navegar una página de información seria un esfuerzo tedioso, y terminaría perdiendo la atención del estudiante que buscaría otra fuente para conseguir lo que quiere, lo cual no es la idea.

NAVEGACIÓN Y EXPERIENCIA Como se había mencionado anteriormente, las imágenes forman una parte importante en el manejo del interfaz (usualmente referido como el “UI”) y la experiencia del usuario (conocido como el “UX”). Toda página web busca tener un buen UX, lo cual permita al usuario buscar lo que necesite de la manera más rápida posible y sin confusión. Esto se hace a través de la construcción de un UI bien diseñado.

Dos aspectos claves del UI son la sencillez y la coherencia (Pérez, 2004). La sencillez se refiere al contenido, que no debe ser recargado, sino que debe mostrar lo necesario para que el usuario se ubique y continúe en su navegación del sitio.

El usuario puede perder esta ubicación si dicha página no se preocupa de igual manera en la coherencia. Por la estructura de un sitio wiki, que se basa en un formato muy entrelazado de páginas entre sí, es fácil encontrarse en una página muy diferente de la que originalmente se visitó.

El UI debe tener una(s) zonas de contextualización, por ejemplo, en el encabezado. Cerca el titulo de la página, usualmente se ubica alguna categoría, o un breadcrumb (que traduce “migaja de pan”), el cual es un grupo de enlaces mostrando la jerarquía de las páginas que visitaste para llegar a la página actual.

Por ejemplo, si se entra a una página y dentro de la navegación a una categoría de “Estudiantes”, a la cual sigue otro enlace de “Clases”, el breadcrumb hasta ahora puede verse como: “Pagina Principal > Estudiantes > Clases”.

Las imágenes ayudan mucho en este aspecto porque con el uso de colores e íconos, al usuario (en este caso, el estudiante) se le facilita memorizar las diferentes secciones del sitio. Un ícono clásico es el de una casa, a la cual en el internet ya se le conoce como la representación de la página principal, o el “home”. Imágenes como estás son fundamentales en crear un interfaz con UX apropiado.

19

VIDEO Y ANIMACIÓN De la misma manera que las imágenes son mas recordables que el texto, los videos y animaciones también sirven para transmitir ideas o información más allá de lo que puede una imagen estática. Un ejemplo perfecto de esto se puede encontrar en los screencasts.

Un screencast básicamente consiste en una grabación directa de la pantalla de un computador (Reich, 2008). Esto usualmente se usa para grabar tutoriales o lecciones, lo cual para un estudiante es una de las mejores maneras de aprender a usar cualquier programa.

20

Por ejemplo, si el estudiante quiere aprender a crear su propia animación en Flash, el busca en Google por algún tutorial. Hay 3 tipos de tutoriales que el probablemente terminará encontrando, uno que es solo con texto – que afortunadamente están desapareciendo a favor de las otras opciones – y simplemente explica cada paso.

El segundo incluye imágenes con los pasos, lo cual guía al estudiante mucho mejor porque tiene una referencia visual para navegar el programa. El tercero termina siendo el screencast, que además de las referencias visuales, tiene el narrador guiando los pasos, haciendo el tutorial prácticamente como una clase virtual.

Gracias a la evolución del web, y los diseños de las páginas hoy en día, la sociedad, y particularmente estudiantes, tienen más facilidad de integrar estos servicios en sus vidas y obtener la información que ellos necesitan para su carrera.

Además, mientras el mundo se mueve a tecnologías más pequeñas (portátiles, tablas, y celulares inteligentes), ellos siempre se encuentran conectados, con un mundo virtual siempre a la mano.

Esta conexión constante ha alterado las vidas de esta generación totalmente; no solo en la manera que los humanos consumen información, pero también en las interacciones diarias con otras personas (Morley, 2009).

21

Nuevo Medio de ComunicaciÓn

FUSiÓn “Me gustaría informarle a todos que son en realidad cyborgs, pero no los cyborgs que piensan. Tú no eres RoboCop, y no eres Terminator, pero tú eres un cyborg cada vez que miras en una pantalla de computadora o utilizas uno de los dispositivos de telefonía celular. …

Pero ahora lo que estamos viendo no es una extensión del cuerpo físico, sino una extensión del ser mental. Y por eso, somos capaces de viajar más rápido y comunicar de manera diferente. …” (Case, 2011) Estos extractos de un discurso por Amber Case titulado “We are all Cyborgs” suenan como algo de la ciencia ficción, pero son una realidad. Estudiantes deben tomar ventaja de este fenómeno, y tomar la responsabilidad, no solo de obtener la información para estar actualizado en sus conocimientos, pero también en compartir

22

esta información. Hoy en día existen una cantidad de servicios que permiten este intercambio de información, páginas que facilitan la transferencia de archivos e imágenes, programas de mensajería instantánea, y un nuevo dispositivo móvil sale cada mes con la habilidad de acceder a estos servicios en cualquier momento.

Dentro del diseño gráfico, esto puede ser hasta más útil por su manejo constante de archivos digitales. Por ejemplo: En una clase de Realización Audiovisual, se divide la clase en grupos donde cada uno tiene que realizar una animación en Flash. Un estudiante del grupo toma el rol del director, y les manda un mensaje al grupo por Facebook, asignando cada uno de los miembros con su trabajo. El grupo se mantiene en contacto por este sistema, y empiezan a trabajar.

Usando el Dropbox, ellos comparten una carpeta en el computador que se sincroniza entre todos, guardando sus trabajo allí para que todos los del grupo se mantengan actualizados de quien está haciendo que, y cuanto se ha terminado. Un fin de semana, todos se reúnen en la casa del líder, y hablan del progreso logrado hasta el momento.

Los que tienen portátiles y su cuenta de Dropbox sincronizados pueden trabajar con la última versión de los archivos de la animación allí mismo. Al final de la reunión, el líder establece una fecha para entregar algunas escenas.

Los miembros que tienen su celular inteligente pueden entrar a los servicios de Google Calendar, y marcar la fecha como algo importante. Cuando lleguen a la casa, usando el iCal de su Mac o un programa como el Rainlendar – que mantiene un

calendar en el escritorio – se sincroniza el evento para que el estudiante siempre lo tenga pendiente. Llega la fecha, y todos entran en un chat de video por Skype y hablan del trabajo que falta. Al final, entregan su trabajo en clase, y suben la animación en Vimeo para compartir con el mundo.

Este nivel de comunicación e interacción jamás existió antes, y en este caso todo el grupo estaba dentro de una misma área local, pero igualmente se puede hacer con un grupo de miembros que viven en diferentes partes del mundo.

23

MUNDO

Conocimiento

Libre

Este intercambio de información proviene de una filosofía que ha ido creciendo desde los principios del internet, ya que el internet se convirtió en esa puerta donde se puede entrar para compartir el conocimiento tan fácilmente. El conocimiento libre es un término usado para denotar un conjunto de principios y metodologías relacionadas con la producción y distribución de las obras del conocimiento de una manera libre para todos. 2 En los tiempos antiguos, compartir información era mucho más difícil, especialmente para aquellos que simplemente querían compartir y nada más. Si un estudiante quería publicar alguna idea de un artículo que él había escrito, lo máximo que él podía hacer era llegar a incluir su obra dentro un libro que tendría que ser publicado en grandes cantidades

24

LIBRE

para poder llegar fuera de su universidad.

Hoy en día, el solo está a un paso para montar esa información en una página web para que lo vea el mundo entero.

El Open Knowledge Foundation (Fundación de Conocimiento Libre) es una fundación que promociona este tipo de filosofía, y están encargados de algunos proyectos como el CKAN – un sistema para catalogar, organizar, y compartir contenido y data libremente – y el Open Shakespeare, una página donde se puede encontrar todas las obras de Shakespeare junto con anotaciones y otras informaciones relacionadas. De nuevo, uno los ejemplos más populares de esta ideología se encuentra en Wikipedia.

Ellos literalmente han construido una plataforma para liberar el conocimiento que antes solo se encontraba en las

2 http://en.wikipedia.org/wiki/Open_Knowledge

enciclopedias físicas, y ahora hasta han sobrepasando la cantidad de información que las obras de estos libros (Abraham, 2011). Curiosamente, el sistema en que se basa Wikipedia, llamado Mediawiki, es un software que se basa en una filosofía libre similar.

SOFTWARE

Libre

OSS, o Open Source Software (software de código abierto) es software que los creadores publican, como lo indica su nombre, con la fuente del código abierto. Eso significa que cualquier persona puede ver el código cómo fue programado y modificarlo, usualmente publicado de nuevo en la misma manera, libre para modificaciones, pero también a veces vendido comercialmente (todo

dependiendo de la licencia) (Wheeler, 2007). Igualmente, aunque se pague por el software o no, la idea del OSS es compartir el código principal para el que quiera usarlo (aunque los que se venden comercialmente usualmente no se consideran parte del movimiento del software libre).

Esto es un gran contraste a la manera típica que se había programado antes, con compañías guardando sus códigos muy cuidadosamente, ya que era su creación, y no querían que la competencia se copiara de su trabajo. Internet Explorer, por ejemplo, es una creación de Microsoft. Este navegador fue el más grande después de derrotar al Netscape Navigator en la guerra de los navegadores, pero esto causo un problema. Con el monopolio establecido, Internet Explorer empezó a estancarse.

25

No había innovación o progreso en diseño web ya que el único navegador estaba estableciendo sus propias reglas. Aquí es cuando llegó un programa OSS, el Firefox (en esa época conocido como Phoenix, y después Firebird) y empezó una segunda guerra, la cual se podría decir que ganó hace unos años. Firefox, basado en estas ideas libres de código, causó una revolución en la web, y encendió un fuego debajo de Microsoft y su navegador por el hecho de que Firefox podía hacer todo igual que Explorer, pero mejor, y también era gratis.

Una característica particular del OSS, es que por el hecho de que cualquier persona puede ver el código, los bugs o mal funcionamientos del programa se pueden encontrar más rápido, porque hay más ojos revisando la programación.

26

En caso contrario, una compañía normal usualmente tiene un cierto grupo de personas dedicado para eso, y si ellos no encuentran el problema, no hay nadie más que le pueda hacer la revisión. Esta situación se relaciona mucho con un estudiante de diseño gráfico, por el hecho de que él depende de sus compañeros si quiere recibir críticas y opiniones de su trabajo para después hacer las propias modificaciones.

El Mediawiki (y otros software de wiki) toman todo este concepto de “libertad” un paso más adelante. Además de ser OSS – software libre para el programador – también esta creado para compartir información, ‘Conocimiento libre’.

MENTALIDAD

Libre

Una pregunta común en la discusión de todo este concepto del software libre es “¿por qué?”. ¿Porque alguien usaría tanto de su tiempo libre para crear algo, solo para soltarlo gratis en el internet para que cualquier extraño se lo pueda usar o cambiar? Richard Stallman (2010) lo pone de esta manera: “Estas libertades son de vital importancia.

Son esenciales, no sólo por el bien de los usuarios individuales, sino para la sociedad en su conjunto porque promueven la solidaridad social- es decir, el intercambio y la cooperación. Se convierten más importantes aún mientras nuestra cultura y actividades de la vida son cada vez más digitalizadas. En un mundo de sonidos digitales, imágenes y palabras, el software libre es cada vez más esencial para la libertad en general.”

El estudiante debe estar agradecido por este movimiento (y las ideologías ancestrales) porque si no fuera por ellos, estarían en una situación muy grave. Si se imagina un mundo donde todo conocimiento, cualquier programa, y todo medio de información solo se pudiera acceder con dinero o de una fuente totalitaria, estaríamos regresando siglos en el nivel tecnológico y cultural de la civilización.

El estudiante, aunque se dé cuenta o no, vive en estas ideologías, depende de ellas y no podría sobrevivir socialmente si no existieran.

27

referentes

Emisor: www.deviantart.com

Emisor: www.sixrevisions.com

Receptor: Artistas

Receptor: Diseñadores Web

Descripción: Una página que sirve de plataforma para el intercambio de arte.

Descripción: Un blog para diseñadores web.

Significado Denotativo: Deviant significa fuera del normal, y art es arte.

Significado Denotativo: Contiene información y material de lo último en el diseño web.

Significado Connotativo: Comunidad, habilidad, talento Razones de Elección: La página es una herramienta del Web 2.0 muy útil para estudiantes del diseño para poder compartir sus trabajos.

28

Significado Connotativo: Minimalismo, profesionalismo, emprendedor Razones de Elección: La página demuestra un buen uso de margines, espacio, y estructura de manera minimalista para presentar los artículos.

Emisor: www.dropbox.com

Emisor: www.vimeo.com

Receptor: Usuarios

Receptor: Navegante/Artistas

Descripción: Un servicio para sincronizar archivos por web.

Descripción: Una página donde se comparta videos.

Significado Denotativo: Carpetas, archivos, herramientas

Significado Denotativo: Videos

Significado Connotativo: Compartir, cooperación, organización, acceso

Significado Connotativo: Creatividad, arte, compartir, comunidad

Razones de Elección: Dropbox es una herramienta indispensable para cualquier estudiante, especialmente para trabajos de diseño.

Razones de Elección: Para los artistas de multimedia, Vimeo provee una comunidad para compartir sus obras.

29

Emisor: http://www.mediawiki.org/wiki/ MediaWiki Receptor: Navegante Descripción: Un software para crear tu propio wiki Significado Denotativo: Información, artículos, enlaces Significado Connotativo: Conocimiento, libertad, compartir Razones de Elección: Este software es lo que se va basar el proyecto del DGWiki

30

Emisor: http://960.gs Receptor: Navegante Descripción: Un sistema de guias/medidas para una página web Significado Denotativo: Columnas, espacio, márgenes Significado Connotativo: Organización, profesionalismo Razones de Elección: Este sistema es uno los más usados para una página moderno, y será usado dentro el diseño del DGWiki.

Emisor: http://www.w3schools.com/

Emisor: http://getfirebug.com/

Receptor: Diseñadores Web

Receptor: Diseñadores Web

Descripción: Una página de referencia para código de HTML y CSS

Descripción: Firebug es una extensión para el Firefox que ayuda en el diseño web

Significado Denotativo: Información, páginas web, código

Significado Denotativo: Insecto con fuego, iconos, botón de acción

Significado Connotativo: Conocimiento, referencia, educativo

Significado Connotativo: Colaboración, programación, profesional

Razones de Elección: Esta página será usada constantemente durante la creación del DGWiki.

Razones de Elección: Esta herramienta será usada constantemente durante la creación del DGWiki y también es un excelente ejemplo de una página bien diseñada.

31

Emisor: www.justin.tv

Emisor: http://www.dribbble.com

Receptor: Navegante

Receptor: Diseñadores

Descripción: Un sitio web que deja subir grabaciones (y screencasts) de diferentes temas

Descripción: Sitio de inspiración sobre temas de diseño

Significado Denotativo: Camera, móvil, escritorio, juegos, grabación Significado Connotativo: Compartir, entretenimiento, creatividad Razones de Elección: Esta página será usada para subir grabaciones de algunos tutoriales que estarán vinculados en el DGWiki.

32

Significado Denotativo: Iconos, vectores, sitios web, logos, animaciones Significado Connotativo: Creatividad, inspiración, profesional Razones de Elección: Se tomara referencias y diseños de inspiración de esta página.

Emisor: http://www.noupe.com

Emisor: www.smashingmagazine.com

Receptor: Diseñadores

Receptor: Diseñadores

Descripción: Un blog de inspiración sobre temas de diseño

Descripción: Un blog de inspiración sobre temas de diseño

Significado Denotativo: Arquitectura, web, tutoriales

Significado Denotativo: Tipografía, web, logo, libros

Significado Connotativo: Creatividad, inspiración, profesional

Significado Connotativo: Creatividad, inspiración, profesional

Razones de Elección: Se tomara referencias y diseños de inspiración de esta página.

Razones de Elección: Se tomara referencias y diseños de inspiración de esta página.

33

Emisor: http://www.colourlovers.com/

Emisor: http://abduzeedo.com

Receptor: Diseñadores

Receptor: Diseñadores

Descripción: Servicio que ayuda organizar paletas de color y texturas

Descripción: Un blog de inspiración sobre temas de diseño

Significado Denotativo: Paletas, texturas, imágenes

Significado Denotativo: Arquitectura, logos, web, tutoriales

Significado Connotativo: Creatividad, inspiración, organización

Significado Connotativo: Creatividad, inspiración, profesional

Razones de Elección: Se podría usar esta página para encontrar un conjunto de colores para el diseño del DGWiki

Razones de Elección: Se tomara referencias y diseños de inspiración de esta página.

34

Emisor: http://www.scribd.com/

Emisor: www.newgrounds.com

Receptor: Navegantes

Receptor: Navegantes

Descripción: Es un sitio donde se pueden encontrar diferentes tipos de documentos

Descripción: Una página donde se comparta animaciones y juegos hechos en Flash.

Significado Denotativo: Artículos, PDF, documentos Significado Connotativo: Creatividad, intercambio, compartir, informativo Razones de Elección: Este sitio se usara para compartir documentos de interés a los estudiantes de diseño.

Significado Denotativo: Animación, caricaturas, juegos, Significado Connotativo: Creatividad, filmografía, dirección, compartir, comunidad Razones de Elección: Esta página tiene ejemplos de animaciones que se podrían aplicar dentro DGWiki para hacer el contenido más dinámico.

35

Emisor: http://phdcomics.com

Emisor: http://www.ie6nomore.com/

Receptor: Navegantes

Receptor: Navegante

Descripción: Un comic que trata de la vida de los estudiantes en la Universidad Significado Denotativo: Estudiantes, clases, profesores

Descripción: Una página que protesta el soporte del Internet Explorer 6

Significado Connotativo: Tecnología, humor, técnicas Razones de Elección: Se podría usar los cartoons en el DGWiki para atraer los estudiantes.

36

Significado Denotativo: Navegador, sitios web, protesta Significado Connotativo: Movimiento social, frustración, respuesta Razones de Elección: Este sitio provee un pedazo de código que se usara dentro el DGWiki para demostrar a los usuarios la falta de soporte para un navegador obsoleto.

Emisor: http://www.fsf.org/

Emisor: www.google.com/calendar

Receptor: Publico

Receptor: Navegante

Descripción: Una fundación que soporta y promociona la creación de software libre.

Descripción: El servicio de Google para un calendario web.

Significado Denotativo: Campañas, artículos, información

Significado Denotativo: Calendario, fechas, eventos

Significado Connotativo: Libertad, motivación, ideología,

Significado Connotativo: Organización, planeación, puntualidad

Razones de Elección: La FSF es el principal proponente de la ideología del software libre, lo cual está basado el proyecto de Mediawiki.

Razones de Elección: Google calendar es una plataforma que el estudiante puede usar para organizar su vida diaria.

37

glosario AJAX

Asynchronous

dominio - Un dominio de Internet es una

JavaScript And XML (JavaScript asíncrono

red de identificación asociada a un grupo

y XML), es una técnica de desarrollo web

de dispositivos o equipos conectados a la

para crear aplicaciones interactivas

red Internet.

breadcrumb

Ariadna

Dropbox - Dropbox es un servicio de

(Breadcrumb o migas de pan en inglés)

alojamiento de archivos multiplataforma

es una técnica de navegación usada para

en la nube, operado por la compañía

desarrollar la interfaz gráfica de usuario.

Dropbox.

browsing - Una forma de navegación con

fuentes del sistema - Las fuentes que vienen

los botones y menús.

preinstalados con el sistema operativo.

bugs - Un defecto de software (computer

headers - Cabecera (header en inglés) se

bug en inglés), es el resultado de un fallo o

refiere a la información suplementaria

deficiencia durante el proceso de creación

situada al principio de un bloque de

de programas de ordenador o computadora

información que va a ser almacenada o

(software).

transmitida.

CSS - Las hojas de estilo en cascada (en

HTML - HTML, siglas de HyperText Markup

inglés Cascading Style Sheets), CSS es un

Language (Lenguaje de Marcado de

lenguaje usado para definir la presentación

Hipertexto), es el lenguaje de marcado

de un documento estructurado escrito en

predominante para la elaboración de

HTML o XML (y por extensión en XHTML).

páginas web.

38

-

acrónimo

-

Un

de

hilo

de

OSS - El software de código abierto (en

UX - La experiencia de usuario es el

inglés open source software u OSS) es

conjunto de factores y elementos relativos

aquel software cuyo código fuente y otros

a la interacción del usuario, con un entorno

derechos que normalmente son exclusivos

o dispositivo concretos, cuyo resultado es

para aquellas personas que poseen los

la generación de una percepción positiva

derechos de autor, son publicados bajo

o negativa de dicho servicio, producto o

una licencia de software compatible con la

dispositivo.

Open Source Definition o que forman parte del dominio público.

Vimeo - Una red social de Internet basada en videos, lanzada en noviembre de 2004

screencast - Un screencast es una

por la compañía InterActiveCorp (IAC).

grabación digital de la salida por pantalla de la computadora, a veces conteniendo

Web 2.0 - El término Web 2.0 (2004–

narración de audio.

actualidad) está comúnmente asociado con aplicaciones web que facilitan el compartir

UI - La interfaz de usuario es el medio con

información, la interoperabilidad, el diseño

que el usuario puede comunicarse con una

centrado en el usuario y la colaboración en

máquina, un equipo o una computadora, y

la World Wide Web.

comprende todos los puntos de contacto entre el usuario y el equipo, normalmente

wiki - Es un sitio web cuyas paginas

suelen ser fáciles de entender y fáciles de

web pueden ser editadas por multiples

accionar.

voluntarios atravez del navegador web.

Tomado de http://es.wikipedia.org/

39

40

ejecuCIÓN

41

42

IMPACTO

ESPERADO

Es esta la ideología en la cual se basa el proyecto del DGWiki, y todo surge por la existencia de las necesidades del estudiante de diseño gráfico. Afortunadamente, los estudiantes ya tienen la mentalidad y el comportamiento de querer compartir la información que obtienen durante sus estudios, y el DGWiki busca facilitar esto de tal manera que al final, los estudiantes terminen también fusionando el proyecto a sus vidas diarias. Además, en la misma manera que los estudiantes empiecen a depender del DGWiki, el DGWiki también dependerá de ellos para continuar siendo actualizado para las futuras generaciones.

USUARIOS DIRECTOS E INDIRECTOS Los usuarios beneficiados directamente por el proyecto del DGWiki son los estudiantes de diseño grafico dentro la Universidad del Norte. Esto indirectamente beneficiaría a los profesores y la Universidad, ya que los estudiantes tienen la posibilidad de aumentar su eficiencia y conocimiento con los trabajos asignados en clase. Con el crecimiento suficiente, el wiki puede evolucionar en algo que beneficie directamente estudiantes de cualquier carrera.

43

4 4

mundo libre conocimiento idealogÍa software

compartir

libertad gratis

DGWiki nuevo medio comunicativo

integral instantaneo

recibir

CONCEPTOS El concepto principal que DGWiki piensa manejar es el de compartir, usando un software libre, bajo una ideología que desea brindar gratuitamente conocimiento sobre diseño gráfico a los estudiantes que decidan estudiarlo en la Universidad del Norte.

El concepto de compartir surge de otros 2 conceptos principales: mundo libre y nuevo medio comunicativo. Cuando se habla de un mundo libre, se hace referencia a 3 categorías esenciales basadas en la libertad. La ideología tras este mundo libre es esa mentalidad que tiene una persona para mantener la libertad de ideas o información simplemente para el bien del ser humano. El conocimiento es esa información que obtiene el ser humano para procesar, aprender, y aplicar en la vida diaria.

Dentro de un mundo libre, el conocimiento no debe tener ningún límite en su distribución, ningún costo y es creado para compartir.

El software es la manifestación de alguna idea en forma digital, con el propósito de facilitar una función al ser humano. El software, dentro del mundo libre, tiene 2 clasificaciones:

Gratis: Es un software donde el programador decide no recibir ganancia de su creación, sino solo compartirlo con el mundo para ser usado sin costo.

Libertad: Este es el software que programadores con la ideología libre deciden, no solo lanzar para el uso gratis, sino también para modificar y compartir (por medio del código fuente, además de la distribución normal) al público.

45

Esto asegura una continua evolución del proyecto, en contraste con un programa que mantiene su código privado.

El otro concepto principal del proyecto trata de su propiedad por ser un nuevo medio comunicativo. Al ser basado en una plataforma digital, el manejo de la información es diferente comparado con las fuentes análogas como los libros. En este proyecto, se intenta usar 2 conceptos de este nuevo medio. El proyecto busca ser integral, lo cual se refiere a la fusión de la tecnología dentro de la vida diaria, de forma que el estudiante de diseño siempre se dirija a la página de DGWiki con sus inquietudes.

46

Por ser una página web, este acceso también será instantáneo. La información que el estudiante curioso necesite estará accesible en los diferentes dispositivos que lleve a la universidad, como el celular o portátil, por lo cual a través el wi-fi gratuito de la universidad, siempre tendrá las referencias de DGWiki a la mano. De la misma manera que esta información la recibe tan fácilmente, igualmente la podrá compartir con otros, y asi, mantener un ciclo de conocimientos decentralizados.

METODOLOGIA DGWiki busca proveer una página con toda la información necesaria y requerida por un estudiante de diseño grafico en la Universidad del Norte, esto a través de una experiencia rica en multimedia, que junto con un interfaz apropiadamente diseñado y fácil de usar, permitirá al estudiante navegar eficientemente para obtener esa información de una manera más rápida.

Para cumplir esto, los siguientes pasos son necesarios: • Analizar el interfaz y experiencias que recibe el usuario de páginas populares que son dirigidas al público objetivo para encontrar las tendencias y técnicas que usan, y luego implementarlas para tener la mejor e intuitiva navegación posible. o Esto incluye estudiar la diagramación de los elementos por el sitio, jerarquía de contenido y cualquer característica particular de la página. o Crear wireframes para decidir la estructura apropiada para el público objetivo.

• Crear y/u obtener material de soporte como imágenes, videos, y otros elementos de multimedia para un mejor aprendizaje del contenido del wiki. o Todo elemento sacado de fuentes externas será revisado para tener la calidad apropiada. Multimedia vieja, obsoleta o gráficamente no agradable será descartada. Videos, por ejemplo, tendrán que ser entendibles, claros y concisos en sus métodos de enseñanza.

• Conducir pruebas de instalación y manejo del software Mediawiki, aprendiendo el sintaxis correcto para la creación de paginas wiki.

La construcción de la página será hecha usando Notepad++ con pruebas dentro de los browsers de Firefox, Chrome, y Safari, usando el HTML5 y CSS3 junto con el paquete estándar del software de Mediawiki.org. Las pruebas se tomaran en un servidor local.

• Investigar y adquirir toda la información requerida del currículo que usa la Universidad del Norte para diseño grafico.

• Crear resúmenes de clases, temas generales, y programas vistos durante los semestres.

4 7

CONCEPTO a la grafica Junto con el concepto principal de compartir, los subconceptos de libertad e integral también forman parte del desarrollo del diseño. El “compartir” se puede tomar de la forma literal en la manera que el sitio le busca presentar la información al estudiante, de forma técnica en el diseño del wiki y su manera de distribuir esa información con las otras páginas entre ellos, pero también de forma visual en sus características de equilibrio.

Esto se maneja con los elementos de cada página, creando un balance entre el espacio que toma cada uno, repartiéndose de manera más eficiente para la navegación del usuario.

48

La libertad se manifiesta en la simplicidad de la página, con el uso frecuente del espacio blanco encontrado por todo el sitio, dando un aire tranquilo al wiki para que el estudiante no se cohíba por la cantidad de información, si no que pueda aprovecharla para su beneficio.

Finalmente, el concepto de “integral” se ve en la unidad del diseño. El manejo de los elementos como columnas e iconos será coherente en todas las páginas del sitio, y en forma minimalista. Esto ayuda a integrar la información dentro de la pagina para comprensión fácil, que en turno motiva al estudiante a integrar el wiki como una herramienta durante su estudios.

RESULTADOS

ESPERADOS

Los resultados esperados para el proyecto de DGWiki son tener un sitio para brindarle a todo estudiante de diseño gráfico la información necesaria e interesante durante su estudio de la carrera. Esto se hará a través un wiki lleno de multimedia y contenido para el estudiante, en una página accesible por cualquier dispositivo con capacidad de internet.

Al final del desarrollo del proyecto, se espera que por lo menos 50% de todos los estudiantes de diseño gráfico por lo menos conozcan el sitio, y que por lo menos el 25% (los primeros 2 semestres) lo usen con gran frecuencia.

Esto se puede medir a través de una encuesta, y confirmándolo con estadísticas tomadas del servidor en que se haya montado la página.

Otro resultado que sería interesante ver salir del proyecto es la imitación del wiki para otras carreras, y a un largo plazo, que este formato de “carrera wikis” pueda ser usado por otras universidades, hasta como parte oficial de su página.

A continuación se verán algunos bocetos ejemplificando las posibilidades de diseño y diagramación.

49

Página principal con el diseño típico de un wiki. En el caso que el wiki tenga limitaciones en su diagramación, aun serían posibles los cambios de color y menú principal.

El de arriba muestra un wireframe, usado para diagramación de los elementos mientras que la de abajo se aplica para el diseño.

Página principal con un diseño minimalista, quitando la barra lateral común del wiki para enfocar al menú principal. Una caja de búsqueda más grande para quienes tengan alguna pregunta que no puedan ubicar.

El wireframe también muestra una opción de personalización para cada estudiante, con los enlaces visitados recientemente, la cual aparece en la página principal.

50

La página de programas, uno de los temas en el menú principal, en forma de tabla, usa el icono de cada programa para fácil identificación.

El de abajo es la misma página, usando otra forma de presentación, esta vez en forma de barras.

Ejemplo de una página (articulo) especifica del wiki, en este caso de Flash. Información básica en caja de la izquierda, iconos donde es posible. En el lado derecho se encuentra todo el contenido.

Para un programa, la información más importante para el estudiante seria saber en qué clases se usa dicho programa (mostrado dentro de la caja a la izquierda), y tutoriales de cómo usarlo (no mostrado aquí).

51

Ejemplo de una página de un tema específico que se maneja en una materia (en este caso, Geometría). Información de interés seria en que semana se puede ver el tema, la dificultad, y en este boceto se muestra un ejemplo de integrar un video para ayudar a aclarar dudas del concepto.

Ejemplo de una página de un local útil, en este caso el Auros dentro del Éxito de la 51B. Información de interés para el estudiante en esta página incluye dirección, precios, horarios, y materiales que se encuentran dentro la empresa. Este boceto muestra un mapa de Google integrado dentro del cuerpo del contenido.

52

Ejemplo de la página de puntos locales. Se mantiene la estética del menú principal, ahora solo jugando con saturación del color para las subpáginas.

La pagina principal, pero usando otro color en el encabezado. También se añadió una navegación debajo de la barra de búsqueda, con enlaces más relacionados a la página del wiki (herramientas, ayuda, cambios recientes en el sitio). Se uso más degradado en el fondo de la página.

53

Estrategia Para la Transferencia de Resultados a los Estrategia de Usuarios Potenciales ComunicaciÓn El mismo sitio se encarga de transferir los “resultados” a los usuarios. Después del lanzamiento inicial, con cada semestre que vaya aprendiendo a usar el wiki, se añade más información y conocimiento, lo cual se usa por los otros estudiantes y de esta manera creando un ciclo de evolución de contenido actualizada por los propios usuarios.

54

Para dar conocer al sitio de DGWiki se tomaran los recursos de páginas sociales, como Facebook y Twitter, sitios que casi todo estudiante visita diariamente, además de ser transmitido de boca en boca por parte de los estudiantes. Además de esto, durante el discurso que todo estudiante atiende en la inducción de la Universidad, se podría repartir tarjetas o flyers con la información de la página.

cronograma julio

augusto

25 27 29 01 03 04 05

augusto

septiembre

08 19 22 02 05 06 09

Decidir en un nombre Crear un logo Escoger paleta de color Entrega Organizar mapa contenido

del Obtener info primordial de pg. principales Entrega 2 Crear wireframes RevisiÓn de contenido Configurar servidor de prueba Entrega 3

55

septiembre

octubre

12 23 26 07 10 14 17 Crear Markup de Pg. Principales Integrar Contenido y arreglos RevisiÓn final de sitio Lanzar primera beta versiÓn del sitio

Presupuesto Hosting/ Dominio (1 Año)

Internet (4 Meses)

Luz (4 Meses)

Computador

Comida (4 Meses)

$37.523

$110.000

$400.000

$900.000

$600.000

TOTAL: $2.047.523

56

57

58

bibliografĂ?a

59

Cohen, M. A., Horowitz, T. S., & Wolfe, J. M. (Febrero 24, 2009). Auditory recognition memory is inferior to visual recognition memory. Proceedings of the National Academy of Sciences. doi:10.1073/ pnas.0811884106 Leather, T., The Evolution of Written Words From Pictures http://www. environmentalgraffiti.com/cultures/newshow-pictures-changed-words-we-readtoday Ebersbach A., Glaser M., Heigl R., Warta A. (2008) Wiki: Web Collaboration. Springer Wiseley, M., When Starting a Wiki, Don’t Forget Design, (Abril 2, 2009) http://www. elevatorview.com/2009/04/02/whenstarting-a-wiki-dont-forget-design/ Dan C., Viki: A visual wiki design (Mayo 8, 2006) http://www.lostgarden. com/2006/05/viki-visual-wiki-design.html Robbins, J. N. (2006). Web design in a nutshell. O’Reilly Media, Inc. DiNucci, D. (1999). “Fragmented Future”.

Print 53 (4): 32.

Friedman, V. “50 Beautiful CSS-Based WebDesigns in 2006” - Smashing Magazine.

(Diciembre 19, 2006), de http://www. smashingmagazine.com/2006/12/19/50beautiful-css-based-web-designs-in-2006/

60

Hermann, R. (2011, Marzo 2). The FontFace Rule And Useful Web Font Tricks Smashing Magazine. Obtenido Marzo 22, 2011, de http://is.gd/jYSLA1 Roberts, H. (2011, Marzo 14). Technical Web Typography: Guidelines and Techniques Smashing Magazine. Obtenido Marzo 22, 2011, de http://www.smashingmagazine. com/2011/03/14/technical-webtypography-guidelines-and-techniques/ Johnson, J. (2010, Julio 12). The 960 Grid System Made Easy. Obtenido Marzo 22, 2011, de http://sixrevisions.com/web_ design/the-960-grid-system-made-easy/ Kopec, A. (2010, Noviembre 12). Web Design Subtleties: Texture. VaynerMedia.

Obtenido Marzo 22, 2011, de http:// vaynermedia.com/2009/11/web-designsubtleties-texture/ The real design trends for 2011. (2011). .

Obtenido Marzo 24, 2011, de http://www. webdesignshock.com/review/designtrends-for-2011/ Gevorgyan, G., & Porter, L. (2008). One Size Does Not Fit All: Culture and Perceived Importance of Web Design Features.

Journal of Website Promotion, 3(1), 25-38. doi:10.1080/15533610802052589

Sandvig, J. C., & Bajwa, D. (2004).

Information seeking on university Web sites: An exploratory study. Journal of Computer Information Systems, 45(1), 13– 22.

Pérez A., Salinas J. (2004) El diseño, producción y realización de materiales multimedia e hipermedia., pg. 157-176.

Alianza Editorial

Pash, A. (2008, Julio 29). How to Sync Any Desktop Calendar with Google Calendar. Obtenido Marzo 27, 2011, de http://lifehacker.com/#!399407/howto-sync-any-desktop-calendar-withgoogle-calendar Open Knowledge. (n.d.). Wikipedia.

Obtenido de http://en.wikipedia.org/ wiki/Open_Knowledge

Reich, J., Daccord, T., & November, A. (2008).

Best Ideas for Teaching with Technology: A Practical Guide for Teachers, by Teachers.

M.E. Sharpe.

Abraham, S. (n.d.). Wikipedia and the Politics of Open Knowledge | Critical Point of View. Obtenido March 27, 2011, de http://is.gd/Xo8kLZ

Morley, D., & Parker, C. S. (2009).

Understanding Computers: Today and Tomorrow, Comprehensive. Cengage Learning.

Wheeler, D. (2007, April 16). Why Open Source Software / Free Software (OSS/FS, FOSS, or FLOSS)? Look at the Numbers! Obtenido de http://www. dwheeler.com/oss_fs_why.html

Case, A. (2011, Enero 1). We are all cyborgs now. Obtenido de http://dotsub. com/view/561ca719-6241-4487-b69128c0a2f4cc4e/viewTranscript/eng Hooper, M. (2009, Septiembre 29).

Dropbox for Collaboration and Productivity.

Obtenido Marzo 27, 2011, de http://www. matthewhooper.com/dropbox/

Stallman, R. (2010, October 1). Why Open Source Misses the Point of Free Software - GNU Project - Free Software Foundation (FSF). Retrieved from http:// www.gnu.org/philosophy/open-sourcemisses-the-point.html

61

62

63