Uncategorized

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

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.

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. 😀

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

🖐️ 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

⚙ Docker Compose: no module named ordered_dict

Hoy dia, fallo la ejecucion de docker-compose en uno de mis servidores.

El problema:

E ImportError: No module named ordered_dict

La solución ?

Asegurarnos de tener la version urllib3-1.22, actualmente la version en produccion es la 1.26

Para tal efecto ejecutamos los siguientes comandos

pip uninstall urllib3
pip install urllib3=1.22

#HappyCoding

Comandos para manejar npm ( parte I )

NPM es el sistema de gestion de paquetes de nodejs. Con él podemos gestionar las dependencias de nuestros proyectos de #nodejs o #reactnative. También lo podemos usar para instalar aplicaciones globales en nuestro sistema, como por ejemplo: ChromeCast ( aplicación que te permite enviar videos a un chromecast desde la linea de comandos 😉 )

npm init -y

Inicializa el archivo package.json de nuestro proyecto con los valores por defecto. Usar con cuidado porque reescribe el contenido del archivo, si  ya existe.

npm home <paquete>

Abre el navegador con la web oficial del <paquete>

npm repo <paquete>

Abre el navegador con el repositorio oficial del <paquete>

npm outdated

Te indica que paquete tienes desactualizados

npm  prune

Elimina las dependencias que no se estan utilizando

npm list

Te muestra los paquetes que se usan en un proyecto ( ordenado jerarquicamente )

npm dedupe

Intenta reducir las duplicidades de paquetes en tu proyecto

npm audit

Te muestra una lista de bugs conocidos en los paquetes de tu proyecto

npm audit fix

Actualiza los paquetes de tu proyecto que tienen parches de seguridad pendientes.

 

AWS S3 Error 403 RequestTimeTooSkewed

Si el servicio de Amazon S3 en algun momento podrias haber obtenido el codigo  de error RequestTimeTooSkewed.  Este error indica que amazon detecto que el fecha hora desde donde se origino la peticion al servicio s3 no concuerda con la fecha hora del servidor s3.

En mi caso, el error se presento usando la libreria knox de nodejs y fue bastante criptico. La funcion callback de knox no generaba ningun error, es decir daba el proceso como valido, sin embargo los archivos no se estaban generando en el s3.

Para validar instale la herramienta aws-shell y ejecute la subida de un archivo con dicha herramienta.

# pip install aws-shell

 

$ aws-shell cp file s3://bucket/file

Al intentar copiar un archivo de ejemplo, ahora si se obtenia el error 403 siguiente:

RequestTimeTooSkewed type,  stating that : The difference between the request time and the current time is too large 

Para solucionarlo debes asegurarte que la fecha hora del servidor este correctamente configurada.

wget –server-response  –spider  http://aws.amazon.com/s3/

Puedes verificar la fecha hora los headers de respuesta de amazon, y compararlos con la fecha hora de tu sistema.

 

Como conectar tu wordpress con Mailchimp

MailChimp es una plataforma de email Marketing ( la mejor que conozco de momento ). A traves de ella puedes diseñar campañas recordatorio a tus clientes, usuarios o visitantes. Puedes enviarles ofertas, segmentandolos por intereses, por producto, etc.

Hoy vamos a usar un plugin de wordpress para registrar en mail chimp, las personas que realizan un comentario en nuestro blog.

Vamos a la seccion de plugins de nuestro wordpress y decimos agregar nuevo. Buscamos mailchimp y lo instalamos y activamos.

Una vez activado, vamos a la seccion de configuracion donde nos pide ingresar nuestro APIKEY de Mailchimp

Para buscar nuestra APIKEY, vamos a MailChimp a la seccion de Account API https://admin.mailchimp.com/account/api/  y creamos nuestra APIKEY

Y la copiamos en la configuracion de mailchimp de nuestro wordpress. Luego nos vamos a la opcion de Integracion de MailChimp en nuestro wordpress

Ahi podremos ver todas las opciones de configuracion que vienen por defecto. En este caso configuraremos el registro en los comentarios.

Aca, activamos el plugin ( Enabled yes ).

Decidimos si registramos en mailchimp a todos los que comentan o si lo hacemos solo si desean ser agregados. En nuestro caso, a todos. ( Implicit yes )

Nos indica en que lista de MailChimp los vamos a guardar, es conveniente seleccionar una lista ya que nos permite diferenciar los contenidos que reciben los usuarios en funcion de sus intereses.

Luego nos pregunta, si el usuario debe ingresar su email 2 veces para confirmar que es correcto. ( Double opt-in )

A partir de ahora cuando alguien realice un comentario en tu blog, Mailchimp le enviara un correo de invitacion a la lista de correo que le acabas de agregar. Si acepta, estara ligado automaticamente a tu lista de MailChimp.

Happy Mailing.