Seleccionar página
Ocultar el spin en input numeric – HTML5

Ocultar el spin en input numeric – HTML5

Muchas veces el spin sobre los campos numéricos en HTML resultan poco cómodos. Primero porque el spin quita un espacio importante que al trabajar con muchos se complica la distribución del formulario. Y por otro lado, la ruedita del mouse sobre el campo modifica el valor ingresado resultando por momentos algo peligroso.

La idea es poder sacar el spin y que el scroll no funcione sobre el campo, pero que mantenga la validación de solo tipear números sobre el mismo.

La tarea es sencilla , solo hay que sacar el spin con CSS con el siguiente style:

/* saco las flechistas de los campos numericos*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

Y para poder evitar que la ruedita del mouse cambie los valores del campo, hemos de agregar la siguiente instrucción jQuery .

$(function(){
    // Anulo el scrol sobre lso numericos
    $(':input[type=number]').on('mousewheel',
        function(e){ 
            $(this).blur(); 
    });
});

Con esto concluyo, testeado y funcionando.

Remover fondo a una fotografía

Remover fondo a una fotografía

Nunca fue tan fácil poder remover el fondo de una fotografía y mejor aún 100% online y gratis. Sin instalar absolutamente nada.

Para facilitarnos la vida ya sea para algún trabajo como para hacer nuestros memes o quizas algun chascarrillo, Remove.bg nos salva con una calidad impresionante.

Solo capta personas y las pruebas que he hecho fueron mas que satisfactorias.

El proceso es muy sencillo , solo hay que subir a la página la foto que queremos que quite el fondo, hace su proceso en linea, y nos queda lista para su descarga.

Optimizar imágenes online

Optimizar imágenes online

Unos de las acciones a realizar antes de subir una entrada al WordPress o diseñar una landing page es necesario que las imágenes se vean bien pero lo mas optimizada en posible. Esto indica una compresión de la misma con algoritmos que ayuden a no perder mucha calidad.

Para ésto estoy utilizando un compresor Online llamado Optimizilla al que puedes acceder aqui

Por otro lado tambien he probado TinyPNG que de hecho es mucho mas agradable al uso pero el anterior realizó una compresión mas efectiva

Instalando Yii2 vía composer

Instalando Yii2 vía composer

El framework Yii2 se puede instalar mediante composer o directamente descargando el archivo. Mas allá de la simpleza de ambos,  dejo el método con composer ya que a través del mismo es mucho mas simple instalar diferentes módulos que seguramente van a querer agregar.

El explicativo va orientado a distribuciones Linux teniendo en cuenta que en Windows no creo que lo vaya a utilizar 😛

1 – En primer instancia hay que instalar composer. En Ubuntu podrías instalar mediante apt y seguramente en otras distribuciones también, pero en este caso lo voy a descargar para no meterme en otros temas que no vienen al caso en este post.

mkdir nuevoYii2
cd nuevoYii2/
curl -sS https://getcomposer.org/installer | php

En este punto dentro de la carpeta nuevoYii2 tendrás un archivo ejecutable llamado composer.phar

2 – Luego resta ejecutar el siguiente comando para que directamente se instale el Yii2 framework en su versión basic, el cual es un buen punto del cual empezar a conocerlo.

 ./composer.phar create-project --prefer-dist yiisoft/yii2-app-basic basic

Pasará un rato entre que descarga los archivos y busca sus dependencias.

3 – Para probarlo debes ejecutar desde el mismo lugar el siguiente comando , el cual habilitará puerto 9999 en tu maquina local y podrás usarlo desde tu browser favorito.

cd basic
./yii serve localhost:9999


4 – Por último, pero no menos importante, les dejo el comando para instalar el yii2 en su formato advanced, el cual separa el mismo en backend y frontend.

cd ..
 ./composer.phar create-project --prefer-dist yiisoft/yii2-app-advanced advanced

En un próximo post prometo la guía de como instalar el Theme AdminLTE en la versión advanced del framework.