Seleccion de una paleta de colores en el desarrollo web y movil

Al momento de hacer el desarrollo de una app movil o una web para un cliente una de las partes mas importantes para transmitir el mensaje adecuado es la seleccion de colores.

La psicologia de colores, nos permite identificar el mensaje adecuado a transmitir a traves de la seleccion de nuestro color predominante. Sin embargo, luego de seleccionarlo debemos encontrar los acompañantes adecuados para dicho color.

Existen diferentes formas de contruir una paleta de colores a partir de un colore base y aca te las vamos a explicar. Pero primero debemos conocer que son los colores primarios, secundarios, terciarios y como se construyen.

Colores Primarios

Son el Rojo, el verde y el azul ( RGB ) y a partir de ellos se crean el resto de colores.

Colores Secundarios

Son los que resultan de la combinacion directa de dos colores primarios

  • Rojo + Verde: Amarillo
  • Rojo + Azul: Magenta
  • Verde + Azul: Cian

Colores Terciarios

Son los colores que se encuentran entre un color secundario y un color primario

Una vez identificados los tipos de colores podemos identificar diferentes tipos de Paletas ( combinacion de colores ) que podemos usar en el desarrollo de nuestra aplicacion o web.

Paleta de colores monocromatica

A partir de la seleccion de un color, se crean variaciones del mismo color haciendo uso de tonalidades claras y oscuras.

Paleta de colores analoga

A partir de un color base puedes añadir dos colores que vecinos del color base en el circulo cromatico.

Paleta de colores complementaria

Son colores que se encuentran en posiciones opuestas en el circulo cromatico.

Paleta de colores Triadica

Dibuja un triangulo equilatero en el interior del circulo cromatico para seleccionar los colores adecuados

Paleta de colores Tetradicas

Una paleta tetraédrica forma un rectángulo en el círculo, por lo cual no usa uno, sino dos pares de colores complementarios.

Usando Adobe Colors para crear una paleta de colores

En el sitio web de Adobe Colors podemos una paleta de colores de una forma sencilla y rapida.

Psicologia del Color

La psicología del color es un campo de estudio que está dirigido a analizar cómo percibimos y nos comportamos ante distintos colores, así como las emociones que suscitan en nosotros dichos tonos.

ColorSignificado
RojoPasión
NaranjaDiversion
AmarilloFelicidad
VerdeProsperidad
AzulConfianza
MoradoMisterio
RosaAmor
MarronEstabilidad
BlancoPureza
NegroElegancia

Como instalar GIT FLOW ?

GIT Flow es una herramienta que te permite crear un flujo de trabajo predefinido para tus proyectos. Es decir, crea un orden en la forma de hacer las cosas con GIT.

A continuación vamos a revisar las diferentes formas de instalacion en los diferentes sistemas operativos. Spoiler Alert, Windows sera el mas complicado.

Instalar GIT Flow en Linux

apt install git-flow

Instalar GIT Flow en Mac

brew install git-flow

Instalar GIT Flow en Windows

Aca es cuando la cosa ya no es como lo pintan en la tele 🙁

  • Una vez ahi seleccionamos el instalable ( EXE ) que corresponda a nuestra arquitectura. Spoiler Alert ( probablemente sea 64-bit )
  • Nos pedira aceptar la licencia del programa, en este caso GPL. Obviamente aceptamos
  • Nos pide seleccionar la carpeta de instalación. Dejamos opciones por defecto.
  • Nos pide seleccionar que componentens instalar. Aseguremonos que la opcion de Git Bash este marcada
  • Nos pide seleccionar el nombre del menu de Inicio. Dejamos valor por defecto.
  • Nos pide seleccionar el editor que usara GIT ( Git requiere usar un editor de texto cuando trabaja, yo personalmente uso nano … pero cualquier opcion es valida )
  • Nos pide seleccionar la variable PATH.

Estas 3 opciones significan:

  • Use Git from Git Bash only
    Quiere decir que solo podras usar los comandos de Git desde un aplicativo especial que ya viene instalado. Esta opcion es más que suficiente para el 90% de los casos
  • Git from the commando line and also from 3rd party software
    Si necesitas usar GIT con otros aplicativos en tu PC, pues esta opcion es la mas conveniente.
  • Use GIT and optional Unix tools from the Command Prompt
    Esta opcion te instala ciertos comandos de Windows en tu Linux, lo malo es que “sobreescribe” esos comandos que ya tenias en windows. NO lo uses sino estas seguro.

  • Nos pide seleccionar el cliente SSH. Por defecto usamos OpenSSH
  • Nos pide definir como sera el SALTO DE LINEA.

Cuando tu presionas ENTER en tu editor de texto en Windows se imprimen los caracteres ocultos \n\r

En cambio en Linux, solo se imprime el caracter \n

  • Nos pide que emulador de terminal usaremos. Seleccionamos MinTTY por defecto.
  • Y listo, instalación finalizada
cortar video linux

Como cortar un video en Linux

Existen diferentes programas para cortar un video en Linux. Sin embargo, la forma mas sencilla de hacerlo es desde la terminal.

Casi todo el mundo tiene instalado el paquete ffmpeg en Linux. Este paquete se encarga de reproducir correctamente los videos, asi que ya no necesitares instalar nada mas.

Por si las dudas, se instala asi:

sudo apt install ffmpeg

Ahora bien para proceder a cortar el archivo debemos abrir el terminal de comandos, preferentemente en la carpeta donde esta el archivo de video. Y ejecutamos el comando

ffmpeg -i 'Partida DOTA Axe.mkv'  -ss 00:10:20  -t 00:00:45  -c copy 'Partida DOTA Axe - 5 Kills.mkv'

En el comando que acabamos de ejecutar, hemos enviado 4 parametros:

  • -i ‘Partida DOTA Axe.mkv’, este parametro me permite indicar el video original el cual voy a proceder a cortar.
  • -ss 00:10:20, el parametro -ss me permite indicar el tiempo de inicio del corte. En este caso le estoy diciendo que la porcion de video que me interesa empieza en el minuto 10 y 20 segundos.
  • -t 00:00:45, con el parametro -t estamos indicando que solo nos interesa los siguientes 45 segundos
  • -c copy ‘Partida DOTA Axe – 5 Kills.,mkv’, y por ultimo indicamos el nombre del archivo donde se guardara el resultado.

Y listo, en breves segundos tienes un nuevo video con la seccion deseada y sin haber instalado pesadas herramientas para realizar el trabajo.

Como agregar un icono en un html select options

Para agregar un icono fontawesome en un html select vamos a seguir los siguientes pasos:

Vincular fontawesome a nuesta pagina web

Aunque este paso podria parecer algo obvio, no esta demas indicarlo. Vamos a incluir la hoja de estilos de fontawesome al header de nuestro pagina.

<link rel='stylesheet' type='text/css' media='screen' href='fontawesome-free/css/all.min.css'>

Agregar la clase de fontawesome

Debemos agregar la clase fa tanto al select como a los options. Esto nos permitira tener acceso a la fuente de FontAwesome

<select class="form-control fa">
      <option class="fa"> Email </option>
      <option class="fa"> Camara </option>
      <option class="fa"> Direccion </option>
</select>

Agregamos el codigo UNICODE del icono

Ahora debemos ir a la pagina de Fontawesome y buscar el codigo UNICODE de los iconos que deseamos copiar.

En este caso, el codigo UNICODE es f2bb

Ahora agregamos el codigo en el texto del option, agregando &#xf2bb; los caracteres &#x adelante del codigo y terminandolo con un ;.

<select class="form-control fa">
      <option class="fa"> &#xf0e0; Email </option>
      <option class="fa"> &#xf083; Camara </option>
      <option class="fa"> &#xf2bb; Direccion </option>
</select>

Espero que te sirva, si necesitas ayuda o quieres mejorar el resultado no dudes en contactarme.

NGINX – Politicas de Cache – CSS JS y Media Elements

¿ Como mejorar el posicionamiento web en Google mejorando la velocidad de carga a traves de las Politicas de Cache de NGINX segun las recomendaciones de Google PageSpeed Insights ?

Un sitio web ( blog, ecommerce o pagina institucional ) estan compuesto por un archivo HTML, varios archivos CSS, varios archivos JS y varios archivos multimedia como imagenes.

Una pagina web estandar puede tener 100 de estos archivos, y cada vez que es visitada deben descargarse estos 100 elementos. Sin embargo, hay elementos que rara vez cambian, como las imagenes, los archivos CSS y JS.

Para evitar descargar en cada visita todos los archivos que componen una pagina existen las politicas de Cache.

Una de las variables que considera google para establecer el ranking de las paginas web, es su velocidad de carga. Las politicas de Cache permiten mejorar esa velocidad de carga y por tanto mejorar el posicionamiento del sitio en google. Puedes evaluar la velocidad de carga de tu sitio web en Google PageSpeed Insights

Politicas de Cache

Las politicas de cache establecen que archivos se van a guardar en el navegador del cliente y durante cuanto tiempo. Asi pues, si vuelves a visitar la pagina esos archivos que se han guardado ya no se vuelven a descargar.

Esto agiliza la carga del sitio web y permite que el servidor atienda de forma mas rapida a otros usuarios.

Implementacion de Politicas de Cache en NGINX

NGINX es un servidor web, existen muchos otros, pero para efectos de este tutorial vamos a centrarnos en NGINX.

Cada sitio web en NGINX se configura como un server.

server {
  server_name www.midominio.com;
  root /var/www/html/midominio;

}

En el ejemplo, hemos definido un “server” para que atienda todas las peticiones a www.midominio.com y que se encuentra alojado en la carpeta /var/www/html/midominio

Ahora dentro de esa definicion basica de “server” vamos a añadir como deben tratar NGINX a los archivos de tipo CSS, por ejemplo.

location ~* \.(?:css)$ {
	  expires 1M;
	  add_header Cache-Control "public";
	}

En este ejemplo indicamos con una expresion regular que cualquier archivo cuyo nombre termine en “.css” se le aplicaran las reglas delimitadas por las { }.

La sentencia expires 1M, nos indica que el contenido de ese archivo se guardara en el navegador durante 1 mes.

La sentencia add_header, nos indica que el cache guardado es de acceso publico para cualquiera que acceda a la pagina desde ese navegador.

Google Analytics: Como evitar Avg Time 0 en nuestras estadisticas

Avg Time, es un indicador de Google Analytics que muestra cuanto tiempo estuvo un usuario en nuestra pagina.

Google muestra tu sitio web primero que otros a los usuarios del buscador, entre otras cosas por el tiempo promedio que pasan los usuarios en tu sitio web.

Avg Time

En Google Analytics, Avg Time indica cuando tiempo estuvo el usuario en nuestra pagina. Sin embargo, para calcularlo GA utiliza el tiempo de carga del siguiente click. Eso quiere decir que si nuestro usuario entro en nuestro sitio y visito un enlace externo o cierra la pestaña o ingresa otra URL, Google no sabra cuanto tiempo estuvo en nuestro site.

Una solución

Podemos evitar pasar desapercibidos para google enviando una señal a google que le indique que todavia estamos en la pagina o que estamos saliendo del site. Por ejemplo:

window.onbeforeunload = function(e) { ga('send', 'pageview', 'exit');  }; 

Con este codigo, cuando el usuario se retira de la pagina actual ( ya sea porque cerro el navegador, hizo click en un enlace externo o cambio la url ) se le indica a Google Analytics que hemos cargado una pagina virtual llamada exit, y asi GA puede calcular el tiempo exacto de nuestra permanencia en nuestro sitio.

¿ Como hacerlo en WordPress ?

Si estas usando el plugin GA Google Analytics, puedes ir a la seccion de configuracion y buscar la opcion custom code y copiar el siguiente codigo.

<script>
   window.onbeforeunload = function(e) { ga('send', 'pageview', 'exit');  }; 
</script>

¿ Tienes algun problema para implementarlo en tu sitio web o necesitas ayuda ? Dejame un comentario y con gusto te ayudare ! 😉

Javascript: ¿Como ordenar Arrays?

Como ordenar (sorting) elementos de un array usando javascript.

El metodo sort de Arrays permite la comparación de los diferentes elementos de un arrays, incluyendo objetos.

let alumnos = ['Carlos Gonzales', 'Jose Sifuentes', 'Cinthia Rodriguez'];

alumnos.sort();

Por defecto el metodo sort ordena el array convirtiendo cada elemento del array en string y comparandolo con los demas.

En el caso de elementos mas complejos se le puede proporcionar a la funcion sort una funcion de comparacion pudiendo acceder asi a propiedades de los objetos para realizar la comparacion.

let alumnos = [ { nombre: 'Carlos Gonzales', promedio: 11 }, { nombre: 'Jose Sifuentes', promedio: 15 }, { nombre: 'Cinthia Rodriguez', promedio: 8} ];

alumnos.sort( (a,b) => a.promedio < b.promedio );

En este ejemplo, la funcion de comparacion recibe 2 parametros ( siempre recibira dos parametros que representa dos elementos del array ) y compara su propiedad promedio para ordenar los elementos.

Instalar PGAdmin con Docker

PGAdmin es una herramienta de Interfaz grafica para administracion de nuestros servidores de base de datos postgres. En este articulo, vamos a añadirlo a nuestro archivo docker-compose para poder administrar nuestra base de datos remotamente.

Punto de inicio

Vamos a partir de una situacion donde ya tenemos nuetro docker corriendo y ejecutando postgresql. Para lo cual puedes guiarte de este otro articulo: Instalando Postgres en Docker

Agregando el servicio de pgAdmin

Para instalar pgadmin vamos a editar nuestro archivo docker-compose.yml y añadir un nuevo servicio

version: '2'

services:

  db:
    image: postgres
    user: postgres
    environment:
      POSTGRES_PASSWORD: 123456
      POSTGRES_USER: postgres

  pgadmin:
    image: dpage/pgadmin4
    ports:
      - 8080:80
    depends_on:
      - db
    links:
      - db:db
    environment:
      PGADMIN_DEFAULT_EMAIL: admin
      PGADMIN_DEFAULT_PASSWORD: 123456

Como pueden ver en el codigo anterior, hemos añadido un servicio pgadmin, el cual se crea a partir de la imagen docker dpage/pgadmin4. Este nuevo servicio se ejecuta en el puerto localhost:8080.

Y listo ya tenemos pgadmin instalado 😉

Si tienes alguna duda, dejamelo en los comentarios y juntos lo resolveremos. 😀

Instalar Postgres en Docker

Unos pasos sencillos para instalar en tu computadora local el servidor de base datos postgres, usando Docker. ¿ Porque con Docker ? Porque al usar docker, no importa lo que haga nunca voy a malograr mi sistema principal.

Instalando docker ( Pasos Previos )

En caso no tuvieras instalado docker, en Ubuntu lo puedes hacer ejecutando este comando:

apt install docker-compose

Instalando Postgres

Nuestro primer paso sera crear una carpeta donde residira el proyecto. Esto es asi, porque Docker Compose buscara en la carpeta un archivo YML con las instrucciones para ejecutar y configurar el servicio de postgres.

mkdir postgres

Luego creamos el archivo docker-compose.yml con el siguiente contenido:

version: '2'

services:

  db:
    image: postgres
    user: postgres
    environment:
      POSTGRES_PASSWORD: 
      POSTGRES_USER: postgres

En este archivo ( docker-compose.yml) le estamos indicando que se creara un servicio llamado db, el cual ejecutar la ultima version de postgres.

Para iniciar el servicio lo hacemos con la sentencia: docker-compose up -d

Para detener el servicio: docker-compose stop

Conectarnos a la base de datos

Cuando el servicio db esta activo, es decir despues de haber ejecutado docker-compose up -d podemos conectarnos a la linea de comando de la base de datos usando el comando:

docker-compose exec db psql

Si tienes alguna duda, dejamelo en los comentarios y juntos lo resolveremos. 😀

Mario Uriarte - FullStack Developer