CAPÍTULO II DESARROLLO

Texto completo

(1)14. CAPÍTULO II DESARROLLO.

(2) 15. CAPÍTULO II. DESARROLLO. 1. BASES TEÓRICAS. 1.1 DISEÑO. Para definir diseño Rómulo Moya Peralta (2006) expone que es, pensar, explicar lo. que sentimos, organizar la información que. acumulamos, histórica y presente, cualitativa y cuantitativa, reflexionar sobre lo que conocemos, conjugando todo en un proceso creativo que abstrae y sintetiza, para desarrollar una idea o un objeto. Por otra parte, Wicius Wong en su libro Fundamentos del Diseño (1997) define este como un proceso de creación visual con un propósito. A diferencia de la pintura y de la escultura, que son la realización de las visiones personales y los sueños de un artista, el diseño cubre exigencias prácticas. Se puede concluir que el diseño es una actividad creativa donde participan los sentimientos y la razón con el fin de llevar a cabo un proceso de creación visual..

(3) 16. 1.2. DISEÑO GRÁFICO. De acuerdo al concepto que maneja Rómulo Moya Peralta (2006) sostiene que es un proceso creativo para comunicar ideas de una manera racional y sistemática. Se trata de transmitir una idea que pueda ser decodificada socialmente. Es la comunicación de códigos que deben ser descifrados de una manera rápida, agradable, representativa de lo que se quiere comunicar. Por otra parte El Consejo Internacional de Asociaciones de Diseño Gráfico ICOGRADA, (2012) define al diseño gráfico como una actividad, intelectual técnica y creativa involucrada no solamente con la producción de imágenes sino también con el análisis, la organización y los métodos de presentación de soluciones visuales a los problemas de comunicación donde la información y la comunicación son bases de una interdependencia alrededor del mundo, ya sea en las esferas de intercambio económico, cultural o social. Resumiendo lo anterior, se determina que el diseño gráfico resuelve problemas de comunicación visual mediante el uso de teorías y razonamiento creativo.. 1.2.1. ELEMENTOS DEL DISEÑO GRÁFICO. Los elementos del diseño gráfico son los que componen y dan forma al mensaje, con la función principal de transmitir una información determinada por medio de composiciones gráficas. Así pues Cristalab, (2012) afirma que se distinguen 4 grupos de elementos:.

(4) 17. 1.2.1.1. ELEMENTOS CONCEPTUALES. Partiendo de esto se determina que los elementos conceptuales son aquellos que están presentes en el diseño, sin ser visibles.. (A) PUNTO. Es el elemento gráfico básico que conforma la unidad mínima de la comunicación visual, indica posición, no tiene largo ni ancho, es el principio y el fin de una línea. De este modo, Herrera, C (2008) indica que es la forma más sencilla de expresión plástica. Su aparición en el plano llama mucho la atención y su simbología es infinita.. (B) LÍNEA. Es una sucesión de puntos que tiene largo, pero no ancho, tiene una posición y una dirección, en general crea tensión en el espacio donde se ubique y afecta a los diferentes elementos que conviven con ella. La línea es el mejor instrumento descriptivo en el lenguaje plástico Herrera, C (2008). Con la línea el significado de los objetos es mucho más sencillo en el caso de un boceto, un croquis o un apunte gráfico..

(5) 18. (C). PLANO. Un plano tiene largo y ancho, tiene posición y dirección y además está limitado por líneas que permiten fragmentar y dividir el espacio, pudiéndose delimitar y clasificar las diferentes zonas de una composición. Es la antítesis del volumen y viceversa. En el lenguaje plástico, para su mejor comprensión y adaptación, hay que delimitarlo mediante líneas y bordes que definen la forma plana. Está caracterizada por su simplicidad, ofrece una carga expresiva a la composición diferenciándose así, del resto de recursos plásticos. Herrera, C (2008).. (D). VOLUMEN. El recorrido de un plano en movimiento se convierte en volumen, tiene posición en el espacio, está limitado por planos y en el diseño bidimensional el volumen ilusorio. En geometría es lo opuesto al plano, por lo que plásticamente, los sentimientos transmitidos serán muy distintos. Una forma tridimensional se caracteriza por la veracidad y el realismo que otorga a los objetos representados. Herrera, C (2008)..

(6) 19. 1.2.1.2. ELEMENTOS VISUALES. Cuando se realiza la ilustración de una figura, la misma está compuesta por líneas visibles, las cuales tienen largo, ancho, color y textura; estas forman parte de los elementos visuales.. (A). FORMA. Todo lo visible tiene una forma, la cual aporta para la percepción del ojo una identificación del objeto el cual está articulado por líneas, en general se imponen tres formas básicas; cuadrado, círculo y triángulo y de allí parten infinitas variaciones y combinaciones. La forma es la distribución de la materia de cada cuerpo, que le hace peculiar y distinto de otro. www.parro.com.ar (2015).. (B). MEDIDA. Todas las formas tienen un tamaño, una cantidad estandarizada de una determinada magnitud física que es el resultado de medir aquella proporción que surge y resulta de la dimensión que ostenta un objeto y la determinada unidad de medida que se aplicará para conocer el espacio que ocupa. Una medida es el resultado de la comparación de una magnitud con otra de la misma especie que se toma como unidad. www.sobreconceptos.com (2012)..

(7) 20. (C). COLOR. El color se utiliza comprendiendo no solo los del espectro solar, sino asimismo los neutros (blancos, negros, grises) y las variaciones tonales y cromáticas, este es el medio más valioso para transmitir sensaciones.. El color es una experiencia visual, una impresión sensorial que recibimos a través de los ojos, independiente de la materia colorante de la misma. Orozco, D (2015).. (D). TEXTURA. Tiene que ver con el tipo de superficie resultante de la utilización del material. Toda figura tiene una superficie y debe tener ciertas características que puede ser descrita por rigurosas, suave, lisa y decorativa, opaca o brillante, blanda o dura, según se muestre, puede atraer tanto al sentido del tacto como al visual. Es la cualidad que ofrece el aspecto más singular a la forma. Con ella, la superficie de las formas se llenan de atractivo visual y de una carga de realismo que invita a tocarla, Esto se conoce como valor táctil. Herrera, H (2008)..

(8) 21. 1.2.1.3. ELEMENTOS DE RELACIÓN. Son aquello que permiten la interrelación de las formas dentro de un diseño, la división del espacio que ocuparán y perspectiva general del mismo; también ayudan a la distinción del diseño entre otros. (Gómez 2012). (A). DIRECCIÓN. La dirección de una forma depende de cómo está relacionada con el observador, con el marco que la contiene o con otras formas cercanas. La dirección en las formas tienen que ver en tanto en cuanto está en relación con el observador del diseño, también tiene influencia en este elemento el contenedor en el cual se encuentra el diseño (marco) y con la existencia o no de formas cercanas. Gonzalo, R (2008).. (B). POSICIÓN. La posición de una forma es juzgada por su relación respecto al plano de la imagen o de la estructura del diseño (el punto de referencia es el centro). Dependiendo de la posición que el objeto tenga en el plano y de la relación con otros objetos, si los hubiera, la impresión de éste será diferente. Es el objeto en el “campo visual”. Herrera, C (2008)..

(9) 22. (C) ESPACIO. Todas las formas por más pequeñas que sean ocupan un espacio, el espacio así mismo puede ser visible o ilusorio (para dar una sensación de profundad). Por otro lado, la definición más común para espacio es la descrita por la física, para la cual el espacio es el lugar tridimensional en el cual existen los objetos y ocurren los eventos, con una dirección y posición relativa. En este sentido, el espacio físico se concibe como un espacio de tres dimensiones, a pesar de que los físicos modernos consideran que en realidad es un espacio de cuatro dimensiones, con el tiempo como la cuarta dimensión. El concepto de espacio es fundamental a la hora de entender conceptos más complejos como el del universo físico. Rodolfo (2013).. (D) GRAVEDAD. El efecto de gravedad no solamente es visual, sino también psicológico. Se puede atribuir estabilidad o inestabilidad a una forma o a un grupo de ellas. Por otro lado, Orozco, D (2014) define la gravedad como la fuerza de atracción que ejerce la Tierra y otros cuerpos celestes sobre los cuerpos u.

(10) 23. objetos que allí se posan. También es conocida como fuerza de gravedad o fuerza gravitacional.. 1.2.1.4. ELEMENTOS PRÁCTICOS. Los elementos prácticos de un diseño hacen referencia a la representación, el significado y la función, van más allá del diseño en sí, tiene un fin específico hacia el espectador y está basado en conceptos abstractos en el producto final donde se aúna todos los elementos, estos subyacen en el contenido y alcance del mismo.. (A). REPRESENTACIÓN. Se refiere a la forma de realizar el diseño: Una vez ordenados todos los elementos y viable la producción, se obtiene la representación, la forma bidimensional o tridimensional ya creada para el espectador la puede ser realista, estilizada o semi-abstracta. Según Tsoi, J (2012) cuando una forma ha sido derivada de la naturaleza o del mundo hecho por el ser humano, es representativa. La representación puede ser realista, estilizada o semi-abstracta..

(11) 24. (B). SIGNIFICADO. Toda producción transmite bien sea de forma consciente o subconsciente. El que dependerá de cómo se haya configurado los diversos elementos que lo integran. Por tanto, todo diseño tiene un significado, un mensaje. Según Tsoi, J (2012) se hace presente cuando el diseño transporta un mensaje. Invade e campo del simbolismo.. (C). FUNCIÓN. El diseño nace como solución a una necesidad. Por tanto, la función toma presencia cuando el diseño cubre el propósito para el que fue proyectado. Según Tsoi, J (2012), cuando sirve a un determinado propósito. A manera de conclusión, los elementos del diseño gráfico son aquellas características a ser consideradas al momento de llevar a cabo cualquier actividad de comunicación visual, para reforzar la idea que se desea transmitir. Utilizándolos de esta forma para el desarrollo de la interfaz y concepto en general de una aplicación.. 1.3 DISEÑO DIGITAL. De acuerdo a la página web www.iberopuebla.mx (2015) El Diseño Digital es una actividad que permite utilizar a la computadora como un medio de comunicación, por medio de la creación de aplicaciones de cómputo tales.

(12) 25. como: diseño de interactivos y sitios web, así como recorridos virtuales y animación en 2 y 3 dimensiones Por otra parte Jaen (2013) expone que el diseño es fundamental para atraer la atención de los usuarios. El uso de imágenes, animaciones, videos y acciones interactivas resulta indispensable para enriquecer la página, no obstante lo más importante es la información básica sobre la marca, los productos, los servicios y cómo están presentados. En resumen a esto, es la acción de diseñar a través de herramientas tecnológicas como programas de computación o tablas digitalizadoras, donde se dan uso a imágenes, animaciones o videos para crear material gráfico digital.. 1.3.1. DISEÑO INTERACTIVO. En su libro, Diseño de sistemas interactivos centrados en el usuario Toni Granollers, Saltiveri y otros, (2011) nos habla de esta disciplina relacionada con el diseño, evaluación e implementación de sistemas informáticos interactivos para el uso de seres humanos, y con el estudio de los fenómenos más importantes con los que está relacionada. Al mismo tiempo Mayra Gonzales (2014) explica que este tipo de diseño suele ser confundido con la programación por computador y el diseño gráfico, pero son diferentes, ya que tiene cierta asociación con el diseño de software, web y centrado en el usuario, el cual se basa en la creación de productos que resuelvan ciertas necesidades de manera que se logre una mayor satisfacción y una mejor experiencia de uso. En conclusión, se.

(13) 26. determina que es un conjunto de disciplinas que une diversos conceptos asociados con el diseño gráfico y la programación para generar documentos con elementos multimedia a través de los cuales los usuarios pueden interactuar.. 1.3.1.2. DISEÑO DE LA INTERFAZ DE USUARIO. Sommerville, I. y otros (2005) indican que es un proceso interactivo donde los usuarios interactúan con los diseñadores y prototipos de la interfaz para decidir las características, organización, apariencia y funcionamiento de la interfaz de usuario de sistema. A veces, se construye el prototipo de la interfaz por separado en paralelo con otras actividades de la ingeniería del software. De forma abreviada en inglés, también se le denomina User interface (UI). Los elementos que componen la interfaz, son funcionalmente independientes y están conectados de forma indirecta al programa. Lacalle, A (2006) Al momento de iniciar el diseño de la interfaz de usuario, se debe de tomar en cuenta determinados elementos:. (A). GRÁFICO RASTERIZADO O MAPA BITS. Son imágenes bitmap generadas por una matriz de píxeles coloreados propias del programa o bien importadas mediante diferentes procedimientos: fotografías digitales, escaneados o programas de tratamiento de imágenes como Photoshop. MEDIA active 2010..

(14) 27. Imágenes de trama, utilizan píxeles para representar las imágenes. Un píxel es el elemento más pequeño de una imagen digital. Las imágenes de mapa bits pueden clasificarse en función de la cantidad de información asignada a cada pixel. Consejo superior de investigaciones científicas (2006).. (B). IMÁGENES VECTORIALES. El concepto de imagen vectorial está vinculado a la imagen digital que se compone de objetos geométricos independientes. Las características de estos objetos, que pueden ser segmentos o polígonos, están definidas por. atributos. matemáticos. que. indican. su. color,. posición,. etc.. www.definición.de (2015). Las. imágenes. vectoriales. son. representaciones. de. entidades. geométricas tales como círculos, rectángulos o segmentos. Están representadas por fórmulas matemáticas (un rectángulo está definido por dos puntos; un círculo, por un centro y un radio; una curva, por varios puntos y una ecuación). El procesador "traducirá" estas formas en información que la tarjeta gráfica pueda interpretar. es.ccm.net (2015)..

(15) 28. (C). RESOLUCIÓN DE UNA IMAGEN. Es el grado de detalle de una imagen digital ya sea escaneada, fotografiada o impresa. Este valor se expresa en PPP (píxeles por pulgada) o en inglés dpi (dots per inch). Cuantos más píxeles contenga una imagen por pulgada lineal, mayor calidad tendrá. www.ite.educacion.es (2008). La resolución de una imagen es la cantidad de píxeles. La resolución se utiliza también para clasificar casi todos los dispositivos relacionados con las imagen digital, ya sean pantallas de ordenador o televisión, impresoras, escáneres, cámaras digitales, etc. www.fotonostra.com (2015). (D) RESOLUCIÓN DEL MONITOR. La resolución de pantalla es el número de píxeles que se muestran en nuestro monitor, manifestado a través de la multiplicación de los píxeles horizontales y los verticales. Entender esto es muy importante para poder controlar diversas funciones de nuestro equipo. www.tecnocosas.es (2015).. La resolución de pantalla es la medida en pixeles del ancho y la altura de la pantalla ya sea de un monitor de computadora o de la pantalla de una tableta o teléfono celular. No tiene nada que ver con la medida física de. este,. que. se. expresa. www.norfipc.com (2015).. en. pulgadas. medidas. en. diagonal..

(16) 29. (E) TAMAÑO DEL ARCHIVO. El tamaño de archivo mide el tamaño de un archivo de ordenador. Normalmente se mide en bytes con un prefijo. La cantidad real de espacio en disco consumida por el archivo depende del sistema de archivar ligeramente dependiendo de la capacidad exacta del disco y el sistema de archivos utilizado. Coria, D (2013). El tamaño de un archivo es la cantidad de información que contiene, medida en bits. El tamaño de un archivo que contenga una imagen digital depende del número de píxeles de la imagen y del número de bits utilizados para representar el color de cada pixel. RODIL (2010).. (F) USO DEL COLOR EN EL DISEÑO DE LA INTERFAZ. De acuerdo a lo que comunica Ruíz, E (2007) el color es quizás el elemento de la interfaz que con mayor frecuencia se emplea mal. El color comunica información. El color debe atraer la atención, pero no cansar. Es especialmente importante seguir las líneas de diseño existentes. Hay un principio básico, que es diseñar primero en blanco y negro, y luego añadir el color. El uso del color apropiado puede ayudar a la memoria del usuario y facilitar la formación de modelos mentales efectivos. El uso efectivo del color puede ser una herramienta poderosa. Sin embargo, el uso inefectivo del color puede degradar el desempeño de una aplicación y disminuir la.

(17) 30. satisfacción del usuario. Debido a estos factores, el uso efectivo del color en interfaces de computadora es un importante tópico en HCI que requiere ser examinado. cuando. consideramos. el. diseño. de. una. interfaz.. www.colordiu.galeon.com (2015).. (G) DIAGRAMACIÓN. Según Cedeño (2009) la diagramación corresponde al acto de distribuir elementos en un espacio determinado y la organización de contenidos escritos, visuales y audiovisuales. Diagramar es distribuir, organizar los elementos del mensaje bimedia (texto e imagen) en el espacio bidimensional (el papel) mediante criterios de jerarquización (importancia) buscando funcionalidad del mensaje (fácil lectura) bajo una apariencia estética agradable (aplicación adecuada de tipografías y colores). www.diagramacionteoria.blogspot.com (2010). 1.4 MAPA DE NAVEGACIÓN. Según Vittone, J y Cuello, J (2013) definen que la estructura seguida en una aplicación multimedia es de gran relevancia pues determina el grado de interactividad de la aplicación, por tanto la selección de un determinado tipo de estructura para la aplicación condicionará el sistema de navegación seguido por el usuario y la posibilidad de una mayor o menor interacción con la aplicación. Los sistemas de navegación más usuales en relación a.

(18) 31. estructura. de. las. aplicaciones,. de. acuerdo. a. www.tecnoologiascie.blogspot.com (2015) son:. 1.4.1. ESTRUCTURA LINEAL. El usuario sigue un sistema de navegación lineal o secuencial para acceder a los diferentes módulos de la aplicación, de tal modo que únicamente puede seguir un determinado camino o recorrido.. 1.4.2. ESTRUCTURA JERÁRQUICA. Se utiliza el hipertexto para permitir que el usuario tenga total libertad para seguir diferentes caminos cuando navega por el programa, atendiendo a sus necesidades, deseos, conocimientos, etc. Sería la más adecuada para las aplicaciones orientadas a la consulta de información, por ejemplo para la. realización de una enciclopedia electrónica. Sin embargo, esta estructura en red se suele identificar con un determinado tipo de relaciones eminentemente asociativas y semánticas.. 1.4.3. ESTRUCTURA JERÁRQUICA-LINEAL. También denominada estructura "en árbol",. "arborescente" o. compuesta, constituye el clásico modelo de organización temática de la información que refleja la subordinación o dependencia de unos.

(19) 32. conocimientos respecto de otros, así como el orden que va de lo general a lo particular, en la cual el usuario navega libremente y de forma no lineal, pero también están limitados en algunos momentos por itinerarios prefijados.. 1.4.4. ESTRUCTURA CONCÉNTRICA. Este modelo, también denominado "collar de perlas", organiza una serie de secuencias lineales (A, B, C) en torno a un nodo de Entrada, pero sin permitir la navegación entre los nodos de un mismo nivel (A1, B1, C1), esta estructura es usada en juegos o ficciones interactivas.. 1.4.5. ESTRUCTURA HIPERMEDIAL. La estructura de un hipermedia es la misma que la de un hipertexto, formado por nodos que se conectan mediante. enlaces. La única. diferencia es que los nodos contienen elementos de diferentes medios o morfologías. Así pues, las anclas ya no sólo son palabras sino que pueden, por ejemplo, ser una imagen. o un fragmento de ella, o pueden ser una. secuencia de audio o de video. La estructura de un hipermedia es, pues, más compleja que la de un hipertexto. La interacción de los diferentes.

(20) 33. medios y la sincronización entre ellos suele ser uno de los aspectos más complejos en el desarrollo de aplicaciones multimedia.. 1.4.6. ESTRUCTURA RETICULAR. Lo propio de las estructuras en red, malla o telaraña es la articulación de cada uno de los nodos, con todos los restantes, permitiendo así el máximo grado de flexibilidad en la navegación. Esta es precisamente la estructura de la Web (literalmente telaraña), que como ocurre en todas las aplicaciones que no privilegian trayectorias de navegación dejando gran libertad al usuario, tiende a generar experiencias de navegación frustrantes. La paradoja que se plantea en diseño de comunicación interactiva consiste en ofrecer al usuario las suficientes opciones como para que exista navegación y, al mismo tiempo, limitar los trayectos posibles para que la navegación sea eficaz.. 1.4.7. ESTRUCTURA PARALELA. En este modelo se representan una serie de secuencias lineales (A, B, C) en las que es posible, además de la navegación lineal (a-A1-A2), también el desplazamiento entre los nodos de un mismo nivel (A1-B1-C1, A2-B2-C2, entre otros). En efecto, en ficciones interactivas este tipo de.

(21) 34. estructura resulta de utilidad para organizar varias acciones o puntos de vista de una misma historia que se desarrollan simultáneamente, permitiendo al usuario seleccionar en cada secuencia el punto de vista de cualquiera de los personajes intervinientes. Así pues los mapas de navegación se definen dependiendo de su estructura, cualquier menú de navegación se puede obtener a partir de un sistema de bases de datos con mayor o menor dificultad. La estructura de la información forma parte de una de las piezas fundamentales en la navegabilidad ya que influirá directamente en la forma en que los usuarios acceden a la información.. 1.5 NAVEGACIÓN EN LA INTERFAZ. Para Heinrichs (2005) los sitios web y los hipermedia son aplicaciones proyectadas para la navegación a través de un espacio de información estructurado de acuerdo a las necesidades de un usuario. Asimismo Rodríguez, A y Zárate,J (2010) Establecen que el término interfaz se utilizó para definir durante el siglo XIX una superficie entre dos porciones de materia o espacio que tienen un límite en común o en otras palabras un límite que permite la comunicación entre dos entes en este caso materiales, con un lenguaje común para su comunicación. De tal modo afirma: en el siglo XX la interfaz deja de ser un límite para convertirse en un elemento que propicia la comunicación, mientras en la.

(22) 35. actualidad tanto para usuarios como para diseñadores de sistemas la interfaz pasó a ser un instrumento a través del cual el sujeto manipula la máquina digital y obtiene lo que busca con la adquisición de un objeto tecnológico, comunicación digital. Así mismo expresan que la interfaz es un sistema pensado para recibir mensajes que termina siendo co-diseñada por el usuario quien la usa a su manera, la sobre interpreta, y la acomoda a su lógica mental, impidiendo así que el deseo de los diseñadores, dominar y hacer lo que ellos quieren. Por. tanto los parámetros de la. navegación. o interfaz estarán. condicionados por el tipo de información, la clase de opciones a realizar y el usuario, así de este modo pueden emplearse de forma aislada o combinada, siendo multidisciplinar que involucra varias ramas y conocimientos para el desarrollo del mismo. En suma, interfaz se entiende como un espacio donde se lleva a cabo la comunicación (interacción e intercambio) entre usuario y máquina. Donde las medidas a tomar para su comprensión son dadas por el tipo de contenido y este debe de presentarse de forma que sea una interpretación intuitiva para los usuarios el control de dicho contenido.. 1.6 WIREFRAME. Wireframing es una manera de diseñar un sitio web en el nivel estructural analizando las necesidades del usuario, así como la información que llevara dicho sitio. Los Wireframes se usan al inicio de un proceso de desarrollo para.

(23) 36. establecer la estructura básica de una página antes que el diseño visual y el contenido se agreguen ww.maquetando.com (2015) En diseño web también se les conoce cómo Prototipos de Baja fidelidad, StoryBoard, Schematics, Blueprints o Page Architecture y son un conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, sin elementos gráficos, de tal manera que implementan aspectos generales del sistema sin entrar en detalle, estos se deben realizar antes de empezar a programar y de crear el diseño visual de la página. Los Wireframes sirven como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes. También se pueden utilizar para pruebas de usuarios Leopoldo, C. (2008). 1.7 HIPERTEXTO. El conjunto de información en soporte multimedia que se estructura mediante enlaces entre los diversos elementos, de forma que el usuario puede acceder a ella de forma ágil y teniendo la posibilidad de establecer su propio itinerario de “lectura”. www.ite.educacion.es (2015) En informática, es el nombre que recibe el texto que en la pantalla de un dispositivo electrónico conduce a otro texto relacionado. La forma más habitual de hipertexto en informática es la de hipervínculos o referencia cruzadas automáticas que van a otros documentos. Si el usuario selecciona.

(24) 37. un hipervínculo el programa muestra el documento enlazado. www.ecured.cu (2015). 1.8.. MULTIMEDIA. Hofsteffer, F (2012), indica que la multimedia es el uso del ordenador para presentar y combinar: texto, gráficos, audio y video con enlaces que permitan al usuario navegar, interactuar y crear comunicación. La multimedia consiste en el uso de diversos tipos de medios para transmitir, administrar o presentar información. Estos medios pueden ser texto, gráficas, audio y video, entre otros. Cuando se usa el término en el ámbito de la computación, se refiere al uso de software y hardware para almacenar y presentar contenidos, generalmente usando una combinación de texto, fotografías e ilustraciones, videos y audio. En realidad estas aplicaciones tecnológicas son la verdadera novedad al respecto, y lo que ha popularizado el término, ya que se puede inferir la multimedia está presente en casi todas las formas de comunicación humana, de acuerdo a lo establecido por Multimedia CSJ (2011) En síntesis, mediante el uso de texto, gráficas, audio y video, entre otros, los usuarios pueden acceder a la información a través de una pantalla de un dispositivo ya sea un computador o los dispositivos móviles. recopilación en un dispositivo se denomina multimedia.. A esta.

(25) 38. 1.9 ELEMENTOS MULTIMEDIA. Pinto, M (2011) dice que cualquier aplicación, documento o sistema multimedia está constituido por elementos informativos de diferente naturaleza, que coinciden en una misma intencionalidad comunicativa; recrear una experiencia de percepción integral, a la que, cada uno de ellos, aporta sus capacidades expresivas características:. 1.9.1. TEXTOS. Los textos son mensajes lingüísticos codificados mediante signos procedentes de distintos sistemas de escritura. A pesar de ser uno de los medios de comunicación más clásicos y tradicionales, sobre ellos descansa la estructura conceptual y argumental básica de buena parte de los productos multimedia, gracias, a su potencia abstractiva y a que constituyen un método muy rápido, preciso y sistemático de transmisión de información. Los. textos. pueden. presentarse. en. secuencia. lineal. o. asociados. dinámicamente mediante enlaces hipertextuales. Por otro lado según www.guevaraguevara.blogspot.com (2012) Texto: sin formatear, formateado, lineal e hipertexto.. 1.9.2. GRÁFICOS. Los gráficos son representaciones visuales figurativas que mantienen algún tipo de relación de analogía o semejanza con los conceptos u objetos que describen. Pueden tener forma bidimensional o diagramas, esquemas,.

(26) 39. planos, cuadros, tablas o tridimensional figuras y dibujos que mediante el uso de la perspectiva y/o gradaciones cromáticas expresan tanto la anchura y la altura, como la profundidad. Facilitan la expresión y la comprensión de ideas abstractas proponiendo representaciones más concretas y accesibles. Según. www.guevaraguevara.blogspot.com. (2012). los. gráficos. son. utilizados para representar esquemas, planos, dibujos lineales. Se usan sobre todo para diseñar interfaces que simplifican a los usuarios el uso de las aplicaciones informáticas, proponiendo iconos –como el botón sobre el que se pulsa –que resuelven la necesidad de recordar secuencias de órdenes para realizar determinadas tareas, o metáforas que ayudan a desarrollar aplicaciones a comunidades de usuarios muy diversas. Una de las más famosas es la “metáfora del escritorio” desarrollada por Macintosh y popularizada más tarde por Microsoft en su sistema operativo Windows para representar gráficamente el área y las posibilidades de trabajo de un ordenador. Según. www.guevaraguevara.blogspot.com. (2012). los. gráficos. son. utilizados para representar esquemas, planos, dibujos lineales.. 1.9.3. ANIMACIONES. Las animaciones son presentaciones muy rápidas de una secuencia de gráficos tridimensionales, en un intervalo de tiempo tan pequeño que genera en el observador la sensación de movimiento. Aportan a las aplicaciones.

(27) 40. multimedia apariencia de veracidad y grandes dosis de expresividad, pues les permiten reconstruir seres del pasado, como los dinosaurios; fenómenos de naturaleza científica, como el comportamiento de los cometas en el sistema solar o el retroceso de los glaciares en la corteza terrestre; hechos históricos pretéritos, como la batalla de Trafalgar; situaciones reales, como el crecimiento de una planta, o simplemente, realidades culturales como los dioses y héroes mitológicos. Otro de sus grandes campos de aplicación es la creación de los efectos especiales en cine. Según www.guevaraguevara.blogspot.com (2012) la animación es la presentación de un número de gráficos por segundo que genera en el observador la sensación de movimiento.. 1.9.4. IMÁGENES. Las imágenes son representaciones visuales estáticas, generadas por copia o reproducción del entorno (escaneado de imágenes analógicas, fotografías digitales, etc.). Son digitales; están codificadas y almacenadas como mapas de bits y compuestas por conjuntos de píxeles, por lo que tienden a ocupar ficheros muy voluminosos. Junto con los textos, son el medio más utilizado en las aplicaciones multimedia para transmitir información. Dicha transmisión se facilita cuando las imágenes son nítidas (poseen alta definición o resolución), estables (están ausentes los parpadeos.

(28) 41. u oscilaciones) y su contemplación no se ve dificultada por reflejos o deslumbramientos. Según www.guevaraguevara.blogspot.com (2012) las imágenes son documentos formados por píxeles. Pueden generarse por copia del entorno (escaneado, fotografía digital) y tienden a ser ficheros muy voluminosos.. 1.9.5. VÍDEOS. Los vídeos son secuencias de imágenes estáticas –sintetizadas o captadas– codificadas en formatos digitales y presentados en intervalos tan pequeños de tiempo que generan en el espectador la sensación de movimiento. Según. www.guevaraguevara.blogspot.com. (2012). el. vídeo. es. la. presentación de un número de imágenes por segundo, que crean en el observador la sensación de movimiento. Pueden ser sintetizadas o captadas. En las aplicaciones multimedia, los vídeos convierten las pantallas del ordenador en terminales de televisión y resultan un medio óptimo para mostrar los atributos dinámicos de un concepto, de un proceso o de un acontecimiento, gracias a su secuencia y su capacidad para desarrollar líneas argumentales. Están desarrolladas de manera tal, que permiten al usuario interrumpir, reiniciar y volver a visionar las secuencias tantas veces como desee..

(29) 42. Según www.guevaraguevara.blogspot.com (2012) el sonido puede ser habla, música u otros sonidos.. 1.10. IMAGEN DIGITAL. Por su parte Rodríguez (2008) expone que la imagen digital está formada por un conjunto definido de puntos llamados píxeles, donde cada píxel almacena la información de su tono o luminosidad, asimismo afirma que dependiendo de si la resolución de la imagen es estática o dinámica, puede tratarse de un gráfico rasterizado o de un gráfico vectorial.. 1.11. DISPOSITIVOS MÓVILES.. Según Guevara (2010), los dispositivos móviles son aparatos de tamaño pequeño que cuentan con características tales como capacidades especiales de procesamiento, conexión permanente o intermitente a una red, memoria limitada, diseños específicos para una función principal y versatilidad para el desarrollo de otras funciones, tanto su potencia como su operación se asocia al uso individual de una persona, la cual puede configurarlos a su gusto. Para resumir, un dispositivo móvil es un tipo de computadora de tamaño pequeño, con capacidades de procesamiento, con conexión a Internet , con memoria, diseñado específicamente para una función, pero que pueden llevar a cabo otras funciones más generales..

(30) 43. Smash-Media (2012) divide los dispositivos móviles en los siguientes tipos:. 1.11.1. TELÉFONOS MÓVILES Y SMARTPHONES. Entre los dispositivos móviles son los más ligeros, portables y cómodos (económicamente hablando). Su principal función es permitir recibir y realizar llamadas; sin embargo, cada vez tienen mayores aplicaciones y funcionalidades (Smartphones) que los hacen más atractivos para los consumidores. Tales como mejor resolución en cámara de fotos, grabación de vídeos, videollamadas, GPS, lectura y edición de documentos, navegar por la web y más.. 1.11.2 PDA A TABLETS. PDA significa Personal Digital Assitant, sirven como organizadores electrónicos que contienen agenda, calendario y lista de contacto, con el paso del tiempo fueron modo creciendo y actualmente los conocemos como Tablet (o tabletas) sirven tanto como para leer libros hasta realizar videollamadas, pronto no serán muy diferentes a los teléfonos celulares..

(31) 44. 1.11.3. Son. VIDEOCONSOLA PORTÁTIL. dispositivos. diseñados. especialmente. para. jugar,. como. segundas opciones se puede escuchar música y almacenar información como fotos o archivos e incluso navegar en la Internet, se diferencian de las consolas normales puesto que son más simples, ligeras y transportables. Existen dos ejemplos en la actualidad que resaltan sobre los demás, el PSP o Play Station Portable y el Nintendo DS.. 1.11.4. REPRODUCTORES DE MÚSICA. El llevar la música de manera portátil no es una idea novedosa, los primeros dispositivos que graban música para luego ser reproducida en otro espacio/tiempo datan de finales del siglo XIX. Sólo para listar en orden que fueron inventados: . Fonógrafo (1877). . Gramógrafo (1888). . Tornamesa para Vinilos (50's). . Reproductor de casetes (60's). . Walkman. . DAT (reproductor de cinta de audio digital) por SONY. . Reproductores de CD (discman)..

(32) 45. . Reproductores digitales (El formato MP3 y WMA son los más. populares. ATRAC por Sony y AAC por Apple, etc.).. 1.11.5 COMPUTADORA PORTÁTIL. Fueron desarrolladas desde el año 1981 con la iniciativa de poder transportar información de un lugar a otro. El primer modelo es considerado el Epson HX-20 (a la mano derecha) hasta la diversidad de tamaños, formas, capacidades y colores que conocemos actualmente.. 1.12. PLATAFORMAS. Según Amate, Chema (2015) Los fabricantes de los teléfonos móviles pasaron del hardware al software. La salida a este cambio lo dio Apple en el 2007 con el primer iPhone y desde entonces han aparecido muchos candidatos como competencia. Del mismo modo según (González, 2010), actualmente existe una gran variedad de dispositivos móviles en el mercado, por lo que se hace necesario un estudio detallado de las prestaciones de algunos de ellos. Hay diferentes formas de clasificar a los dispositivos móviles pero debido a la naturaleza de este proyecto merece la pena clasificarlos según el sistema operativo que tienen instalado. Con esto podríamos resumir que existen diversas plataformas para dispositivos móviles en el mercado, partiendo todas de la invención de Apple.

(33) 46. en el 2007 con el primer IPhone, dando como resultado una revolución tecnológica naciendo a su vez una gran gama de plataformas.. 1.12.1. IOS. Lo que caracteriza a iOS frente a otros es que es un sistema operativo cerrado. Apple no permite que se modifiquen características internas del sistema más allá de las limitadas opciones que da en los ajustes. Un sistema cerrado permite, sin embargo, ofrecer siempre una experiencia más estable y segura tal y como diseñó el fabricante en un principio. Sin embargo a muchos usuarios, que buscan una mayor personalización, se le puede quedar cortas las opciones que le da Apple. Por otro lado, como también suele ser habitual en los productos de la empresa, no se licencia a terceros por lo que tan solo los iPhone disponen de este sistema operativo.. 1.12.2. ANDROID. El sistema operativo número uno en cuanto a popularidad. Con una cuota de mercado cercana al 85% el sistema operativo de Google se caracteriza por ser abierto y disponible para cualquier fabricante interesado en utilizarlo para sus dispositivos móviles. Esta disponibilidad ha creado sin embargo una.

(34) 47. gran fragmentación, pudiéndose encontrar innumerables dispositivos de miles de formas y funcionalidades con todas las versiones de Android existentes. Además la posibilidad de que cada fabricante incluya su propia capa sobre el original, propicia que la experiencia de usuario no sea siempre la deseada por Google y las actualizaciones tardan en llegar.. 1.12.3. WINDOWS PHONE. Microsoft que está realizando un gran esfuerzo financiero para posicionar Windows Phonecomo una tercera opción interesante para los consumidores después de que llegara tarde a la fiesta de los Smartphone. Su alianza con Nokia y su posterior compra le ha ayudado a darse a conocer mejor e ir arañando cuota de mercado a los dos líderes. Los últimos datos hablan de un 2,5% a nivel mundial. Con un diseño radicalmente distinto a las dos opciones ya comentadas, Windows Phone destaca por su pantalla de inicio personalizable que ofrece las notificaciones de las apps de una manera sencilla y limpia. Además,. ofrece. una. experiencia. de. usuario. muy. buena. independientemente del tipo y gama de terminal en que se esté usando. Aunque con menos apps disponibles que en Android y iOS, Windows Phone 8.1, cuenta ya con más de 300.000 apps en su tienda, además de ofrecer aplicaciones propias de la compañía como Skype, OneDrive o Xbox Live..

(35) 48. 1.12.4. FIREFOX OS. Un sistema operativo basado en HTML5 con núcleo Linux, de código abierto. Desarrollado por Mozilla Corporation con apoyo de empresas como Telefónica. El sistema operativo está basado en Linux y usa la tecnología de Mozilla, Gecko. Se basa en estándares abiertos como por ejemplo HML5, CSS3 y JavaScript. Pensado para ser un sistema operativo realmente abierto, a diferencia de Android, donde Google controla ciertos aspectos del sistema. Esta característica, permite a Firefox OS llegar a cubrir el nicho de mercado de la gama baja con mayor facilidad que Android. El anuncio hecho en febrero de este año de lanzar un smartphone por 25 euros va completamente en esa línea. Movistar ya lanzó hace más de un años los primeros smartphone con este sistema operativo en España y Latinoamérica.. 1.12.5. BLACKBERRY. BlackBerry anteriormente conocida como RIM no está pasando por sus mejores momentos. Al igual que le pasó a Nokia, el cambio de paradigma en los Smartphone le pillo con el pie cambiado. Acostumbrado a ofrecer terminales con teclado físico, el paso a las pantallas táctiles se le atragantó. Sin embargo, los esfuerzos realizados por la compañía canadiense para recuperar el terreno perdido han sido grandes y en el año 2012 lanzaron su.

(36) 49. órdago con un renovado sistema operativo el BlackBerry 10. Aun así, los últimos estudios sobre cuota de mercado lo dejan en tan solo un 0,5% mundial. BlackBerry 10 tiene una interfaz más fluida, un teclado inteligente y táctil más depurado y otra serie de opciones que lo acercan a las de la competencia. Al igual que con iOS, el SO es software propietario y solamente los teléfonos de la compañía llevan su sistema instalado.. 1.12.6. UBUNTU TOUCH. Otro sistema operativo basado en Linux pero en esta ocasión bajo la famosa firma Ubuntu. Presentado en el 2013, se trata de un proyecto de Canonical. En la actualidad varias empresas están desarrollando terminales para este sistema operativo, entre ellas la española Bq. Ubuntu Touchutiliza las mismas tecnologías de la versión de escritorio, por lo que ambas comparten apps sin problemas de compatibilidad. Dispone también de algunas de las aplicaciones más populares como Facebook y YouTube.. 1.12.7. TIZEN. Sistema operativo móvil, también basado en Linux, patrocinado por Linux Foundation y Fundación LiMo. Se ha desarrollado a partir de la plataforma Linux de Samsung. Aunque en un principio fue presentado como un SO de.

(37) 50. código abierto, Tizen 2 funciona con un sistema de licencias no abiertas. El SDK completo fue publicado bajo licencia de Samsung de código no abierto. Aunque pueda parecer que Tizenforma parte de la estrategia de Samsung a largo plazo, su apuesta errática por este sistema operativo hace que no se sepa muy bien qué pasará con él. De momento algunos de sus dispositivos ya lo incorporan como el caso del famoso smartwatch Samsung Gear S.. 1.12.8 Web OS. Este interesante sistema operativo, fue a Palm lo que BlackBerry 10 a RIM. Sin embargo, pese a las buenas críticas que cosechó este sistema operativo, no consiguió salvar la compañía. Tras la compra por parte de HP de la compañía Palm Inc., en la actualidad web OSes propiedad de LG que lo utiliza como sistema operativo para sus televisores inteligentes.. 1.13. APLICACIONES MÓVILES.. Según Luzardo, Ana (2009). El diseño y desarrollo de multimedios en línea o sitios web, orientados para dispositivos móviles; es un campo imprescindible que los diseñadores conozcan y exploren en él, siendo una posibilidad que está abierta a ser utilizada. Luzardo, Ana (2009). Igualmente, según Avilés, (2011), se trata de un software desarrollado para correr bajo Smartphones. Está diseñada para educar, entretener o ayudar en la vida diaria a sus usuarios/consumidores. Estas funcionalidades.

(38) 51. que antes sólo estaban disponibles en PC ahora pueden ser ejecutadas en los dispositivos móviles De acuerdo a esto resumimos este concepto como un Software el cual puede ser ejecutado en dispositivos móviles, que contiene gran labor de diseño y programación con el fin de educar, entretener o ayudar en la vida diaria a sus usuarios.. 1.13.1 TIPOS DE APLICACIONES MÓVILES. ●. Web. (ISPAMAT, 2007) Se entiende por aplicación móvil Web la que. necesitan de un navegador web o browser como IExplorer Mobile, Mínimo y Opera para ejecutarse. Aplicación y datos pueden residir remotamente en un servidor u obtenerse del mismo dispositivo móvil. En cuanto a desarrollo las Web son más sencillas de programar, permite que las actualizaciones sean transparentes al usuario y el desarrollador tiene todo el control de la misma al residir en servidor. ●. Nativas. (ISPAMAT, 2007) Aplicación nativa es aquella que se instala. en el propio dispositivo como cualquier otra aplicación y se desarrolla utilizando un lenguaje de programación compatible con el sistema operativo del dispositivo o de un framework de desarrollo. En cuanto a desarrollo las aplicaciones nativas requieren un mayor esfuerzo de desarrollo, tanto en horas como en especialización del equipo. El dispositivo y los lenguajes.

(39) 52. utilizados son más limitados y complejos que el entorno servidor o desktop. Siempre que sea posible un desarrollo por terceros, ya que algunos sistemas operativos móviles no lo permiten.. 1.14. ARQUITECTURA DE LA INFORMACIÓN PARA MÓVIL. En relación con la World Wide Web, el InformationArchitectureInstitute define la Arquitectura de la Información como:  El diseño estructural en entornos de información compartida.  El arte y la ciencia de organizar y rotular sitios web, intranets,. comunidades en línea y software para promover la usabilidad y la ubicabilidad (la característica de ser encontrado a través de las búsquedas en Internet).  Una comunidad emergente orientada a aplicar al entorno digital los. principios del diseño y la arquitectura. La Arquitectura de la Información trata indistintamente del diseño de: sitios web, interfaces de dispositivos móviles o gadgets (como los lectores de mp3), CD interactivos, videoclips digitales, relojes, tableros de instrumentos de aviones de combate o civiles, interfaces de máquinas dispensadoras, interfaces de juegos electrónicos, etc. (Laverde, A. 2005). Su principal objetivo es facilitar al máximo los procesos de comprensión y asimilación de la información, así como las tareas que ejecutan los usuarios en un espacio de información definido..

(40) 53. Aplicando estos conceptos a la arquitectura de dispositivos móviles se determina que es una serie de métodos para la organización de información contenida en una aplicación, con el fin de facilitar los procesos de comprensión y manipulación de la misma.. 1.15 INTERFAZ GRÁFICA DE USUARIO PARA MÓVILES. Las interfaces gráficas de usuario para móviles facilitan la interacción con el usuario y el diseño de la presentación visual de la aplicación. Los servicios que incluye son el de componentes gráficos (botones, pantallas, listas, etc.) y el del marco de interacción. Aguirre, L & Cinche, H (2013). Por otro lado, Pressman, R (2010), en su libro Ingeniería del software, un enfoque práctico, comenta que el diseño de la interfaz de usuariocrea un medio eficaz de comunicación entre los seres humanos y la computadora. Siguiendo un conjunto de principios de diseño de la interfaz, el diseño identifica los objetos y acciones de ésta y luego crea una plantilla de pantalla que constituye la base del prototipo de la interfaz de usuario. En suma, se determina que la interfaz gráfica es el rostro de una aplicación móvil el cual es el puente de comunicación entre el dispositivo y el usuario..

(41) 54. 1.15.1. EXPERIENCIA DEL USUARIO. Fatdux, (2013) define que la experiencia de usuario (UX) representa la percepción dejada en la mente de alguien después de una serie interacción entre la gente, dispositivos y eventos o una combinación de esas. De acuerdo a esto se puede explicar la experiencia del usuario como una visión subjetiva que obtiene una persona luego de experimentar una situación determinada, en este caso, el uso de una aplicación.. 1.15.2. INTERFAZ COMO MEDIO DE COMUNICACIÓN. Según Rovayo, (2016), las interfaces básicas de usuario incluyen elementos como menús, ventanas, contenido gráfico, cursor, los sonidos, en general, todos aquellos canales por los cuales se permite la comunicación entre el ser humano y el dispositivo.La mejor interacción humano-máquina es a través de una adecuada interfaz (de usuario), que le brinde tanto comodidad, como eficiencia.. 1.15.3 TAMAÑOS DE PANTALLAS DE DISPOSITIVOS MÓVILES. Desde la llegada de los smartphones, la pantalla de un teléfono móvil ha sufrido una evolución pocas veces vista en cualquier otro componente de un dispositivo portátil. Las pantallas han evolucionado notablemente en.

(42) 55. su tecnología. Al principio, hace años, contábamos con pantallas táctiles resistivas y capacitivas: las primeras hacían uso de la presión del dedo para poder funcionar, no soportaban funciones multitáctiles, eran gruesas y de respuesta lenta. Las capacitivas cuentan con menos capas, hacen uso de nuestro dedo como puntero gracias al principio eléctrico de la capacitancia, son más rápidas y soportan múltiples dedos a la vez. Los primeros smartphones se movían en un rango que comprendía las 3 y las 4 pulgadas. Luego se estableció el nuevo estándar que superaba las 4 pulgadas. Mundo Galaxy (2014). Hoy en día, escoger tamaño de pantalla es cuestión de necesidades y preferencias.. 1.15.3 RESOLUCIÓN MÓVIL La. resolución. determina. el. número. de. horizontalesque puede mostrar una pantalla;. líneas. verticales. y. Por ejemplo, con poca. resolución y gran tamaño, la calidad de sus detalles será bastante pobre, justo al contrario que si contamos con una pantalla de alta resolución y tamaño normal o reducido. Xatakandroid, (2012). Se puede determinar que la resolución de una pantalla en conjunto con su tamaño puede ofrecer imágenes de calidad baja u optima.

(43) 56. 1.15. SOFTWARE PARA EL DISEÑO DE INTERFAZ GRÁFICA DE. USUARIO. 1.15.1 ADOBE PHOTOSHOP. Adobe Photoshop es un editor de gráficos rasterizados desarrollado por Adobe. SystemsIncorporated.. retoquedefotografías. Usado. y gráficos, su. principalmente. para. el. nombre en español significa. literalmente "taller de fotos". Es líder mundial del mercado de las aplicaciones de edición de imágenes y domina este sector de tal manera que su nombre es ampliamente empleado como sinónimo para la edición de imágenes en general.. 1.15.2 ADOBE ILLUSTRATOR. Adobe Illustrator es un editor de gráficos vectoriales en forma de taller de arte que trabaja sobre un tablero de dibujo, conocido como mesa de trabajo y está destinado a la creación artística de dibujo y pintura para ilustración (ilustración como rama del arte digital aplicado a la ilustración técnica o el diseño gráfico, entre otros) por esto facilitará la realización del rediseño de la interfaz gráfica..

(44) 57. 1.15.3. ADOBE FIREWORKS. Adobe Fireworks (anteriormente llamado Macromedia Fireworks) es un editor de gráficos vectoriales y mapas de bits. Fue originalmente desarrollado usando partes de Macromedia xRes, la cual había sido adquirida por Adobe en 2005. Fireworks está pensado para que los desarrolladores web puedan crear rápidamente interfaces web y prototipos de websites. El programa tiene la capacidad de integrarse con otros productos de Adobe tales como el Dreamweaver o Flash. Está disponible de forma individual o integrado en la AdobeCreative Suite. En la Suite de Adobe se identifica por usar el color amarillo, color que venia usando como representación desde que pertenecía a Macromedia.. 1.15.4 ADOBE FLASH. Adobe Flash Player es una aplicación informática del género reproductor multimedia. Fue creado inicialmente por Macromedia y actualmente distribuido por Adobe Systems. Permite reproducir archivos en formato SWF, creados con la herramienta Adobe Flash,2 con Adobe Flex o con otras herramientas de terceros. Estos archivos se reproducen en un entorno determinado. En un sistema operativo tiene el formato de aplicación del sistema, mientras que si el entorno es un navegador, su formato es el de un Plug-in u objeto ActiveX..

(45) 58. Flash Player tiene soporte para un lenguaje de programación interpretado conocido como ActionScript (AS) basado en el estándar ECMAScript. Desde su origen AS ha pasado de ser un lenguaje muy básico a un lenguaje avanzado con soporte de programación orientada a objetos, comparable en funciones y uso al lenguaje JavaScript (también basado en ECMAScript). Originalmente creado para mostrar animaciones vectoriales en 2 dimensiones, ha pasado a convertirse en la opción preferida a la hora de crear aplicaciones Web que incluyen flujo de audio y video e interactividad.. 1.15.5. AXURE RP. Es una herramienta profesional que permite crear wireframes para hacer el pre-diseño de una página web. Disponible tanto para plataforma Windows como Mac. Puedes dibujar tanto wireframes estáticos como interactivos que simulan una experiencia de navegación del usuario real. Tiene una función de colaboración para compartir las maquetas Web con otras personas y poder recibir feedback en tiempo real.. 2. BASES LEGALES. A medida que se vaya desarrollando el rediseño de la interfaz gráfica, se presentan ciertos aspectos legales los cuales serán considerados al.

(46) 59. momento de realizar dicho tipo de aplicación móvil, y servirán de protección legal para los mismos. Hemos de reseñar que los diferentes artículos de la ley de derecho de autor fueron aplicadas a este proyecto, ya que en los mismos se habla de lo que debe regir una obra de ingenio sea cual sea. Planteando que la misma se considera como tal por haber sido concebida por el autor, y ya que en este caso se habla de una aplicación móvil ésta será accesible a todo el público universitario por lo tanto debe cumplir ciertos artículos que aplican a dicha investigación.. 2.1 LEY DE DERECHO DE AUTOR. (Gaceta Oficial N° 4.638 Extraordinario de fecha 1 de octubre de 1993) Del capítulo I, de los derechos protegidos, en la sección primera, de las obras de ingenio: ART 1° y 2°. Donde se encuentra estipulado cuales son los tipos de obra en las que el autor se encuentra protegido, estas varían desde las de índoles literario hasta el científico, en cualquiera de sus formas de expresión, género, método o destino. Del mismo capítulo, en la sección segunda, de los autores, se encuentra que: ART 6°. El cual explica minuciosamente desde qué comento se encuentra protegida la obra, expresando que una obra se considera creada a partir del momento de la formulación del pensamiento del autor, así esta quede.

(47) 60. inconcluso. Así como también se considera “divulgada” al momento de encontrarse accesible al público, y ya está “publicada” cuando ya está reproducida en forma material. Aún presente en el capítulo y en la sección tercera, de las obras audiovisuales resalta lo siguiente: ART 12°. Se entiende como “obra audiovisual” las creaciones que contengan imágenes con o sin sonidos, que puedan ser proyectadas a través de aparatos de proyección, Esta ley protege a la persona o personas físicas que realizan la creación intelectual de la obra. Como coautores, se definen: El director, el autor del argumento, el del guión y de la música. En la sección quinta del mismo capítulo, de los programas de computación: ART 17°. Está definido. un programa de computación como: la. expresión artística en cualquier modo, lenguaje, narración o código, con el fin de ser ejecutado en un computador u ordenador. En dicho artículo también está presente la función de un productor, que sería la de tomar la iniciativa y la responsabilidad de realizar la obra..

(48) 61. 2.2.1. LEY DE PROPIEDAD INTELECTUAL. ART 1°. Hecho generador: es correspondiente del autor la propiedad intelectual de una obra literaria, científica o artística por el solo hecho de su creación. ART 2°. La propiedad intelectual está compuesta por los derechos de carácter personal y patrimonial, los cuales le atribuyen al autor la plena disposición y el derecho exclusivo a la explotación de la obra sin limitación alguna.(Gaceta Oficial N° 5.481,13 de abril 1997). Finalmente, las autores del presente proyecto concluyen que el derecho de autor y la propiedad intelectual son esenciales para la creatividad humana al ofrecer a los autores incentivos en forma de reconocimiento y recompensas económicas equitativas. Este sistema de derechos garantiza la divulgación a los creadores de este proyecto sin temor a que se realicen copias no autorizadas o actos de piratería. A su vez, ello contribuye a facilitar el acceso y a intensificar el disfrute de los conocimientos, la comunicación y el entretenimiento en la comunidad estudiantil, docente y personal administrativo.. 2.3. LEY DE INFORMÁTICA. ART 17°. Se entiende por programa de computación a la expresión en cualquier modo, lenguaje, notación o código, de un conjunto de instrucciones.

(49) 62. cuyo propósito es que un computador lleve cabo una función de una tarea determinada, cualquiera que sea su forma de expresarse o el soporte material en el que se haya realizado la fijación. El productor del programa de computación es la persona natural o jurídica que toma la iniciativa y la responsabilidad de la realización de la obra, en las líneas generales, el instrumento general citado en sintonía con las legislaciones más avanzadas en la materia y protege la propiedad intelectual de las personas en sus diferentes manifestaciones, de tal forma que su contenido se adapta a las nuevas realidad de la tecnología. En el caso de que una determinada obra sea publicada o divulgada por personas distintas a su autor, este tiene derecho a ser reconocido como tal, determinar que la obra lleve indicaciones del autor y en su caso, la indicación correspondiente, de lo contrario se estaría cometiendo un delito contra la propiedad intelectual. En conclusión, las autoras del presente estudio determinan que al igual que el derecho de autor y la propiedad intelectual el sistema de derechos garantiza a los creadores del proyecto la protección por parte de la ley solo que esta va directamente a lo que son proyectos informáticos y programación ya que el productor del programa de computación es la persona natural o jurídica que toma la iniciativa y quien es responsable de la realización de la obra..

(50) 63. 3.. ESTUDIOS DE CASOS. El estudio de casos se realiza con la finalidad de comparar algunas propuestas realizadas previamente de aplicaciones móviles para otras universidades del mundo. En este mismo orden de. ideas, lo principal es recopilar toda la. información posible sobre casos similares de aplicaciones móviles que informen sobre el tema de la estructura, el diseño, funcionalidad, entre otros aspectos, como un indicio de pruebas ya realizadas.De esta forma se podrá mejorar la concepción del producto a realizar con la mínima expresión de errores, logrando así obtener referencias variadas que permitan también determinar cuáles son las debilidades, fortalezas, amenazas y oportunidades que ofrece el producto en el mercado.Estas serán tomadas en cuenta al momento de presentar el trabajo final. A continuación se muestran cinco casos de estudio que servirán como base de investigación:.

(51) 64. Cuadro N° 1. Hernández y Unda 2016.





(56) 69.

(57) 70. 4. MÉTODOS DE DISEÑO. Todo diseño nace de un estudio sobre el problema que se presenta y el cual se pretende solucionar. En este tipo de investigación se tiene que realizar el rediseño de la aplicación ya existente por lo tanto se deben llevar a cabo procedimientos de análisis y estudio para que las fallas a nivel de diseño y navegación sea resueltas, bajo un proceso esquematizado y bajo un orden definido. La creatividad no significa propiamente improvisación sin algún método, es necesario seguir una serie de pasos ya que de otro modo sólo se generaría confusión. De esta forma se crea la manera del desarrollo de dicho servicio como lo es la aplicación móvil mediante una serie de pasos que se rigen por las reglas del diseño para así convertirlo en un instrumento operativo y funcional.. 1.1 MÉTODO DE DISEÑO POR BRUNO MUNARI. Dicho autor ha fomentado una gran línea en el proceso investigación y de los pasos a seguir en el campo creativo, desde la primera entrevista con un cliente hasta la entrega del arte final, un método de diseño eficaz contemplando los siguientes pasos: (A) Definición del problema: Se debe definir el problema en su conjunto. (B) Elementos del problema: Se descompone el problema en sus elementos. Esta operación facilita la proyección porque tiende a descubrir los pequeños problemas particulares que se ocultan tras los sub-problemas..

(58) 71. (C) Recopilación de datos: Se recolecta la información que pueda ser de ayuda en la creación del diseño, esto a través de los estudios de casos que han de realizarse. (D) Análisis de datos: Se analizan los datos recogidos para proporcionar sugerencias sobre qué es lo que hay que hacer para proyectar bien, esto puede orientar la proyección hacia otros materiales, otras tecnologías y otros costos. (E) Creatividad: Se proponen soluciones que se mantengan en los límites del problema, límites derivados del análisis de los datos y de los subproblemas. (F) Materiales-Tecnología: Se recopilan datos relativos a los materiales y tecnologías que el diseñador tiene a su disposición a la hora de realizar el proyecto. (G) Experimentación: Se experimenta con los materiales y las técnicas disponibles para llevar a cabo el proyecto. (H) Modelos: Se extraen muestras, pruebas, información, que pueden llevar a la construcción de modelos demostrativos de nuevos usos para determinados objetos. Estos nuevos pueden ayudar a resolver subproblemas parciales que a su vez, contribuirán a la solución global. (I) Verificación: Se presenta el modelo a un determinado número de probables usuarios para que emitan un juicio sincero sobre el objeto en cuestión. Sobre la base de estos juicios, se realiza un control del modelo para ver si es posible modificarlo..

(59) 72. (J) Dibujos Constructivos: Se realizan dibujos constructivos que servirán para comunicar a una persona que no esté al corriente del proyecto, sobre todas las informaciones útiles para preparar un prototipo.. MODELO N°2 SÍNTESIS DEL MÉTODO DE BRUNO MUNARI (1983). Gráfico N° 1 por: Hernández &Unda (2016).. 4.2. MÉTODO DE DISEÑO POR JOAN COSTA. El método de diseño elaborado por Joan Costa (1994), puede ser utilizado por los diseñadores, en cualquiera de sus áreas, que tiene como referencia.

(60) 73. la obtención del producto a través de sus cuatro leyes que desarrollan el mensaje y la comunicación. Según Costa (1994), es necesario definir el proceso, según el enfoque comunicacional del diseño que usualmente contiene dos elementos esenciales. Principiouno: El diseño no es el producto o el mensaje. No es la manifestación material de formas visuales, sino el proceso que conduce a la obtención del producto al mensaje. Principio dos:No todas las formas de diseño no son comunicaciones. El proceso de diseño consiste en: . Información y documentación: se recopila toda la información. necesaria. . Expansión del problema: también llamada digestión de los datos, es. aquí donde se presenta la maduración y elaboración.  sea. Idea Creativa: surgimiento de ideas con carácter de originalidad que la. solución. del problema. presentado. Verificación:. formulación,. comprobaciones y correcciones de ideas . Formulación: se procede a visualizar, plasmar y realización de. prototipos de la idea. Todas estas etapas del proceso llevaran a la difusión de la idea y así mismo del mensaje..

(61) 74. MODELO N°2 SÍNTESIS DEL MÉTODO DE COSTA JOAN (1994). Gráfico N° 2 por: Hernández &Unda (2016).. 4.3. MÉTODO DE DISEÑO POR JORGE FRASCARA. Para Frascara, el diseño de comunicación visual no debe adoptar métodos aparentemente científicos para adquirir mayor validez, sino que puede beneficiarse con un estudio de los métodos, entendidos como medios para desarrollar una práctica más eficaz y efectiva. Frascara señala que al diseñar se debe de ver el problema desde el punto de vista humano y no del modo visual, puesto que se puede obtener una mejor planificación de los mensajes visuales, teniendo en cuenta la compleja conducta de las personas para poder persuadir de una manera eficaz. El método empleado por Frascara está constituido por seis pasos: (A) Identificación del proceso. (B) Identificación del segmento de público..

(62) 75. (C) Definición del perfil del segmento. (D) Definición de objetivos y estrategias comunicacionales. (E) Definición de los argumentos verbales y visuales. (F) Definición de las medidas de apoyo a la acción comunicacional. Además, el autor agrega que al diseñar se debe hacer una investigación sobre el producto, para luego identificar el tipo de público o usuario al que será dirigido, resaltando las características principales del público, que técnicas se van a utilizar como la psicología del color, tipografía, entre otras; el mensaje tiene que estar acompañado de imágenes que representen la idea a comunicar.. MODELO N°3 SÍNTESIS DEL MÉTODO DE JORGE FRASCARA (1965). Gráfico N°3 por: Hernández &Unda (2016)..

(63) 76. 4.4. MÉTODO DE DISEÑO POR MORRIS ASIMOW. Según, Morris (1962), describe la tonalidad el proceso de diseño, consiste en la recolección, manejo y organización creativa de información distinguida de la situación del problema, determina las decisiones que son optimizada, comunicadas y probadas de esta manera, tiene carácter interactivo.. MODELO N°3 SÍNTESIS DEL MÉTODO MORRIS ASIMOW (1962). Gráfico N° 4 por: Hernández &Unda (2016)..

(64)