3.2 Diseño gráfico. Entorno Plataforma de producción y conocimiento colectivo de información territorial

Transcripción

1 Entorno Plataforma de producción y conocimiento colectivo Octubre 2015

2 Índice de contenido I. Resumen ejecutivo...4 I.1 Recursos...4 I.1.1 Imágenes...4 I.1.2 Animaciones...4 I.1.3 Mapas...4 I.1.4 Botones y formularios...4 I.1.5 Estilos...5 I.2 Criterios adoptados...5 I.2.1 Posiciones...5 I.2.2 Colores...6 3

3 I. Resumen ejecutivo En función de las características del proyecto y de la disponibilidad de recursos para este tipo de trabajo, se procedió a un diseño gráfico paulatino. Es decir, desde el comienzo se trabajo de forma anticipada con tareas de diseño gráfico para incorporar al código informático. El objetivo de este procedimiento fue maximizar las instancias de evaluación de resultados, y permitir así el ajuste en función de la experiencia de los usuarios (docentes y estudiantes). En este sentido se trabajó tanto sobre el tipo de recursos a utilizar como sobre el tipo de criterios a adoptar. I.1 Recursos Se evitará a toda costa utilizar elementos que dificulten la accesibilidad. Si bien la accesibilidad al sistema se va a ver necesariamente restringida la sistema por las caracerísticas intrínsecas del objeto mapa. Se evitará incoporar otros elementos. I.1.1 Imágenes En estas primeras instancias piloto, no se incorporaron imágenes como logos o íconos. La novedad de las funciones, así como la característica cambiante del sistema dificultan la selección de imágenes que realmente simplifique la compresión y garantices su actualización entre versiones. I.1.2 Animaciones Se evito la utilización de cualquier animación flash, videos o gif animados. La problemática ya es bastante compleja y la visualizacion bastante dinámica por la inclusión del objeto mapa. I.1.3 Mapas El objeto mapa constituye una de las mayores desafíos. Este objeto utiliza una base preformateada sobre la cual el equipo desarrollador no tiene injerencia. En tanto estos mapas son indispensables, sus características gráficas, y especialmente cromáticas resultan condicionantes de las decisiones gráficas sobre resto de los objetos. I.1.4 Botones y formularios Se utilizan formularios y botones organizados para minimizar el espacio de pantalla ocupado. También se simplificó el sistema visual para la carga de archivos en un trabajo conjunto con el equipo programador. 4

4 I.1.5 Estilos A fin de propiciar resultado homogéneos y consistentes, se propone utilizar estilos en cascada css. I.2 Criterios adoptados Dado que el proyecto se encuentra en una instancia de desarrollo, se propuso un diseño de lineamientos generales, para la codificación del sistema de comunicación. En otras palabras se construyo un lenguaje simple, se aunque sacrifica detalle, permite mayor adaptabilidad. A continuación se describen los principales ejes de codificación del diseño implementado. I.2.1 Posiciones De decidió utilizar un código de contenido-posición. En este sentido las distintas posiciones en la pantalla representan distintos contenidos. Derecha La barra lateral derecha contiene información de los puntos de la actividad en curso. Esto es particularmente relevante durante la creación de nuevos puntos. Aquí se muestran los diferentes registros con una síntesis de su información asociada. Al hacer foco, estos registros deben resaltarse cromáticamente junto con su localización en el mapa. Izquierda arriba Menú de sistema. Aquí se muestra el estado de la sesión y se brindad acciones relacionadas con el usuario o la dirección a estados generales de la aplicación. Izquierda abajo Contiene información de los puntos de otras actividades en curso. Esto es particularmente relevante durante la creación de nuevos puntos o la exploración fuera de las actividades. Aquí se muestran los diferentes registros con una síntesis de su información asociada. Al hacer foco, estos registros deben resaltarse cromáticamente junto con su localización en el mapa. Al hacer foco debe visualizarse información extendida asociada, como actividad de origen o consigna. Centro arriba El centro arriba es la localización del mapa. Esta posición predominante orienta la aplicación a romper la brecha del usuario para empezar a generar información. 5

5 Un click derecho sobre esta área predominante generará un registro preliminar para que el usuario intervenga completando con información. Posteriores acciones permitirán corregir la localización o anular la carga. Se espera que la primera acción instintiva sobre la plataforma evidencia la forma primaria de generación de información. Centro abajo En un segundo plano de importancia se posicionan los formularios. De este modo distintas extensiones de formulario resultan aceptables sin alterar la configuración general. Solo el área central tiene posiciones absolutas, a diferencia de las laterales que son fijadas. Se destaca que toda la aplicación debe entrar en pantalla en sentido horizontal, permitiendo eventualmente el desplazamiento en vertical. El formulario para configuración de actividades, claramente por su extensión excede la resolución de cualquier pantalla en sentido vertical. I.2.2 Colores En función de los limitantes mencionados se constituye el siguiente código de color: Nuevo punto Un nuevo punto es presentado con relleno amarillo y borde rojo. Este código cromático se aplica al punto en el mapa como al formulario aplicado. De este modo este código no debe ser utilizado para otros elementos que no impliquen la creación de un nuevo registro. Selección Un punto seleccionado se representa en color azul. De este modo debe evitarse que ningún elemento tenga color azul de forma permanente. Texto El texto estático se representa en color negro. Tipografía: Ropa Sans Input e hipervínculo y actividades El input que no pertenece a un nuevo registro se representa en color celeste (#08afd9;). Del mismo color se representan los hipervínculos. Tipografía: Ropa Sans 6