Trabajo Final Ingenieria

ACTIVIDAD DE INVESTIGACION
DOCENTE: ING GUSTAVO MEDINA
PRESENTADO POR: WENDY MARCONY SAMUEL AVILA SANDY MOYA KERLY MANTILLA
GRUPO 7B
UDI
2012
COMUNICACIN VISUAL EFECTIVA CONSIDERACIONE DE DISEO La manera en que los usuarios de computadoras interactan con sus aplicaciones es uno de los tpicos ms interesantes en el rea de computacin. Muchos de los avances podemos verlos plasmados en los sistemas operativos que usamos a diario, pero an queda mucho por hacer, por lo que se plantean en este trabajo los antecedentes de las interfaces de usuario existentes y se presentan algunas consideraciones para el diseo de estos subsistemas de los sistemas operativos. LA INTERACCIN CON EL USUARIO Aunque el uso de los recursos del hardware de la computadora sea el objetivo principal del diseo de un sistema operativo, no se puede dejar de pensar en cmo los usuarios interactuarn con la computadora, pues hay que recordar que por lo menos en la arena de las computadoras personales, esto ha sido el factor principal para el xito de cualquier producto, ya sea una computadora o alguno de sus perifricos. En un principio los operadores expertos tenan que recurrir a teclados especiales para perforar tarjetas que alimentaban a la mquina, y deban consultar sus resultados en manojos de hojas que salan de las impresoras. Poco a poco, la mejora en interfaces con el usuario ha permitido que pueda disminuirse la complejidad de interaccin entre las computadoras y usuarios. Tareas como reconocer informacin del teclado o el ratn, desplegar informacin en un monitor, o controlar la impresin de un documento, son faenas bsicas que un sistema operativo debe realizar actualmente. Adems de esto, el SO debe ofrecer una serie de servicios y recursos que puedan ser aprovechados por el software de aplicacin.
EL LENGUAJE VISUAL La evolucin de la comunicacin humana se ha manifestado en sucesivas formas: oral, escrita, impresa, radiofnica; de forma paralela o en interaccin con ellas se encuentra la presencia constante de las imgenes. Los avances tecnolgicos de los medios de difusin y la creciente fascinacin ante la transmisin icnica determinan que la transmisin visual haya sido adoptada por nuestra sociedad como una solucin universal, eficaz e inmediata de comunicacin
No hay que extraarse de que no haya forma de encontrar el trmino lenguaje visual. Pero s que existe. Con sintaxis ms o menos conocidas y gramticas peor o mejor articuladas, llevamos milenios usando los grficos para expresar ideas y conceptos: Lenguajes de carcter no secuencial en el que los dibujos transmiten igualmente, pero a veces de forma mucho ms efectiva, ideas y hasta sentimientos Se expresa mediante imgenes Las imgenes son una representacin de la realidad, no son la realidad. El grado de iconicidad es el grado de parecido de una imagen a la realidad Dependiendo del parecido se habla de iconicidad alta, media o baja. Grado de iconicidad medio
Grado de iconicidad bajo
EL LENGUAJE Y LA COMUNICACIN Es el que transmite una informacin de modo que posea slo una interpretacin. Por ejemplo un dibujo cientfico:
LENGUAJE VISUAL PUBLICITARIO Su objetivo es informar, convencer y/o vender.
LENGUAJE VISUAL ARTSTICO Posee una funcin esttica
PRINCIPIOS DE DISEO DE INTERFACES DE USUARIO Existen principios relevantes para el diseo e implementacin de IU, ya sea para las IU grficas, como para la Web. Anticipacin Las aplicaciones deberan intentar anticiparse a las necesidades del usuario y no esperar a que el usuario tenga que buscar la informacin, recopilarla o invocar las herramientas que va a utilizar. Se ilustra como el procesador de texto se anticipa a las necesidades del usuario, proporcionando las caractersticas del texto seleccionado -fuente, tamao, alineacin, etc.- permitiendo que el usuario pueda modificarlas gilmente. Autonoma La computadora, la IU y el entorno de trabajo deben estar a disposicin del usuario. Se debe dar al usuario el ambiente flexible para que pueda aprender rpidamente a usar la aplicacin. Sin embargo, est comprobado que el entorno de trabajo debe tener ciertas cotas, es decir, ser explorable pero no azaroso. En la Figura 3 se visualiza un diseo incorrecto de interfaz de usuario. La cantidad de opciones propuestas propone un grado de complejidad que no permite que el usuario pueda aprender a utilizar el sistema en forma progresiva. Es importante utilizar mecanismos indicadores de estado del sistema que mantengan a los usuarios alertas e informados. No puede existir autonoma en ausencia de control, y el control no puede ser ejercido sin informacin suficiente. Adems, se debe mantener informacin del estado del sistema en ubicaciones fciles de visualizar. Se ejemplifica una incorrecta disposicin de componentes en la IU. El reloj no debe ser incorporado en el men del sistema ya que aporta confusin al usuario.
Para mantenerlo informado sera ms adecuado colocarlo en la barra de estado del sistema. Percepcin del Color Aunque se utilicen convenciones de color en la IU, se deberan usar otros mecanismos secundarios para proveer la informacin a aquellos usuarios con problemas en la visualizacin de colores. Se representa un mecanismo secundario muy utilizado para ejecucin de comandos: los comandos abreviados (shortcut-keys). Sin embargo la aplicacin presenta un problema de inconsistencia ya que define combinaciones de teclas que difieren a lo esperado por el usuario, por ejemplo Alt+< en lugar de Alt+B. Valores por Defecto No se debe utilizar la palabra "Defecto" en una aplicacin o servicio. Puede ser reemplazada por "Estndar" o "Definida por el Usuario", "Restaurar Valores Iniciales" o algn otro trmino especifico que describa lo que est sucediendo. Los valores por defecto deberan ser opciones inteligentes y sensatas. Adems, los mismos tienen que ser fciles de modificar. Consistencia Para lograr una mayor consistencia en la IU se requiere profundizar en diferentes aspectos que estn catalogados en niveles. Se realiza un ordenamiento de mayor a menor consistencia:
1. Interpretacin del comportamiento del usuario: la IU debe comprender el significado que le atribuye un usuario a cada requerimiento. Ejemplo: mantener el significado de las los comandos abreviados (shortcut-keys) definidos por el usuario. 2. Estructuras invisibles: se requiere una definicin clara de las mismas, ya que sino el usuario nunca podra llegar a descubrir su uso. Ejemplo: la ampliacin de ventanas mediante la extensin de sus bordes. 3. Pequeas estructuras visibles: se puede establecer un conjunto de objetos visibles capaces de ser controlados por el usuario, que permitan ahorrar tiempo en la ejecucin de tareas especficas. Ejemplo: cono y/o botn para impresin. 4. Una sola aplicacin o servicio: la IU permite visualizar a la aplicacin o servicio utilizado como un componente nico. Ejemplo: La IU despliega un nico men, pudiendo adems acceder al mismo mediante comandos abreviados.
5. Un conjunto de aplicaciones o servicios: la IU visualiza a la aplicacin o servicio utilizado como un conjunto de componentes. Ejemplo: La IU se presenta como un conjunto de barras de comandos desplegadas en diferentes lugares de la pantalla, pudiendo ser desactivadas en forma independiente. 6. Consistencia del ambiente: la IU se mantiene en concordancia con el ambiente de trabajo. Ejemplo: La IU utiliza objetos de control como mens, botones de comandos de manera anloga a otras IU que se usen en el ambiente de trabajo. 7. Consistencia de la plataforma: La IU es concordante con la plataforma. Ejemplo: La IU tiene un esquema basado en ventanas, el cual es acorde al manejo del sistema operativo Windows. Se puede observarse la mejora en la consistencia de las pequeas estructuras visibles (3.) para los sistemas grficos basados en ventanas. La inclusin de la opcin X para cerrar la ventana operacin comnmente utilizada en estas aplicaciones- simplifica la operatividad del mismo. La inconsistencia en el comportamiento de componentes de la IU debe ser fcil de visualizar. Se debe evitar la uniformidad en los componentes de la IU. Los objetos deben ser consistentes con su comportamiento. Si dos objetos actan en forma diferente, deben lucir diferentes. La nica forma de verificar si la IU satisface las expectativas del usuario es mediante testeo. Eficiencia del Usuario Se debe considerar la productividad del usuario antes que la productividad de la mquina. Si el usuario debe esperar la respuesta del sistema por un perodo prolongado, estas prdidas de tiempo se pueden convertir en prdidas econmicas para la organizacin. Los mensajes de ayuda deben ser sencillos y proveer respuestas a los problemas. Los mens y etiquetas de botones deberan tener las palabras claves del proceso. Se demuestra como una incorrecta definicin de las palabras clave de las etiquetas de los botones de comando puede confundir al usuario. Los botones OK y Apply aparentan realizar el mismo proceso. Esto puede solucionarse suprimiendo uno de ellos si realizan la misma tarea o etiquetndolos con los nombres de los procesos especficos que ejecutan. Ley de Fitt El tiempo para alcanzar un objetivo es una funcin de la distancia y tamao del objetivo. Es por ello, que es conveniente usar objetos grandes para las funciones importantes. Se puede apreciar la relacin entre los elementos de diseo de pantalla y su percepcin visual. El nmero de elementos visuales que perciben son: en el
caso a) 1 (el fondo); en b) 3 (la lnea, lo que est encima y lo que est debajo); en c) son 5 (el espacio fuera del recuadro, el recuadro, la lnea y el espacio encima y debajo de sta); finalmente, en d) el nmero se eleva a 35, siguiendo el mismo criterio. Conclusin: cada elemento nuevo que se aade influye ms de lo que se piensa en el usuario. Interfaces Explorables Siempre que sea posible se debe permitir que el usuario pueda salir gilmente de la IU, dejando una marca del estado de avance de su trabajo, para que pueda continuarlo en otra oportunidad. Para aquellos usuarios que sean noveles en el uso de la aplicacin, se deber proveer de guas para realizar tareas que no sean habituales. Es conveniente que el usuario pueda incorporar elementos visuales estables que permitan, no solamente un desplazamiento rpido a ciertos puntos del trabajo que est realizando, sino tambin un sentido de "casa" o punto de partida. La IU debe poder realizar la inversa de cualquier accin que pueda llegar a ser de riesgo, de esta forma se apoya al usuario a explorar el sistema sin temores. Siempre se debe contar con un comando "Deshacer". Este suprimir la necesidad de tener que contar con dilogos de confirmacin para cada accin que realice en sistema. El usuario debe sentirse seguro de poder salir del sistema cuando lo desee. Es por ello que la IU debe tener un objeto fcil de accionar con el cual poder finalizar la aplicacin. Objetos de Interfaz Humana Los objetos de interfaz humana no son necesariamente los objetos que se encuentran en los sistemas orientados a objetos. Estos pueden ser vistos, escuchados, tocados o percibidos de alguna forma. Adems, estos objetos deberan ser entendibles, consistentes y estables. Se presentan barras de controles que simplifican la operacin de un sistema. A travs de las ilustraciones que poseen los mismos, el usuario puede aprender fcilmente su uso. Si se mantienen para estos botones las mismas asignaciones de procesos en diferentes sistemas, la comprensin del funcionamiento de los mismos se hace ms sencilla. Uso de Metforas Las buenas metforas crean figuras mentales fciles de recordar. La IU puede contener objetos asociados al modelo conceptual en forma visual, consonado u
otra caracterstica perceptible por el usuario que ayude a simplificar el uso del sistema. Se compara la aplicacin de metforas en el desarrollo de una IU. En el primer caso, se utiliza incorrectamente la metfora de una cmara de video para representar el procesamiento de un documento por una impresora. Se puede observar que el botn << carece de sentido, ya que no se puede volver atrs un trabajo que ya ha sido impreso. En el segundo caso, la metfora de la agenda es utilizada correctamente para la implementacin de una agenda electrnica. Curva de Aprendizaje El aprendizaje de un producto y su usabilidad no son mutuamente excluyentes. El ideal es que la curva de aprendizaje sea nula, y que el usuario principiante pueda alcanzar el dominio total de la aplicacin sin esfuerzo. Reduccin de Latencia Siempre que sea posible, el uso de tramas (multi-threading) permite colocar la latencia en segundo plano (background). Las tcnicas de trabajo multitarea posibilitan el trabajo ininterrumpido del usuario, realizando las tareas de transmisin y computacin de datos en segundo plano. Proteccin del Trabajo Se debe poder asegurar que el usuario nunca pierda su trabajo, ya sea por error de su parte, problemas de transmisin de datos, de energa, o alguna otra razn inevitable. Auditora del Sistema La mayora de los navegadores de Internet (browsers), no mantienen informacin acerca de la situacin del usuario en el entorno, pero para cualquier aplicacin es conveniente conocer un conjunto de caractersticas tales como: hora de acceso al sistema, ubicacin del usuario en el sistema y lugares a los que ha accedido, entre otros. Adems, el usuario debera poder salir del sistema y al volver a ingresar continuar trabajando en lugar dnde haba dejado. Legibilidad Para que la IU favorezca la usabilidad del sistema de software, la informacin que se exhiba en ella debe ser fcil de ubicar y leer. Para lograr obtener este resultado se deben tener en cuenta alguna como: el texto que aparezca en la IU debera tener un alto contraste, se debe utilizar combinaciones decolores como el texto en negro sobre fondo blanco o amarillo suave. El tamao de las fuentes tiene que ser lo suficientemente grande como para poder ser ledo en monitores estndar. Es importante hacer clara la presentacin visual (colocacin/agrupacin de objetos, evitar la presentacin de excesiva informacin.
Se describe una comparacin de disposicin de los objetos en pantalla. La figura de la izquierda, combina una disposicin asimtrica de la informacin con un conjunto de colores que no facilita la lectura. La figura de la derecha realiza la presentacin de la informacin utilizando una gama de colores homognea y una alineacin del texto que favorece a la legibilidad del mismo.
Interfaces Visibles El uso de Internet, ha favorecido la implementacin de interfaces invisibles. Esto significa que el usuario siempre ve una pgina especfica, pero nunca puede conocer la totalidad del espacio de pginas de Internet. La navegacin en las aplicaciones debe ser reducida a la mnima expresin. El usuario debe sentir que se mantiene en un nico lugar y que el que va variando es su trabajo. Esto no solamente elimina la necesidad de mantener mapas u otras ayudas de navegacin, sino que adems brindan al usuario una sensacin de autonoma.
MANEJO DEL COLOR EN EL DISEO DE INTERFACES Look & feel de la interfaz Creacin de un prototipo de baja fidelidad Perspectiva de diseo grfico Define el estilo de la interfaz Establece el logotipo de la aplicacin Establece un esquema de colores Define la distribucin de elementos. Identifica y establece el uso de imgenes que refuerzan el contexto del tema Toma en cuenta la percepcin del pblico Objetivo CREACIN DE UN PROTOTIPO DE BAJA FIDELIDAD Perspectiva de ingeniera de software Establece las reas de despliegue de cada mdulo de la aplicacin y sus capacidades funcionales Establece el flujo de navegacin entre los mdulos de la aplicacin Establece el uso de controles para la interaccin del usuario
Permite identificar elementos de interfaz nuevos, y que deben ser desarrollados Permite identificar funcionalidad adicional no contemplada en el diseo abstracto
LOS COLORES SON MUY IMPORTANTES La aplicacin puede funcionar correctamente, pero los elementos de la interfaz deben distinguirse. El entorno debe ser no solo agradable, sino tambin permitir su uso sin cansar la mirada del usuario (incluso su nimo). Los programadores no son muy buenos seleccionando colores; no es su trabajo. ANLISIS DE COLORES EN SITIOS WEB Un primer enfoque para encontrar una respuesta, fue analizar los colores usados en sitios que se vean bien. De hecho, algo que se encontr en el proceso fueron los llamados templetes o plantillas. Hay quienes incluso venden estos diseos. El objetivo fue identificar los colores de fondo, del texto, vnculos, marcos, bordes y controles.
QU SIGUE? Podemos seguir analizando ms sitios para encontrar un patrn que nos indique como elegir colores. O podemos investigar como lo hacen los artistas grficos. LA TEORA DEL COLOR La teora del color es un grupo de reglas bsicas en la mezcla de colores para conseguir el efecto deseado combinando colores de luz o pigmento. MODELOS DE COLOR Los modelos de color proporcionan varios mtodos para definir los colores, y cada modelo define los colores mediante componentes de color especficos. Se han elaborado distintos modelos de color, y existen diferencias en la construccin de los crculos cromticos que responden a cada modelo. El avance que significaron los estudios de Newton es la posibilidad de identificar objetiva y no subjetivamente un color nominndolo por las mezclas con las que fue creado.
Circulo cromtico RYB RUEDA (CRCULO) DEL COLOR La rueda del color o crculo de color es una organizacin de color tonalidades alrededor de un crculo, demostrando relaciones entre los colores considerados ser colores primarios, colores secundarios, colores. Complementarios, etc. ESQUEMAS DE COLOR Al hacer un diseo, hay que elegir una serie de colores que deben resultar armnicos, o sea, que vayan bien unos con otros. No hay reglas que gobiernen la seleccin de un esquema de color, pero hay algunas combinaciones armnicas inspiradas en el crculo cromtico. PRINCIPIOS DE DISEO: SELECCIN DE UN ESQUEMA DE COLORES
ESQUEMAS DE COLOR COMUNES COMPLEMENTARIOS CERCANOS
Triadas complementarias
Contiguos
COLORES FROS Y CLIDOS
Un buen diseo grfico no es cosa de suerte, buen gusto o instinto; tiene bases cientficas y tcnicas (claro que el talento tambin cuenta). El secreto es la matemtica y la geometra (aplicada a un esquema de referencia que relaciona los colores). Los ingenieros son malos para hacer UIs, pero con los principios y elementos adecuados, podemos hacerlo bien.
COMPOSICIN VISUAL EN EL DISEO DE PANTALLAS
El diseo es una actividad encaminada a la configuracin, creacin y desarrollo de un objeto donde este cumple una funcin, por tanto entra en juego las caractersticas visuales , una estructura percibida y su esttica. As mismo la construccin que se hace a partir del diseo se rige bajo parmetros de intuicin e innovacin frente a un contexto cultural, social y econmico. Donde se adquiere un tipo de elementos que son conceptuales, visuales, de relacin y prcticos. Encontraremos muchos textos que discuten sobre las teoras del diseo, tanto en obras de arte como en obras comerciales. Arnheim (Art and Visual Perception, 1954) y Dondis (A Primer of Visual Literacy, 1973) son buenos ejemplos. De la literatura sobre diseo en pantalla, tenemos aGalitz (The Essential Guide to User Interface Design, 1997), la gua esencial para el diseo del interfaz de usuario, presenta una extensa lista de pautas muy especficas para el diseo de pantallas.
A travs de una revisin de esta y otras obras similares, se obtuvo catorce medidas estticas para las pantallas grficas: el equilibrio, la simetra, la secuencia, la cohesin, la unidad, la proporcin, la sencillez, la densidad, la regularidad, la economa, la homogeneidad, el ritmo y el orden y la complejidad. Esta seccin se centra en las descripciones y ejemplos de estas medidas. BALANCE El equilibrio puede ser definido como la distribucin del peso ptico en una imagen. Peso ptico se refiere a la percepcin de que algunos objetos parecen ms pesados que otros. Objetos de mayor tamao son ms pesados, mientras que los objetos pequeos ms ligeros. El equilibrio en el diseo de la pantalla se logra al proporcionar una cantidad igual de elementos de la pantalla, izquierda y derecha, arriba y abajo. En la Fig. 1 se presentan buenos y malos ejemplos de equilibrio. Fig. 1 (a) presenta una pantalla de equilibrio en que la mitad del peso es ms o menos en un lado de la pantalla y la otra mitad en el otro. Fig. 1 (b) se muestra un esquema visual desequilibrado (se ve como si fuera a caerse).
SIMETRA El equilibrio se puede obtener simtricamente o asimtricamente, la simetra trabaja con formulaciones totalmente resueltas en las que cada elemento que se sita a un lado del eje central corresponde exactamente con otro lado del contrario. Puede resultar esttica y aburrida. La simtrica era considera por los griegos como un mal equilibrio; sin embargo, el equilibrio es muy interesante y pueden obtenerse de muchas maneras. Se consigue al equilibrar los objetos de la interfaz en vertical, horizontal, y diagonal, consiguiendo una simetra dos a dos entre los objetos.
La simetra es la duplicacin: una unidad en cada lado. En la Fig. 1(a) hay equilibrio pero sin simetra. La Fig. 3 presenta buenas y malas versiones de simetra. En la figura. 3 (a) la simetra se consigue con los mismos elementos a la izquierda y derecha de la lnea central de la pantalla. Fig. 3 (b) presenta un diseo asimtrico.
REGULARIDAD Se consigue estableciendo un espaciado consistente y estndar entre los puntos de alineamientos horizontales y verticales de los elementos en pantalla y minimizando dichos puntos. Para obtener el valor 1 en este parmetro el nmero de objetos debe ser 1 y el nmero de distintas distancias entre puntos de alineamientos es 1. La regularidad es una uniformidad de los elementos en base a un principio o un plan. La regularidad en el diseo de la pantalla se logra a travs del espacio y la agrupacin de componentes. Por tanto la simplicidad y la regularidad dependen del nmero de puntos de alineacin horizontal y vertical. A diferencia de la simplicidad, la regularidad es menos sensible a la cantidad de los elementos en la pantalla. En la Fig. 10 se presenta buena regularidad y se logra mediante el establecimiento de un espacio constante de puntos de alineacin horizontal y vertical. Los elementos de la Fig.10 (b) estn desigualmente espaciados.
PREDICTIBILIDAD Como tcnica visual, sugiere un orden o plan muy convencional y prevee de antemano lo que ser todo el mensaje visual. El grado relativo de homogeneidad de una composicin se determina por la uniformidad que los objetos son distribuidos entre los cuatro cuadrantes de la pantalla. El grado de uniformidad es una cuestin de que los cuadrantes contengan ms o menos el mismo nmero de objetos. La Fig. 12 presenta buenas y malas versiones en el estudio de la homogeneidad. En la Fig. 12 (a) la homogeneidad se logra mediante la distribucin de los objetos de manera uniforme entre los cuatro cuadrantes de la pantalla. Los elementos de la figura. 12 (b) no se distribuyen equitativamente.
SECUENCIALIDAD La disposicin secuencial est basada en la respuesta compositiva a un plan lgico, normalmente suele haber un ritmo que se repite. Es 1 cuando los objetos de la interfaz se colocan de mayor a menor a lo largo de los diferentes cuadrantes en forma de z. Secuencia en diseo se refiere a la disposicin de los objetos en una presentacin que facilita el movimiento de la mirada a travs de la informacin que se muestra. Normalmente, el ojo, entrenado por la lectura, se inicia desde la parte superior izquierda y se mueve de ida y vuelta a travs de la pantalla a la parte inferior derecha. Estudiando la percepcin se han encontrado que ciertas cosas atraen la mirada. Se mueve a partir de objetos grandes y se desplaza la mirada hacia los objetos pequeos. La Fig. 4 presenta buenas y malas versiones de secuencias. En la Fig. 4 (a) la secuencia se logra mediante la organizacin de los elementos que guan el ojo. Lo contrario sucede en la Fig. 4 (b), donde la accin de la mirada y el flujo no pueden ser detectados.
ECONOMA. Economa es el uso cuidadoso y discreto de mostrar los elementos para hacer llegar el mensaje tan simple como sea posible. La economa se logra mediante el uso de tamaos uniformes. En la Fig. 11 se presentan las buenas y malas versiones en el estudio de la economa. En la figura. 11 (a) la economa se logra con un solo tamao. Fig. 11 (b) tiene una baja economa ya que utiliza ms tamaos
UNIDAD La unidad es la coherencia, un conjunto de elementos que se visualizan como una sola pieza. Con la unidad, los elementos parecen que encajan de una manera tan completa que se ven como una sola cosa. La unidad en el diseo de la pantalla se logra con el uso de tamaos similares y dejando menos espacio entre los elementos de la pantalla que el espacio que queda al margen. En la Fig. 6 se presentanbuenas y malas versiones en el estudio de la unidad. Los elementos se agrupan y son rodeados por espacios en blanco. Los elementos en la figura. 6 (b) se ven como si estn listos para salir de la pantalla.
PROPORCIN. A lo largo de los siglos, las personas y las culturas han preferido las relaciones proporcionales. Lo que constituye la belleza en una cultura no es considerado necesariamente lo mismo por otra cultura, pero algunas formas proporcionales han resistido el paso del tiempo y se encuentran en abundancia en la
actualidad. Marcus [Graphic Design for Electronic Documents and User Interfaces, ACM Press, New York, 1992.] describe las siguientes formas estticamente agradables: cuadrado (1:1), la raz cuadrada de dos que es el formato DIN-A (1:1.414), el rectngulo ureo (1:1.618), el rectngulo raz cuadrada de tres (1:1.732), y el doble cuadrado (1:2). En el diseo de pantalla, estas proporciones estticamente agradables deben ser consideradas para los principales componentes, incluyendo las ventanas, los grupos de datos y textos. En la Fig. 7 se presentan buenas y malas versiones en el estudio de la proporcin. En la figura. 7 (a) la proporcin se logra con las medidas. Estas proporciones no pueden ser reconocidas en los elementos de la Fig. 7 (b).
SIMPLICIDAD. La simplicidad es la sencillez de formas, una combinacin de elementos que se traduce en la facilidad de comprender el significado de un patrn. Simplicidad en el diseo de la pantalla se logra optimizando el nmero de elementos en una pantalla y minimizar los puntos de alineacin. Tullis [Predicting the usability of alphanumeric displays, PhD Dissertation, Rice University, Houston, TX, 1984.] ha establecido una medida de la complejidad de la pantalla basados en la obra de Bonsiepe [A method of quantifying order in typographic design, Journal of Typographic Research 2 (1968) 203220.], que propuso un mtodo para medir la complejidad de la tipografa en pginas diseadas a travs de la aplicacin de la teora de la informacin. La Fig. 8 presenta buenas y malas versiones en el estudio de la simplicidad. En la figura. 8 (a) la simplicidad se consigue por qu se reduce al mnimo los puntos de alineacin. Fig. 8 (b) tiene una medida inferior en simplicidad, ya que cuenta con ms puntos de alineacin.
ESTABILIDAD. El equilibrio es estabilidad, pesos repartidos desde el centro de suspensin. El equilibrio en una pantalla se consigue centrando el diseo en la pantalla. El centro del diseo coincide con el de la trama. Es algo relacionado con el equilibrio. La estabilidad se ve en los centros visuales, el equilibrio visual en pesos. Fig. 2 se presentan las buenas y las malas versiones en estabilidad. En la figura. 2 (a) el equilibrio se logra mediante el centrado de la misma disposicin. El centro de la disposicin mostrada en la figura. 2 (b) est algo ms bajo que el centro del marco.
COHESIN. En el diseo de la pantalla, el aspecto de espacios proporcionales similares provocan cohesin. Nos referimos a la relacin de anchura y la altura. Los tamaos tpicos de papel son ms altos que anchos, mientras que lo opuesto pasa con pantallas de visualizacin. El cambio en el aspecto del campo visual puede afectar a la visin de los patrones de movimiento. La relacin de aspecto de un campo visual debe ser el mismo durante el escaneo de una pantalla. La Fig. 5 presenta buenas y malas versiones en el estudio de la cohesin. En la Fig. 5 (a) la cohesin se consigue manteniendo el aspecto relacin de un campo visual. El uso de la pantalla de la figura. 5 (b) puede verse afectada por la relacin irregular de los elementos de la pantalla.
LA DENSIDAD. La densidad es la medida en que la pantalla esta cubiertas con los objetos. Una ptima densidad se logra mediante la restriccin de elementos en la pantalla. La Fig. 9 presenta buenas y malas versiones en el estudio de densidad. En Fig. 9 (a) la densidad se logra mediante la restriccin de la densidad de la pantalla. En la Fig. 9 (b) presenta un desordenado y abarrotado diseo.
RITMO. Ritmo en el diseo se refiere a patrones regulares de cambios en los elementos. Este orden con variacin ayuda a dar un aspecto emocionante. El ritmo se lleva a cabo a travs de la variacin de la disposicin, dimensin, nmero y forma de los elementos. La medida en que el ritmo es introducido en un grupo de elementos depende de la complejidad. En la Fig. 13 se presentan buenas y malas versiones en el estudio del ritmo. En la figura. 13 (a) el ritmo se logra a travs de sistematizacin. Los elementos de la figura. 13 (b) crean el caos, y la confusin.
ORDEN Y COMPLEJIDAD. La medida de orden y complejidad se define como un conjunto de medidas sobre un diseo. El polo opuesto del orden es complejidad. La escala creada tambin puede ser considerada una escala de complejidad, con una complejidad extrema en un extremo y una mnima complejidad (orden) en el otro.
ESTNDARES EL DISEO DE INTERFACES APLICACIONES WEB Estructura de la informacin Preparar una estructura de contenidos acorde con lo que la Institucin desea promover o presentar y con los intereses del usuario promedio que navegar el sitio web. Esta estructura debe verse reflejada en la navegacin y la presentacin de los contenidos facilitando una ubicacin rpida de acceso a los datos que se requieren. En caso de documentos secuenciales (varias pginas Web) se debe permitir al usuario acceso a la siguiente o anterior pgina y al ndice del mismo documento. Esto se puede lograr incluyendo en cada pgina enlaces al documento anterior, al siguiente y al ndice. Contar con contenidos por grupos temticos adems de la estructura que se haya establecido, teniendo en cuenta lo siguiente: Ubicar en esta estructura de contenido lo referente a la Ley de Transparencia y Acceso a la Informacin Pblica, para las pginas institucionales del Sector Educacin. Es necesario establecer un mapa del sitio con no ms de tres niveles de acceso tomando en cuenta que un usuario promedio debe acceder a la informacin que busca antes de tres clics (niveles). Enlace a una seccin de contacto con la Institucin a travs de mensajes a un correo electrnico. Implementar un buscador de contenidos, para el caso de aplicaciones dinmicas, este puede estar estructurado por grupos temticos. Incluir una seccin de ayuda al usuario o de preguntas frecuentes donde se resuelvan las dudas ms comunes que los usuarios puedan tener. DIAGRAMACIN DE LA INTERFAZ Antes de iniciar el proceso de diseo, es necesario generar un diagrama de la estructura de la pgina de inicio, de las pginas de segundo nivel y de las pginas de tercer nivel. En el caso de tratarse de servicios interactivos ser necesario generar adems un esquema del flujo de proceso que este servicio va a tener, esto ayudar a entender cmo va a funcionar y a desarrollar las interfaces para cada nivel. La estructura de la interfaz debe ser reconocible por todos los usuarios que lleguen a la aplicacin web, sin distincin alguna, incluso para aquellos con navegadores especiales, para aquellos que no conozcan la dependencia o Institucin o para quienes no tengan mucha experiencia navegando en Internet.
Esta estructura no se refiere al diseo de la interfaz sino a la ubicacin de los elementos en ella. Tomar en cuenta las siguientes consideraciones: El orden de lectura de izquierda a derecha y de arriba hacia abajo. El tamao de las ventanas de los navegadores para presentar los contenidos ms importantes dentro de los primeros 400 pxeles de alto. Utilizar trminos de fcil reconocimiento para ttulos de secciones y enlaces, y escribirlos en espaol, esto debido a que se trata de una institucin del Estado Peruano. Pueden considerarse versiones en otros idiomas dependiendo del pblico al que se quiere alcanzar (quechua, aymar, ingls). Prever las distintas posibilidades en las que los usuarios llegarn a la interfaz, como son: navegadores en modo slo texto, navegadores sin imgenes, navegadores sin Java Script, navegadores sin Plug-in especiales, navegadores para discapacitados visuales, navegadores para celulares y otros equipos distintos a los monitores de computadora. Son elementos obligatorios a utilizarse en la pgina de inicio de los sitios web los siguientes: Imagen del Escudo del Per y la frase Repblica del Per. Logotipo del Ministerio de Educacin y la frase Ministerio de Educacin. Denominacin del ao en curso. Nombre y direccin de la Dependencia o Institucin. Fecha, Ciudad, Pas Correo electrnico del Administrador del Sitio, mediante el cual los usuarios podrn comunicarse para formular preguntas, requerimientos y/o comentarios. Enlace al mapa del sitio. Enlace a la pgina de inicio. La fecha de la ltima actualizacin de la informacin publicada. Ubicar en algn lugar visible un aviso al usuario sobre los requerimientos mnimos con los que debe contar para visualizar ptimamente el sitio web. Los documentos que tengan un tiempo de vigencia deben contar con la fecha de publicacin o de ltima actualizacin, sobre todo aquellos relacionados a cifras en constante evolucin, comunicados, eventos, etc. Ubicar enlaces a las descargas de software o plug-in necesarios. Indicar el peso de los archivos cuyo tamao sea mayor al promedio, esto har conocer al usuario que deber esperar hasta descargar el contenido.
Evitar el uso de una pgina de introduccin animada, pues no es aconsejable para pginas institucionales; esto debido a que el usuario promedio no est interesado en este tipo de contenidos. BOCETO DE LA INTERFAZ El proceso de diseo de una interfaz web es similar a cualquier otro proceso de diseo por lo que inicialmente luego de evaluar y decidir los objetivos de la dependencia o institucin, la aprobacin de los diagramas y teniendo una estructura definida, se proceder a elaborar un primer boceto. La primera idea de diseo debe ser elaborada con software apropiado para este fin, los archivos generadores del boceto deben estar a disposicin del equipo de trabajo para cualquier fin pertinente como por ejemplo modificaciones y correcciones al mismo. Para generar el boceto inicial se debe tomar en cuenta todo lo anteriormente visto, as como la imagen corporativa de la Institucin y la imagen Institucional del Gobierno. Debe respetarse adems el orden de lectura y el recorrido visual aprobado en el diagrama al momento del manejo del color, debemos llevar a nuestro usuario a leer cmoda y ordenadamente todos los contenidos que presentemos. El diseo global del sitio web debe tener coherencia. Se debe conservar una identidad de diseo en toda la aplicacin web. Los estndares de diseo se deben cumplir en todo el sitio, tomar en cuenta la construccin en XHTML y CSS y sus buenas prcticas al momento de disear. No utilizar imgenes de gran tamao para fondos de pantalla o como elemento de construccin de la interfaz, favorecer el uso de patrones que se puedan reproducir en base a imgenes repetitivas. Diferenciar los elementos grficos interactivos (botones, banners, mens, etc.) de los que no lo son. Identificar los elementos animados en el boceto (gif animados, flash, etc.). Reproducir los textos en el boceto, tal cual como aparecern al momento de la construccin en XHTML, para evitar diferencias al momento de la construccin. Establecer diferencias reconocibles entre los elementos textuales en la pgina, es decir, los ttulos, subttulos, enlaces (hipervnculos de texto) y el contenido. Emplear tipos de letra comunes para los textos que sern reproducidos en XHTML (Verdana, Arial, Courier, Times), teniendo en cuenta las tipografas estndar en diferentes plataformas y sistemas operativos, esto asegura que los usuarios vean el sitio web tal como fue diseado, pues son tipografas que se pueden encontrar en cualquier computadora. No utilizar ms de dos tipografas diferentes en un mismo sitio web o al menos en una misma seccin. Deben elaborarse no ms de tres alternativas de diseo diferentes, si los pasos anteriores se han tenido en cuenta, este nmero de alternativas ser suficiente para asegurar la aprobacin de alguna de ellas. No incluir ms de tres elementos en movimiento constante en una sola pantalla.
Emplear iconografa que sirva de ayuda visual o nfasis al momento de reconocer elementos en el sitio web, favoreciendo la simplicidad de dichos elementos. Los enlaces y los ttulos y subttulos de las secciones deben reconocerse claramente sin causar confusin. Fomentar los espacios en blanco, ya que stos favorecen el descanso al observar una interfaz Web y acentan el inters en los elementos que se quiere resaltar. No recargar o saturar la interfaz de elementos en movimiento o de imgenes que no tengan utilidad alguna. MANEJO DEL COLOR Sobre el manejo del color es necesario decir que no hay como establecer estndares para la eleccin y el uso del color pues es muy subjetivo y depende del equipo de trabajo que elabore la interfaz, el cual tiene la potestad de aprobar o desaprobar el uso que se haga del mismo; cada color tiene un significado y expresa una sensacin agradable o desagradable, fra o clida, positiva o negativa. Es conveniente que para el proceso de diseo de cualquier interfaz haya un especialista encargado de esta labor. Establecer una paleta de colores para el sitio web, que sern los colores que se utilizarn a lo largo de todo el desarrollo. Dicha paleta debe contar con 4 colores: un color predominante, un color armnico, un color de mediacin y uno de acento. El color predominante es que le dar el aspecto general a la pgina; el color armnico es aquel que interacta con el predominante para generar una combinacin; el color de mediacin es el que permite una relacin ms sutil entre los dems colores, este color debe ser muy neutro puede ser sustituido por el blanco, el negro o algn gris claro, usualmente el blanco de fondo de los contenidos del sitio web realiza esta funcin, pero se puede incluir uno especifico para esta labor; el color de acento es aquel que se utiliza para destacar elementos en el sitio web. Se pueden establecer paletas secundarias para secciones grandes al interior del sitio web siempre que sea necesario y refuerce el entendimiento de lo que se quiere expresar. Tomar en cuenta a los usuarios con problemas de visin y preparar alternativas para los mismos siempre que sea posible, cada elemento de la interfaz debe ser reconocible sin la necesidad del uso del color. Los colores deben favorecer la imagen que la Institucin quiere proyectar. Favorecer los contrastes de tono. Para establecer la paleta de colores del sitio web se debe tomar en cuenta en primera instancia los colores corporativos del Sector, del Gobierno, de la propia
Institucin o algn otro criterio similar, otra opcin es escoger los colores apropiados de acuerdo a un estudio de color y de la psicologa del mismo. En caso de que el equipo de trabajo cuente con personal capacitado en el manejo de color, el establecimiento de la paleta de colores puede presentar variaciones, pero para todos los casos la eleccin de los colores utilizados deber estar sustentada bajo algn criterio vlido. CONSTRUCCIN DEL SITIO WEB CON XHTML Y CSS Al ser aprobado un boceto se procede a construir provisionalmente una primera versin del sitio web en XHTML de modo que pueda ser navegado en primera instancia por el equipo de trabajo y por las autoridades de la Institucin a la que dicha interfaz pertenezca. Del mismo modo si se trata de un sitio web dinmico debe ya programarse la funcionalidad del mismo en el lenguaje de programacin que sea ms conveniente de acuerdo a los estndares establecidos para ello. Es necesario para la elaboracin de un sitio web para el Sector Educacin que esta etapa la realice personal capacitado en la produccin de sitios web, esto debido a que como Sector se quiere alcanzar un buen nivel de comunicacin con los usuarios a travs de este medio y solo una interfaz web correctamente elaborada permite este objetivo. Se debe conseguir que las pginas se desplieguen lo ms pronto posible y que estas se visualicen por todos los usuarios tal cual como fueron diseados y construidos. Se debe comprobar la correcta elaboracin de los elementos animados, interactivos o dinmicos en el sitio web. APLICACIONES PARA MVILES Aunque el uso de estndares facilita el acceso al contenido Web desde los dispositivos mviles de ltima generacin, debemos ser conscientes de las limitaciones y oportunidades que nos ofrecen para sacarles el mximo partido. Con la aparicin de los nuevos dispositivos mviles que incorporan sistemas operativos ms potentes (Symbian, Android, Iphone) y el aumento de la velocidad de acceso a internet, se han incorporado navegadores web (ejemplo: opera web mobile) capaces de representar el contenido de una web de forma universal, sin necesidad de hacer variaciones tcnicas para este tipo de soportes, siempre y cuando respetemos el uso de los estndares en el proceso de maquetacin. Debemos ser conscientes de las limitaciones (costes en el consumo de la red y reduccin del espacio de trabajo) y oportunidades que nos ofrecen este tipo de dispositivos (GPS, cmara, pantallas tctiles, SMS).
Para ello han aparecido los estndares en el desarrollo de aplicaciones mviles: APP. Los APP son aplicaciones mviles que se instalan en el dispositivo y permiten interactuar con los contenidos alojados en un servidor web minimizando los costes de conexin, aportando contenidos especficos para estos dispositivos y utilizado las posibilidades tcnicas que nos ofrecen como la relocalizacin mediante el uso del GPS o la red mvil. Recomendaciones se deben seguir con el desarrollo de aplicaciones especficas para mviles: APP Utilizar los estndares web (HTML5, CSS). Ser prudente con las limitaciones de este tipo de dispositivos. Reducir y optimizar la carga del documento web (para evitar consumo innecesario, se puede recurrir al uso de cookies que limiten el acceso a la web del operador). Minimizar el uso de los recursos externos. Realizar un diseo flexible que se adapte al mayor nmero de dispositivos. Pensar en un usuario de la web mvil y explotar sus posibilidades. APLICACIONES PARA TABLETS Para los diseadores, Android es el referente a tomar en cuenta cuando se habla de diseo de aplicaciones. Por mucho que a los diseadores les gustara pensar que se trata de un mundo de iOS, en el que todos los usuarios utilizramos iPhone, iPad y la App Store, nadie puede ignorar que Android tiene actualmente la mayor parte de la cuota de mercado de los smartphones y que su uso se est extendiendo hacia todo tipo de dispositivos electrnicos. En poco tiempo, la plataforma Android de Google ha crecido rpidamente y las distintas marcas la han empezado a notar. Los mltiples dispositivos con Android que podemos encontrar en el mercado hacen sentir que el diseo para esta plataforma es una cuestin difcil de dominar. Sumando adems que la poca documentacin es difcilmente un buen punto de partida para empezar a disear y producir aplicaciones que luzcan realmente geniales. Navegando por la web en busca de recursos que te hablen del diseo en Android te har darte cuenta de que slo encontrars contados recursos al respecto y que poco de ellos te servirn realmente como gua. Android, est comenzando a abordar los problemas de tener varios dispositivos y tamaos de pantalla, y los fabricantes de dispositivos estn adoptando lentamente los estndares que eventualmente reducirn la complejidad en el tema de diseo. Disminuir la densidad de Android pantalla.
Conocer los aspectos fundamentales del diseo de Android a travs de patrones de diseo. Disear los requerimientos a partir de las necesidades de desarrollo. Qu es Android 3.x y qu hay que conocer SMARTPHONES CON ANDROID Y TAMAOS DE PANTALLA Al comenzar cualquier proyecto de diseo digital, la comprensin del hardware como primer paso es una buena idea. Para aplicaciones de iOS, correspondera al iPhone y al iPad Touch. En Android, por su parte, esto se extiende a docenas de dispositivos y fabricantes. La lnea de tiempo de las pantallas soportadas en los dispositivos Android comienza por el T-Mobile G1, el primer dispositivo Android disponible en el mercado que tiene una pantalla HVGA de 320 x 480 pxeles. HVGA significa la mitad de la matriz de grficos de video (o VGA de medio tamao) que es el tamao de pantalla estndar para los smartphones de hoy en da. El iPhone 3Gs, 3G y 2G utilizan la misma configuracin. Para simplificar las cosas, Android clasifica las pantallas (tomando el cuenta la longitud de una diagonal que va desde la esquina superior izquierda a la esquina inferior derecha de la pantalla del dispositivo) en cuatro tamaos generales: pequeo, normal, grande y extra grande. Muestran tamaos pantalla comunes Android. dos de muy en
320 480 se considera un tamao normal de pantalla en Android. Cuando hablemos de tamao extra grande piensa en las pantallas de las tablets. Sin embargo, hay que tomar en cuenta que los Smartphone ms populares de hoy en da tienen WVGA (es decir, un VGA ms grande) 800+ x 480 pxeles HD de pantalla. Por lo tanto, lo que es normal est cambiando rpidamente. Por ahora, vamos a tomar como referente que la mayora de los Smartphone con Android tienen pantallas grandes.
La tabla muestra las diferentes configuraciones de pantalla disponibles en los skins del emulador del Android SDK. La variedad de tamaos de pantalla puede ser un reto para los diseadores que estn tratando de crear un tamao nico para todos los diseos de layout. Para resolver esto, he encontrado que el mejor enfoque consiste en disear un conjunto de layouts para 320 x 533 pxeles fsicos y luego introducir diseos personalizados para los otros tamaos de pantalla. Si bien esto crea ms trabajo tanto para el diseador y el desarrollador, el tamao de pantalla ms grande de los dispositivos tales como el Motorola Droid y Evo HTC puede requerir cambios en los diseos base que hagan un mejor uso de los recursos visuales del dispositivo.
LAS DENSIDADES DE PANTALLA Los tamaos de pantalla es slo la mitad del asunto. Los desarrolladores no hacen referencia a la resolucin de las pantallas, sino ms bien a su densidad. Resolucin. El nmero total de pixeles fsicos en una pantalla. Densidad de la pantalla. La cantidad de pixeles en un rea fsica de la pantalla, normalmente se conoce como DPI (puntos por pulgada). Pixeles independientes de la densidad (DP). Esta es una unidad de pixel virtual que se utiliza en la definicin de un diseo de interfaz de usuario con el fin de expresar las dimensiones del diseo o la posicin de una manera independiente de la densidad. Los pixeles independientes de la densidad equivalen a un pxel fsico en una pantalla de 160 DPI, que es la densidad de referencia asumida por el sistema como la densidad media de la pantalla. En tiempo de ejecucin, el sistema maneja de manera transparente cualquier ampliacin de las unidades de DP segn sea necesario, en base a la densidad real de la pantalla que se est utilizando. La conversin de las unidades de DP a los pxeles de la pantalla es simple: los pxeles = DP * (DPI / 160). Por ejemplo, en una pantalla de 240 DPI, un DP es igual a 1,5 pxeles fsicos. Utiliza siempre los DP como unidad para definir los diseos de tu interfaz de usuario para asegurarte de que se mostrar correctamente en pantallas con diferentes densidades. Al igual que los tamaos de pantalla, Android divide a las densidades de pantalla en cuatro densidades bsicas: LDPI (bajo), MDPI (medio), HDPI (alto), y XHDPI (muy alta). Esto es importante porque tendrs que entregar todos los elementos grficos (bitmaps) en sets de diferentes densidades. Por lo menos, tendrs que entregar un set en MDPI y HDPI para cualquier aplicacin Android que hagas. Lo que esto significa es que todos los grficos de bitmaps necesitan ser ampliados o reducidos partiendo de su tamao base (320 x 533). Nota: hay tambin una forma de parsear los archivos SVG que proporciona una forma de escalar el vector en diferentes tamaos de pantallas y densidades sin perder calidad en la imagen. El requerimiento de los bitmaps es similar al de preparar grficos para imprimir contra los que tenemos para la web. Si tienes experiencia en el campo de las impresiones, sabrs que una imagen de 72 PPI se ver muy pixelada y borrosa cuando son ampliadas o impresas. En lugar de ello, necesitaras rehacer la imagen a modo de vector o utilizar una foto de alta resolucin y ajustar la resolucin del archivo en torno a 300 PPI con el fin de imprimirla sin perder la calidad de la imagen. La densidad de la pantalla de Android funciona de manera similar, a excepcin de que no estamos cambiando la resolucin del archivo, sino nicamente el tamao de la imagen. Un buen estndar a adoptar es 72 PPI.
Muestra una aplicacin que no tiene soporte a la densidad. Para ajustar las imgenes a las diferentes densidades de pantalla de los dispositivos, necesitamos seguir una relacin de escala de 3:4:6:8 entre los cuatro tamaos de densidad. Usando esto y un poco de matemticas simples, podremos crear cuatro versiones diferentes de nuestro bitmap para poder trabajar en la aplicacin: 7575 para pantallas de baja densidad (x0.75); 100100 para pantallas de media densidad (nuestra base); 150150 para pantallas de alta densidad (x1.5); 200200 para pantallas de muy alta densidad (x2.0)
Muestran las cuatro versiones de una imagen optimizadas para las diferentes densidades de las pantallas.
Una vez de que hayas creado todos los grficos, puedes organizarlos de la siguiente manera: Muestra la organizacin y nombrado sugerido de la estructura de directorios y archivos. De esta manera podemos utilizar el mismo nombre para cada uno de los archivos de cada densidad de pantalla.
Puede que te confunda un poco el uso de PPI (pixeles por pulgada) para realizar cada versin de las imgenes. Bastar con crear las imgenes bajo un estndar de 72 PPI y escalar las imgenes segn sea la versin que necesites crear. USANDO PATRONES DE DISEO EN ANDROID Si lo que ests buscando son atajos, hacer una aplicacin para los navegadores web para mviles utilizando una herramienta como Web kit HML5 sea quizs la mejor opcin para ti. Sin embargo, para crear aplicaciones nativas en Android, las convenciones de las interfaces de usuario en Android son diferentes a las del iPhone. La gran diferencia reside en la tecla Back, para navegar a las pginas previas. La tecla Back en los dispositivos Android es fija y siempre est disponible para el usuario, independientemente de la aplicacin. O es una tecla fsica del dispositivo o se encuentra fija digitalmente en la parte inferior de la pantalla independientemente de cualquier aplicacin, tal y como se aprecia en la versin Android 3.x para tablets.
La presencia de una tecla Back fuera de la aplicacin deja espacio para otros elementos en la parte superior de la pantalla, tales como el logo, ttulo o men. Mientras que esta convencin relacionada con la navegacin difiere mucho de la de iOS, existen otras diferencias que en Android se conocen como patrones de diseo. De acuerdo con Android, un patrn de diseo es una solucin general a un problema recurrente. A continuacin se presentan los principales patrones de diseo de Android que se introdujeron desde la versin 2.0. DASHBOARD Este patrn resuelve el problema de tener que navegar entre las diferentes capas de una aplicacin. Proporciona una plataforma de lanzamiento alternativa para aplicaciones ricas e interactivas como Facebook, Evernote y LinkedIn. Muestra el patrn de diseo de Dashboard y su uso en las aplicacione s de Facebook y LinekdIn.
ACTION BAR La barra de acciones es uno de los patrones de diseo ms importantes de Android y que adems lo diferencia. Su funcionamiento es muy similar a la de un banner de los sitios web, con el logo o el ttulo generalmente a la izquierda y los elementos de navegacin a la derecha. El diseo de la barra de acciones es flexible y permite que se cierren mens y se amplen las cajas de bsqueda. Generalmente es usada como una caracterstica global en lugar de una caracterstica contextual. Muestra el patrn de diseo de barra de acciones utilizada por la aplicacin de Twitter.
SEARCH BAR Le brinda al usuario una forma sencilla de buscar por categora y ofrece adems sugerencias de bsqueda.
Muestra el patrn de diseo de barra de bsqueda en la aplicacin de Google Search.
QUICK ACTION Este patrn de diseo es similar al comportamiento de los pop-ups en iOS, que le da al usuario acciones contextuales adicionales. Por ejemplo, hacer el gesto de tapping sobre una foto en una aplicacin podra lanzar una barra de accin rpida que le permita al usuario compartir la foto. Muestra el patrn de diseo de barra rpida en la aplicacin de Twitter.
WIDGETS Los widgets le permiten a una aplicacin mostrar notificaciones en la pantalla de inicio del usuario. A diferencia de las notificaciones push en iOS que se comportan como modal dialog temporales, los widgets permanecen en la pantalla de inicio.
Muestra unos bidets de ejemplo en la pantalla principal del dispositivo.
Utilizar los patrones de diseo establecidos es importante para mantener la experiencia intuitiva y familiar de los usuarios. Hay que tener presente que los usuarios no quieren la misma experiencia del iPhone en su dispositivo Android. Es por ello que la compresin de los patrones de diseo es el primer paso para aprender a hablar en Android y disear una experiencia ptima para los usuarios. ACERCA DE LAS TABLETS CON ANDROID En la celebracin del CESS 2011, las compaas presentaron una gran variedad de tablets con Android, con diferentes tamaos de pantalla. Sin embargo, despus de una rpida revisin de las ms populares, podemos concluir que los dos tamaos de pantalla ms importantes se centran en las medidas de 1280800 y 800480 pixeles fsicos. Con el lanzamiento de Android 3 Honeycomb, Google proporciona a los fabricantes de dispositivos una interfaz grfica especialmente diseada para tablets, dejando atrs el botn Back que ha sido reemplazado por un ancla de navegacin y una barra de status del sistema localizada en la parte inferior de la pantalla. Android 3.0 tiene un aspecto visual renovado, sin dejar de incorporar todos los patrones de diseo que se introdujeron desde la versin 2.0. Una de las grandes diferencias de Honeycomb es que la barra de acciones ha sido actualizada para incluir pestaas y mens desplegables. Otra nueva caracterstica aadida a Android 3.x es el mecanismo llamado fragmentos. Un fragmento es un componente auto-contenido en un layout que puede cambiar de tamao y posicin dependiendo de la orientacin y el tamao de la pantalla. Esto adems aborda el problema de hacer diseos para diferentes tipos de pantalla dndole a los diseadores y desarrolladores una manera de
hacer sus componentes flexibles dependiendo de las limitantes de pantalla con las que se tope la aplicacin. As, los componentes de la pantalla pueden estirarse, apilarse, expandirse y contraerse, as como mostrarse y ocultarse. Muestra ejemplos de cmo pueden ser usados los fragmentos.
La prxima versin de Android, llamada Ice crean sndwich, promete traer esta funcionalidad a los Smartphone con Android, dndole a los diseadores y desarrolladores la opcin de construir un nico layout que se ajuste a las necesidades de la aplicacin. Esto podra ser un cambio de paradigma para los diseadores y desarrolladores, que tendrn que aprender a pensar en el diseo como si fuese las piezas de un rompecabezas que puede ser ampliado o reducido para ajustarse a la pantalla de los dispositivos. En resumen, esto le permitir al sistema operativo Android correr en cualquier dispositivo (con posibilidades infinitas!). Trata de hacerte de un telfono o Tablet con Android y tmate el tiempo de descargar aplicaciones para explorar sus interfaces. Con el fin de disear para Android, tienes que sumergirte en el entorno y conocerlo a profundidad. Esto puede sonar obvio, pero es siempre sorprendente escuchar que incluso el jefe del producto no tiene un dispositivo con Android. BIBLIOGRAFA
http://compo2gm1.wordpress.com/2012/01/09/composicion-para-eldiseno-de-formatos-de-pantalla/ https://xtOUJH9jorAJ.www.utpl.edu.ec/gcblog/wpcontent/uploads/2007 /09/presentation1.ppt+COMPOSICI%C3%93N+VISUAL+EN+EL+DISE/ http://www.slideshare.net/madymy28/fundamentos-decomposicionvisual http://www.mimente.com.mx/blog/?cat=3
http://es.wikipedia.org/wiki/Teor%C3%ADa_del_color http://www.webnova.com.ar/articulo.php?recurso=312 http://www.fotonostra.com/grafico/modeloscolor.htm http://www.worldlingo.com/ma/enwiki/es/Color_wheel http://es.wikipedia.org/wiki/CMYK http://s3.accesoperu.com/wp6/includes/htmlarea/mezclador/ayuda/ec.h tm

Trabajo Final Ingenieria

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Trabajo Final Ingenieria

Cargado por

Copyright:

Formatos disponibles

ACTIVIDAD DE INVESTIGACION

DOCENTE: ING GUSTAVO MEDINA

Grado de iconicidad bajo

LENGUAJE VISUAL PUBLICITARIO Su objetivo es informar, convencer y/o vender.

LENGUAJE VISUAL ARTSTICO Posee una funcin esttica

ESQUEMAS DE COLOR COMUNES COMPLEMENTARIOS CERCANOS

COLORES FROS Y CLIDOS

COMPOSICIN VISUAL EN EL DISEO DE PANTALLAS

Muestra el patrn de diseo de barra de bsqueda en la aplicacin de Google Search.

Muestra unos bidets de ejemplo en la pantalla principal del dispositivo.

También podría gustarte