Construcción 3º DG 2013: Proyecto Sitio Web

De Casiopea


TítuloProyecto Sitio Web Historia en Simultáneo
Tipo de ProyectoProyecto de Taller, Proyecto de Curso
Palabras Claveconstrucción, sitio web, web, diseño, interfaz, mapas conceptuales, visualización de datos
Período2013-
Del CursoConstrucción 3º DG 2013,
CarrerasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Christopher Fattori
ProfesorSylvia Arriagada

Proyecto: Sitio Web Historia en Simultáneo

En taller de construcción estudiamos la formulación de proyectos y redacción de estos, así también las técnicas y métodos para la formulación de estos. Por ello es parte del curso introducirse en la metodología de un sistema de construcción aplicado al diseño. En este sentido el proyecto requiere de los antecedentes necesarios para su formulación, conocer las técnicas necesarias para la construcción de un sitio web, las actuales tendencias en el diseño de estos sitios y los métodos actuales que rigen para la visualización de datos.

Antecedentes 1: De la Web

A continuación se prersentan los requeridos para el proyecto, una profundizasión en la metodología de diseño de sitios web.


Textos en la Web

Como antecedente para la construcción de textos, y lecturabilidad en los sitios web se hace necesario un conocimineto del origen de esta traducción de lo impreso a lo web, el quiebre de ambos formatos: el Hipervínculo. El Hipervínculo es el sistema que da origen a la navegación del mundo digital, por ello es necesario abordar este tema y conocerlo a profundidad, cuál su origen, cómo es su evolución, qué hace de este método un sistema tan utilizado, y a partir de esto proponer utilidades.

Un Texto que aborda este tema es Del Papiro al Hipertexto' de Christian Vanderdorpe, quien plantea plantea as interrogantes de cómo los lectores y el texto se conjugan entre estos links, la lectura se convierte en navegar. ¿Cuáles serán los efectos de esta nueva forma de leer, hecha de 'clics' y de 'zappings', sobre la lectura y la escritura? ¿Qué cambios producirá en el lector y en el escritor? El lector gozó por primera vez de una libertad que la llegada del hipertexto ha potenciado. ¿Cuáles son los puntos de contacto entre el texto impreso y el hipertexto? ¿Cómo se lee un hipertexto? ¿Es posible evitar su descontextualización? ¿Lector y usuario son sinónimos? ¿Cuáles son los nuevos derechos de los usuarios? ¿En qué consiste la revolución interactiva?


  • Christian Vanderdorpe: Profesor emérito de la Universidad de Ottawa. Se interesa por la semiología cognitiva y la retórica; se ha especializado en las teorías de la lectura. También ha trabajado en la didáctica de la escritura, los vínculos entre lo numérico y el saber (producción, difusión, recepción, aprendizaje; texto e hipertexto) y los sueños.

Fuente:PapyrusenLigne.pdf

Visualizasión de Datos

Para la visualizasión de datos requeridos para el proyecto se toma como texto de apoyo la tesis de Benjamín Jotham Fry, el cual presenta sus trabaja a traves de este abstract "Técnicas de diseño de información estática se conocen bien, sus descripciones y el discurso profundo y bien desarrollado. Pero estas técnicas fracasan cuando se considera la información dinámica. Hay un espacio de sistemas altamente complejos para los que carecemos de una comprensión profunda debido a que existen algunas técnicas de visualización de datos, cuya estructura y contenido están cambiando continuamente. Para abordar estos problemas, esta tesis se presenta un proceso de visualización titulado Organic Information Design. Los sistemas resultantes emplean propiedades orgánicas simuladas en un entorno interactivo, visualmente refinado para recopilar datos cualitativos de grandes masas de datos cuantitativos generados por las fuentes de información dinámica."

Fuente:Organic Information Design


BEN1.jpg

Estudios por Ben Fry 1. Modelo mapa Valence/ 2. Mapa estudio de modelos tridimensionale

Modelo Valence Un ejemplo de mapear el contenido textual, es el modelo Valence creado por Ben Fry, el cual lee un texto de una manera lineal, construyendo una lectura desglosada en el espacio tridimensional, en donde se agrega una nueva coordenada de relación a las palabras; éstas en cuanto más reincidencia tengan el texto, más tienden al exterior, a la periferia de la figura (mayor ubicuidad en la pantalla); así mismo, las palabras menos usadas en el texto tienden al centro de la figura, a un interior. Cada vez que dos palabras se encuentran adyacentes en el texto, experimentan una fuerza de la atracción que las mueve, las acerca, tendiendo a juntar su relación.


VISUALIZACIÓN DE DATOS

Construir visualizaciones es construir una máquina gráfica. Existen leyes de correspondencia para permutar datos por valores visuales. Se pasa de algo cuantitativo a lo cualitativo logrando hacer aparecer el relato que estaba oculto. Es por esto que se trata de un diseño de segundo orden, se crean maquinas que diseñaran las visualizaciones.

Matemáticamente corresponde a una función inyectiva, de la tabla con los datos puedo ir a la visualización pero difícilmente me puedo devolver. Es un algoritmo.

Culturalmente corresponde a una herramienta de persuasión, se construyen argumentos sólidos que tienen un autoridad aparentemente más fuerte. Esto abre preguntas éticas para el oficio.

Ben Fry, diseñador gráfico e informático, desarrolla una metodología en Computational Information Desig, su tesis doctoral, en la que plantea 7 pasos para construir la visualización:

  1. Hacking - Informática
    1. Adquisición, qué es y cómo se obtiene el dato. El dato es el reflejo de un instrumento, tiene relación con la herramienta con que se extrae. Ocurrirá constantemente que obtener los datos no es fácil, no estan completamente disponibles, por lo que hay que utilizar otros métodos, a la fuerza, para sacarlos.
    2. Análisis de los datos obtenidos.
  2. Matemáticas - Estadística
    1. Filtrado, en el que se saca lo no relevante, lo que sobra.
    2. Minería, cuando existe demasiada información hay que destacar lo relevante de ella, hallar el oro, se interroga al cuerpo de datos.
  3. Diseño Gráfico, en esta etapa comienza el cambio de lo cuantitativo a lo cualitativo, es el salto que construye la visualización.
    1. Representación, se escoge una gramática y se establecen criterios para darle forma a los datos.
    2. Refinación, ajustes.
    3. Interacción, si es la visualización vive en el soporte digital, ya no es un poster, una lámina, se transforma en herramienta de descubrimiento para el que la esta usando.
  1. Inteligencia Poética
    Abstracción semántica y espacial,
  2. Inteligencia Técnica
    Abstracción sistemática, esta más ligada al diseño de software y a las matemáticas, matemáticas como lenguaje abstracto.
  3. Inteligencia Retórica
    Abstracción simbólica, esta es la pregunta a la que se dirigen los datos, la visualización.
  4. Inteligencia Dialéctica
    Abstracción ontológica, refinación entre vacíos, "verdad" entre las personas.

La visualización tiene tanto del lado divergente como convergente, es un pregunta que vive en los dos espacios, el de los datos "duros" y el de lo que se hace con eso, lo plástico.

Fuente: Gráfica Digital 2011[1]

Lenguaje Visual de Navegación

Los diagramas son una herramienta esencial para comunicar arquitectura de información y diseńo de interacción en equipos de desarrollo Web. Este documento trata las consideraciones en el desarrollo de tales diagramas, delinea una simbología básica para diagramar conceptos de arquitectura de información y diseńo de interacción, y entrega guías para el uso de estos elementos.


Fig02.gif

Fuente:vocabulario de Visualización

AIGA|Symbol Signs

Experiencia de Usuario

La experiencia de usuario es el conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva o negativa de dicho servicio, producto o dispositivo.

La experiencia de usuario depende no sólo de los factores relativos al diseño (hardware, software, usabilidad, diseño de interacción, accesibilidad, diseño gráfico y visual, calidad de los contenidos, buscabilidad o encontrabilidad, utilidad, etc) sino además de aspectos relativos a las emociones, sentimientos, construcción y transmisión de la marca, confiabilidad del producto, etc. The Elements of the User Experience de Jasse James Garret, presenta una serie de elementos y etapas a considerara en la construción de sitios web en base a las interfas con el usuario. El objetivo de este documento es definir algunos de estos términos en sus contextos apropiados, y para aclarar las relaciones subyacentes entre estos diversos elementos.

Archivo:Elements.pdf

Fuente:Jesse James Garret.net

Experiencia de Usuario

Arquitectura de la información

Acrobat002.jpg

Es la disciplina y arte encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos.

Más que nada, es el trabajo con el contenido. Hay que construir un lenguaje; "El lenguaje construye realidad". Tiene que ver con la comunicación entre "A" y "B", el lenguaje que se crea debe ser entendible para "B". se debe construir un "puente de comunicación" entre "A" y "B".

Se diseña para hacer felices a las personas.Por lo mismo, es necesaria la organización para que la información tenga un pulso y así los contenidos sean accesibles y ejecutables.

  • Richard Saul Wurman

Es un americano arquitecto y diseñador gráfico. Lo consideran un pionero en la práctica de hacer la información comprensible. Él ha escrito y ha diseñado sobre 80 libros y creado Conferencias de "TED". En 1976 él acuñó la frase arquitecto de la información fuera de su reacción a una sociedad que crea diariamente cantidades de información masivas, pero con poco cuidado u orden. Él creó el popular ACCESO a guías turísticas del recorrido que eran innovadoras en su uso de traz el contenido por la vecindad. El uso simple, pero eficaz del texto coloreado permitió que el lector separara, localizara y evaluara rápidamente restaurantes, museos, parques, y otras destinaciones categóricas. El concepto de diseño fue basado en cómo buscamos la información, en este caso, por la localización. Con esta serie de libros, Wurman estableció firmemente el propósito de la arquitectura de la información.

Arquitectura de la Información

Antecedentes 2: De la tecnología y la Educación

1. Proyecto Ebook y Educación DEDOS

Tabletas digitales en el aula

  • El Centro Internacional de Tecnologías Avanzadas (CITA) ha elaborado, dentro del Programa Territorio Ebook el proyecto Dedos, tabletas digitales en el aula, una propuesta de investigación-acción con la que se pretende explorar las posibilidades de las tabletas digitales en el ámbito educativo, al entenderlas como un instrumento que puede aportar valor añadido al proceso de enseñanza-aprendizaje, al tiempo que promueve nuevas formas de acercamiento a la lectura.
  • Durante el curso escolar 2010-2011, la tablet estuvo en las mochilas de 24 alumnos de 5º y 6º de Primaria y 4º de ESO, alumnos del CEO Miguel Delibes de Macotera (Salamanca-España), que junto con sus profesores, recibieron la formación necesaria para adquirir las destrezas en el manejo de las herramientas y aquellos programas del universo web 2.0 que se consideraron interesantes para integrarse de forma conjunta en la plataforma de contenidos educativos.
  • Objetivos del proyecto:
  • Explorar las posibilidades de las tabletas digitales en el ámbito educativo.
  • Generar ideas sobre los posibles usos educativos de las tabletas, bien sean solas, bien en combinación con otros elementos.
  • Facilitar la integración en el aula de otras herramientas y recursos asociados a la educación investigar las posibles relaciones pedagógicas entre ellos.
  • Propiciar la generación de contenidos como estrategia para el uso educativo de las tabletas digitales.

2. Sistema Uno

  • Proyecto educativo liderado por Santillana. Una iniciativa que impulsa el uso de tabletas (Apple) en escuelas privadas de ocho países de América Latina y que ya dio sus primeros pasos en México. Allí, 65.000 alumnos de 238 colegios de nivel preescolar y de primaria ya forman parte de este proyecto que fomenta el uso de iPads como herramienta de trabajo. Por el momento, en sólo cien de estas escuelas cada alumno podrá utilizar una tableta que le proporcionará su institución y seguir un programa de estudios diseñado por especialistas del Grupo Santillana que cuenta con el aval de la Secretaría de Educación Pública mexicana. Sistema Uno, a su vez, supuso la capacitación de 4500 profesores. Un programa que, tras arribar a México, llegará también en los próximos meses a Argentina, Brasil, Colombia, Ecuador, El Salvador,Guatemala y Honduras, con lo que se pretende crear así la mayor red de escuelas de Iberoamérica.

3. Proyecto Acer

European Schoolnet Tablet Pilot

  • El proyecto Tablet Pilot analiza el uso de las nuevas tecnologías en los centros educativos y la incipiente corriente de la pedagogía uno a uno (1:1), basada en la experiencia adquirida gracias al proyecto Netbook Pilot. Las tabletas son una nueva categoría de ordenadores portátiles que pueden ofrecer diversas ventajas a docentes y estudiantes. Su uso es sencillo gracias a la pantalla multitáctil, y son ideales para actividades básicas como consultar y leer contenidos, navegar por Internet, dibujar o escribir con los dedos. Por tanto, las tabletas pueden ser dispositivos pedagógicos ideales para los estudiantes.

Objetivos del proyecto:

  • Identificar ejemplos prácticos de uso de las tabletas en el aula en los ocho países participantes;
  • Facilitar modelos de ejemplo a aquellos centros que estén sopesando la introducción de esta tecnología, por ejemplo, incluir recomendaciones para primer y segundo ciclo de secundaria;
  • Analizar los factores clave para integrar de forma satisfactoria las TIC en el aula.

4. Proyecto Red O'Higgins

  • La propuesta, impulsada por el Gobierno Regional de O"Higgins y apoyada por el Centro de Innovación en Educación de Fundación Chile, tuvo, entre sus principales objetivos, desarrollar capacidades y competencias en los docentes de tres comunas de la región, incorporando estrategias didácticas y recursos atractivos destinados a fomentar el gusto por la lectura. La iniciativa benefició a tres escuelas de la región, las cuales se localizan en las comunas de Chimbarongo, San Vicente de Tagua Tagua y Litueche. A estos centros escolares se les hizo entrega de tablets para sus Centros de Recursos de Aprendizajes, más asesorías y capacitación especializada para sus docentes, todo con el fin de incorporar estrategias didácticas e innovadoras orientadas al aprendizaje del área Lenguaje y Comunicación.

5. Tablet educativo OLPC XO 3.0

  • La fundación One Laptop Per Child ha mostrado recientemente su tablet OLPC XO 3.0. Se trata de un dispositivo orientado a niños sin recursos para países en vías de desarrollo

y que comenzará a distribuirse en varias escuelas de Uruguay y Nicaragua. Con una pantalla LCD de 8 pulgadas y unprocesador Marvell Armada PXA618 a 1GHz capaz de mover incluso gráficos en 3D y vídeo en FullHD. La elección de este procesador se debe a su bajísimo consumo energético que, unido a un circuito de carga único, permite al dispositivo cargarse mediante una tapa de goma con células solares o un cargador de manivela similar al del portátil de la fundación. Acompañan al procesador 512MB de memoria y 4GB de almacenamiento interno. Aunque aún no está definido, el coste de este dispositivo no sería mayor de 100 dólares.

  • Debido también a que está pensado que se use en regiones donde el fluido eléctrico sea inexistente o deficiente se acompaña de un pequeño generador en forma de dinamo con su manivela así como de unas placas solares alojadas en el interior de la tapa protectora.

El uso de Tablet puede permitir a los alumnos:

  • Sincronizar contenidos en línea
  • Tomar notas
  • Gestionar documentos
  • Desarrollar hábitos de lectura: e-reader (libros electrónicos)
  • Jugar videojuegos educativos
  • Interactuar con software y apps educativos
  • Acceder a páginas educativas.
  • En cuanto a las formas de trabajo, las posibilidades son ilimitadas, desde ejercicios de respuesta múltiple, respuesta corta, actividades de tipo tormenta de ideas, ejercicios de psicomotricidad en alumnado de corta edad o con necesidades educativas específicas, señalar sobre una imagen la parte que corresponda al contenido que se está tratando, seguir instrucciones para completar un gráfico o un diagrama, etc. Se trata de una estrategia que permitiría no sólo al profesor enviar contenidos y corregir actividades sino que también los alumnos podrían interactuar en las correcciones o presentar contenidos multimedia al resto de sus compañeros en clase.

Entre las posibles ventajas de esta tecnología para la clase podríamos destacar:

  • Trabajar contenidos de manera innovadora
  • Fomentar de la participación de los alumnos en clase.
  • Corregir errores con gran inmediatez.
  • Mantener el nivel de atención del alumno y su interés por seguir los contenidos.
  • Favorecer el pensamiento crítico y la creatividad permitiéndoles descubrir y participar en la construcción de su conocimiento.
  • Ayudar al docente a averiguar el grado de comprensión de los contenidos en tiempo real.
  • Flexibilizar la presentación de contenidos.
  • Monitorear aprendizajes.

Fuente:articulo enviado por Ramón Orellana Valdés

Antecedentes 3: De las Tablets en Chile

Estadísticas 2010-2011-2012-2013|Tablets en Chile

  • En 2010-2011 la venta de estos dispositivos aumentó un 1.124%
  • En 2010-2011 la venta de dispositivos Android e IOS aumentó un 279%
  • En 2012 ingresaron al país embarques de tablets equivalentes a US$94,9 millones, cifra que representa un aumento del 368% en comparación a 2011.
  • En 2012 lograron llegar a los 22.9 millones de iPads (nombre que se le da a las tablets de Apple), mientras que en 2011 esa cifra llegó a los 15.4 millones, demostrando el creciente interés del público por este formato de computador personal que a su vez es portátil y apto para una variedad de público.
  • En 2013 las ventas aumentaron un 142% en el primer trimestre.

Fuente:La Tecera.com Emol.com Diariopyme.cl Diariopyme.cl

Estado del Arte

  • Visual Comlexity

VisualComplexity.com tiene la intención de ser un espacio de recursos unificado para todos los interesados ​​en la visualización de redes complejas. El principal objetivo del proyecto es aprovechar una comprensión crítica de los diferentes métodos de visualización, a través de una serie de disciplinas tan diversas como la biología, las redes sociales o la World Wide Web. Es un espacio que busca inspirar, motivar e ilustrar a cualquier persona que hace una investigación en este campo.

Fuente:VisualComplexity.com

  • TouchGraph

Es una empresa fue fundada en 2001 con la creación del navegador visual original para Google. Desde entonces, millones de personas han utilizado las herramientas de TouchGraph para descubrir las relaciones contenidas en Google, Amazon, Wikis y otras fuentes de información populares. Sus aplicaciones comerciales incluyen soluciones para empresas de consultoría de gestión, la creación de redes sociales y medios de comunicación.

Overview-lg.gif

Fuente:TouchGraph

  • Liveplasma

Es un buscador de música, películas y libros, el cual utiliza un modo de visualizar los contenidos relacionados de forma visual en base a relacion de distancia y contenido.

Fuente:Funte: Liveplasma.com]

  • VisualThesaurus

Es un diccionario interactivo que crea mapas de palabras en ramas de flor de significados y palabras relacionadas. Su innovadora pantalla permite la exploración y el aprendizaje.

Fuente:Visual Thesaurus.com

Mapas de Información

Se investiga la actualidad de los sistemas de información y los múltiples modos de visualizar los datos y acceder a ellos. Estos modelos de visualización de la información se originan a partir de un dialogo entre Ingeniería Informática en su especialidad del manejo de contenido y su programación y el Diseño Gráfico en su especialidad de infografía o arquitectura visual de la información.

  • Estructuras Arborescentes:

Visualización por Grafos

Visual Thesaurus

Estructura de Grafo, la cual controla un vocabulario de palabras v/s sinónimos. El mapa genera jerarquías que abarcan desde el término más relacionado (menor distancia de enlace), hasta el t érmino más general (mayor distancia de enlace). - http://www.visualthesaurus.com , - http://www.thinkmap.com/

Grafo1.jpg


Del.icio.us

Visualización de datos del sitio web del.icio.us . Etiquetas individuales, que interconectan líneas de relación con otras etiquetas. El tamaño de la burbuja denota el renombre de la etiqueta (número de bookmarks), mientras que la distancia espacial entre las etiquetas relacionadas indica la proximidad (bookmarks comunes) de la relación- http://www.zitvogel.com/delicioussoup

Delicious-soup.jpg

Modelo Walrus

Modelo de red Walrus que conecta Universidades v/s Laboratorios en USA - Jeff Brown Walrus es una herramienta para visualizar grandes gráficos dirigidos en el espacio tridimensional. Proporciona una exhibición que muestra simultáneamente el detalle local y el contexto global. Esta manera de pensar el modelo representa un modo de visualización arbórea y no de grafos conexos.

Govindan small.jpg

Visualización Hiperbólica

Gráfico hiperbólico 3D de la topología del Internet. Se crea usando la herramienta de la visualización de Walrus desarrollada por Young Hyun en la asociación cooperativa para el análisis de datos del Internet ( CAIDA ).

Walrus1 largegbla copia.jpg

Visualización Geo - Hiperbólica

Variante de teoría de grafos, o grafos espaciados La resolución de la pantalla no permite la simultaneidad de información por tanto se avanza en el enfoque espacial del centro (Reader´s Scope). http://hypergraph.sourceforge.net/

Inxightthreestudio.jpg

Redes neuronales

Proyecto Lumeta Mapas de información que visualizan las trayectorias de la mayor parte de las redes en el Internet, la topología desde el “centro” del Internet. }

Lumeta intranet.jpg

TextKit

Escritura de comandos Visualización de recorridos en una lectura a partir de línea de comandos. Es una interfase gráfica con una consola externa donde no se interactúa con el mapa ya que no se puede navegar sobre él. (Escritura por medio de líneas de código o escritura de comandos). - http///www.txtkit.sw.ofcd.com/

Untitledtextkit-1.jpg


FUENTE:Abad.cl

Personalización de Mapas

De entre todas las aplicaciones relacionadas con mapas en la web, aquí se presentan las que ayudan a crear, editar y personalizar mapas, ya sean para entornos de estudio o no.

UMapper

Para crear e integrar mapas flash interactivos .

UMapper

Quikmaps

Dibuja y añade tus propios puntos de interés y anotaciones en los mapas de Google.

Quikmaps

Mapskip

Explora el mundo a través de historias compartidas y fotos de todos los lugares.

Mapskip

CommunityWalk

Aplicación para crear una comunidad de mapas profesionales.

CommunityWalk

TripIt

Asistente personal que organiza automáticamente todos tus planes de viajes – vuelos , alojamiento, coches, trenes , cruceros y mucho más.

TripIt

Woices

Comparte tu voz y haz del mundo un lugar más interesante.

Woices

OpenStreetMap

Aplicación que te permitirá ver, editar y utilizar los datos geográficos en un entorno de colaboración desde cualquier lugar.

OpenStreetMap

ikimap

Aplicación en español que nos permite crear y compartir mapas desde Internet.

ikimap

Sitios de Apoyo

Presentación de Proyecto

Acontinuacón se prresentan la formulación del proyecto en base a un Formulario especial, especificado en puntos claves para el ejercicio de redacción para la futura presentación de proyectos ante concursos reales.

Formulario de Proyecto

Resumen

Problema

Marco Teórico

Objetivos

Generales

Específicos

Solución

Resultados esperados

Público objetivo

Prestentación

Construcción del Proyecto

En base a los estudiado anteriormente se procede a la construcción de los requerimientos gráficos del proyecto, es decir, mapas de contenido, wireframes y maqueta visual del sitio web de esta plataforma virtual.

El proyecto de plataforma virtual - Historia en Simultáneo se nombró como CRONOVISOR, del griego cronos que significa tiempo, y visor pues visualiza en un ámbito geográfico el tiempo y los acontecimientos consultados.

LOGO

Logo CRONOVISOR.jpg

Mapa de Contenido

Se organizan los contenidos a tratar en el sitio, ordenando a la vez el modo en que estos se conjugaran en la navegación y acceso por parte del usuario.

Arquitectura de la Informacion -1.jpg

Wireframes de Escritorio

Luego se establecen las maquetas previas estructurales del sitio, denominadas wireframes, aquí se establece el orden visual de los contenidos, botones, secciones, y visualizaciones que estarán presentes en el sitio.

WIREFRAMES