necudeco

Compartir videos en tu red local desde Ubuntu Linux

Cuando tienes una videoteca en tu computadora personal, pero no deseas verla unicamente en tu escritorio sino poder hacer en la tablet, celular o chromecast … en este articulo te explicamos como compartir videos desde Ubuntu Linux a toda tu red local.

Instalamos Minidlna

apt install minidlna

Minidlna es un servidor multimedia que permite compartir archivos multimedia con clientes DLNA/UPnP

Una vez instalado el servidor minidlna debemos ir al archivo de configuracion

sudo nano /etc/minidlna.conf

Aca nos aseguramos de habilitar las siguientes opciones

media_dir=/home/necudeco/Videos
inotify=yes

El parametro media_dir nos indica que directorio y subdirectorios queremos compartir en nuestra red local.

El parametro inotify permite que el servidor actualice automaticamente la lista de archivos compartidos cuando se agrega un nuevo archivo en media_dir

Una vez configurado, debemos reiniciar el servidor

sudo service minidlna restart

Ahora ya estan disponibles nuestros videos … para acceder a ellos desde nuestro movil debemos instalar un cliente DLNA/UPnP. Existen multiples clientes DLNA/UPnP que podemos instalar en nuestros dispositivos android … uno recomendado seria VLC

Una vez instalado VLC en nuestro dispositivo automaticamente aparecera nuestra carpeta compartida y podemos ver la lista de videos.

Desde VLC podemos enviar nuestro contenido a un dispositivo Chrome Cast

Como redimensionar un video en Linux

Podemos redimensionar facilmente el tamaño de los videos usando la linea de comandos a traves del programa ffmpeg

$ ffmpeg -i archivooriginal.mp4 -vf scale=800:-1 archivodestino.mp4

El comando ffmpeg recibe dos parametros:

  • -i archivoorigina.mp4
    En este parametro indicamos el nombre del archivo de video que queremos redimensionar.
  • -vf scale=800:-1
    Aca le indicamos a ffmpeg que redimensione el video a 800px de ancho. El valor de -1 indica que la altura se redimensiona automaticamente.

Como bloquear una IP usando UFW en Ubuntu Server

Las nuevas versiones de ubuntu viene con una nueva herramienta para administrar el firewall del sistema. UFW es la version NO COMPLICADA de administrar el firewall.

Bloquear una IP

# ufw deny from 200.44.170.2 to any

Este comando le indica a nuestro servidor que cualquier peticion que provenga de la IP 200.44.170.2 la vamos a IGNORAR

Rechazar una IP

# ufw deny from 200.44.170.2 to any

Este comando le indica a nuestro servidor que debemos notificar a la IP 200.44.170.2 que no queremos atenderlo

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 ! 😉