desarrollo

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.

Como instalar wordpress usando Docker

Si quieres hacer una instalación local de wordpress, te mostrare los pasos a seguir usando docker.

NOTA: La instalación de Docker esta pensada para Ubuntu pero pueden replicarse en windows Mac u otra distribucion Linux.

Instalar Docker

Descubrir docker es algo que te cambia la vida. Finalmente puedes hacer instalaciones de sistemas de forma rapida. Ya no tienes miedo de desconfigurar tu maquina principal. Y puedes hacer cuantas pruebas requieras en la configuracion de los servidores. Sin embargo, aun debes crear las imagenes y lanzar los containers de forma manual. Montar volumenes, configurar las redes internas, etc. Para evitar ese trabajo manual yo recomiendo usar docker-compose.

Docker-compose es una herramienta que intrepreta un archivo de texto docker-compose.yml y ejecuta por ti todos los comandos docker correspondientes.

En este caso, para instalar Docker, Docker-compose y todas sus dependencias necesarias ejecutamos el comando:

sudo apt install docker-compose

Una vez terminado, estamos listos para instalar nuestro wordpress.

Instalar WordPress

Creamos una carpeta donde residira el proyecto:

mkdir proyecto-wordpress

En dicha carpeta creamos un archivo docker-compose.yml:

version: ‘2’
services:
web:
image: wordpress
volumes:
– ./wp-content/:/var/www/html/wp-content/
ports:
– 80: 80
depends_on:
– db
links:
– db : db

db:
image: mysql: 5.7
environment:
– MYSQL_ALLOW_EMPTY_PASSWORD=true
– MYSQL_DATABASE=wordpress
– MYSQL_USER=root

El archivo en cuestion le indica al sistema que se descargue la ultima version de wordpress, que ejecute el servidor en el puerto 80 de nuestro localhost, y que la proyecto-wordpress/wp-content contenga toda la informacion que se sube a wordpress.

Ahora procedemos a ejecutar el servicio de wordpress ejecutando el comando

docker-compose up -d

Al realizar la configuración inicial de wordpress a traves de localhost, debemos tomar en cuenta, que al usar docker el Database Host ya no sera localhost sino db. ( En el archivo docker-compose.yml, en la seccion services => web => links => le pusimos el nombre db al servidor de la base de datos ).

Instalación Finalizada Exitosamente 😉

 

Comandos de Docker-Compose

El servicio de docker no es algo que debe estar permanentemente en memoria. Podemos prenderlo y apagarlo cuando lo necesitemos.

Ejecutar WordPress

docker-compose up -d

Detener WordPress

docker-compose stop

Borrar la instalación

docker-compose down

Revisar los logs

docker-compose logs web

VSCode – Asociar archivos .module con PHP

Cuando trabajamos con VSCode, el editor nos reconoce el tipo de lenguaje de programacion y establece los colorcitos necesarios para identificar facilmente errores o bloques de codigo. TEST

Sin embargo, algunos archivos no son reconocidos como escritos en PHP. Un ejemplo de estos, son los archivos .module en Drupal.

Para poder indicarle a VSCode que los archivos .MODULE son archivos en PHP debemos ir a FILE -> PREFERENCES -> SETTINGS

Ahi usamos el buscador de propiedades y buscamos files associations

Ahi, seleccionamos la opcion Edit in settings.json y escribimos la siguiente configuracion:

Creamos un objeto “files.associations” y dentro de el una propiedad por cada extension “*.module” y le indicamos que lenguaje de programacion va a parsear el archivo.

 

🐳 Dockerfile – Instalar paquetes noninteractive

Al momento de crear una imagen personalizada usando dockerfile es necesario instalar paquetes de software y algunos de estos vienen con un set de preguntas para ti.

Hoy dia por ejemplo, tuve que instalar un apache sobre una imagen de ubuntu y queria saber en que Region / Ciudad vivia. Al ejecutar el comando docker-compose build … ahi quedaba mi intento por configurar mi sistema. No habia forma de saltar ese paso.

Para poder evitarlo, le indique al script de docker ( dockerfile ) que estableciera la variable de sistema DEBIAN_FRONTEND como noninteractive.

FROM ubuntu

ARG DEBIAN_FRONTEND=noninteractive
RUN \
apt-get update && \
apt-get install -qq -y php-pgsql postgresql-all libapache2-mod-php

Una vez realizado esto, ya disponia de mi entorno listo para trabajar.

#HappyCoding

🐍Como crear un xls en Django

Django es un framework muy popular ( el omnipresente ) en proyectos web con Python. El modulo que vamos a usar para generar archivos Excel ( XLS ) se llama openpyxl.

Puedes instalarlo en tu computadora usando el comando pip, y puedes usarlo no solo en proyectos Django, sino tambien en scripts de administracion de python, etc.

pip install openpyxl

OpenpyXL es una libreria muy completa para el manejo de archivos XLS. Te permite trabajar con pestañas, formulas, estilos, etc. En NODEJS suelo utilizar otra libreria ( json-to-xls ) que como su nombre lo indica es mucho, mucho mas simple. Sin embargo, OpenpyXL a pesar de poder abarcara muchas opciones mantiene su simplicidad, lo cual se agradece.

Ahora bien, vamos al codigo. Lo primero es importar la libreriria

import openpyxl

Y con eso crear nuestro woorkbook ( este sera nuestro archivo xls final )

book = openpyxl.Workbook()

Recuerden que en excel tenemos pestañas en la parte inferior, esas se llaman sheets y con openxl podemos manejarlas a nuestro antojo. De momento solo vamos a seleccionar la pestaña por defecto.

sheet = book.active

Una vez que tenemos la variable sheet podemos agregar los registros a nuestro XLS, en este caso vamos a agregar una fila de cabecera primero y luego los datos

sheet.append( ( “Nombre”,”Telefono”, “Email” ) )
for p in personas:
sheet.append( ( p.nombre, p.telefono, p.email  ) )

Con esto ya tenemos listo nuestro archivo XLS. Ahora solo hace falta guardarlo o descargarlo. Vamos a mostrar las dos opciones:

Guardarlo

book.save(“/tmp/nuevoxls.xls”)

Descargarlo

response = HttpResponse(content_type=’application/msexcel’)
response[‘Content-Disposition’] = ‘attachment; filename=nuevoxls.xls’
book.save(response)
return response

Y listo, ya tienen su nuevo XLS generado.

#HappyCoding

🖐️ Ubuntu: Como evitar actualizar el Kernel

En linux los drivers del hardware que usas son desarrollados por la comunidad de software libre. Y como tal, pueden tener algunos bugs en su funcionamiento o pueden simplemente no ser soportados.

En alguna ocasion ( en realidad mas de una ) un hardware puede funcionar bien en una version de los drivers y en la siguiente no 🙁 . Y como la mayoria de los drivers vienen integrado en el kernel de linux, una actualizacion de kernel puede desactivar algun dispositivo de tu maquina.

Para prevenir eso, evito actualizar el kernel una vez que estan todos mis dipositivos funcionando. Podemos bloquear la actualizacion del kernel usando los siguientes comandos:

sudo apt-mark hold linux-image-generic
sudo apt-mark hold linux-headers-generic

Y si deseas volver a actualizarlos, pues debes desmarcarlos:

sudo apt-mark unhold linux-image-generic
sudo apt-mark unhold linux-headers-generic

Como convertir imagenes webp a png usando la linea de comandos

El formato webp, es el “nuevo” formato de google para compresion de imagenes sin perdida ideal para internet. Una misma imagen en webp ( 94k ) y en png ( 1.1 M ).

Sin embargo,  no todas las aplicaciones de linux ( o windows o mac ) estan preparadas para trabajar con este formato. Asi que para poder usarlas fuera del navegador deberemos convertirlas.

En linux existe una herramiento webp que vamos a instalar

sudo apt install webp

Y ahora podemos hacer la conversion con el siguiente comando

dwebp <imagen.webp>  -o <imagen.png>

Por si acaso, tambien podemos hacer el camino inverso. Hacer la conversion al nuevo formato webp usando el comando

cwebp <imagen.png> -o <imagen.webp>

Yo ya tengo varios proyectos web y mobiles donde valdria la pena usarla.

NodeJS mySQL NOT SUPPORTED AUTH MODE

Recientemente al actualizar mi maquina de desarrollo me tope con el siguiente error desde NodeJS

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

Era evidente un problema de configuracion ya que dias atras la app funcionaba correctamente y no habia sido modificada.

Para solucionar este problema debes entrar en la consola de mysql:

sudo mysql -u root

Y ejecutar el siguiente comando

update mysql.user set authentication_string=password(''), plugin='mysql_native_password' where user='root';

Y luego proceder a reiniciar el servicio

sudo service mysql restart