Archivo de la categoría: 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.


function generoPersona($nombre, $provider = 'genderAPI')
{
$providers = array(
'genderAPI' => array(
'url' => 'https://gender-api.com/get?name=',
'pais' => '&country=ES'
),
'genderize' => array(
'url' => 'https://api.genderize.io/?name=',
'pais' => '&country_id=es'
)
);
if (array_key_exists($provider, $providers)) {
$dataProvider = $providers[$provider];
}
$generoPersona = 'Hombre';
$curl = curl_init($dataProvider['url'].$nombre.$dataProvider['pais']);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
$result = json_decode(curl_exec($curl));
if (is_a($result, 'stdClass') && property_exists($result, 'gender')) {
$generoPersona = ($result->gender == 'female')? 'Mujer' : 'Hombre';
}
return $generoPersona;
}

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

Anuncio publicitario

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.

Required en radio o checkbox multiple

A veces cuando diseñamos un formulario tenemos que incluir en este elementos radio o checkbox, y queremos que estos sean obligatorios, en el resto de elementos lo podemos tener claro le ponemos el atributo «required» y ya, pero estos elementos sueles dar multiples opciones, entonces que hacemos, lo ponemos en todos el atributo «required», pues si, esa es una de las soluciones, pero hay otra mas sencilla, que es ponerlo solo en el ultimo.


<input type='checkbox' name='opcion' value='si' required>

<input type='checkbox' name='opcion' value='no' required>


<input type='checkbox' name='opcion' value='si'>

<input type='checkbox' name='opcion' value='no' required>

Ejemplo: http://www.sacredheartprimary.co.uk/macss-js/webforms2/testsuite/021.html

Generador de botones CSS

Buscando por internet he encontrado esta pagina en la cual podemos crear nuestros botones personalizados y generar el código para usarlos en nuestra web.

Introducción al desarrollo web HTML5 con Google Drive

Os dejo el siguiente enlace a un curso compuesto en 5 sesiones en las cuales nos explican como crear una aplicación HTML5 en Google Drive, y como integrar distintas aplicaciones de Google en este sitio.

http://programa-con-google.blogspot.com.es/2014/02/google-developers-hackademy_26.html

Configurar Apache para que funcione con nuestro Dropbox

Dropbox se ha convertido en la solución principal que usamos la mayoría de nosotros para almacenamiento en la nube, no voy a entrar si es mejor o peor que otros (Box, Wuala, Ubuntu One, Google Drive), sino que es el que mejor compatibilidad tiene entre múltiples sistemas y es el que muchas aplicaciones implementan como servicio.

Tengo una cuenta de Dropbox desde hace tiempo, y la verdad no la usaba mucho, últimamente me decantaba mas por usar Box, pero en las ultimas semanas, he ido de un lado a otro y he tenido que buscarme una solución para poder trabajar en múltiples ordenadores, continuando mi trabajo donde lo había dejado y sincronizado. Aunque generalmente uso para sincronizar el trabajo Git, me he visto en la situación que no he podido realizar unos commits operativos, por lo tanto he tenido que recurrir a esta opción para tenerlo todo sincronizado.

El escenario

Las maquinas que he usado son o bien Linux, o Mac, en el caso de los Windows… lo siento no suelo usarlo para desarrollar.

Vamos a suponer que todos tenemos Dropbox, si no os podéis hacer una cuenta de las gratuitas, en la cuenta de Dropbox, he creado una cuenta llamada Devel.

Instalamos Dropbox, si no lo tenemos instalado en nuestro ordenador, y en mi caso como no me interesa sincronizar nada mas que la carpeta Devel, suelo hacer una sincronización selectiva y decir que solo me sincronice esta carpeta.

Una vez instalado, tanto en Linux la carpeta de Dropbox se nos instala en «/home/nuestroUsuario/Dropbox», en Mac se instala en «/Users/nuestroUsuario/Dropbox».

Ahora, si estamos en nuestro equipo principal de desarrollo copiamos y pegamos las carpetas principales de nuestros proyectos dentro de la carpeta «Devel», así se nos subirá todo a nuestra carpeta de Dropbox.

Configurando Apache

En linux

Los proyectos que hemos subido, por lo menos en mi caso, son proyectos PHP, alguno de los cuales necesito probarlos en Apache,  para hacer que nuestros proyectos en Dropbox funcionen en Apache los mas recomendable es instalar el modulo Userdir. Para hacerlo abrimos una consola y ejecutamos el siguiente comando para activar el modulo

sudo a2enmod userdir

Una vez habilitado el modulo este nos dira que reiniciemos apache, no lo hacemos aun, ya que tenemos que configurar este modulo, ya que por defecto este nos habilita probar los proyectos o web que estén situados en la carpeta public_html ubicada en nuestro home.

En la terminal editamos el fichero de configuración userdir.conf

vim /etc/apache2/mods-available/userdir.conf

El archivo original es asi

<IfModule mod_userdir.c>
    UserDir public_html
    UserDir disabled root
    <Directory /home/*/public_html>
        AllowOverride FileInfo AuthConfig Limit Indexes
        Options MultiViews Indexes SymLinksIfOwnerMatch
        IncludesNoExec
        <Limit GET POST OPTIONS>
            Require all granted
        </Limit>
        <LimitExcept GET POST OPTIONS>
            Require all denied
        </LimitExcept>
    </Directory>
</IfModule>

Lo modificamos y lo dejamos así

<IfModule mod_userdir.c>
    UserDir Dropbox/devel
    UserDir disabled root
    <Directory /home/*/Dropbox/devel>
        AllowOverride All
        Options MultiViews Indexes SymLinksIfOwnerMatch
        IncludesNoExec
        <Limit GET POST OPTIONS>
            Require all granted
        </Limit>
        <LimitExcept GET POST OPTIONS>
            Require all denied
        </LimitExcept>
    </Directory>
</IfModule>

Con esto habilitamos el directorio de Dropbox/devel como directorio personal de desarrollo.

Antes de reiniciar el servidor es necesario cambiar los premisos de la carpeta Dropbox. Os recomiendo agregar vuestro usuario al grupo www-data y a continuación cambiar los permisos de esta manera, y una vez cambiados ya podemos reiniciar el servidor Apache.

sudo chmod -R g+rx Dropbox

5 errores evitables en el diseño web

He encontrado esta pagina web en la que mas que errores a la hora de la implementación de una pagina web es mas a la hora de implementar o modificar una pagina web, y seguro que mas de uno sabe casos relacionados con esto, por ejemplo a todos nos suena la frase «Esta web, seguro que la ha hecho el primo o el sobrino de alguien» con todos mis respetos a los primos-sobrinos.

http://www.artincom.com/5-errores-evitables-en-diseno-web/

Bootstrap Datepicker

Bootstrap se esta convirtiendo desde hace tiempo en casi un estandar a la hora de realizar paginas web. Algo que siempre nos lleva de cabeza, es el campo Date a la hora de introducir fechas, sobre todo para los que desarrollamos en castellano, ya que si bien algunos navegadores lo soportan, a la hora de mostrar la fecha esta aparece en un formato distinto al que usamos nosotros. He dedicado unas cuantas entradas a la personalización del Jquery datepicker en castellano pero creo que con este Datepicker para Bootstrap voy a tener que modificar unos cuantos de los que tengo desarrollados.

https://github.com/eternicode/bootstrap-datepicker

Configurando Sublime Text 3

Sublime TextSublime Text es una aplicación para desarrollo la cual me esta ganando cada día mas. Tengo que decir que no soy asiduo de ella ya que para grandes proyectos uso PHPStorm y para cosas puntuales sigo siendo muy fan de TextMate, o incluso Vim, pero estas aplicaciones tienen unos «peros», los cuales los cubre el Sublime Text. Y diréis,¿ que «peros» le ves? pues bien, PHPStorm, como todos los entornos de programación basados en Java (Eclipse, Zend Studio, Netbeans), consume barbaridad de recursos, y el «peso» es muy grande. TextMate es solo para Mac, y Vim es solo para sistemas *NIX, ¿entonces,si necesitamos un entorno de programación ligero y que se pueda utilizar en todos los sistemas? pues ahí esta Sublime Text, valido para cualquier plataforma, ligero y potente.

Sublime Text es muy personalizable y lo podemos ajustar a nuestra manera de programar, y para ello contamos con cantidad de paquetes para complementarlo y personalizarlo a nuestro gusto. En este enlace nos explican como instalar estos complementos, personalizar fuentes y configurar el tema para dejarlo a nuestro gusto. Yo os recomiendo el Soda Light, sobre todo si estáis acostumbrados a TextMate.

A la hora del desarrollo yo os recomiendo instalar tambien los siguientes paquetes: SublimeLinter-php SublimeLinter-phpcs SublimeLinter-phpmd, HTML, SimpleTODO.