Indice de la serie:

1. Creando y entendiendo expresiones regulares
2. Expresiones regulares comunes
3. Usando las expresiones regulares

Este es el último artículo de esta Guia de Expresiones Regulares. En el primer capítulo vimos las palabras reservadas para crear nuestras propias expresiones regulares. En el segundo, vimos y explicamos algunas de las expresiones más comunes.

Por último, en este tercer capítulo, aprenderemos a usar las expresiones regulares que hemos aprendido a crear o hemos visto anteriormente.

Usar expresiones en PHP

En PHP disponemos de la función preg_match:

preg_match ( string $pattern , string $subject [, array &$matches [, int $flags = 0 [, int $offset = 0 ]]] )

Esta función dispone de 2 parámetros obligatorios y tres opcionales, pero, por lo general con los tres primeros nos será más que suficiente:

1. pattern, aqui irá nuestra expresión regular.
2. subject, será un string en donde se buscará la expresión regular.
3. matches, nos devolverá las coincidencias. En matches[0] contendrá el texto completo coincidente con la expresión. En matches[1] la primera parte de la expresión, etc.

También podemos usar preg_replace en caso de que queramos buscar y remplazar algo.

En Javascript

En javascript usamos match. Como podemos ver en el siguiente código:

1. Definimos la expresión regular (en este caso comprobaremos un email).
2. Creamos la variable que queremos comprobar.
3. Y usando email.match(RegExPattern) devolverá true o false dependiendo si coincide o no y entrará a la sección del if correspondiente.

    var RegExPattern = /[\w-\.]{3,}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/;
    var email = 'victoor89@gmail.com';

    if ((email.match(RegExPattern))) {
        alert('Email correcto');
    } else {
        alert('Incorrecto');
    } 

De esta forma conseguiremos hacer nuestra página más personal y puede que así consigamos mejorar las ventas. Imaginaos que entrais a una tienda online y esta os avisa de los gastos de envio a vuestra casa gracias a la información que obtiene. Esta es solo una de las posibilidades que se me ocurren.

Algunos de los datos que obtendremos son:

1. País y ciudad
2. Fecha de la última visita
3. Si viene de un buscador, sabremos desde cual y que ha buscado para llegar.
4. Tiempo que pasa en la web
5. Navegador y sistema operativo
6. Si viene desde un dispositivo móvil sabremos desde cual.
7. Y mucho más…

El uso no puede ser más sencillo.

Después de registrarnos, es necesario para obtener una clave, agregamos la librería a nuestra página con la clave que nos den:

Hecho esto, ya podremos obtener datos de los usuarios con las variables que podemos ver en la documentación. Por ejemplo, de esta forma escribimos en la caja #visitor-locale-countryCode el país al que pertenece el visitante:

$('#visitor-locale-countryCode').text(getValueText(visitor.locale.countryCode));

Tenemos tres estilos de alertas predefinidas: Informativas, Satisfactorias y de Errores. Cada una de ellas tiene su estilo para difenciarse del resto.

HumaneJs no necesita de ninguna librería para funcionar y es configurable el tiempo de duración de la alerta, la forma de cerrar la alerta, etc.

Personalmente preferiría algún plugin sencillo para jQuery y así no lidiar con muchas librerías distintas pero esta es otra buena opción.

Indice de la serie:

1. Creando y entendiendo expresiones regulares
2. Expresiones regulares comunes
3. Usando las expresiones regulares

Las expresiones regulares, o patrones, son una de las cosas más difíciles de entender debido a su complejidad, pero no nos asustemos. Una vez que las entendamos y les cojamos el tranquillo nos serán de muchísima utilidad.

¿Que son?

Las expresiones regulares son patrones que permiten buscar coincidencias con combinaciones de caracteres dentro de cadenas de texto.

Caracteres especiales:

Para definir el patrón usamos una combinación de caracteres especiales que nos ayudarán a crear la expresion. Los caracteres especiales más comunes son:

Y con estoy ya podemos crear nuestras própias expresiones regulares.

En el próximo capítulo enseñaré algunas de las expresiones regulares más comunes explicándolas para que además de sernos utiles las entendamos.

La librería calcula el tiempo continuamente, teniendo en cuenta que el tiempo avanza, por lo tanto es ideal para mostrar cuentas atras para eventos o fechas especificas.

También podemos configurar el formato en el que nos devuelve la fecha pudiendo añadir milisegundos, segundos, minutos, horas, días, semanas, etc.

Aqui podemos encontrar toda la documentación necesaria y una demostración.

Si no conocéis jQuery Mobile, se trata de un framework que es compatible con la mayoría de navegadores webs de móviles. Además de, estar bien documentado y de poder generar themes con ThemeRoller, incluye también numerosos widgets optimizados para pantallas tactiles así como botones, barras de herramientas, listas, etc que nos ayudarán a comenzar nuestro proyecto móvil.

Sin duda, como mínimo, se merece un vistazo

Una de las peculiaridades del proyecto es que en las tiendas, por lo general, los ordenadores o TPVs no disponen de teclado y ratón ya que usan pantallas táctiles por lo que me vi obligado a incluír un teclado en pantalla para los inputs de texto.

Para ello encontre dos soluciones en la web. Por un lado estaba jQuery Keypad y por otro lado Virtual Keyboard.

Yo decidí usar la primera por su sencillez. Para implementar jQuery Keypad en cualquier página necesitamos. Primero que nada, agregar las librerías necesarias por el plugin así como jQuery:

Luego iniciamos el plugin:

Con esto será suficiente para tener el teclado virtual en los inputs que queramos. Para ello, si queremos un teclado Qwerty incluiremos la clase text. Si solo queremos un teclado numérico, añadimos la clase num al input.

La librería pesa solo 3kb es su versión comprimida y no necesita de otras librerías para funcionar.

Podremos personalizar el aspecto de las alertas y notificaciones además de el tiempo de duración de estas. También podemos permitir la interacción del usuario y recibir las respuestas de estos a los mensajes de confirmación.

Personalmente preferiría un plugin de jQuery, pero, esta no es una mala opción

Do you want a 7 KB cross-browser native JavaScript that makes your plain HTML lists super flexible, searchable, sortable and filterable? Yeah! Do you also want the possibility to add, edit and remove items by dead simple templating? Hell yeah!

Esta es la descripción que encontramos en la propia web de List.js. Un script sencillo, de solo 7 kb que nos permite mejorar las listas HTML que permite buscar en listas y reordenarlas. Además permite añadir, editar o eliminar elementos dinamicamente por medio de Javascript.

No hace falta explicar su uso, si entramos a la página vemos ejemplos y es muy sencillo de implementar.

Como podemos ver en la demo de jwerty, por ejemplo, si apretamos Ctrl + Alt + Z, por ejemplo, descargamos el plugin.

Lo mejor de todo es que es realmente sencillo de usar:

jwerty.key('ctrl+shift+P', function () { [...] });
jwerty.key('⌃+⇧+P', function () { [...] });

Sencillo, ¿verdad?

Con jQuery podemos mejorarlos. Con el plugin Multiselect cambia el diseño y mejora la usabilidad de estos elementos.

Usando este plugin permitiremos al usuario seleccionar varios elementos usando solo el ratón. Además estos elementos se mostrarán en una lista teniendo la posibilidad de eliminarlos pulsando la x situada a la derecha.

Aqui ya hablé de deck.js pero además, tenemos otras 8 librerías similares.

Transiciones, pantalla completa o acceso con el teclado son algunas de las cosas que podemos hacer. La ventaja es que al estar realizadas vía web simplemente tendremos que acceder a la URL donde subamos la presentación y no tenemos que asegurarnos de que el ordenador en cuestión tenga instalado el software necesario.

Además son ideales para presentar y explicar un servicio a nuevos visitantes de una forma original.

Como vemos en el web del plugin, este aún se encuentra en versión beta pero funciona y se puede usar.

$(document).ready(function() {
$('#forward').click(function() {
  $('#test').animate({
	translateX:'-=150',
	translateY:'+=150',
	scale:'+=2',
	rotateY: '+='+(2*Math.PI),
	rotateX: '+='+Math.PI,
	rotateZ: '+='+Math.PI
  },1500);
});  

$('#backward').click(function() {
  $('#test').animate({
	translateX:'+=150',
	translateY:'-=150',
	scale:'-=2',
	rotateY: '-='+(2*Math.PI),
	rotateX: '-='+Math.PI,
	rotateZ: '-='+Math.PI
  },1500);
})
});

El código anterior crea dos animaciones. Una al cliquear el elemento #forward que aumenta la imagen usando un efecto 3D. Y la otra, #backward, reduce la imagen usando el mismo efecto. Podemos ver este efecto en la web.

El diseño esta muy bien conseguido pero además son dinámicas y personalizables por medio de CSS.

Como podemos ver en los ejemplos, la librería incluye validación de formularios, cálculos en tiempo real y manejo de errores. Además se verifica la información de la tarjeta de crédito en los servidores de Recurly entando así uso de nuestra CPU.

Para usar la librería en nuestra web necesitamos llamar a la hoja de estilos, a jQuery y al archivo recurly.js. Después solo nos queda iniciar la librería y definir los parámetros de configuración:

Luego solo nos queda añadir el div donde saldrá el formulario en nuestro HTML.

Con esto debería de ser suficiente para empezar.

El código de una presentación con 3 diapositivas sería el siguiente:

My Presentation


Slide Header

Here is a list of points:

Point 1
Point 2
Point 3


Another Slide


Lorem ipsum dolor sit amet.

Cicero

Cada diapositiva sería un div con la clase slide con lo cual, crear presentaciones es muy sencillo. Además podemos definir efectos de transición entre cada diapositiva, así como la diapositiva de inicio (no tiene por que ser la primera).

También nos da la opción de agregar elementos como el número de diapositiva en el que nos encontramos, y controles visuales para navegar por las diapositivas o ir directamente a una.

Este tipo de técnicas es perfecto para presentar una web o herramienta a un visitante. Para esos tours que suelen hacer las webs 2.0 que explican las capacidades de su web.

Lo que hace es comprobar el navegador (dispositivo) que usa el visitante para acceder a nuestra web. Si este se trata de un móvil sigue el siguiente proceso:

1. Detiene la carga de imágenes, vídeos, etc.
2. Carga los recursos que Mobilize necesita.
3. Y adapta el contenido para ser visto desde un móvil.

En la documentación podemos ver un ejemplo del resultado que podemos obtener.

Para instalar Mobilize.js en nuestra web tenemos varios métodos. Pero, si usamos WordPress lo muy sencillo. Simplemente tenemos que instalar el plugin oficial.

Es compatible con Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+ e incluso Mobile Safari (iOS 4). Además todo se genera sin usar ninguna imagen. Todo por medio de HTML y CSS3.

Para iniciar el script simplemente definimos las opciones y el elemento donde se mostrara el círculo de carga. En esta caso en #foo.

 var opts = {
  lines: 12, // The number of lines to draw
  length: 7, // The length of each line
  width: 5, // The line thickness
  radius: 10, // The radius of the inner circle
  color: '#000', // #rbg or #rrggbb
  speed: 1, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: true // Whether to render a shadow
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target); 

Para detener el círculo disponemos del método Stop().

reCaptcha

Podemos implementar reCaptcha en cualquier formulario de forma sencilla. Para empezar necesitamos la librería
para PHP que podemos obtener desde aquí.

Antes de empezar, necesitamos registrarnos para obtener las claves necesarias.

Primero añadimos el captcha al formulario, tenemos dos formas:

1. Usando el plugin (Recomendado):

   require_once('recaptchalib.php');
     $publickey = "your_public_key"; // you got this from the signup page
     echo recaptcha_get_html($publickey);

2. O sin usar ningún plugin:

   <script type="text/javascript"
        src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
     </script>
     <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
            height="300" width="500" frameborder="0"></iframe><br>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40">
        </textarea>
        <input type="hidden" name="recaptcha_response_field"
            value="manual_challenge">
     </noscript>

A continuación, solo nos queda el código para comprobar si el captcha se ha rellenado correctamente o no:

<?php
// Agregamos la librería
require_once('recaptchalib.php');
// Agregamos las claves
$publickey = "----";
$privatekey = "----";
$error = null;

if ($_POST) {
   $re_ip = $_SERVER["REMOTE_ADDR"];
   $re_challenge = $_POST["recaptcha_challenge_field"];
   $re_response = $_POST["recaptcha_response_field"];
   $re_valid = recaptcha_check_answer($privatekey, $re_ip, $re_challenge, $re_response);

   if ($re_valid->is_valid) {
      // El Captcha ha sido rellenado correctamente

   } else {
      // Error, captcha erroneo
      $error = $resp->error;
   }
}
?>

Cuando tenemos que usar un select con muchos elementos siempre es bueno ofrecer la posibilidad de buscar al usuario para filtrar elementos de forma sencilla y encontrar la opción que desea. En los campos select multiples, no solo estaría bien ofrecer esa misma opción de filtrado si no que también es buena idea mostrar los elementos seleccionados y permitir que el usuario selecciones varios sin tener que pulsar la tecla control o mayus.

Todo esto lo conseguimos con Chosen de forma sencilla.

Instalación:

1. Añadimos los archivos necesarios e inicializamos el plugin:

2. A continuación, solo nos queda añadir la clase chzn-select a los elementos selects que queramos tratar con Chosen.
3. ¡Listo!

CodeMirror

Tiene funciones tan interesantes como, colorear código dependiendo del lenguaje en el que estemos escribiendo. Además identa el código automáticamente, podemos añadirle autocompletado, buscar y remplazar, vista previa del resultado, etc. También podemos cambiar el diseño por medio de themes.

El script es compatible con:

• Firefox 2 o superior.
• Chrome.
• Safari 3 o superior.
• Internet Explorer 6 o superior.
• Opera 9 o superior (tiene algunos problemas con la versión de OS X)