Programacion de aplicaciones móviles con Unity Mobile
Esta vez les presento a ustedes esta herramienta para el desarrollo de aplicaciones móviles. Es Unity Mobile, la compañía Unity es una de las herramientas más importantes en el desarrollo de videojuegos en línea, tanto para móviles como para computadoras.
Unity muestra aquí como hacer tus aplicaciones más sencillas, pero además que los demás lo vean desde su móvil.
Para que puedas hacer tus aplicaciones ve primero a su sitio home.
En tu lado derecho superior hay opciones de idioma el cual tu puedes cambiar.
Ya en su página principal, ve a donde dice Login y tiene que aparecer esta página en donde tienes que ingresar
Aqui puedes ingresar de tres maneras:
Con un nombre usuario y contraseña.
Con tu Google (mail, blog, youtube).
Con tu cuenta de Facebook.
Ya que te registraste a Unity Mobile te aparece una interfaz como esta, en el cuál te muestra si quieres importar una dirección web o si deseas usar un template para iniciar hacer tus primeras aplicacaciones móviles.
Selecciona cualquier tempalte que aparece abajo, el que tu quieras.
En mi caso seleccione un template de un restaurante, no se preocupen cualquier template va a seguir este procedimiento. Ya que seleccionaron su template abajo aparece el botón next para continuar con los detalles de su template.
En el siguiente cuadro son los colores que va tener tu aplicación, de cómo se va a ver en Internet. Puedes escoger los colores que tu desees.
En la siguiente pantalla te tiene que aparecer los detalles de tu aplicación, como: el nombre de la aplicación, dirección de tu empresa (compañía o institución educativa), teléfono y descripción acerca de la aplicación.
Los detalles varían de acuerdo de que tipo quieres tu aplicación.
Al final estará procesando la información acerca de tu aplicación. Este procedimiento puede tardar un poco, dependiendo del procesado.
Después te va a mostrar una interfaz como esta. El cual tú puedes hacer las modificaciones que le vas a aplicar como el cambio de botones, agregar los botones de Facebook y Twitter. Cambiar la interfaz, etc.
En la parte de arriba se ven estos botones:
Publish: publica tu aplicación con la dirección que esta arriba, esa será la dirección de tu aplicación.
Style: Boton donde puedes cambiar el formato de tu aplicación, como el cambio de fondo, de imagen, de color de imágenes, texto, etc.
How To: Es donde tu puedes conseguir ayuda acerca de como modificar tu aplicación
Más arriba, está el menú,
home: Es la página principal de tus aplicaciones en donde puedes observar las aplicaciones que has subido, las estadísticas que llevan tus aplicaciones, etc.
En la página que estás es Mobile Sites, es la página en donde tú editas tus aplicaciones.
Los otros dos son los centros de servicio y la ayuda que necesitas.
Luego que termines de editar tu primera aplicación dale en Publish y te aparecerá este cuadro.
Te va permitir que descargues tu código QR de tu aplicación, en el cuál, si tienes un smartphone, tu celular al tomarle una fotografía te va a ligar a la dirección web de tu aplicación automáticamente.
Luego dale en Descargar y abajo en tu navegador Chrome o se abrió la ventana de descargas (IE o Firefox) te descargo tu imágen QR de tu aplicación, el cuál puedes compartir con tus amigos y conocidos para que vean tu aplicación.
En este caso les mostrare una pequeño introducción a un curso de virtualización en 3D con la herramienta
llamado VRML.
Para este curso se necesita descargar estos programas para estas
visualizaciones en 3D:
Cortona 3D: Este simple programa te permite visulizar tu codigo vrml para observar tus resultados.
Para descargar este programa necesitas ir a este Sitio.
Cuando ingresas a esta página tiene que aparecer esto.
Encuentra en la página encuentra un vínculo que permita descargar Cortona 3D Viewer.Dale clic en Install Corona Viewer.A continuación aparecerá otra ventana, en donde dice las especificaciones que debe tener tu equipo, se puede observar que no necesitas tanta configuración. Puede descargar este visualizador para Sistemas Operatvo Windows para diferente arquitectura (32 y 64 btis).Para visualizar tus diseños solo necesitas tener un navegador web. Desde Internet Explorer, Google Chrome, Mozilla Firefox, Safari y Opera.
Un ejemplo sencillo para introducirlos a este pequeño curso de diseñ es de un cilindro.
#VRML V2.0 utf8
# Un cilindro
Shape {
appearance Appearance {
material Material {}
}
geometry Cylinder {
height 2.0
radius 1.5
}
}
Como se ha visto en este código
En este código se puede explicar todo acerca de la sintaxis que maneja WRML:
La primera línea significa que va utlizar la version 2.0 (actual) de VRML con la codificación de caracteres Unicode UTF8, que maneja México.
No se cuál es la codificación de caracteres Unicode que maneja tu país.
En la segunda línea se observa este caracter: #. El símbolo del gato significa comentario.
Solo puedes hacer un comentario por línea.
Por ejemplo
#Este es un
comentario
Cuando ejecutes tu codigo con estas líneas va a salir un error, entonces para corregir ese error tienes que modificarlo, ya sea:
#Este es un
#comentario
o
#Este es un comentario
En la tercera línea está la palabra reservada Shape que significa que es un nodo, y que además representa un bloque
de construcción del mundo VRML, se describe por:
Forma geométrica, con la palabra reservada geometry.
Una apariencia, con la palabra reservada appearance.
Entonces, la siguiente línea significa que va a crear una nueva apariencia que en la sección de geometry
se va a encargar de realizarlo. En nuestro ejemplo se ve a un lado de la palabra reservada geometry otra palabra
reservada: Cylinder, que es una primitiva que va a crear una figura geométrica representadas por los nodos de geometría como la caja, el cono, la esfera y, en este caso un cilindro.
Abajo se ve dos atributos que le va a dar un cilindro: la altura y el radio del circulo.
Por lo que ya sabemos la sintaxis de VRML para diseñar mundos virtuales.
Entonces ya guardado tu archivo con formato .vrl abrelo con un navegador web, y tiene que aparecer algo así:
Para hacer una caja (Box) Este nodo viene con la única especificación:
Box {
size 2 2 2
}
Los valores de tamaño que puede tomar es infinito, desde cero (0).
Para hacer un cono, esta es la sintaxis en VRML para hacerlo
#VRML V2.0 utf8
# Una caja
Shape {
appearance Appearance {
material Material {}
}
geometry Box {
size 2.0 0.5 3.0
}
}
Las especificaciones del nodo Cone son las siguientes:
bottomRadius 1
height 2
side TRUE
bottom TRUE
Esta el radio del circulo inferior, la altura del cono.
Además esta los valores booleanos si los lados y la zona inferior del cono son visibles.
Por defalult estos valores son verdaderos si no se colocan en la especificacion de esta figura.
#VRML V2.0 utf8
# Un cono
Shape {
appearance Appearance {
material Material {}
}
geometry Cone {
height 3.0
bottomRadius 0.75
}
}
Para la especificación de un circulo solo se necestia un valor flotante, que es el radio
Sphere {
radius 1.0
}
El código completo para hacer un circulo es el siguiente:
#VRML V2.0 utf8
# Una esfera
Shape {
appearance Appearance {
material Material {}
}
geometry Sphere {
radius 1.0
}
}
Texto en VRML
El nodo geométrico Text permite incluir texto en nuestro mundo VRML.
El texto en VRML es plano, nunca tiene glosor. El texto en este ambiente puede incluir el tipo de fuente, estilo, tamaño, etc.
La especificación del nodo Text es la siguiente:
Text {
String []
fontStyle NULL
lenght []
maxExtent 0.0
Los dos últimos campos pueden tomar valores desde cero hasta infinito.
El campo String [] va incluido el texto que va a mostrar en nuestro mundo.
El texto va estar incluido entre los corchetes y va entre comillas dobles.
Además, si quieres colocar otra linea solo hay que colocar una frase normal luego agregar el
una coma (,), luego ingresar otro texto entre comillas dobles, como por ejemplo:
Agregar el texto "Mundos Virtuales en la web" en dos líneas:
string ["Mundos virtuales ", "en la web"]
El atributo fontStyle incluye al nodo FontStyle,que va a incluir el formato de nuestro texto.
FontStyle {
family “SERIF”
horizontal TRUE
justify “BEGIN”
language “”
leftToRight TRUE
size 1.0
spacing 1.0
style “PLAIN”
topToBottom TRUE
}
Los atributos size y spacing son los atributos de tamaño y de espacio que le va a dar al texto.
Además este nodo te permite indicar la familia de texto: SERIF, SANS o TYPEWRITER.
Justificación – BEGIN, MIDDLE o END.
Estilo –BOLD, ITALIC, BOTH o NONE.
Tamaño.
Espaciado
#VRML V2.0 utf8
# Texto
Shape {
appearance Appearance {
material Material {}
}
geometry Text {
string [ “Mundos virtuales”,
“en la Web” ]
fontStyle FontStyle {
style “BOLD”
size 4
}
}
}
Ahora es momento de que tus VRML estén en tus páginas web, VRML publica mundos virtuales en la red es hacerlo como un objeto más de nuestra página web.
HTML tiene unas etiquetas que nos permite hacerlo como EMBED u OBJECT.
Al igual que los mundos VRML, las páginas Web son también ficheros de texto cuya Web son también ficheros de texto cuya extensión suele ser .htm o .html.
La etiqueta EMBED
Permite incluir información en las páginas Web que deba ser manejada por un plug-in, como por ejemplo un mundo VRML.
Sus parámetros nos permiten especificar el ancho y alto del espacio ocupado por el visor en la página, el color de fondo de la escena, si debe mostrarse la
barra de botones, etc.
Un ejemplo sería, crea un nuevo archivo HTML en la carpeta en donde guardas tus archivos VRML
<HTML>
<HEAD>
<TITLE>Incluyendo mundos VRML con EMBED</TITLE> <TITLE>Incluyendo mundos VRML con EMBED</TITLE>
</HEAD>
<BODY>
<H1>Mundos virtuales en la Web>
<EMBED SRC="box.wrl"
HEIGHT="200" WIDTH="200"
VRML DASHBOARD="FALSE"
VRML_BACKGROUND_COLOR="#000000"
CONTEXTMENU="FALSE">
</EMBED>
</BODY>
</HTML>
En la parte en donde dice box.wrl puedes cambiarle a otro archivo de mundo virtual.
Y este es el mundo virtual que anexo al blog:
La otra etiqueta es OBJECT que fue introducida por el WWW Consortium para la
inclusión de material multimedia en una página Web.
Los navegadores de Microsoft soportan esta etiqueta.
Además de WIDTH y HEIGHT, otro parámetro de esta etiqueta es CLASSID, el cual identifica el visor a utilizar. El resto de parámetros se especifican con etiquetas PARAM.
Ahora crea un nuevo archivo html y copia esta sintaxis:
<HTML>
<HEAD>
<TITLE>Incluyendo mundos VRML con OBJECT</TITLE>
</HEAD>
<BODY>
<H1>Mundos virtuales en la Web</H1>
<!--Aquí CLASSID identifica el control ActiveX Cortona-->
<OBJECT CLASSID= CLSID:"CLSID:86A8896-77A20-11d2-8EDA-00600818EDB1"
HEIGHT="200" WIDTH="200">
<PARAM NAME="SRC" VALUE="mundo.wrl">
<PARAM NAME="VRML_DASHBOARD" VALUE="FALSE">
<PARAM NAME="VRML_BACKGROUND_COLOR"VALUE="#000000">
<PARAM NAME="CONTEXTMENU" VALUE="FALSE">
</OBJECT>
</BODY>
</HTML>
Ábrelo con tu Internet Explorer.
Una forma de despreocuparse del navegador que utilizará el usuario final es emplear las dos etiquetas. Para evitar que un navegador que soporte las dos muestre dos veces nuestro mundo virtual, la solución es anidarlas.
Un ejemplo sería:
<HTML>
<HEAD>
<TITLE>Incluyendo mundos VRML con EMBED y OBJECT</TITLE>
</HEAD>
<BODY>
<H1>Mundos virtuales en la Web</H1>
<OBJECT CLASSID="CLSID:86A88967-7A20-11d2-8EDA-00600818EDB1"
HEIGHT="200"WIDTH="200">
<PARAM NAME="SRC" VALUE="box.wrl">
<EMBED SRC="box.wrl" HEIGHT="200" WIDTH=“200”>
</EMBED>
</OBJECT>
</BODY>
</HTML>
Mobl Es un lenguaje libre y abierto diseñado para
construir aplicaciones web móviles rápidamente.
La tecnología que usa es:
Spoofax: Mobl es construido usando Spoofax Language Workbench.
persistence.js: la persistencia de datos de las aplicaiones es realizada usando la librería ORM (Object-relational mapping) persistence.js
jQuery: el manejo de DOM (Document Object Model) es realizado usando jQuery.
La inspiración que usa Mobl es:
WebDSL: mobl toma mucho de la sintaxis y los conceptos de WebDSL.
Dominio: construcción de aplicaciones web.
Para descargarlo tienes que ir a su sitio. Hay para diferentes Sistemas Operativos, para Windows, Linux y Mac, dependiendo de la arquitectura de tu equipo de cómputo.
Puedes utilizar el eclipse para desarrollar aplicaciones en Android.
Ve al menu Help -> Install new Software.
Dale clic en el botón Add y en el campo direction copia esta dirección: http://www.mobl-lang.org/update/ y en el cuadro de abajo te tiene que aparecer
Selecciona el boton Select All para que automáticamente seleccione Mobl y abajo dale en Next, a partir de ahí dale aceptar los términos y dandole Next en los siguientes pasos.
Al final se estará instalando mobl para Eclipse, como se muestra en la imagen de abajo.
Al termino de la instalación debes de reiniciar tu Eclipse, este paso lo hace automáticamente.
Luego ya reiniciado tu equipo, puedes crear un nuevo proyecto Mobl
Para crear una aplicación Mob solo tienes que ir a:
New->Project.
En la ventana selecciona mobl project y selecciona Next.
Escribe el nombre de tu proyecto.
Nota: Este nombre del proyecto no tiene que llevar espacios en blanco, y tampoco lo intentes con el guión bajo, porqué tampoco lo va a aceptar.
Dale en Finish.
Al termino de estos pasos te debe de aparecer una pantalla como esta:
Revisa el Workspace, que se ubica en la parte izquierda de tu pantalla. Tu proyecto te genera estos archivos.
Para que te genere la carpeta www, carpeta donde contendrá el archivo *.html, archivo importante que es tu aplicación, debes de cambiar los parámetros del método header colocando otra palabra en ese parámetro y dale en guardar.
Veras que estará que el cursor del ratón está girando, eso significa que esta aplicando cambios.Ya terminado de girar te tiene que aparecer la carpeta www.,
Esta información se recopiló de una exposición de Mobl por parte de unos compañeros de Aplicaciones Web, en Octubre de 2012.
Ahora esta vez, les traigo como programar con Knockout, como se vio con Kendo Ui, srive para el desarrollo de aplicaciones solamente Web con HTML y JavaScript.
Su pagina de incio donde se encuentra toda la información acerca de esta herramienta.
Para descargar esta herramienta se tiene que ir a este sitio. En donde dice the downloads pages se encuentran todas las versiones y documentos de Knockouts.
Al darle clic aparece una página con las librerias y archivos de Knockouts.
En donde tienen que descargar los siguientes archivos:
Al descargar ambos archivos tienes que pegarlos a la carpeta donde vas a guardar tu archivo HTML. Crea una carpeta con el nombre "js" ahí colocarás el archivo knockout-2.1.0.js. Luego creas un archivo HTML con la siguiente sintaxis.
En cabecera de tu codigo coloca esta sintaxis para hacer referencia al script
<h1>Ejemplo MVVM</h1>
<ul>
<li>El nombre es <span data-bind="text:nombre">
</span></li>
<li>El apellido es <span data-bind="text:apellidos">
</span></li>
<li>El edad es <span data-bind="text:edad"></span></li>
En esta parte conocerás como instalar, programar Kendo UI para desarrollar aplicaciones en HTML5, JavaScript y CSS. Además de desarrollo Web, puede hacer desarrollo para móviles y puede hacer visualizaciones de datos como gráficas, tablas, porcentajes.
Lo interesante de esta herramienta es proporcionar código fuente y ejemplos en los que puedes basar para hacer tus aplicaciones con la última tecnología en aplicaciones web.
Este es su sitio oficial de kendo UI, además este es su sitio es donde se pueden descargar el software de desarrollo. Ahí aparecerá dos opciones:
El de prueba de 30 días con el paquete completo de Kendo UI (Web, Móviles y visualización gráfica).
La versión gratuita de desarrollo web.
Les recomiendo que se descarguen la versión gratuita, para eso se requiere que se registren.
Al termino de su registro ya tendrán descargado la paquetería de desarrollo HTML 5 de Kendo UI.
El archivo que has descargado es un archivo comprimido
Cuando lo descomprimes te aparecerán las siguientes carpetas:
/examples Contiene condigo fuente y ejecución de las demostraciones de Kendo UI.
/js Contiene los archivos JavaScript.
/source Contiene el c´digo fuente completa de toda la documentación.
/styles Contiene los archivos CSS.
/vsdoc Contiene la qyuda.
changelog.html Este archivo al ejecutarlo en un navegador te va a ejecutar los API y demos que ofrece Kendo UI gratuitamente con su código fuente.
Cuando deseadas hacer una aplicación web con Kendo, en tu archivo *.html debes de colocar este código:
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
Los siguiente vinculos son para los scripts de tu aplicación
Ahora se mostrará cómo programar en Android que es un paquete de software libre para ser
instalado en equipos móviles de cualquier empresa.
Android incluye:
Sistema Operativo Linux.
Capa de librerías de bajo nivel en C y C++.
Framework para el desarrollo de aplicaciones.
Suite de aplicaciones iniciales.
Instalación
Primero necesitas como requisitos los siguientes programas.
Java, última versión (1.7) o 1.6. Descargalo aqui.
Ambiente de desarrollo Eclipse (3.4). Descargalo aqui
Ya teniendo instalado estos programas, puedes descargar el SDK de Android, lo puedes descargar aqui.
Al instalar en SDK tener en cuenta:
El directorio no debe ser protegido.
Usar una ruta simple.
Fácil de recordar.
Estos archivos serán usados en los siguientes pasos.
Cuando acabes de instalar el SDK Android debes de aceptar que corra al finalizar la instalación y te debe de aparecer el cuadro de Android SDK Manager.
Ahí debes de instalar los paquetes, archivos y librerías para tu Android, tu tienes que instalar los siguientes paquetes que son recomendados:
SDK-tools (Requerida). Cuando instalas el SDK, has instalado la última versión. Con este paquete coloca a tu SDK al día.
SDK Platform-tools (Requerida). Cuando acabaste de instalar el Andorid, debes de instalar este paquete primero.
SDK Platform (Requerida). Debes de instalar la última versión para tu ambiente de desarrollo, además servirá para la compilación de tus aplicaciones. Es recomendable que uses la última versión de la plataforma. Usted todavía será capaz de ejecutar su aplicación en las versiones anteriores, pero hay que construir a la última versión para poder utilizar las nuevas funciones cuando se ejecuta en dispositivos con la última versión de Android.
Para comenzar, descargue la última versión de Android, además de la versión más baja va a apoyar (recomendamos Android 2.2 para la versión más baja).
La instalación de estos paquetes puede tomar unos minutos, dependiendo de la red.
Cuando instales Eclipse debes de instalar el Android Development Kit (ADT) que es un plugin para eclipse. Además es una recomendación de Android Developers. En Eclipse, seleccionar Help->Install New Software...->Add.
En el cuadro de Location copia esta dirección: https://dl-ssl.google.com/android/eclipse/
Selecciona los items que se muestran abajo en una lista. Luego le das en Next para que inicie su instalación Si durante la instalación te dice que ya está instalado el paquete, solamente quilate la selección y dale en Next.
Normalmente una ventana de configuración del ADT aparecerá. Ir a Window -> Preferences y seleccionar Android. Indicar ubicación del SDK instalado. Click en apply.
El siguiente paso es crear un emulador virtual para que ejecute tus aplicaciones Android. Para eso ve a Window -> AVD Maneger.
Como has notado en la imagen he creado mi emulador virtual. Selcciona New para crear un nuevo emulador.
Dale el nombre por default que le quieras dar a tu emulador. Selecciona la versión 2.2 en el campo Target.
Para crear una nueva aplicación dale en File -> New -> Project.
Selecciona la carpeta Android y selecciona la opción de Android Application Porject. Luego dale en Next.
En el siguiente paso tienes que darle nombre a tu nueva aplicación, cuando le das nombre automáticamente se da el nombre del proyecto y el nombre de los paquetes. A partir de aquí dale Next a los siguientes pasos hasta Finish.
Para hacer tu primera aplicación un sencillo "Hola mundo" escribe entre las líneas
Además cambia la última línea dee el método a setContentView(tv), y tiene que aparecer algo así.
Para correr tu aplicación dale en run -> run. Este paso puede tomar tiempo debido a que vas a correr tu emulador virtual está corriendo por primera vez. Un punto muy importante es que cuando corres tus aplicaciones no cierres tu emulador debido a que tarda mucho en ejecutar.
Esta es la parte atractiva para el diseño de tu aplicación web, por que hoy en día se necesita interfaces innovadoras para que el servicio que vas a ofrecer sea utilizado.
La aplicación debe tener en claro:
Contexto.
Arquitectura de la información (interfaces, mapas de sitio, árbol de tareas).
Diseño visual.
El diseño visual se puede desarrollar con diagramas UML, diagramas de clase o en diagramas entidad-relación. Deberás de convencer al cliente de: que haga el sistema.
Esto del diseño visual se relaciona con la interacción seductiva, introducida por el Dr. Anderson en el 2011, un concepto que es nuevo y de seguro pensarás que si ayudará como hacer un diseño visual innovador para tu aplicación.
Actuamos con nuestra forma de tomar decisiones por medio de factores psicológicos, no somos seres racionales, en la toma de decisiones. Necesitamos algo que motiva al usarlo.
Para que llegue esa motivación, se necesita de la teoría de la diversión.
Para explicar esto de la teoría de la diversión les comparto este vídeo de una iniciativa de la volkswagen.
Como lo habran visto, hay que encontrar la diversión de nuestros clientes
Con esto nos llega al concepto de seducción, que es la motivación a alguien para hacer algo que no tenía planeado hacer.
Un ejemplo simple, es el llenado de solicitudes en LinkedIn (sitio), los cuales la realizan más de 120 millones de usuarios llenando campos como:
Posición.
Resumen.
Educación.
Recomendación.
¿Qué hizo LinkedIn que hiciera esto?
El diseño visual, no.
Complejidad de interacción, no.
Arquitectura de la información, no.
La psicología detrás de las motivaciones de las personas, en efecto que si.
Esta aplicación encuentra la motivación.
Paradigma de interacción seductiva
De seguro piensas que este concepto no es parte del diseño visual de tu aplicación, pero lo es. La seducción, asociado a la sexualidad, es el proceso de atraer deliberadamente a una persona con el fin de modificar su opinión a hacerle adoptar un determinado comportamiento según la voluntad del que seduce.
Para tener una solución a un problema se necesita de la fijación funcional, en el cual describen un sesgo cognitivo que nos limita el uso de un objeto en la forma en que tradicionalmente utilizados.
El soporte también tiene que ver en esto. Se ha observado que, mientras que uno esté joven, tiene más probabilidades de resolver un problema. Esto se debe, gracias al planteamiento del problema, que es lo que ayuda a resolver el problema.
El afecto influye a las personas, aquellas personas que son orientadas en un estado de buen humor resuelven más rápido el problema que aquellas personas que son orientadas por el mar humor.
De seguro te preguntas, ¿qué tiene que ver todo esto de ser creativo con las selección de objetos de interacción?
A aquellos que no les interesa esto, tiene que ver todo. Así es, la percepción que tenemos de las cosas afecta la interacción y comprensión que tenemos de los problemas.
Ya seleccionamos los objetos de interacción en una publicación en este blog, ahora queremos hablar de su estética. Hay que centrarnos en el efecto del objeto no en el objeto.
También en el diseño de tu aplicación tiene que ver la estética y la interacción. Estos elementos involucran todos nuestros sentidos. La estética tiene una influencia en la parte cognitiva, en la afectiva y las asociaciones.
La cognición es el proceso de aprender. Basado en patrones y
experiencias, aprendemos sobre el mundo que nos rodea ¿que pasa si ...? o ¿qué significa esto?
Les dejo una pregunta ¿Cuál de estos elementos es un botón?
El botón abajo parece un botón físico. Los bordes biselados y sombras con gradiente elimina cualquier duda sobre su propósito. En conclusión, si es un botón, debe ser un botón.
Estética de la interfaz de usuario
Efectos
El efecto de genio da una clara comprensión al usuario a donde va su archivo y donde lo podrá encontrar
La línea de tiempo 3D da una clara comprensión de que el
pasado esta atrás
Con esto nos lleva a otra ¿eres atractivo? Cuando hablamos de afecto, tenemos que referirnos a sentimientos y emociones. ¿Cómo afecta lo que vemos nuestros sentimientos?
Las ciencias de atención, persuasión, felicidad y temas afines indican de cómo vemos las cosas y cual de las objetos son los más atractivos para el uso.
La personalidad de un producto influencia nuestra percepción. Piensen de manera rápida en las primeras impresiones que les generan las> personas. De igual forma la Interfaz de Usuario afecta la personalidad percibida de nuestras aplicaciones.
De seguro viene a ti la pregunta: ¿Por qué me interesa la personalidad de la Interfaz de Usuario? Hay razones de explicarlo:
La gente se identifica (evita) ciertas personalidades.
La confianza esta relacionada con la personalidad.
La percepción y las expectaciones están asociadas a la
personalidad.
Confianza
Las personas escogen las Interfaces de Usuario que son extensiones de su personalidad, y esto nos lleva a otra pregunta para ustedes:
¿Cuál creen que se el factor de confianza más notable para una página web?
La respuesta es: el diseño visual del sitio, el layout, el tamaño de la fuente y el esquema que están los colores. Si no lo saben, nosotros logramos una primera impresión en un sitio web a los 50 milisegundos.
En una IU tenemos que ganar la confianza con:
Incluir información confiable
Actualizar
La atención prestada al diseño del sitio debe ser constante en todos lados, descuidos puede crear la perdida de confianza.
Fuentes inconsistentes
Imágenes sin calidad
La falta de atención en la IU puede echar a perder la gran
funcionalidad de una aplicación ya que se pierde laconfianza
Percepción del tiempo
Este concepto según lo has visto en las barras de progreso cuando descargar algo de Internet o copias archivos de un lugar a otro en un Sistema Operativo y lo habrás notado que nuestro cerebro procesa impulsos no segundos.
Si deseamos diseñar un sistema o una aplicación en cualquier plataforma con demanda es realmente importante modelarlo y diseñarlo pensando en el tiempo percibido, confianza y personalidad.
Un punto antes de terminar este blog, las decisiones que tomamos no son racionales . No estamos tan consientes de nuestras decisiones como lo creemos. Así que la mejor forma de tener éxito con la Interfaz de Usuario es a través de engancharse con las emociones.
