Christopher FattoriConstrucción 3 Diseño Gráfico, 2013

Escuela de Arquitectura Y Diseño PUCV

Plataforma Virtual - Historia en Simultáneo

Antecedentes y Propuestas Gráficas del Proyecto“Cronovisor”

4

ÍNDICE

ANTECEDENTES

1 . A N T E C E D E N T E S

1 . 1 D e l a W e b 1 . 1 . 1 V i s u a l i z a s i ó n d e D a t o s1 . 1 . 2 L e n g u a j e V i s u a l d e N a v e g a c i ó n1 . 1 . 3 E x p e r i e n c i a d e U s u a r i o1 . 1 . 4 A r q u i t e c t u r a d e l a i n f o r m a c i ó n1 . 1 . 5 P r o c e s o d e I t e r a c i ó n

1 . 2 D e l a t e c n o l o g í a y l a E d u c a c i ó n 1 . 2 . 1 P r o y e c t o E b o o k y E d u c a c i ó n D E D O S1 . 2 . 2 S i s t e m a U n o1 . 2 . 3 P r o y e c t o A c e r1 . 2 . 4 P r o y e c t o R e d O ’ H i g g i n s1 . 2 . 5 Ta b l e t e d u c a t i v o O L P C X O 3 . 0

1 . 3 D e l a s Ta b l e t s e n C h i l e 1 . 3 . 1 E s t a d í s t i c a s Ta b l e t s e n C h i l e

2 . E S TA D O D E L A R T E

2 . 1 M a p a s d e I n f o r m a c i ó n 2 . 1 . 1 V i s u a l i z a c i ó n p o r G r a f o s2 . 1 . 2 M o d e l o W a l r u s2 . 1 . 3 V i s u a l i z a c i ó n H i p e r b ó l i c a2 . 1 . 4 R e d e s n e u r o n a l e s2 . 1 . 5 Te x t K i t

2 . 2 Pe r s o n a l i z a c i ó n d e M a p a s

3 . I N C L U S I Ó N D E L P R OY E C TO

3 . 1 Historia y Ciencias Sociales 1° medio Formación General

3 . 1 . 1 P r o p ó s i t o3 . 1 . 2 C o n t e n i d o s3 . 1 . 3 H a b i l i d a d e s

3 . 2 P l a n d e M e j o r a m i e n t o E d u c a t i v o 3 . 2 . 1 I n v e r s i ó n d e r e c u r s o s

3 . 3 E n l a c e s

........................................Pág. 8

........................................Pág. 8

........................................Pág. 8

........................................Pág.18

........................................Pág.18

........................................Pág.17

........................................Pág.10

........................................Pág.11

........................................Pág.13

........................................Pág.16

........................................Pág.20

........................................Pág.21

........................................Pág.17

........................................Pág.21

........................................Pág.17

........................................Pág.22

........................................Pág.21

........................................Pág.18

........................................Pág.23

........................................Pág.27

........................................Pág.24

........................................Pág. 5

........................................Pág.31

........................................Pág.31

........................................Pág.31

........................................Pág.32

........................................Pág.33

........................................Pág.34

5

PROPUESTAS GRÁFICAS

1. MAPA DE CONTENIDO

2. WIREFRAMES

3. LOGOTIPO E ICONOS

4. MAQUETA VISUAL

• BIBLIOGRAFÍA

........................................Pág.36

........................................Pág.37

........................................Pág.45

........................................Pág.49

........................................Pág.54

7

• ANTECEDENTES

8

1. ANTECEDENTES

1. 1 De la WebA continuación se presentan los requeridos para el proyecto, una profundización en la metodo-logía de diseño de sitios web.

1.1.1 VISUALIZACIÓN DE DATOS

Para la visualizació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 través de este abstract "Téc-nicas 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 infor-mación dinámica. Hay un espacio de sistemas altamente complejos para los que carece-mos 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 In-formation 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."

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

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 figu-ra (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.

9

Construir visualizaciones es construir una máquina gráfica. Existen leyes de corresponden-cia 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 In-formation Desig su tesis doctoral, en la que plantea 7 pasos para construir la visualización:

1. ADQUIRIRObtención de la data desde un archivo o desde la red.

2. ANALIZAROrganizar los datos y definir categorías para ordenarlos.

3. FILTRARDesechar la información que no sea de interés al propósito.

4. EXTRAERAplicar métodos de la minería de datos como un modod de identificar patrones y situar los datos en un contexto matemático.

5. REPRESENTAREscoger un modelo básico para visualizar la información.

6. REFINARMejorarla representación básica para hacerla más clara y más cautivante visualmente. 7. INTERACTUARAñadir métodos para controlar los datos o características visuales.

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.

1. 1 De la Web

10

1.1.2 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 conside-raciones en el desarrollo de tales diagramas, delinea una simbología básica para diagra-mar conceptos de arquitectura de información y diseño de interacción, y entrega guías para el uso de estos elementos.

1. ANTECEDENTES

VOCABULARIO DE VISUALIZACIÓN

Elementos simples: páginas, documentos, pilas Creación de relaciones: conectores y flechas

Estructura: de árbol Estructura: diagramación distinta

Referencias: tipos de etiquetas

Conjunto: área Conjunto: área iterativa

Conjuntos concurrentes

11

1. 1 De la Web

1.1.3 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, confia-bilidad del producto, etc. The Elements of the User Experience de Jasse James Garret, presenta una serie de elementos y etapas a considerar en la construcción de sitios web en base a las interfaz con el usuario. El objetivo de este documento es definir algunos de es-tos términos en sus contextos apropiados, y para aclarar las relaciones subyacentes entre estos diversos elementos.

Una dualidad básica: La web fue originalmente concebida cono un espacio de información hiper-textual; pero el desarrollo de tecnologías cada vez más sofisticadas tanto en el despliegue como la administración han nutrido su uso como interfaz remota de software. Esta naturaleza dual ha guiado a mucha confusión, ya que los practicantes del desarrollo de experiencia de usuario han intentado adaptar su terminología a casos más allá del alcance de su aplicación original. El objetivo de este documento es definir algunos de estos términos dentro de su contexto apro-piado, aclarar las relaciones subyacentes entre estos varios elementos.

The Elements of the User Experience de Jasse James Garret,

12

• WEB COMO INTERFAZ DE SOFTWAREOrientada a tareas

Diseño Visual: tratamiento gráfico de los elementos de la interfaz (el "look" del "look & feel")

Diseño de la Interfaz: como en el Estudio de Interacción humano-Computador tradicio-nal: Diseño de los elementos de la interfaz para facilitar la interacción del usuario con la funcionalidad

Diseño de la Información: en el sentido de Tufte, diseño de la presentación de la infor-mación para facilitar el entendimiento

Diseño de la Interacción: desarrollo del flujo de las aplicaciones para facilitar las tareas del usuario, definiendo cómo el usuario interactúa con la funcionalidad del sitio

Especificaciones Funcionales: "set de herramientas": descripciones detalladas de las funcionalidades que el sitio debe incluir para satisfacer las necesidades del usuario

Necesidades de Usuario: objetivos para el sitio externamente derivados, identificadas a través de la investigación de los usuarios, etno/tecno/psicograficos, etc.

Objetivos del sitio: negocios, creativos, u otros generadas de manera interna para el sitio

• LA WEB COMO SISTEMA DE HIPERTEXTOOrientado a Información

Diseño Visual: tratamiento visual de los elementos de texto y gráficos en la página y componentes de navegación

Diseño de la Navegación: diseño de elementos de interfaz para facilitar el movimiento de los usuarios a través de la arquitectura de la información.

Arquitectura de la Información: el diseño estructural del espacio de información para facilitar el acceso intuitivo al contenido

Requerimientos de Contenido: definición de los elementos de contenido requeridos para satisfacer las necesidades de usuario

La imagen no está completa: El modelo delineado aquí no incluye consideraciones secun-darias (como aquellas que surgen durante el desarrollo técnico y de contenido) que pue-den influir en las decisiones durante el desarrollo de la experiencia de usuario. Además, este modelo no describe un modelo del proceso de desarrollo, ni define roles dentro del equipo de desarrollo de la experiencia de usuario. Lo que busca definir son las considera-ciones clave que forman el desarrollo de la experiencia de usuario en el Web actualmente.

1. ANTECEDENTES

13

1.1.4 ARQUITECTURA DE LA INFORMACIÓN

Es la disciplina y arte encargada del estudio, análisis, organización, disposición y estructu-ració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. 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 más fácil las cosas a las personas.Por lo mismo, es necesaria la or-ganización para que la información tenga un pulso y así los contenidos sean accesibles y ejecutables.

• ARQUITECTURA DE INFORMACIÓN EN LAS FASES DEL PROCESO DE DESARROLLO DE SOFTWARE

El principal objetivo de un arquitecto de información es construir estructuras de informa-ción que sean fáciles de entender y utilizar. Para poder lograrlo, debe alinear las metas del negocio con los objetivos de los usuarios.

Fase Inicial

En la fase inicial se realiza un estudio detallado de los usuarios potenciales que tendrá la aplicación, para conocer sus características, necesidades y expectativas. Se clasifican y organizan todos los contenidos de información que se usarán. Se aplican técnicas de recopilación de información como la entrevista, la encuesta y otras técnicas cuantitativas como el Card Sorting y el Análisis de Secuencia.

Fase de Consolidación

En la etapa del proceso de desarrollo de software en la que el personal se centra en anali-zar qué hará y cómo lo hará, así como en la que modela el sistema a construir y define la arquitectura del mismo especificando la estructuración de los contenidos de información e introduciéndose en el diseño inicial del producto.

En esta fase se hace la definición general. Se asignan los nombres o etiquetas más acerta-dos y relacionados entre sí a cada sección, conformando el esquema de contenidos defini-tivo. Se definen las directrices generales de la estructura y organización de la información.

Se definirán además las normas de representación de la información, y finalmente se ubi-carán los elementos de forma gráfica en las pantallas de la aplicación.

1. 1 De la Web

14

Fase de Validación

Terminado todo el trabajo de arquitectura de información, una vez que el equipo desa-rrollador genera el primer prototipo del proyecto -generalmente un prototipo funcional previo al producto final-, éste es sometido a una revisión minuciosa, para evaluar que efectivamente cumplirá con las expectativas creadas.

El equipo de Arquitectura de Información revisa si efectivamente se están cumpliendo los objetivos, haciendo para ello pruebas con usuarios que permiten, además, anticipar el comportamiento real del producto y el nivel de satisfacción del usuario.

• HERRAMIENTAS

Las herramientas que se proponen sean usadas son las siguientes:

CardZort (Windows) o CardSword (software libre), para la ejecución de pruebas de card sorting. Estas herramientas permiten crear las tarjetas, abrir sesiones individuales de test por cada usuario y graficar los resultados en forma de árbol. Tienen una interfaz muy fácil y amigable tanto para usuarios como para investigadores, puesto que utilizan una metá-fora gráfica que imita el proceso de clasificación de las tarjetas de manera manual.

La herramienta de diseño Axure RP Pro para el diseño de interfaces. Es una herramienta muy completa, orientada a diseñar wireframes y prototipos básicos o avanzados de forma fácil. Una de sus mayores fortalezas es la interactividad, permite simular el comporta-miento de las interfaces y cuenta por defecto con una amplia gama de componentes. El arquitecto de información puede exportar el prototipo en HTML, lo que facilita realizar pruebas con usuarios.

• ROLES DEL PROCESO

Para desarrollar el conjunto de actividades y artefactos presentados, se propone que el equipo de AI sea interdisciplinario, integrado por profesionales de varias áreas como la bi-bliotecología, comunicación social e informática. Cada uno jugará un papel fundamental para lograr una AI robusta y útil. La relación persona-rol no tiene que ser necesariamente de uno a uno, pudiendo una persona desempeñar más de un rol siempre que estos no trabajen en la misma fase. A continuación se explican brevemente los roles propuestos.

Compilador de Información : El compilador de información será el encargado de de-sarrollar un conjunto de actividades que le permitirán recopilar toda la información nece-saria para establecer las bases que servirán como guía para el desarrollo de la AI. Deberá conocer los principales stakeholders de la organización. Especialmente, saber lo que ellos quieren y necesitan y mantener una comunicación fluida con éstos. Para lograr sus objeti-vos elaborará encuestas y entrevistas centrándose en la organización cliente y en los intere-ses de los futuros usuarios de la aplicación. Su labor se centra en la fase Inicial del proceso.

1. ANTECEDENTES

15

Analista de Contenidos : Se encargará de aplicar un conjunto de técnicas que le permi-tirán descubrir y diagnosticar las necesidades de información de la comunidad a la cual sirve. Debe poseer un conjunto de habilidades como: visión global de todos los elementos de información y su integración, alto conocimiento de las técnicas de categorización de la información, buena comunicación y poder de síntesis, capacidad de obtener evidencias del conjunto de información e inferir conclusiones, identificar conexiones entre ideas, y ser receptivo a las necesidades de otras personas. Desempeña su trabajo durante las fases Inicial y de Consolidación, y está estrechamente relacionado con el Arquitecto de Infor-mación

Arquitecto de Información : Tiene la responsabilidad de llevar a cabo un conjunto de actividades encaminadas a lograr una organización óptima de los contenidos de informa-ción que se presentarán, así como la forma en que estos serán mostrados a los usuarios. Evalúa, analiza, organiza, reelabora y presenta la información de manera que tenga la máxima utilidad para sus destinatarios. Debe tener habilidades para la obtención y análisis de información, orientación al cliente, interés por la innovación y habilidades para man-tener la atención. Además debe poseer capacidad para agrupar contenidos de temáticas semejantes con las etiquetas más intuitivas posibles, con vista a lograr una mayor usabi-lidad de la aplicación. Su trabajo es imprescindible en el proceso y se desarrollará en las fases de Consolidación y Validación.

Ensamblador de Interfaz de Usuario : Su papel fundamental será construir las panta-llas de la aplicación desde el punto de vista de la organización e interacción de la informa-ción, siguiendo en todo momento las pautas recomendadas en el proceso para garantizar la accesibilidad y usabilidad de la aplicación. Como resultado de su trabajo se obtiene un boceto gráfico de la estructura informacional de la aplicación que servirá posteriormente como guía a los diseñadores y desarrolladores del proyecto. Específicamente realiza su trabajo durante la fase de Consolidación del proceso.

Evaluador de Contenidos : Su tarea fundamental será garantizar que el producto final sea fácil de utilizar y comprender, que permita un alto nivel de accesibilidad independien-temente de las características particulares de cada usuario y del dispositivo usado para hacerlo. Emitirá criterios que evaluarán y permitirán corregir los errores encontrados en relación con estos aspectos, logrando satisfacer las necesidades de los usuarios. Realiza su labor durante la fase de Validación.

1. 1 De la Web

16

• PROCESO DE ITERACIÓN

Iteraciones en el contexto de un proyecto se refieren a la técnica de desarrollar y entregar componentes incrementales de funcionalidades de un negocio. Esto está comúnmente asociado al desarrollo ágil de software, pero podría referirse a cualquier material. Una iteración resulta en uno o más paquetes atómicos y completos del trabajo del proyecto que pueda realizar alguna función tangible del negocio. Múltiples iteraciones contribuyen a crear un producto completamente integrado. A esto se lo compara comúnmente con el enfoque de desarrollo en cascada.

El desarrollo ágil de software son métodos de ingeniería del software basados en el de-sarrollo iterativo e incremental, donde los requerimientos y soluciones evolucionan me-diante la colaboración de grupos auto organizados y multidisciplinarios. Existen muchos métodos de desarrollo ágil; la mayoría minimiza riesgos desarrollando software en lapsos cortos. El software desarrollado en una unidad de tiempo es llamado una iteración, la cual debe durar de una a cuatro semanas. Cada iteración del ciclo de vida incluye: planificación, análisis de requerimientos, diseño, codificación, revisión y documentación. Una iteración no debe agregar demasiada funcionalidad para justificar el lanzamiento del producto al mercado, sino que la meta es tener una «demo» (sin errores) al final de cada iteración. Al final de cada iteración el equipo vuelve a evaluar las prioridades del proyecto.

1. ANTECEDENTES

17

1.2.1 PROYECTO EBOOK Y EDUCACIÓN DEDOS - Tabletas digitales en el aula

El Centro Internacional de Tecnologías Avanzadas (CITA) ha elaborado, dentro del Pro-grama 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 digi-tales 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 table-tas digitales.

1.2.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 prima-ria 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.

1. ANTECEDENTES

1. 2 De la Tecnología y la Educación

18

1.2.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 senci-llo 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 partici-pantes; 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.

1.2.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, de-sarrollar capacidades y competencias en los docentes de tres comunas de la región, incor-porando 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 co-munas 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.

1.2.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 pan-talla 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 simi-lar 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.

1. ANTECEDENTES

19

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 estra-tegia 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 mul-timedia al resto de sus compañeros en clase.

Entre las posibles ventajas de esta tecnología para la clase se podría 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.

De esta manera se da cuenta de la relevancia de los dispositivos tecnológicos como las ta-blets en el sistema educativo a través de nuevos métodos de enseñanza, comlementandolos con estos aparatos, en distintas regiones del planeta. Así se hace necesario crear contenido y herramientas digitales que faciliten la interacción entre la enseñanza y el dispositivo.

1. 2 De la Tecnología y la Educación

20

1.3.1 ESTADÍSTICAS 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.

1. ANTECEDENTES

1. 3 De las Tablets en Chile

21

Se investiga la actualidad de los sistemas de información y los múltiples modos de vi-sualizar 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 Arborescentes2.1.1 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.visualthe-saurus.com , - http://www.thinkmap.com/

2. ESTADO DEL ARTE

2. 1 Mapas de Información

22

• 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 re-lacionadas indica la proximidad (bookmarks comunes) de la relación- http://www.zitvogel.com/delicioussoup

2.1.2 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 tridi-mensional. 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.

2. ESTADO DEL ARTE

23

2.1.3 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 ).

• 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/

2. 1 MAPAS DE INFORMACIÓN

24

2.1.4 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. }

2.1.5 TEXTKIT

Escritura de comandos Visualización de recorridos en una lectura a partir de línea de co-mandos. 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/

2. ESTADO DEL ARTE

25

• APLICACIONES

• 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 pro-yecto 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.

2. 1 MAPAS DE INFORMACIÓN

26

• 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 Touch-Graph para descubrir las relaciones contenidas en Google, Amazon, Wikis y otras fuentes de información populares. Sus aplicaciones comerciales incluyen soluciones para empre-sas de consultoría de gestión, la creación de redes sociales y medios de comunicación.

2. ESTADO DEL ARTE

• LIVEPLASMA

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

27

• UMAPPER

Para crear e integrar mapas flash interactivos .

UMapper : http://www.umapper.com/

2. ESTADO DEL ARTE

2. 2 Personalización de Mapas

• QUIKMAPS

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

Quikmaps : http://quikmaps.com/

28

• MAPSKIP

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

Mapskip : http://www.mapskip.com/index.php/

• COMMUNITYWALK

Aplicación para crear una comunidad de mapas profesionales.

CommunityWalk : http://www.communitywalk.com/

2. ESTADO DEL ARTE

29

• TRIPIT

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

TripIt : https://www.tripit.com

• WOICES

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

Woices : http://woices.com/

2. 2 PERSONALIZACIÓN DE MAPAS

30

• OPENSTREETMAP

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

OpenStreetMap : http://www.openstreetmap.org/

• KIMAP

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

ikimap : http://www.ikimap.com/

2. ESTADO DEL ARTE

31

En base a la magnitud y amplitud del proyecto en cuanto a abarcar los datos desde una fuente tan grande como los contenidos de la Historia Global, se decide reducir el campo de investigación y trabajo del posible proyecto a un campo más acotado y cercano como lo es trabajar con contenido de las aulas en Chile en base a la planificación del MINEDUC para los cursos medios, a los cuales el proyecto se dirige en primer lugar.

3.1.1 PROPÓSITO

En esta unidad, se busca que los estudiantes se aproximen a la magnitud y el impacto de las guerras mundiales, y que caractericen las principales transformaciones políticas, eco-nómicas y sociales en el mundo durante la primera mitad del siglo XX.

Interesa que reconozcan el impacto de la carrera imperialista en la Primera Guerra Mun-dial y que dimensionen la magnitud del conflicto, así como sus consecuencias sociales, culturales y políticas. Asimismo, se espera que analicen las principales transformaciones políticas y económicas del mundo de entreguerras, apoyándose en fuentes diversas. Se promueve que reflexionen sobre el concepto de totalitarismo y que describan aquellos que surgen en Europa en este período. Además, se busca que reconozcan el impacto de la gran crisis de la economía capitalista de entreguerras. Con lo anterior, se aspira a que reflexionen acerca de la magnitud y las repercusiones de la Segunda Guerra Mundial y que valoren el reconocimiento de la democracia y de los derechos humanos producido tras ella.

Para el tratamiento de estos tópicos, es fundamental que el docente vele por que los es-tudiantes utilicen diversas fuentes de información para analizar los principales rasgos de las guerras mundiales y las transformaciones políticas, económicas, culturales y sociales durante el período estudiado. Es importante que el profesor favorezca que los alumnos establezcan vínculos con el presente y valoren los efectos de las crisis humanitarias de ese período para el desarrollo del presente.

3.1.2 CONTENIDOS

• Imperialismo como antecedente de la Primera Guerra Mundial. • Primera Guerra Mundial y sus efectos en el orden y la vida de la sociedad. • Desarrollo de regímenes totalitarios en la Europa de entreguerras. • Segunda Guerra Mundial: rasgos distintivos, consecuencias. • Organismos internacionales como la ONU.

3. INCLUSIÓN DEL PROYECTO

3. 1 Historia y Ciencias Sociales 1° medio Formación General

32

3.1.3 HABILIDADES

• Lectura e interpretación de información para analizar cambios y tendencias en pro-cesos geográficos,

• demográficos, económicos, sociales y políticos. • Integración de información de diversas fuentes. • Análisis, confrontación y conjetura sobre temas del nivel, a partir de diversas fuentes

de información. • Comunicación del resultado de investigación, sintética y organizada, que dé cuenta

de distintas interpretaciones de los procesos estudiados • Argumentación de una posición propia ante procesos y problemas sociales.

3. INCLUSIÓN DEL PROYECTO

33

Los establecimientos educacionales deberán elaborar, a partir del año 2013, un Plan de Mejoramiento Educativo en el contexto de la Ley del Sistema de Aseguramiento de la Calidad de la Educación (N° 20.529). Asimismo, para aquellos que cumplan los requisitos establecidos, podrán postular su PME a los beneficios de la Ley SEP (N° 20.248), los cuales se han extendido, a partir de marzo del presente año, para aquellos liceos que atienden a estudiantes prioritarios que cursen primer año de Educación Media, e irá en aumento gra-dual, de un nivel por año, para llegar en el año 2016 a una cobertura completa de este nivel.

A través de la elaboración e implementación del Plan de Mejoramiento Educativo se pro-mueven procesos de Mejoramiento Continuo, entendido como un accionar permanente que recorren los establecimientos para mejorar sus prácticas y resultados, comenzando con una autoevaluación institucional, que permite recopilar, sistematizar y analizar infor-mación relativa a resultados de sus procesos de gestión, tanto directiva como pedagógica, realizar un reconocimiento de las fortalezas y oportunidades de mejoramiento, elementos de base para el diseño e implementación con calidad del PME.

En este contexto, el Nivel de Educación Media dispondrá para apoyar a los liceos de Edu-cación Media, de líneas de apoyo pedagógico relacionadas con la Gestión del Currículum y el Liderazgo Escolar, destinadas a promover la instalación, mejoramiento, consolidación y articulación de las prácticas pedagógicas e institucionales, favoreciendo el cumplimiento de las metas propuestas en el PME.

• INVERSIÓN DE RECURSOS

Dentro del PME se dan orientaciones para que el sostenedor de la escuela o liceo invierta recursos para mejorar la calidad y equidad en la educación. A través del desarrollo del diagnóstico, todo tipo de acción complementada al Plan de Mejoramiento Educativo se deberá invertir los recursos por concepto SEP(Subvención Especial Preferencial).

Dentro de los ejemplos dados destaco los cuales son beneficiosos para la implementación del proyecto:

• Adquirir computadoras, Internet. • Adquirir videos, cds, Software. • Contratación de nuevos profesionales y personal para mejorar capacidades técnico

pedagógicas. • Contratación de nuevos profesionales para la elaboración de guiones metodológi-

cos de uso de material educativo. • Así de este modo el proyecto puede ser implementado dentro de algún plan de

mejoramiento educativo de alguna escuela.

3. 1 Plan de Mejoramiento Educativo

3. INCLUSIÓN DEL PROYECTO

34

Bien puede venderse el producto al Estado a través del sistema de CHILE COMPRA y participar de los proyectos del Programa ENLACES el cual utiliza métodos tecnológicos y digitales en las escuelas.

3. INCLUSIÓN DEL PROYECTO

3. 3 Enlaces

35

• PROPUESTAS GRÁFICAS

36

1. MAPA DE CONTENIDO

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.

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.

CRONOVISORESTRUCTURA PARA PLATAFORMA WEB

HOME

Crea Aprende Explora Iniciar/Registrarse

videos y textosInstructivos presentación

comentarios compartir descargar

error

home miembro

Iniciar

errorhome miembro

tu per�l

crear nueva

búsqueda

Siglo

Década

Años

A

B

C

Continentes

Capas

Texto

Presentación

Presentación

Objeto

Trazado

Animación

reproducir

pausar

adelantar

galeríapropia

explora

galería de presentaciones

presentación

editar compartir eliminar

galería de presentaciones

seleccionar

regresar

guardar

editar

Pantalla búsqueda de datos Pantalla edición de presentación Pantalla reproducción de presentación

Pantalla home de usuario

búqueda

guardar

compartir

cancelar

37

2. WIREFRAMES

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

• HOME

38

2. WIREFRAMES

• INICIAR SESIÓN

• REGISTRARSE

39

2. WIREFRAMES

• BIBLIOTECA/PERFIL

• BÚSQUEDA

40

2. WIREFRAMES

• PERSONALIZACIÓN

• VISUALIZACIÓN

41

De acuerdo a las correcciones en clases se realiza otra propuesta de wireframes, con es-quema de logotipo,y mejorando la estructura de edición y búsqueda de contenidos.

2. WIREFRAMES

• HOME

42

2. WIREFRAMES

• INICIAR SESIÓN

• REGISTRARSE

43

2. WIREFRAMES

• BIBLIOTECA/PERFIL

• BÚSQUEDA

44

2. WIREFRAMES

• VISUALIZACIÓN

• PERSONALIZASIÓN

45

Antes de establecer el modo en que el sitio lucirá, se redefine un logotipo el cuál será la guía para diseñar la estética del sitio,en cuanto a iconos y colores.

Se mantiene el concepto del reloj entre la palabra, este se destaca de la tipografía al dibu-jarse en el blanco y destacarse con otro color.

Se reduce el largo del logotipo anterior, convirtiéndolo en un cuadrado, para mantener una proporción adecuada en caso de presentarse en cartas, etiquetas, tarjetas, etc.

Los colores utilizados son gris y naranjo, pues armonizan correctamente.

3. LOGOTIPO E ICONOS

• ICONOS

• LOGOTIPO

46

Significados de los colores

• NARANJA:

El naranja combina la energía del rojo con la felicidad del amarillo. Se le asocia a la alrgría, el sol brillante y el trópico.

Representa el entusiasmo, la felicidad, la atracción, la creatividad, la determinación, el éxito, el ánimo y el estímulo.

La visión del color naranja produce la sensación de mayor aporte de oxígeno al cerebro, produ-ciendo un efecto vigorizante y de estimulación de la actividad mental.

Es un color que encaja muy bien con la gente joven, por lo que es muy recomendable para co-municar con ellos.

En heráldica el naranja representa la fortaleza y la resistencia.

El color naranja tiene una visibilidad muy alta, por lo que es muy útil para captar atención y su-brayar los aspectos más destacables de una página web.

• GRIS:

Paz, tenacidad. Estabilidad, Inspira la creatividad. Simboliza el éxito.

• BLANCO:

El blanco se asocia a la luz, la bondad, la inocencia, la pureza y la virginidad. Se le considera el color de la perfección.

El blanco significa seguridad, pureza y limpieza. A diferencia del negro, el blanco por lo general tiene una connotación positiva. Puede representar un inicio afortunado.

En publicidad, al blanco se le asocia con la frescura y la limpieza porque es el color de nieve. En la promoción de productos de alta tecnología, el blanco puede utilizarse para comunicar simpli-cidad.

Es un color apropiado para organizaciones caritativas. Por asociación indirecta, a los ángeles se les suele representar como imagenes vestidas con ropas blancas.

Es un color apropiado para organizaciones caritativas. Por asociación indirecta, a los ángeles se les suele representar como imagenes vestidas con ropas blancas.

3. LOGOTIPO E ICONOS

47

3. LOGOTIPO E ICONOS

• COLORES:

La paleta de colores se reduce a estos 6 colores, y en tres tonos de gris para diferenciar jerarquías y profundidades, botones y secciones, a la vez que el amarillo indica la acción de encendido en el sistema de interacción.

• TIPOGRAFÍA:

La tipografía utilizada es la Frutiger en sus distintas variables, dada su versatilidad, legibi-lidad y su aspecto moderno.

#FF6600 #FCC00 #333333 #666666 #ESESES #FFFFFF

• FONDOS:

Para mantener un aspecto liviano, aireado y suave, se decide utilizar un degradado, otor-gando un aspecto minimalista con un sutil sobreado. Utilizado para diferenciar secciones dentro del sitio como también algunos botones.

48

Finalmente se realiza la propuesta de visualización, pautada anteriormente por los wire-frames realizados. En estas maquetas visuales se aplica el color,fuentes y estética necesa-ria para generar empatía con el usuario.

4. MAQUETA VISUAL

• HOME

• HOME

49

4. MAQUETA VISUAL

• HOME

• INICIAR SESIÓN

• REGISTRARSE

50

4. MAQUETA VISUAL

• BIBLIOTECA/PERFIL

51

4. MAQUETA VISUAL

• BÚSQUEDA

52

4. MAQUETA VISUAL

• PERSONALIZACIÓN

53

4. MAQUETA VISUAL

• VISUALIZACIÓN

54

ANTECEDENTES : DE LA WEB

Organic Information Design : http://benfry.com/organic/Computational Information Desig : http://benfry.com/phd/Gráfica Digital 2011 : http://wiki.ead.pucv.cl/index.php/Gr%C3%A1fica_Digital_2011http://www.jjg.net/ia/visvocab/spanish.html#sum/Vocabulario de Visualización : http://www.aiga.org/symbol-signs/Diagrama JJG : http://www.jjg.net/elements/pdf/elements.pdf/Arquitectura de la Informaciónhttp://es.wikipedia.org/wiki/Arquitectura_de_la_informaci%C3%B3nArquitectura de la Información: Conceptos http://www.nosolousabilidad.com/articulos/ai_cc_informacion.htmArquitectura de la Información: Proceso http://www.nosolousabilidad.com/articulos/ai_rup.htmDesarrollo de Sofware e iteración http://es.wikipedia.org/wiki/Desarrollo_%C3%A1gil_de_software/http://es.wikipedia.org/wiki/Iteraci%C3%B3n/

ANTECEDENTES : DE LA TECNOLOGÍA Y LA EDUCACIÓN

Articulo enviado por Ramón Orellana Valdés http://www.monografias.com/trabajos93/uso-tablets-educacion/uso-tablets-educacion.shtml-Monografias.com

ANTECEDENTES : DE LAS TABLETS EN CHILE

La Tecera.com http://diario.latercera.com/2011/07/23/01/contenido/tendencias/26-77387-9-tablets-la-fiebre-mas-contagiosa-en-la-historia-de-la-tecnologia.shtmlEmol.comhttp://www.emol.com/noticias/tecnologia/2012/08/27/557619/chile-es-el-segundo-mercado-con-mayor-crecimiento-en-equipos-ios-y-android.htmlDiariopyme.clhttp://www.diariopyme.cl/el-auge-de-las-tablets-en-chile/prontus_diario-pyme/2013-02-28/171254.htmlDiariopyme.clhttp://www.diariopyme.cl/las-tablets-no-paran-ventas-crecen-un-142-en-el-primer-trimestre-de-2013/prontus_diariopyme/2013-05-03/104522.html

4. BIBLIOGRAFÍA

55

ESTADO DEL ARTE

VisualComplexity : http://www.visualcomplexity.com/vc/TouchGraph : http://touchgraph.com/company/overview/Liveplasma : http://liveplasma.com/Visual Thesaurus : http://www.visualthesaurus.com/Del.Icio.Us : http://www.zitvogel.com/delicioussouphttp://hypergraph.sourceforge.net/http///www.txtkit.sw.ofcd.com/Abad.cl : http://www.abad.cl/visualizacion/html/2-anteproyecto/3-mapas-informacion.htm/

UMapper : http://www.umapper.com/Quikmaps : http://quikmaps.com/Mapskip : http://www.mapskip.com/index.php/CommunityWalk : http://www.communitywalk.com/TripIt : https://www.tripit.comWoices : http://woices.com/OpenStreetMap : http://www.openstreetmap.org/#map=5/51.500/-0.100ikimap : http://www.ikimap.com/

INCLUSIÓN DEL PROYECTO

MINEDUC, Programas de Estudios : http://www.mineduc.cl/index5_int.php?id_portal=47&id_contenido=17116&id_seccion=3264&c=346/

Plan de Mejoramiento Educativo : http://www.mineduc.cl/index5_int.php?id_portal=18&id_seccion=2835&id_contenido=11250

Programa ENLACES : http://www.enlaces.cl/

CHILECOMPRA : http://www.chilecompra.cl/index.php?option=com_content&view=article&id=168&Itemid=7&lang=es