Archivo de la categoría: Programación

Sección dedicada a la programación y diseño web

Detección de Genero con Gender API o Genderize.io

A la hora de detectar el genero de una persona en base al nombre, nos podemos ayudar de dos servicios web, gender API y Genderize.io. Los dos funcionan estupendamente, y los dos tienen un limite de peticiones, y funcionan los dos muy rápidos, y tienen los  dos un funcionamiento prácticamente igual. He creado un gist que usa los dos servicios, por defecto usa Gender API, y que esta configurado para España, aunque se puede cambiar para cualquier país cambiando el código de país.

Mas info: https://gender-api.com y https://genderize.io

Anuncios

Uso de array_map para codificar los valores de un Array

En alguna situación nos podemos encontrar con la necesidad de tener que codificar todos los valores de un array. Un método largo seria por medio de un foreach o el for, o podemos usar array_map para aplicar una función a todos lo valores contenidos en el array.

 

$encodedArray = array_map("utf8_encode", $decodedArray);

Mas Info: http://php.net/manual/es/function.array-map.php

Comprobar si existe un elemento en un Array con jQuery

Si queremos comprobar si existe un elemento en un array de Javascript podemos usar el método .inArray() de jQuery. Este método es muy parecido a la función indexOf().

Este metodo devuelve -1 cuando no encuentra el elemento y el numero de indice si lo encuentra. Hay que tener en cuenta que este método devuelve 0 si detecta el primer elemento del array, por eso a la hora de realizar la función es conveniente no hacer la comparación con verdadero o falso, y hay que hacerla con -1. Podemos usar un ultimo parámetro si queremos comprobar la existencia de ese valor en ese indice, si existe devuelve 1, si no existe devuelve 0.

Uso: $.inArray(valor, array [,indice])

var colores = ['Azul', 'Rojo', 'Verde', 'Amarillo'];
$.inArray('Verde', colores); //devuelve 2
$.inArray('Azul', colores); // devuelve 0
$.inArray('Rojo', colores, 1); // devuelve 1
$.inArray('Rojo', colores, 2); // devuelve -1
$.inArray('Morado', colores);// devuleve -1

Mas Info: https://api.jquery.com/jQuery.inArray/

Aplicar estilo a multiples elementos excepto unos

La semana pasada en Selección múltiple con patrones en CSS explicaba como aplicar estilos a multiples elementos por medio de patrones. Pero ¿que sucede si dentro de ese grupo de elementos hay algunos a los cuales no queremos que se aplique ese estilo? Voy a poner un ejemplo donde nos podemos encontrar con esa situación, supongamos que estamos utilizando bootstrap 3 en nuestra web, y tenemos un formulario en el cual queremos poner un asterisco rojo delante de todos los elementos obligatorios, una manera sencilla y rápida para hacerlo es con CSS, aplicando un simple estilo

label.required:before   {
    content: "*";
    color: red;
}

Con esta regla lo que hacemos es antes de cada label(con el pseudo selector before, si quisiéramos que fuera después lo sustituiríamos por :after) que sea de la clase required le agregamos un * de color rojo. Según como tengamos diseñado el formulario, y si estamos usando elementos radio, nos podemos encontrar que delante de cada etiqueta de radio nos ha puesto el asterisco, para solucionar esto podemos usar el pseudo selector :not de la siguiente manera:

label:not(.radio).required:before   {
    content: "*";
    color: #ff3b30;
}

Espero que os sea de utilidad.

Animaciones de Hide y Show con jQuery

Uno de los efectos a la hora de distribuir el contenido dentro de una pagina web es el de ocultar y mostrar, el .show() y el .hide() de jQuery. Este efecto, a mi modo de entender, queda mas visual si le aplicamos un efecto con jQuery UI. Una manera simple de aplicar estos métodos con efecto es el uso de .slideUp() y .fadeOut() para ocultar y .slideDown() y .fadeIn() para mostrar.

El slideUp() lo que hace es ocultar el contenido con un efecto que hace subir el texto hacia el párrafo superior ocultándose, y slideDown() hace aparecer el texto por debajo del párrafo superior.

El .fadeIn() lo que hace es desvanecer el contenido y el fadeOut() lo contrario.

A estos 4 métodos le podemos pasar como parámetro el tiempo en milisegundos que queremos que dure este, o bien slow, normal, fast, o no pasarle ningún parámetro para que lo haga a velocidad normal. Os dejo un ejemplo con estos 4 efectos

https://jsfiddle.net/rubenlacasa/fw5x54qo/

Mas Info: http://api.jquery.com/category/effects/

Creative Tim – Dale un look profesional a tu web

Buscando inspiración y recursos para el desarrollo de nuevos proyectos di con la web de Creative Tim y sus diseños y plantillas para web son muy buenos. Dentro de los temas que nos ofrecen destacaria el Paper Kit, Get Shit Done Kit y Awesome Landing Page.
Estos Kits son gratuitos para uso personal, y en el caso que seas desarrollador tiene un coste de 19€ cada uno.
Yo os recomendaria descargar las versiones gratuitas primero y enredar con ellas. Tengo que decir que la documentación y los ejemplos que hay en las descargas dan mucha ayuda a la hora de realizar tus desarrollos. Decir que todos los temas estan basados en Bootstrap 3, y si tienes un poco de experiencia con el, no vas a tener problemas a la hora de integrarlos.

Para poder descargarlos hay que registrarse en la web, y uno de los primeros correos que te envian, por lo menos en mi caso, es un codigo de descuento para comprar uno de sus temas.

Los números de 2015

Los duendes de las estadísticas de WordPress.com prepararon un informe sobre el año 2015 de este blog.

Aquí hay un extracto:

El Museo del Louvre tiene 8.5 millones de visitantes por año. Este blog fue visto cerca de 110.000 veces en 2015. Si fuese una exposición en el Museo del Louvre, se precisarían alrededor de 5 días para que toda esa gente la visitase.

Haz click para ver el reporte completo.