Nexus 5 USB Driver

Pues es un año nuevo y claro que no podía faltar los regalos y con ellos vino el Nexus 5, y a pesar que es un teléfono con el SO de Android nativo uno llegaría a pensar que para poder Debuggear las aplicaciones creadas desde eclipse usando el SDK de Android seria detectado inmediatamente al ser conectado, pero en mi caso no fue así.

Buscando entre Blogs encontré muchas soluciones que al menos para mi no funcionaron, al final la misma pagina de Developer Android me dio la solución:

  • Conecta tu Nexus 5 a la computadora usando el puerto USB
  • Da clic derecho en el icono de Equipo y selecciona la opción de Administrar
  • Se abrirá el Administrador de Equipos, en el panel derecho, expande Herramientas del sistema y elige Administrador de dispositivos
  • Dentro de Administrador de dispositivos da clic en Otros Dispositivos, dentro aparecerá la opción del dispositivo Nexus 5
  • Da clic derecho en Nexus 5 dentro de Otros Dispositivos y selecciona la opción de Actualizar software de Controlador
  • En las opciones elige Buscar software de controlador en el equipo
  • Te pedirá ruta para buscar software, da clic en examinar, busca tu carpeta del ADT que descargaste de la pagina de Developer Android y busca la siguiente ruta dentro de esa carpeta: sdk/extras/google/usb_driver y da clic en aceptar y siguiente.
Cuando se haya actualizado el controlador vuelve a la ventana de Administración de equipos, en el mismo menú de Administrador de dispositivos ubica la opción de Android Device.
  • Dentro te dará la opción de Android Composite ADB Interface, da clic derecho y elige Actualizar software de  controlador
  • En la ventana de Actualización elige Buscar software de controlador de equipo
  • La ruta ya estará automáticamente dada en caso contrario debes ubicar la misma ruta anterior ADT/sdk/extras/google/usb_driver y deberás dar clic en Elegir en una lista de controladores de dispositivo en el equipo
  • En la siguiente ventana la casilla de Mostrar el hardware compatible deberá estar marcada y seleccionada la opción Android Composite ADB Interface, da clic en siguiente
  • Espera un tiempo y tu controlador ya estará actualizado

Hay que tener en cuenta que esta solución esta basada en un SO de Windows 7, pero si tu cuentas con Windows 8 automaticamente se detecta, en caso contrario creo que solo cambiando la opcion de MTP por PTP en tu dispositivo funcionaria; los pasos son de la siguiente manera:

  • Conecta tu dispositivo Nexus a la computadora a través del puerto USB
  • En tu dispositivo ubica la opción de Configuración
  • Da clic en Espacio de almacenamiento
  • En el Action Bar o Menú superior da clic y elige Conexión con comput. por USB
  • Elige la opción de Cámara (PTP)
No olviden que la Opción programador debe estar habilitada en su Nexus 5, si aun no lo han encontrado, dentro del dispositivo en el menú de Configuración esta la opción de Acerca del dispositivo, solo hay que dar varios clics en la opción Versión de Android y aparecerá una animación de Android KitKat habilitando las Opciones de programador, dentro del menú Opciones de programador marca la casilla de Verificar aplicaciones por USB y quedara tu Nexus 5 listo para visualizar y debuggear tus aplicaciones Android

Puedes ver mas información aquí.

Como les había comentado, he estado trabajando bajo el manejo del OS de Android y con este post quisiera enseñarles como yo he empleado el RelativeLayout en mi proyecto simulando el típico botón flotante.

RelativeLayout es un tipo de contenedor muy poderoso ya que cumple con la tarea de diseñar interfaces de usuario que permite eliminar ViewGroups anidados, lo cuál es útil para reemplazar un diseño en los que tenemos una gran cantidad de grupos dentro de un contenedor de tipo LinearLayout y hacerlo más eficiente utilizando esta herramienta.

RelativeLayout define un layout donde la ubicación de un elemento en la pantalla depende del otro componente por ejemplo: debajo de, a la derecha de.

Para poder utilizar esta herramienta hay que tener en cuenta el uso del atributo android:id=”@+id/foo” ya que como se menciono, este componente depende de la utilización y posición del objeto junto al cual se colocará el siguiente objeto.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/layoutBack"
  android:layout_width="match_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

  <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/buttonsContent"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:visibility="gone">

    <ImageButton
      android:id="@+id/btnCamera"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:layout_alignParentBottom="true"
      android:layout_alignParentLeft="true"
      android:layout_marginBottom="90dp"
      android:layout_marginLeft="62dp"
      android:adjustViewBounds="true"
      android:background="@drawable/picture_circle"
      android:onClick="takePicture"
      android:scaleType="centerCrop"
      android:src="@drawable/foto" >
    </ImageButton>

    <ImageButton
      android:id="@+id/btnVideo"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:layout_alignParentBottom="true"
      android:layout_alignParentLeft="true"
      android:layout_marginBottom="110dp"
      android:layout_marginLeft="112dp"
      android:onClick="takeVideo"
      android:background="@drawable/picture_circle"
      android:scaleType="centerCrop"
      android:src="@drawable/video">
    </ImageButton>

    <ImageButton
      android:id="@+id/btnSound"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_marginBottom="109dp"
      android:layout_marginRight="122dp"
      android:onClick="takeSound"
      android:background="@drawable/picture_circle"
      android:scaleType="centerCrop"
      android:src="@drawable/audio">
    </ImageButton>

    <ImageButton
      android:id="@+id/btnText"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:layout_marginBottom="90dp"
      android:layout_marginRight="72dp"
      android:background="@drawable/picture_circle"
      android:scaleType="centerCrop"
      android:src="@drawable/texto">
    </ImageButton>
  </RelativeLayout>
</RelativeLayout>

Operación Resultante:

En este Post, haremos un giro de 180° ya que iniciaremos con nuestro primer Post de Android.

Últimamente he estado involucrada en proyectos bajo este lenguaje, y les quiero compartir 3 códigos que a mi parecer son indispensables.

El primero de ellos es iniciar la actividad de la cámara para tomar fotografías. Pero antes de poder iniciar con cualquiera de estos 3 desarrollos es necesario otorgarle permisos a tu proyecto.

Este tipo de permiso es específicamente para poder utilizar los recursos de la cámara de tu celular.

Dentro del archivo AndroidManifest.xml ubicado en la raíz de tu proyecto; se ubican 5 pestañas, entre ellas esta el Manifest, Application, etc; nos ubicaremos en el de AndroidManifest.xml y agregaremos esta linea:

<uses-feature android:name="android.hardware.camera" />

Justo después de la etiqueta <uses-sdk/> y antes de <application>

Después de haberle otorgado permisos a tu aplicación procedemos a crear una clase de java dentro de: miProyecto/src/package/NombredemiClase.java

En este archivo irá todo nuestro código; para hacer el ejemplo en donde utilizamos el recurso de la cámara y tomamos una foto solo se necesita emplear este código.

private static int takePictureActionCode = 10;

public void takePicture(View view) {
  dispatchTakePictureIntent(takePictureActionCode);
}

private void dispatchTakePictureIntent(int takePictureActionCode) {
  Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
  startActivityForResult(takePictureIntent, takePictureActionCode);
}

El segundo código que les quiero compartir es el de Vídeo, donde utilizando el recurso de la cámara se puede grabar un vídeo y que este sea almacenado dentro de la galería.

private static int takeVideoActionCode = 20;

public void takeVideo(View view) {
  dispatchTakeVideoIntent(takeVideoActionCode);
}

private void dispatchTakeVideoIntent(int takeVideoActionCode) {
  Intent takeVideoIntent = new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
  startActivityForResult(takeVideoIntent, takeVideoActionCode);
}

Y como tercer código les comparto este en donde nosotros podemos grabar y guardar cualquier sonido desde nuestra aplicación usando el grabador de audio.

private static int takeSoundActionCode = 30;

public void takeSound(View view) {
  dispatchTakeSoundIntent(takeSoundActionCode);
}

private void dispatchTakeSoundIntent(int takeSoundActionCode) {
  Intent takeSoundIntent = new Intent(MediaStore.Audio.Media.RECORD_SOUND_ACTION);
  startActivityForResult(takeSoundIntent, takeSoundActionCode);
}

Para poder implementar este ultimo recurso, es necesario agregar de igual manera el permiso para grabar audio dentro del AndroidManifest.xml justo debajo del permiso de la camara

<uses-permission android:name="android.permission.RECORD_AUDIO" />

Hay que tener en cuenta que todos estos métodos deben estar dentro del Activity de la clase y que nuestras variables takePictureActionCode, takeVideoActionCode y takeSoundActionCode pueden ser igual a cualquier numero entero mayor a 0

Ya por ultimo creas algún objeto para desencadenar la acción; puede que le des la acción desde tu clase java o desde el xml que se encuentra en la carpeta res/layout:

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/buttonsContent"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">  

    <ImageButton
      android:id="@+id/btnCamera"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:onClick="takePicture"
      android:src="@drawable/foto" >
    </ImageButton>

    <ImageButton
      android:id="@+id/btnVideo"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:onClick="takeVideo"
      android:src="@drawable/video">
    </ImageButton>

    <ImageButton
      android:id="@+id/btnSound"
      android:layout_width="32dp"
      android:layout_height="32dp"
      android:onClick="takeSound"
      android:src="@drawable/audio">
    </ImageButton>
</RelativeLayout>

Bueno, pues esta seria mi aportación, a partir de aquí pueden hacer muchas otras creaciones, de igual manera en futuros post explicare mas a detalle este maravilloso lenguaje para creación de aplicaciones.

 

Buscando algún tema nuevo para poder sorprenderlos encontré este plugin, que a mi parecer esta perfecto para la nueva forma de programar y diseñar tanto paginas web como programas de escritorio e incluso hasta para desarrollos móviles,  claro esta que este plugin esta basado en jQuery y para poder implementarlo tienes que tener la librería del mismo en tu proyecto.

Picture adapta las imágenes a una resolución proporcional del navegador desde el cual se esta accediendo.

Para poder utilizar esta maravilla de plugin solo se necesitan 3 pasos realmente muy sencillos.

  1. Tener en tu proyecto jQuery.
  2. Agregar las librerías de jQuery Picture
  3. Utilizar el código de la siguiente manera.

Código JAVASCRIPT

$(function(){
  $('figure, picture').picture();
});

 

Código HTML

<html>
<head>
</head>
<body>
  <div id="resize"></div>
    <figure data-media="images/small.png" data-media440="images/medium.png" data-media600="images/large.png" title="A Half Brained Idea"></figure>
    <figure data-media355="images/media.png" data-media320="images/media_small.png"><a href="http://www.pamela.softmedia.com.mx"></a> </figure>
</body>
</html>

Operación Resultante (Resolución grande)



Operación Resultante (Resolución mediana)



Operación Resultante (Resolución chica)


** Puedes descargar el proyecto para ver el resultado final picture

Ya ha pasado un buen tiempo, desde que inicie con la etapa de Video-Tutoriales, pero lamentablemente he estado un poco ocupada que no he podido subir más videos, pero ya estoy de vuelta y gustosa de seguir continuando con esta etapa.

Por otro lado, hace tiempo cuando hacia un sistema para la empresa donde laboraba, se me ocurrio implementar en uno de los modulos información extra, donde el usuario pudiera visualizar de una manera mas atractiva, las acciones que debiera realizar en ciertos elementos del sistema, y fue entonces cuando se me ocurrió implementar Tooltips.

Un Tooltip o descripción emergente, es una herramienta de
ayuda visual, que funciona al situar el cursor sobre algún
elemento gráfico, mostrando una ayuda adicional para informar
al usuario de la finalidad del elemento sobre el que se encuentra.

Los Tooltip son una variación de los globos de ayuda y es un
complemento muy usado en programación, dado que
proporcionan información adicional sin necesidad de que el
usuario la solicite de forma activa.

Lamentablemente al final el cliente decidio que no fuera tan especifico ese modulo y no lo llegue a implementar; pero en el transcurso de si se implementaba o no, decidi hacer mi propio Tooltip, y lance lineas de codigo haciendo <div> que creara un box dandole un poco de css para el estilo y la posisión y dentro otro <div> con el texto, en fin, ya después paso lo que les
comente y pues no lo implemente.

Hace poco encontre este interesante post donde explicaban como hacer tooltips y la verdad se me hizo muy bueno y se los quiero compartir.

**Antes de iniciar con el código, quisiera aclararles que para esto, su proyecto deberá contener la librería de jQuery.

Código HTML

<body>
    <div id="contenido">
        <div class="tooltip">
            <h4>Bienvenidos a Media Art</h4>
            <p>Aqu&iacute; podr&aacute;n conocer  o recordar <br/>
               algunas procedimientos o t&eacute;cnicas <br/>
               para poder realizar y dar un extra <br/>
               a su dise&ntilde;o Web</p>
        </div>
        <div id="icono"></div>
    </div>
</body>

Código CSS

#contenido {
width: 275px;
margin: 0 auto;
}

.tooltip {
background: transparent url('../imagen/tooltip/tooltip.png') no-repeat;
width: 290px;
height: 300px;
padding: 5px 30px;
position: absolute;
margin: 150px 70px;
z-index: 1;
display: none;
opacity: 0;
filter: alpha(opacity =0);
-moz-opacity:0;
}

#icono {
background: transparent url('../imagen/tooltip/logo.png') no-repeat;
height: 215px;
width: 400px;
position: absolute;
margin:350px auto;
}

Código JAVASCRIPT

$(document).ready(function() {
    var busy = 0;
    var stop = null;

    //Cuando se pasa por encima de la imagen
    $('#icono').mouseover(function (){
        if(stop) clearTimeout(stop);
        if (busy == 0){
            busy = 1;
            $('.tooltip').css({
                //Aparece (ya que estaba en display none)
                top: 0,
                display: 'block',
                opacity: 0}).animate({
                //Sube 20px y pasa a ser opaco
                top: '-=' + '20px',
                opacity: 1}, 'normal',
                function (){
                    busy = 0;
                });
            }
        });

        //Cuando sale de la zona de la imagen
        $('#icono').mouseout(function (){
            stop = setTimeout(function () {
                stop = null;
                if (busy == 0){
                    busy = 1;
                    $('.tooltip').css({
                        opacity: 1}).animate({
                        top: '-=' + '50px',
                        opacity: 0}, 'slow',
                        function(){
                            $('.tooltip').css({
                            display: 'none',
                            top: 0
                        });
                        busy = 0;
                    });
                }else {
                    $('.tooltip').css({
                        display: 'none'
                    });
                        busy = 0;
                }
            }, 500)
        });

        //Cuando se da click fuera de la imagen
        $('#contenido').click(function (){
            $('#tooltip').hidde('normal');
        });
});

Operación resultante

 

Iniciaremos la parte de Video – Tutoriales con este vídeo en donde se explicará las primeras 4 herramientas de Adobe Illustrator.

Como les comentaba este es el primer vídeo de una serie de Vídeo Tutoriales, donde conoceremos las herramientas y los usos de ellas para la elaboración de nuestros diseños en AI, cualquier duda o sugerencia comenten, estoy para escucharlos.

Agradecemos especialmente a Developer Labs por esa gratificante bienvenida al mundo de los blogs, y como él comenta estos sitios son parte de Softmedia, un proyecto de dos personas; del cual la idea es crecer y expandirnos como una red de profesionales, expertos en tecnologías de información, capaces de generar conocimiento y crecimiento, por lo que en este proyecto, podrán encontrar tutoriales e información de mucho interés.

Siendo una persona que labora diario con el lenguaje de PHP y JavaScript, quisiera recomendarles este plugin que se emplea utilizado el framework de jQuery.

Antes que nada, les recomiendo que su sitio ó proyecto tenga instalado jQuery, ya que como mencione el plugin se usa bajo este framework, en los próximos tutoriales les enseñare (para muchos que han batallado con jQuery), la mejor manera de emplearlo en un proyecto.

Bien, este impresionante plugin se llama Textext (descargar aquí) y la verdad cuando lo empleas hace que un simple input tenga una mejor funcionalidad e incrementa la usabilidad de tu sitio.

Al hacer funcionar la creatividad uno puede manejar este plugin como un listado, como una agenda, como un catalogo de productos o bien como un Auto-contemplado de palabras para facilitarle al usuario la inserción de estos en los campos.

Veamos de que manera podemos usarlo en nuestro código, yo trabajare con un textarea, pero puedes probar con otros objetos HTML.

De entrada en nuestro código HTML,  dentro de la estiqueta body ponemos:

<body>

    <textarea id="textarea" class="example" rows="1"></textarea>

      <div style="margin-top: 20px">
           <input type="text" id="tagname" placeholder="tag name" />
           <button id="addtag">Agregar</button>
      </div>

</body>

Después de este paso les explicare como pueden hacer para tener 4 diferentes opciones (tu puedes encontrar mas) con JavaScript, recuerden que si usan el JavaScript dentro del archivo HTML, el código de TextExt debe ir dentro de las etiquetas <scrip type=”text/javascript >’codigo’</script>, ahora que si lo manejas bajo el esquema de clases solo mandas a llamar el archivo con extensión ‘js’ dentro de tu archivo HTML.

  • Primero veremos la manera en la cual podemos convertirlo en una lista dinámica con el siguiente código.
$(function() {

   $('#textarea').textext({ plugins: 'tags' });

   $('#addtag').bind('click', function(e){
      $('#textarea').textext()[0].tags().addTags([ $('#tagname').val() ]);
      $('#tagname').val('');
   });

});

La operación resultante será:



Como podemos observar al introducir una palabra la convertimos en una etiqueta o bien en conjuntos de etiquetas creando así un listado para posterior emplearlo de diferentes maneras.

  • Como segunda opción podemos realizar lo anterior de una manera mas automatizada, escribiendo en el mismo input u objeto HTML.
$(function() {

   $('#textarea').textext({
        plugins : 'tags prompt focus autocomplete ajax arrow',
        tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ],
        prompt : 'Add one...',

        ajax : {
             url : '/manual/examples/data.json',
             dataType : 'json',
             cacheResults : true
        }
    })
};

Operación resultante:

Si pueden observar aquí ya no es necesario usar otro input text ni el buton para agregar la etiqueta al listado, simplemente se escribe en el textarea y se da enter, automáticamente se agregan las etiquetas al listado.

  • Como tercer ejemplo es un auto contemplado con descripción de las palabras que se teclean.
$(function() {
     function hash(str, hashSize){
         var result = 0;

         for(var i = 0; i < str.length; i++)
            result += str.charCodeAt(i) + 31 * result;

         return result % hashSize;

     }

     $('#textarea').textext({
            plugins : 'autocomplete',

            autocomplete : {
               dropdownMaxHeight : '200px',
               render : function(suggestion){
                   // `esto` se refiere a la instancia de `TextExtAutocomplete`
                  return '<div style="background-image:url(/images/render-demo/">' + suggestion +
                         '<p style="font-size:9px;">Descripción: Blog de Diseño Grafico WEB</p></div>';
               }
            }
     })

     .bind('getSuggestions', function(e, data){
           var list = [
                    'Media Art',
                    'Basic',
                    'Closure',
                    'Cobol',
                    'Delphi',
                    'Erlang'
           ],
           textext = $(e.target).textext()[0],
           query = (data ? data.query : '') || '';

           $(this).trigger(
              'setSuggestions',{ result : textext.itemManager().filter(list, query) }

           );
        });
});

Operación obtenida:

  • Y la cuarta que realmente es una variable de la tercera, surgió de la idea de una agenda de contactos o un catalogo de productos.
$(function() {
     function hash(str, hashSize){
         var result = 0;

         for(var i = 0; i < str.length; i++)
            result += str.charCodeAt(i) + 31 * result;

         return result % hashSize;

     }

     $('#textarea').textext({
            plugins : 'autocomplete',

            autocomplete : {
               dropdownMaxHeight : '200px',
               render : function(suggestion){
                   // `esto` se refiere a la instancia de `TextExtAutocomplete`
                  return '<div style="background-image:url(/images/render-demo/">' + suggestion +
                         '&nbsp;&nbsp;<img src="../blog/logo.png"/ style="height:30px; width:100px;"></div>';
               }
            }
     })

     .bind('getSuggestions', function(e, data){
           var list = [
                    'Media Art',
                    'Basic',
                    'Closure',
                    'Cobol',
                    'Delphi',
                    'Erlang'
           ],
           textext = $(e.target).textext()[0],
           query = (data ? data.query : '') || '';

           $(this).trigger(
              'setSuggestions',{ result : textext.itemManager().filter(list, query) }

           );
        });
});

Operación obtenida:

Si pudieron derse cuenta el código del tercer y cuarto ejemplo es exactamente igual solo con la variante del valor de retorno.

return '<div style="background-image:url(/images/render-demo/">' + suggestion +
       '&nbsp;&nbsp;<img src="../blog/logo.png"/ style="height:30px; width:100px;"></div>';

Bueno como les comente estos fueron los ejemplos que a mi parecer pueden incrementar la usabilidad de nuestro sitio, pero no se limiten, este plugin usa un manual ver aquí donde pueden visualizar ustedes el código en JavaScript e implementarlo según sus necesidades.

Que puede ser más importante en la vida del Diseño Gráfico que no fuese el “Color”; y para empezar con este blog hablaremos de la Psicología del mismo.

Pero antes de empezar trataré de explicar el como se crea del color o más bien para ser específicos la Teoría del color.

La Teoría del color es un conjunto de reglas de las mezclas de colores al conseguir algún efecto deseado, cambiando colores de luz o pigmento.

La luz blanca se puede producir combinando rojo, verde y azul (en escala de RGB), mientras que combinando los pigmentos cian, magenta y amarillo (en escala de CMY) se produce el negro.

Existen diferentes modelos de teorías de color, algunos de ellos son:

Modelo RYB (rojo, amarillo, azul)
Aquí entra nuestro conocimiento de la niñez, ya que
se comprende por los colores primarios y  en teoría
el resto de los colores pueden ser creados a través
de la mezcla de ellos.

Este tipo de modelo es utilizado en conceptos de
arte y pintura tradicionales.

Modelo de 12 colores

 

Modelo CMYK (cian, magenta y amarillo)
Realmente este modelo es denominado como CMYK,
ya que el color negro es creado a causa de las mezclas
de todos estos colores y se tiene que el color blanco
es la ausencia de ellos.

En este modelo se permite usar colores primarios más
exactos a diferencia de RYB, y es empleado para las
artes visuales y Diseño Gráfico.

Espectro de color CMYK

 

Modelo RGB (rojo, verde, azul)
Este modelo se utiliza con el sistema de color aditivo
o espacio de color RGB, aquí todos los colores posibles
pueden ser creados por la mezcla de estas tres luces de color.
Cuando ningún color luz está presente, uno percibe el negro.

Los colores de luz tienen aplicación en los monitores de
un ordenador, televisores, proyectores de vídeo y todos
aquellos sistemas que utilizan combinaciones de materiales
que fosforecen en el rojo, verde y azul.

Después de haber conocido un poco sobre algunos modelos de colores, entenderemos el porqué de las armonías del color.

Las Armonías de color se producen cuando los colores funcionan bien juntos, es decir, que producen un esquema de color sensible al mismo sentido.
La armonía nace de la percepción de los sentidos, y a la vez esta armonía retroalimenta al sentido haciéndolo lograr el máximo equilibrio que es hacer sentir al sentido.

Una magnifica herramienta para determinar la armonía es el círculo cromático RYB.

Percepción del color

En la retina del ojo existen millones de células especializadas en detectar las longitudes de onda procedentes de nuestro entorno. Estas células foto receptoras, conos y los bastoncillos, recogen parte del espectro de la luz y, gracias al Efecto fotoeléctrico, lo transforman en impulsos eléctricos, que son enviados al cerebro a través de los nervios ópticos, para crear la sensación del color.

Ahora si teniendo en cuenta lo anterior podemos entender un poco lo que es la Psicología del color.

La Psicología del color es un campo de estudio que está dirigido a analizar el efecto del color en la percepción y la conducta humana.
Teniendo en cuenta los modelos y armonías de color, las personas son muy selectivas al momento de decidir un color o incluso una pintura para estar cómodos con su medio ambiente.
Con esto podemos definir algunos colores, sensaciones e incluso lugares en donde se pudiera sentir esta armonía personal.


Referencia-imagen: Psicología del Color