Resumen de buenas prácticas en la programación

 

El presente artículo tiene como objetivo dotar al lector de elementos básicos o buenas prácticas a tener en cuenta cuando desarrollamos Sitios Web.

En general

· El desarrollo en HTML es lento. No espere hacer un sitio con foro, portada, noticias, auto-administrable, seguro y que regule toda la parte contable de una empresa en un mes. ¡Un desarrollo de estas características puede ocupar nuestro Plan de Trabajo por varios meses! Esto nos hace pensar en una correcta estimación del tiempo que emplearemos en el mismo.

· Se debe evitar nombres de archivos con espacios o caracteres que no sean parte del alfabeto inglés. Tener en cuenta que en la gran mayoría de los casos el servidor estará montado en Linux, el cual diferencia entre mayúsculas y minúsculas. HoLa.txt no será lo mismo que hola.txt.

· Todas las modificaciones a un sistema existente, tendrán que ser probadas

primero en un ambiente protegido, nunca en caliente.

· Indente su código: es de más fácil lectura.

· Tener siempre presente este esquema:

Elemento	Actividad del Servidor	Actividad del Cliente
HTML	La genera	Lo interpreta
Javascript	La genera	Lo ejecuta
CSS	La genera	Lo interpreta
PHP	Lo ejecuta	Ninguna
Base de Datos	Lo ejecuta	Ninguna

HTML

· En lo posible, apéguense al estándar más actual.

· No comenten mucho el HTML: ocupa espacio en la transferencia y al usuario

final le podrá parecer lenta la carga.

· Todo input debería tener el atributo maxlength. Esto evita en cierta manera la

inclusión de código malicioso.

Javascript

· No confíe en que el usuario tenga habilitado Javascript. Si es necesario validar un formulario en Javascript, háganlo también en PHP. Cualquier navegador permite desactivar Javascript.

· Para el ingreso de caracteres, no ocupe el evento onKeyPress: si no se suelta la tecla y se presiona enter o se pulsa en Aceptar, la validación nunca ocurre.

· Javascript no muestra errores: al más mínimo error simplemente no funciona. Revise si está bien escrito, ya que Javascript diferencia entre mayúsculas y minúsculas.

· Ocupe la “Consola de Errores” de Mozilla Firefox o bien instale la extensión “Firebug” para Firefox. Con el uso de estas herramientas, el 99% de los problemas relacionados con Javascript los podrán encontrar fácilmente.

· Siempre termine las sentencias con punto y coma (“;”). Es de más fácil lectura posterior.

· Cuando el Javascript es único para una página y no resulta muy grande, inclúyala en el HTML. De lo contrario, si es muy usado o pesa mucho, déjelo en un archivo separado.

· Los tags de <script> pueden ir en cualquier parte del documento: en lo posible, cuando se incluyan scripts grandes, déjela al final de la página para que de esta forma, primero cargue la página y al final el Javascript.

CSS

· Es mucho más óptimo dejar todo el CSS en un archivo separado que incluido en el HTML.

· No comente mucho su CSS: ocupa espacio en la transferencia y al usuario final le parecerá lenta la carga. Asimismo, traten de evitar espacios y retornos de carros innecesarios.

· En ciertos casos, se puede acortar el código hexadecimal siempre y cuando cumpla con la regla de que los pares de colores RGB sean iguales. Así, el color #1111FF se puede acortar como #11F. Lo que no se puede hacer es acortar este código: #1244BB, ya que el primer par no es igual. Tampoco se puede acortar #CCCCCC a #C, sino a #CCC.

· El último elemento de cada bloque de sentencias no necesariamente debe terminar con punto y coma.

· La extensión “Firebug” para Firefox ayuda muchísimo a la hora de depurar su código en CSS.

PHP

· OJO con los inputs: ¡Son muy vulnerables a inyección SQL! Si la consulta

fuera:

SELECT id FROM usuarios WHERE nombre = ‘example4u’

Con la inyección SQL podría quedar:

SELECT id FROM usuarios WHERE nombre = ‘’;DELETE * FROM usuarios;

Lo cual es una consulta válida: en el input en vez de escribir

example4u

Sólo habría tenido que escribir:

‘;DELETE * FROM usuarios;

· Aunque no es lo más recomendable, podemos “callar” errores o excepciones

en nuestro script anteponiendo “@” (sin comillas) a la función que provoca el

error a costa de rendimiento. Ejemplo:

$fp = @fopen(‘hola.txt’,’w’);

No tirará error si hola.txt no existe. Sin embargo, la buena práctica sería

primero revisar si el archivo existe y sólo si existe tratar de abrirlo para su

escritura:

if (file_exists(‘hola.txt’)) $fp = fopen(‘hola.txt’,’w’);

Bases de datos

· Planifique su consulta: primero créala para un caso en específico, corriéndola directamente desde un programa o gestor, luego la ordenan y finalmente la pasa a PHP haciendo sólo los ajustes necesarios.

· Sólo rescate los campos que necesitan, se gasta menos memoria y es más

claro a la vista: se saben a priori los nombres de los campos a rescatarse.

Ejemplo:

SELECT * FROM usuarios;

Es poco claro y estamos rescatando campos que no nos interesan.

SELECT id, nombre, grupo FROM usuarios;

Es más claro a la vista y sólo rescatamos campos que nos interesan.

· Al trabajar con fechas, es mucho más rápido y fácil formatear la fecha completa en la consulta que trabajándola con PHP. Revisar la función date_format() de MySQL.

· Ocupe JOIN, ya sea INNER, LEFT o RIGHT. Es más rápido que ejecutar 20 consultas que se podrían hacer en una.

· Para todos los campos de tipo varchar, char, text o cualquiera que involucre texto, deben llevar apóstrofe tanto al iniciar como al finalizar el texto.

· Si la base de datos no la creamos nosotros y no hay total certeza de la integridad del mismo y necesitamos buscar una cadena de texto, cambien a minúscula ambas cadenas: ocupen la función LOWER del estándar SQL-3. En PHP, se llama strtolower(). Sin embargo, es preferible ocupar la versión de MySQL puesto que PHP no convierte a minúsculas los caracteres “áéíóúñ”. MySQL sí.

· Importante para evitar dolores de cabeza: MySQL no diferencia entre “á” y “a”.

Sí entre “n” y “ñ”.

{ Leer Más }

Variante de solución a problemas de caracteres raros en aplicaciones web

 

¿Qué pasa cuando en los textos de la interface que está desarrollando aparecen caracteres “raros” en lugar de los caracteres acentuados y la eñe? Evidentemente estamos ante un problema con la codificación o el charset en las páginas devueltas por el servidor de aplicación, o hay algún problema con la codificación de los datos en las bases de datos utilizadas por la aplicación, o en el peor de los casos ambas. La cantidad de soluciones a este tipo de problemas publicadas en internet, en blogs y foros de desarrolladores es inmensa, y van desde las más sencillas como simplemente ajustar el atributo “content” de la etiqueta “meta” especificándole el charset de la página, ejemplo:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

o modificar algunos parámetros de la configuración de la base de datos, sus tablas y columnas, estableciendo el atributo cotejamiento o collation en la codificación correcta ejemplo “utf8_general_ci”. Hasta otras soluciones mucho más complejas como la definición de funciones tanto PHP, como JavaScript para intentar establecer la codificación correcta que elimine estos caracteres raros. Tras varios intentos aplicando algunas de las variantes encontradas, el problema de la codificación desaparecía parcialmente. Esto se debía a que los datos almacenados en base de datos estaban codificados de forma heterogénea, incluso en una misma tabla coexistían datos codificados en “ASCII“, “UTF8” y “LATIN”. Se expone este escenario porque puede ser similar al que se encuentren alguna vez cuando estén trabajando con bases de datos inmensas y la recodificación de esos datos lleve mucho tiempo o no sea viable.

La solución al problema vino precisamente, de una de las variantes encontradas, que en un inicio se estaba utilizando incorrectamente, a continuación, se expone una forma de llevar cualquier texto, sin importar en qué codificación se encuentre, a la codificación UTF8. Nuestro equipo utilizó la clase “Encoding” escrita por Sebastián Grignoli, la misma se puede descargar de internet, solamente es un archivo php y los incluimos en nuestra aplicación, dicha clase contiene varias funciones para reparar problemas de codificación. Por ejemplo, la función “fixUTF8”, toma como parámetro una cadena de texto, si la cadena de texto está correctamente codificada en UTF8, esta función no realiza cambios en la cadena y la devuelve sin cambios, por otro lado, si existiera algún problema de codificación esta función repara la cadena y la retorna correctamente codificada en UTF8. La otra función que comentaremos es “toUTF8”, esta como la función anterior recibe como parámetro una cadena de texto y la codifica a UTF8. Algo muy importante con esta última función si la cadena pasada por parámetro está en una codificación distinta a UTF8 esta función la convierte a UTF8, pero si la cadena ya está codificada en UTF8 esta función la recodificará a UTF8 lo cual nos brindará un resultado que definitivamente no es el que buscamos. Por lo que si utilizaremos estas funciones debemos hacer un aseguramiento de la entrada de datos y los resultados serán satisfactorios. Explicaremos el procedimiento mediante un ejemplo:

Vamos a suponer que tenemos una variable $cadena en la cual tenemos un texto que no sabemos su codificación.

1- Lo primero es averiguar si la codificación de la cadena es UTF8:

mb_detect_encoding($cadena, mb_detect_order(), true) == 'UTF-8'.

2- Según el resultado de esa condicional utilizar una de las dos funciones expuestas para reparar la codificación del texto contenido en la variable.

El autor del artículo empleo dichas funciones en el sistema que presento los problemas de codificación de la siguiente forma:

echo mb_detect_encoding($cadena, mb_detect_order(), true) == 'UTF-8' ?

Encoding::fixUTF8($cadena) :

Encoding::toUTF8($cct_obj->desc_turno);

Luego de su incorporación y utilización de la clase “Encoding” la aparición de caracteres raros ha sido erradicada, aunque la codificación que se utilizó, consideramos que es un poco extensa, para hacerlo un poco más legible le incorporaremos una función a esta clase para que el código anterior quede comprendido dentro de dicha función y sea más simple su uso.

{ Leer Más }

Calcular la próxima fecha dado una cantidad de días con Java Script

 

Si deseas sumarle o restarle días a una fecha cualquiera puedes usar la siguiente función que pongo a continuación; la cual espera como entrada una fecha y un número de días. Si Deseas sumar días, solo pasa el número sin signo. Si deseas restar días pásale un número negativo.

Te comento, todo depende del objeto DATE, que tiene un método para obtener los milisegundos de una fecha: setTime() y getTime para asignar, solo tienes que convertir los días a milisegundos y ya está, te paso un ejemplo.

Para convertir los días milisegundos solo tienes que aplicar la siguiente fórmula:

milisegundos=parseInt(cantidad_de_dias*24*60*60*1000);

a la función solo tenemos que pasarle la fecha a la que deseamos sumarle los días y la cantidad de días que queremos adicionarle.

El formato de la fecha debe ser similar a la que muestro a continuación:

var fecha = 01/01/1900;

Y luego de la fecha anterior es necesario separar los el día, el mes y el año para poder crear el objeto Date con la fecha de deseamos.

fecha = fecha.split(‘/’);

var day = fecha[0];

var month fecha[1];

var year = fecha[2];

var miFecha = new Date(year, month-1, day);

Como se muestra, al objeto Date se le pasa el mes restándole una unidad y es debido a que la información de los meses este objeto la almacena en un arreglo de 12 posiciones comenzando por el 0 y a la hora de crearlo se le pasa la posición en que se encuentra el mes y no el número del mes en cuestión.

Ya lo que resta es sumarle la cantidad de días en milisegundos a la fecha

miFecha.setTime(miFecha.getTime()+miliseconds);

A continuación les dejo la función completa:

function sumarDias(fecha, days){

fecha = fecha.split(‘/’);

var day = fecha[0];

var month fecha[1];

var year = fecha[2];

var miliseconds = parseInt(days*24*60*60*1000);

var miFecha = new Date(year, month-1, day);

miFecha.setTime(miFecha.getTime()+miliseconds);

day = miFecha.getDate();

month = miFecha.getMonth()+1;

year = miFecha.getFullYear();

if(day < 10)

day = '0'+day;

if(month < 10)

month = '0'+month;

if(month == '00')

month = 12;

return day+'/'+month+'/'+year;

}

Espero que les sea de ayuda.

{ Leer Más }

Dar formato a número tipo moneda con Javascript

En este artículo veremos una función que nos puede servir de mucha ayuda si trabajamos con operaciones monetarias en nuestra web, la idea surge a partir de la función number_format() de PHP y a que Javascript no cuenta con una función como esta, además de ser costoso en tiempo y procesamiento mandar a dar formato al número por una función Ajax al lado del servidor.

La función en cuestión es la siguiente:

var fNumber = {
sepMil: ".", // separador para los miles
sepDec: ',', // separador para los decimales
formatear:function (num){
num +='';
var splitStr = num.split('.');
var splitLeft = splitStr[0];
var splitRight = splitStr.length > 1 ? this.sepDec + splitStr[1] : '';
var regx = /(\d+)(\d{3})/;
while (regx.test(splitLeft)) {
splitLeft = splitLeft.replace(regx, '$1' + this.sepMil + '$2');
}
return this.simbol + splitLeft + splitRight;
},
go:function(num, simbol){
this.simbol = simbol ||'';
return this.formatear(num);
}
}

Para utilizar dicha función bastaría con llamarla de la siguiente manera:

//retorna $45.786.477,86
fNumber.go(45786477.86, "$");
// retorna "45.786.477,86234"
fNumber.go(45786477.86234);
// retorna 45.786.477"
fNumber.go(45786477);
// retorna NaN
fNumber.go(NaN);

Como primer parámetro y único obligatorio se pasa el número a dar formato, y el segundo parámetro es opcional si se quiere añadir la simbología al inicio del mismo.

En el último ejemplo se pasa como parámetro un valor no numérico y devuelve el mismo valor.

Esta función es puede acomodar a la forma de trabajo que se necesite en cierto momento, definiendo los separadores como parámetros de la función y definiendo valores por defecto en caso de no especificarse, además existen algunos casos en que validan el numero proporcionado y si no es válido devuelven “0” y personalizar la cantidad de decimales deseados, todo esto es posible haciéndole algunas pequeñas modificaciones a esta función.

{ Leer Más }

Uso del third_party: paquetes y módulos con CodeIgniter

 

Con este artículo seguimos dando pasos de avance en la programación organizada de nuestros sitios, necesario sobre todo si queremos reutilizar en nuevas aplicaciones lo que vamos haciendo.

Para reutilizar el código con CodeIgniter, podemos usar dos formas organizativas: el empaquetamiento y la modularización.

Paquetes de recursos

Para empaquetar recursos podemos utilizar las facilidades de la clase Loader de CodeIgniter. Lo que voy a comentar puedes encontrarlo en el epígrafe “Application Packages” de la guía de usuarios de CodeIgniter.

¿Cuándo es útil empaquetar? Bueno, cuando tienes un conjunto de recursos como configuraciones, helpers, modelos, bibliotecas, configuraciones de lenguaje, etc… que se pueden agrupar en funciones comunes, y no los quieres tener regados dentro del directorio applications… por ejemplo, tienes helpers y bibliotecas para trabajar con la importación y exportación de excels, y no quieres que estén dentro de las carpetas helpers y libraries junto con los demás, pues puedes hacer un paquete y unirlos en una carpeta llamada por ejemplo “my_excel_pkg”. Supón que aquí he puesto mi biblioteca “Excel_pdf_manager”, comentada en mi artículo “Importando y exportando excel sobre CodeIgniter”.

Pues todo lo que debes hacer es poner la carpeta “my_excel_pkg” dentro del directorio “/application/third_party/”. El nombre de tu paquete sería “my_excel_pkg”.

Para usar el paquete, usas la función “add_package_path” de la clase Loader, así:

$this->load->add_package_path(APPPATH.'third_party/my_excel_pkg/');
$this->load->library('excel_pdf_manager');

$this->excel_pdf_manager->algun_metodo();

Cuando termines de usar los recursos de este paquete, o sobre todo si quieres usar recursos de otro paquete, eliminas el camino a tu paquete de la clase Loader con la función “remove_package_path”. Puedes pasar como parámetro el paquete que quieres desmontar, si no se especifica nada se desmonta el último paquete cargado:

$this->load->remove_package_path(APPPATH.'third_party/my_excel_pkg/');

Modularización con HMVC [2]

Como segunda variante de reutilización, tenemos el caso en que no solamente se trata de recursos, sino que además tenemos controladores y vistas que queremos reutilizar, y que se desea instalar en forma de módulos en nuevas aplicaciones.

Lo primero necesario es que el conjunto de código a modularizar cumpla con el criterio de módulo, es decir, que no tenga dependencias con el resto de la aplicación, sino más bien interfaces claras de comunicación, pero bien desacoplado.

En este caso, debes instalar la extensión HMVC de Codeigniter[1]. La instalación consiste en un compactado de dos carpetas: “core” y “third_party”. La carpeta “third_party” la copias directo en “application”, y si tienes Codeigniter 2.0 copias también “core” en “application”. Si tienes CodeIgniter 1.7.2 copias el contenido de “core” dentro de “application/libraries”.

Adicionalmente creas la carpeta “modules” en “application”.

Una vez que tengas las tres carpetas: application/core, application/third_party y application/modules listas, puedes comenzar a copiar los módulos en carpetas independientes dentro de la carpeta modules. Pongamos un ejemplo.

Supón que tenemos un módulo para manejar usuarios, con un controlador “usuarios” dentro de “usuarios.php”, una vista “mostrar_ usuarios.php” y un modelo “usuarios_model.php”. Todo esto lo ponemos en una carpeta “usuarios” dentro de “application/modules”, manteniendo la misma estructura de carpetas que hubieras tenido si los hubieras puesto directamente en “application”.

De hecho, HMVC quiere decir Hierarchical Model View Controller o Modelo Vista Controlador Jerárquico, es decir, que esta extensión cumple con la organización de modelo-vista-controlador de CodeIgniter.

Entonces, el módulo instalado quedaría así:

Fig. 1 Estructura del directorio del módulo instalado

Dentro del módulo de usuarios, es decir, de la carpeta, puedes poner todo lo demás que podrías poner en application, es decir, helpers, libraries, etc., que te sean necesarios para el funcionamiento independiente de tu módulo.

Con esto tenemos el módulo instalado (y para usarlo en otra aplicación solamente tendrías que copiar esta carpeta para el otro sitio!).

El uso de módulos, a diferencia de los paquetes, provoca un cambio en las URL, y por tanto debes tenerlo en cuenta en la navegación interna de tu sitio.

La diferencia es que ahora se coloca el nombre del módulo en la raíz del sitio, es decir, ahora se accede según la dirección:

http://misitio.com/index.php/usuarios/usuarios/funcion/parametros

Donde “/usuarios/usuarios” corresponde a “nombre_del_modulo/nombre_del_controlador”.

En el caso de que el controlador tenga el mismo nombre del módulo recortas la dirección a:

http://misitio.com/index.php/usuarios/funcion/parametros

Bueno, te he comentado sobre dos maneras de reutilizar el código con CodeIgniter, usando paquetes cuando quieres reutilizar recursos, o módulos cuando el funcionamiento abarca controladores y vistas.

De cualquier forma, ambas vías te ahorrarán esfuerzo y tiempo de desarrollo y te ayudarán a flexibilizar tu aplicación.

Referencias:

[1] Clase Load Guía del Usuario de CodeIgniter:

http://escodeigniter.com/guia_usuario/libraries/loader.html

[2] HMVC Aplicaciones modulares en CodeIgniter:

http://phpsblog.wordpress.com/2011/04/18/hmvc-aplicaciones-modulares-en-codeigniter/

[3] Descarga de la exensión HMVC:

https://bitbucket.org/wiredesignz/codeigniter-modular-extensions-hmvc

---

[1] Puedes descargarla en: https://bitbucket.org/wiredesignz/codeigniter-modular-extensions-hmvc

{ Leer Más }

Herramientas para implementar un Data Warehouse

En el mercado existe una gran gama de herramientas para implementar el Data Warehouse conocidas como herramientas de Inteligencia de Negocio (Business Intelligence BI). Cada una de las cuales están formadas por un paquete de aplicaciones integradas.

Tipos de herramientas de inteligencia de negocio.

Cuadro de mando integral también llamados Dashboard.

Digital Dashboards o paneles de Control Digital - También conocidos como Business Intelligence Dashboards, o Dashboards Ejecutivos, Son resúmenes visuales de información del negocio, que muestran de una mirada la comprensión del global de las condiciones del negocio mediante métricas e Indicadores Clave de Desempeño. Esta es una Herramienta de Inteligencia de Negocios muy popular desde hace unos pocos años.

OLAP (Procesamiento Analítico en línea por sus siglas en inglés) (incluido HOLAP, ROLAP and MOLAP)- Es la capacidad de algunos sistemas de soporte de decisiones gerenciales que permiten examinar de manera interactiva grandes volúmenes de información desde varias perspectivas.

Aplicaciones de Informes, genera vistas de datos agregadas para mantener a la gerencia informada sobre el estado de su negocio.

Minería de datos - Extracción de información de las bases de datos acerca del consumidor, mediante la utilización de aplicaciones que pueden aislar e identificar patrones o tendencias del consumidor en un alto volumen de datos. Hay una gran variedad de técnicas de minería de datos que revelan distintos tipos de patrones. Algunas de las técnicas son métodos estadísticos y Redes Neurales como formas altamente avanzadas de análisis de datos.

Entre las herramientas existen del tipo comercial o pagas y las Open Source o código abierto aquí se muestran algunas de ellas.

Productos comerciales

Atlas SBI

Bitool Herramienta de ETL y Visualizacion

BiPoint - Business Intelligence

Bingo Intelligence

BIRT Analytics

BiyCloud Smart: QlikView + Cloud + Social Business]

Business Objects

Crystal Reports

Dynamic Data Web

Productos Open Source de inteligencia de negocios

Eclipse BIRT Project: Generador de informes para aplicaciones Web de código abierto basado en Eclipse

JasperReports

LogiReport: Aplicación de BI gratuita basada en Web de LogiXML

OpenI: Aplicación Web simple orientada al reporting OLAP.

Pentaho

RapidMiner (antes llamado YALE)

SpagoBI

1.2 Eclipse BIRT Project

Este es un proyecto de software de código abierto que proporciona capacidades de creación de informes y de inteligencia de negocio para clientes pesados y aplicaciones web, especialmente aquellas basadas en Java y Java EE. BIRT es un proyecto de software de alto nivel dentro de la Fundación Eclipse.

Los objetivos del proyecto son cubrir un ancho rango de necesidades de creación de informes dentro de una aplicación típica, abarcando desde informes operacionales o de empresa hasta procesamiento multi-dimensional analítico en línea (OLAP). Inicialmente, el proyecto se ha enfocado en capacidades que permitan a los desarrolladores de aplicaciones diseñar e integrar fácilmente informes dentro de aplicaciones.

Cuenta con 2 componentes principales: un diseñador de informes visuales dentro de Eclipse IDE para crear informes BIRT, y un componente de rutina para generar informes que pueden ser puestos en uso en cualquier entorno Java. Además, incluye un motor de gráficos que está integrado en el diseñador de informes y puede ser usado por separado para incluir gráficas en una aplicación.

Los diseños de informes BIRT se hacen en XML y pueden acceder a cierto número de fuentes de datos diferentes incluyendo SQL databases, JDO datastores, JFire Scripting Objects, POJOs, XML y Servicios Web.

Figura 1: Eclipse BIRT Project

 

1.3 Jasper

Maneja un modelo de negocio del tipo comercial de código abierto ofreciendo informes, cuadros de mando, análisis, y servicios de integración de datos para los requisitos de BI tanto autónomos y embebidos con una arquitectura flexible y moderna, construida en un modelo escalable para que sea integrable con otras aplicaciones.

1.4 Pentaho BI

Pentaho es una suite de software orientada a la solución y centrada en procesos que incluye los principales componentes requeridos para implementar soluciones basadas en procesos. Las soluciones que Pentaho pretende ofrecer se componen fundamentalmente de una infraestructura de herramientas de análisis e informes integrado con un motor de flujo de trabajo de procesos de negocio. La plataforma será capaz de ejecutar las reglas de negocio necesarias, expresadas en forma de procesos y actividades además de presentar y entregar la información adecuada en el momento adecuado.

Su plataforma se basa en flujos de trabajos, procesos y definición de procesos las cuales pueden ser integradas fácilmente.

Debido a que es una completa gama de programas integrados, la arquitectura de Pentaho se basa en servidores, motores y componentes muchos de ellos estándares; ofreciendo una plataforma de BI escalable y sofisticada que combina componentes de código abierto y código fuente escrita por desarrolladores de Pentaho.

Adicionalmente, es posible integrar software de terceros (Ver figura 2, Fuente: Pentaho Open Source Business Intelligence), entre los principales componentes que conforman la suite de pentaho están:

Productos

Pentaho Analysis Services: cuyo nombre código Modrian es un servidor OLAP (procesamiento analítico en línea) escrito en Java. Es compatible con el MDX (expresiones multidimensionales) y el lenguaje de consulta XML para el Análisis y especificaciones de la interfaz olap4j.

Pentaho Reporting: Consiste en un motor de presentación, capaz de generar informes programáticos sobre la base de un archivo de definición XML. Sobre esta solución se han desarrollado muchas herramientas, por ejemplo: informes, diseñadores de interfaz gráfica de usuario, y asistentes tipo wizard. Un uso notable de esta herramienta es el Generador de informes para OpenOffice.org

Pentaho Data Mining: Es una envoltura alrededor del proyecto Weka. Es una suite de software que usa estrategias de aprendizaje de máquina, aprendizaje automático y minería de datos. Cuenta con series de clasificación, de regresión, de reglas de asociación, y de algoritmos de clustering, para así apoyar las tareas de análisis predictivo.

Pentaho Dashboard: Es una plataforma integrada para proporcionar información sobre sus datos, donde se pueden ver informes, gráficos interactivos y los cubos creados con las herramientas Pentaho Report Designer.

Pentaho para Apache Hadoop: Es un conector de bajo nivel para facilitar el acceso a MUY grandes volúmenes manejados en el proyecto Apache Hadoop, la Suite de Pentaho BI para Hadoop permite abordar los mayores desafíos que experimentan los usuarios de Hadoop -, sobre su empinada curva de aprendizaje técnico, la falta de personal técnico cualificado y la falta de disponibilidad de las aplicaciones de desarrollo y despliegue para llevar a cabo la integración de datos e inteligencia de negocios con Hadoop.

Figura 2: Suite de Pentaho

{ Leer Más }

Data Warehouse

 

Gracias al avance informático en la actualidad la mayoría de los procesos se han informatizado, y como resultado de esto se obtiene una gran cantidad de información que se almacenan en diferentes ficheros y bases de datos, es por esto que uno de los problemas principales que enfrentan hoy en día las empresa es la gestión de grandes volúmenes de información y la forma de explotar y sacar provecho a dicha información para lograr tener soporte en la toma de decisiones administrativas, financieras y económicas. Toda empresa actualmente debe mantener un control de la información generada día a día para poder tomar decisiones de forma óptima.

Al estar inmersos en la era del conocimiento, cuyo valor primordial es la información, la cual tiene un peso inmenso sobre cualquier otro recurso de una empresa; si un gerente está bien informado de lo que sucede dentro de la empresa con datos concretos y reales puede tomar decisiones mucho más acertadas para el bien de la empresa, permitiendo manejar sus recursos de manera eficiente.

La solución más factible para agrupar toda esta información en un solo lugar del cual se pueda extraer toda la información estadística y de inteligencia de negocio necesaria es un Almacén de Datos o Data Warehouse.

 

¿Qué es un Data Warehouse?

Es una colección de datos orientada a un determinado ámbito (empresa, organización, etc.), integrado, no volátil y variable en el tiempo, que ayuda a la toma de decisiones en la entidad en la que se utiliza. Se trata, sobre todo, de un registro o historial de procesos completo de una organización, más allá de la información transaccional y operacional, almacenada en una base de datos diseñada para favorecer el análisis y la divulgación eficiente de datos. Los almacenes de datos contienen a menudo grandes cantidades de información que pueden o no subdividirse en unidades lógicas más pequeñas (Data Marts) dependiendo del subsistema de la entidad del que procedan o para el que sea necesario.

Existen varias definiciones para Data Warehouse algunas de ellas encaminadas a la información que contienen, otras hacen referencia además, a todo el proceso por el cual pasa la información para llegar al resultado final.

 

Características

Entre las características de un Data Warehouse según Bernabeu están: (Bernabeu, 2010)

Ø Orientado a un tema

Ø Administra grandes cantidades de información

Ø Guarda información en distintos repositorios

Ø Condensa y agrega información

Ø Integra y asocia información

Ø Ayuda en la decisión estratégica

Ø Permite explotar la información histórica existente

 

Ventajas

Las ventajas del Data Warehouse según Bernabeu son: (Bernabeu, 2010)

Ø Posibilita la extracción de datos de sistemas operacionales y fuentes externas.

Ø Permite la integración y homogeneización de los datos de toda la empresa.

Ø Provee información que ha sido transformada y totalizada, para que ayude en el proceso de toma de decisiones estratégicas y tácticas

 

Componentes de un Data Warehouse

Data Marts

Es un subconjunto del Data Warehouse que se enfoca en solucionar un área específica de la organización.

Entre las características de un Data Mart destacan:

Ø Usuarios limitados.

Ø Área específica.

Ø Tiene un propósito específico.

Ø Tiene una función de apoyo.

Extracción, transformación y carga (ETL)

Extraer, transformar y cargar (ETL del inglés Extract, Transform and Load) es el proceso que permite mover datos desde múltiples fuentes, reformatearlos, limpiarlos, y cargarlos en otra base de datos, data mart, o data warehouse para analizar.

 

Modelo Multidimensional de un Data Warehouse

Un modelo multidimensional es una base de datos en donde su información se almacena en forma multidimensional, es decir, a través de tablas de hechos y tablas de dimensiones a estos elementos en conjunto se le llaman cubos de información.

Los cubos de información tratan de organizar los datos por tablas o relaciones; estos tienen un número indefinido de dimensiones, razón por la cual también reciben el nombre de hipercubos. Un cubo contendrá datos de una determinada variable que se desea analizar, proporcionando una vista lógica de los datos provistos por el sistema de información hacia el data warehouse, esta vista estará dispuesta según unas dimensiones y podrá contener información calculada. El análisis de los datos está basado en las dimensiones del hipercubo, por lo tanto, se trata de un análisis multidimensional.

A la información de un cubo se puede acceder mediante "tablas dinámicas" en una hoja de cálculo o a través de programas personalizados. Las tablas dinámicas le permiten manipular las vistas (cruces, filtrados, organización, totales) de la información con mucha facilidad. Las diferentes operaciones que se pueden realizar con cubos de información se producen con mucha rapidez. Llevando estos conceptos a un data warehouse, éste es una colección de datos que está formada por «dimensiones» y «variables», entendiendo como dimensiones a aquellos elementos que participan en el análisis y variables a los valores que se desean analizar.

Dimensiones

Las dimensiones de un cubo son atributos relativos a las variables, son las perspectivas de análisis de las variables (forman parte de la tabla de dimensiones). Son catálogos de información complementaria necesaria para la presentación de los datos a los usuarios, como por ejemplo: descripciones, nombres, zonas, rangos de tiempo, etc. Es decir, la información general complementaria a cada uno de los registros de la tabla de hechos.

Variables

También llamadas “indicadores de gestión”, son los datos que están siendo analizados. Forman parte de la tabla de hechos. Más formalmente, las variables representan algún aspecto cuantificable o medible de los objetos o eventos a analizar. Normalmente, las variables son representadas por valores detallados y numéricos para cada instancia del objeto o evento medido. En forma contraria, las dimensiones son atributos relativos a las variables, y son utilizadas para indexar, ordenar, agrupar o abreviar los valores de las mismas. Las dimensiones poseen una granularidad menor, tomando como valores un conjunto de elementos menor que el de las variables; ejemplos de dimensiones podrían ser: “productos”, “localidades” (o zonas), “tiempo” (medido en días, horas, semanas, etc.).

 

Modelamiento

Al momento de realizar el modelamiento de un Data Warehouse se puede optar por distintas formas de relacionar la tabla de hecho y las tablas de dimensiones, entre las cuales están:

Ø Esquema Estrella: Consiste en una tabla de hechos central y las tablas de dimensión están relacionadas mediante claves. En este modelo los datos deben de estar totalmente normalizados.

Ø Esquema Copo de Nieve: Es una extensión del esquema en Estrella, esta posee una tabla de hechos central y las tablas de dimensión están relacionadas a este mediante claves, pero a su vez las tablas de dimensión pueden relacionarse con otras tablas de dimensión.

Ø Esquema Constelación: Compuesta por una tabla de hechos central relacionada con otras tablas de hechos, donde cada tabla de hechos posee sus propias dimensiones.

{ Leer Más }

Calcular cantidad de días transurridos entre un rango de fechas

A veces necesitamos saber los días que han transcurrido entre dos fechas. Con PHP podemos hacer esa tarea fácilmente, simplemente restando el valor timestamp de las dos fechas y convirtiendo a días. Lo explicaremos paso a paso en este artículo.

El ejercicio es muy sencillo. Vamos a obtener los valores timestamp de las dos fechas. (Recordar que los timestamp son los segundos que han pasado desde las cero horas del 1 de enero de 1970) Como los dos timestamps son una cantidad de segundos, no tenemos más que restarlos para obtener los segundos de diferencia entre las dos fechas. Luego se trataría de convertir esos segundos en días para obtener el dato que estamos buscando.

Veamos entonces la manera de obtener un timestamp de una fecha. Entre las funciones de fechas de PHP hay varias que nos pueden servir para trabajar con timestamp, pero nosotros tenemos que utilizar una en concreto llamada mktime(). Esta función recibe varios parámetros:

[sourcecode language='php'  padlinenumbers='true']
mktime ( [int hora [, int minuto [, int segundo [, int mes [, int dia [, int anyo [, int es_dst]]]]]]] ) 
[/sourcecode]

El primer parámetro es la hora, luego los minutos y segundos. Luego los meses, días y años. Con todos esos valores nos devuelve el timestamp de una fecha cualquiera. Podemos omitir parámetros y en ese caso tomará los valores de la fecha actual del servidor.

El código para obtener los timestamp de un par de fechas inventadas podría ser algo como el siguiente:

[sourcecode language='php' ]
//defino fecha 1 
$ano1 = 2006; 
$mes1 = 10; 
$dia1 = 2; 
//defino fecha 2 
$ano2 = 2006; 
$mes2 = 10; 
$dia2 = 27; 
//calculo timestam de las dos fechas 
$timestamp1 = mktime(0,0,0,$mes1,$dia1,$ano1); 
$timestamp2 = mktime(0,0,0,$mes2,$dia2,$ano2); 
Luego, podríamos restar los timestamp y convertir los segundos en días: 
//resto a una fecha la otra 
$segundos_diferencia = $timestamp1 - $timestamp2; 
//echo $segundos_diferencia; 
//convierto segundos en días 
$dias_diferencia = $segundos_diferencia / (60 * 60 * 24); 
[/sourcecode]

Para convertir los segundos en días, como se ha podido observar en el código, hay que dividir entre el número de segundos de un día. (60 segundos de un minuto, por los 60 minutos de una hora, por las 24 horas de un día).

Ahora bien, con un código como el anterior, el valor de los días de diferencia puede tener decimales y ser negativo. Nosotros queremos un número de días entero y positivo. Entonces todavía tendremos que hacer un par de operaciones matemáticas. Primero quitar el signo negativo y luego quitar los decimales.

[sourcecode language='php' ]
//obtengo el valor absoulto de los días (quito el posible signo negativo) 
$dias_diferencia = abs($dias_diferencia); 
//quito los decimales a los días de diferencia 
$dias_diferencia = floor($dias_diferencia); 
[/sourcecode]

Los decimales los quitamos simplemente redondeando hacia abajo. Puesto que si tenemos un número decimal de días no ha llegado a un día completo y no nos interesa contabilizarlo.

El código completo se puede ver a continuación:

[sourcecode language='php' ]
<? 
//defino fecha 1 
$ano1 = 2006; 
$mes1 = 10; 
$dia1 = 2; 
//defino fecha 2 
$ano2 = 2006; 
$mes2 = 10; 
$dia2 = 27; 
//calculo timestam de las dos fechas 
$timestamp1 = mktime(0,0,0,$mes1,$dia1,$ano1); 
$timestamp2 = mktime(4,12,0,$mes2,$dia2,$ano2); 
//resto a una fecha la otra 
$segundos_diferencia = $timestamp1 - $timestamp2; 
//echo $segundos_diferencia; 
//convierto segundos en días 
$dias_diferencia = $segundos_diferencia / (60 * 60 * 24); 
//obtengo el valor absoulto de los días (quito el posible signo negativo) 
$dias_diferencia = abs($dias_diferencia); 
//quito los decimales a los días de diferencia 
$dias_diferencia = floor($dias_diferencia); 
echo $dias_diferencia; 
?> 
[/sourcecode]

{ Leer Más }

Validación de formularios con CSS3 y HTML5

En este artículo veremos como validar formularios en el lado del cliente utilizando CSS3 y HTML5.

Supongamos que tenemos un formulario como este:

El cual ya hemos visto como crear en otras ocasiones, el código que se corresponde a este formulario es el siguiente:

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;} .contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;} .form_hint, .required_notification {font-size: 11px;} *:focus {outline: none;} .contact_form{ width: 550px; margin: 30px auto; } div.form_label{ width: 140px; height: auto; float: left; } div.form_field { margin: 0 0 10px 10px; } .contact_form h2 { margin:0; display: inline; } .required_notification { color:#d45252; margin:5px 0 0 0; display:inline; float:right; } .contact_form input, .contact_form textarea { border:1px solid #aaa; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border-radius:2px; -moz-transition: padding .25s; -webkit-transition: padding .25s; -o-transition: padding .25s; transition: padding .25s; } .contact_form input:focus, .contact_form textarea:focus { background: #fff; border:1px solid #100355; box-shadow: 0 0 3px #aaa; padding-right:70px; } button.submit { background-color: #035eb1; background: -webkit-gradient(linear, left top, left bottom, from(#035eb1), to(#260191)); background: -webkit-linear-gradient(top, #035eb1, #260191); background: -moz-linear-gradient(top, #035eb1, #260191); background: -ms-linear-gradient(top, #035eb1, #260191); background: -o-linear-gradient(top, #035eb1, #260191); background: linear-gradient(top, #035eb1, #260191); border: 1px solid #260191; border-bottom: 1px solid #260191; border-radius: 3px; box-shadow: inset 0 1px 0 0 #00d1d5; color: white; font-weight: bold; padding: 6px 20px; text-align: center; text-shadow: 0 -1px 0 #0a0767; } button.submit:hover { opacity:.85; cursor: pointer; } button.submit:active { border: 1px solid #035eb1; box-shadow: 0 0 10px 5px #0a0767 inset; } </style> <body> <form action="algunFichero.php" class="contact_form"> <h2>Contáctenos</h2> <span class="required_notification">* Campos requeridos</span> <br> <hr> <div class="form_field"> <div class="form_label"><label for="name">Nombre:</label></div> <input type="text" name="name" /> </div> <div class="form_field"> <div class="form_label"><label for="email">Correo:</label></div> <input type="text" name="email" /> </div> <div class="form_field"> <div class="form_label"><label for="website">Sitio Web:</label></div> <input type="text" name="website" /> </div> <div class="form_field"> <div class="form_label"><label for="message">Mensaje:</label></div> <textarea name="message" cols="30" rows="6" ></textarea> </div> <div class="form_field"> <button class="submit" type="submit">Enviar</button> </div> </form> </body> </html>

Ya este tiene incluido estilos para mejorar su aspecto visual.

En HTML5 para definir un campo como requerido se le define el atributo required, de esta forma se le está diciendo al navegador que su valor es requerido antes de que el formulario pueda ser enviado. Entonces, un formulario no podrá ser enviado si un campo marcado con required no ha sido llenado.

Entonces, agreguemos el atributo required a todos los elementos de nuestro formulario (porque queremos que todos sean completados).

<input type="text" name="name" required/>      <input type="text" name="email" required/>      <input type="text" name="website" required/>      <textarea  name="message" cols="30" rows="6" required></textarea>

Si se dan cuenta visualmente no ocurre nada cuando se agrega el atributo required,ahora estilizaremos los campos requeridos con CSS, para esto le pondremos un asterisco rojo a los campos requeridos en el lado derecho, para lograrlo se le agrega algo de relleno con la propiedad padding y se le agrega el indicador visual que se quiere para estos casos, en este caso voy a utilizar una imagen de 16x16 pixeles, la cual pueden crear ustedes mismos.

.contact_form input, .contact_form textarea {          padding:30px     }   input:required, textarea:required {     background: #fff url(red_asterisk.png) no-repeat 98% center; }

Enviando formularios que use elementos HTML5 diferentes buscadores harán diferentes cosas. Cuando el formulario sea enviado, la mayoría prevendrá de que el formulario sea enviado y mostrara una "pista" al usuario, marcando el primer campo que sea requerido y que no tenga contenido. La validación de HTML5 trabaja de acuerdo con el tipo de atributo type que es definido en los campos del formulario. Por años HTML solo ha soportado unos pocos tipos de atributos, como type="text" pero con HTML5 hay más de una docena de nuevos tipos de entrada incluyendo email y url los cuales serán usados en nuestro formulario.

Combinando los atributos type y required, el buscador ahora puede validar los formularios en el lado del cliente. Si el buscador de un usuario no soporta los nuevos tipos de campos, como el de type="email", simplemente cambiara por defecto a type="text".

Ahora cambiaremos los atributos type de nuestros campos del formulario a los equivalentes en HTML5, y con el atributo placeholder le daremos al usuario una pista de que formato debe cumplir el valor del campo.

<input type="text" name="name" placeholder="Carlos Fonseca" required/>      <input type="email" name="email" placeholder="cfonseca@gmail.com" required/>      <input type="url" name="website" placeholder="http://www.cfonseca.com" required/>

Como fue descrito antes en el primer campo, hemos agregado los atributos type="text" y required. Esto le informa al buscador que este campo es mandatario y que debe ser validado simplemente como texto. De esta manera, mientras que el usuario ponga al menos un carácter en el campo, será validado.

Ahora estilizaremos los campos que el buscador considera validos o inválidos. Anteriormente usamos :required en CSS para estilizar los elementos que usan el atributo required. Ahora podemos estilizar los campos validos o inválidos usando :valid o :invalid.

Primero, estilizamos los campos para que sean inválidos. Para este ejemplo solo queremos que los estilos inválidos se muestren cuando el campo sea enfocado. Usaremos un borde rojo, sombra roja, y un icono a conveniencia para indicar que el campo es inválido.

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {      background: #fff url(invalid.png) no-repeat 98% center;      box-shadow: 0 0 5px #d45252;      border-color: #b03535 }

Ahora otra regla para estilizar los campos validos usando color verde además de un icono con colores acordes.

.contact_form input:required:valid, .contact_form textarea:required:valid {      background: #fff url(valid.png) no-repeat 98% center;      box-shadow: 0 0 5px #5cd053;      border-color: #28921f; }

Atributo pattern de HTML5

Usando el atributo type="email" como un ejemplo, la mayoría de buscadores validan ese campo como *@*, (cualquier carácter + el símbolo de arroba (@) + cualquier carácter). Esto obviamente no limita lo suficiente pero previene que un usuario ingrese espacios o valores que sean completamente incorrectos.

El atributo de patrón (pattern) acepta expresiones regulares de javascript (regular expressions). Esta expresión es usada en vez de la de defecto del buscador para validar el campo. Entonces utilizándola en nuestro ejemplo en el campo Sitio Web quedaría de la siguiente forma:

<input type="url" name="website" placeholder="http://www.cfonseca.com" pattern="(http|https)://.+" required/>

En la siguiente imagen se muestra como en el campo se introduce un valor invalido y el navegador lo detecta según los atributos que hemos estado definiendo y muestra un mensaje para que se llene el campo correctamente.

Espero les haya servido de ayuda.

{ Leer Más }

Ordenamiento de filas de una tabla con JQuery

En ocasiones se nos presenta el problema de querer ordenar la información de una tabla ya sea de forma ascendente o descendente.

En este artículo les voy a mostrar como ordenar dicha información usando solamente JQuery.

Lo primero es tener referenciada la librería JQuery que vamos a utilizar en nuestra pagina

<script src="jquery-x-x/jquery-x.x.x.js" type="text/javascript"></script>

Luego comenzamos por costruir el código html que vamos a utilizar para este ejemplo….

<table id=”mitabla”> <thead> <tr> <th>Nombre </th> <th>Sexo</th> <th>Edad</th> </tr> </thead> <tbody> <tr> <td><input type=”text” name=”nombre[]” class=”nombre” id=”nombre1” /> </td> <td><input type=”text” name=”sexo[]” class=”sexo” id=”sexo1” /> </td> <td><input type=”text” name=”edad[]” class=”edad” id=”edad1” /> </td> </tr> <tr> <td><input type=”text” name=”nombre[]” class=”nombre” id=”nombre2” /> </td> <td><input type=”text” name=”sexo[]” class=”sexo” id=”sexo2” /> </td> <td><input type=”text” name=”edad[]” class=”edad” id=”edad2” /> </td> </tr> <tr> <td><input type=”text” name=”nombre[]” class=”nombre” id=”nombre2” /> </td> <td><input type=”text” name=”sexo[]” class=”sexo” id=”sexo2” /> </td> <td><input type=”text” name=”edad[]” class=”edad” id=”edad2” /> </td> </tr> </tbody> </table>

Hay que tener bien definido en la tabla la cabecera(<thead>) y el cuerpo de la misma(<tbody>) debido a que la función de ordenamiento ordenara por los elementos contenidos en el <tbody>

Una vez tenido el código html agregamos la siguiente función JQuery:

<script type="text/javascript"> var SORTER = {}; SORTER.sort = function(which, dir) { SORTER.dir = (dir == "desc") ? -1 : 1; $(which).each(function() { var sorted = $(this).find("> tr").sort(function(a, b) { return $(a).find(input.age).val() > $(b).find('input.age).val() ? SORTER.dir : -SORTER.dir; }); $(this).append(sorted); }); }; </script>

Donde:

SORTER: será una variable con una función almacenada.

which: el elemento a ordenar(en este caso la tabla).

dir: la dirección a la que va a ordenar(ascendente(asc) o descendente(desc)).

La función sort es una vieja función de JavaScript que ordena un arreglo basado en la función que se le pasa.

Ahora probemos la función agregando el siguiente código JQuery

<script type="text/javascript"> $(document).ready(function() { SORTER.sort('#mitabla tbody'); }) </script>

El orden en el que la función ordenara los elementos puede ser modificado cambiando el operador de mayor que(>) por el operador menor que(<) en la función antes descrira.

Espero les haya servido de ayuda.

Saludos

{ Leer Más }

Trabajo con jquery.validation (jQuery)

 

Como desarrollador web y sistemas de gestión, validar formularios es un paso obligatorio y de cierta forma repetitivo.

En este artículo veremos cómo trabajar con jquery.validation como una potente herramienta para las validaciones de formularios.

Para comenzar a utilizar jquery.validation, simplemente debemos agregar una referencia a las librerías jQuery y jquery.validation en nuestra página.

[sourcecode language='php'  padlinenumbers='true']
<script src="jquery-x-x/jquery-x.x.x.js" type="text/javascript"></script> 
<script src=" jquery-x-x /jquery.validate.js" type="text/javascript"></script>
[/sourcecode]

Conceptos básicos

Si trabajamos con jquery.validation hay que tener claros que son los métodos de validación y las reglas de validación.

Los métodos de validación implementan el código necesario para validar un elemento.

De serie contamos con un número considerable de métodos de validación para las comprobaciones más habituales, pero siempre es posible agregar a jquery.validation nuestras propias validaciones personalizadas.

Por ejemplo, un método de validación sería el código necesario para validar que la entrada es numérica o un e-mail, y las reglas de validación permiten asociar un elemento de nuestro formulario a uno o más métodos de validación.

A continuación se muestran las distintas formas de cómo se pueden asociar a un elemento las reglas de validación:

1- A través de nombres de clases css en atributo class. Por ejemplo class=”required” especifica que nuestro elemento será requerido, si se desea asociar a más de una regla se hace seguido de un espacio: class=”required number”, especifica que será requirido y solo aceptará números. Estos nombres de clases no tienen por qué existir en tu hoja de estilos, son clases que utilizará sólo jquery.validation.

2- Con atributos personalizados que requieren parámetros. Por ejemplo <input type=”text” minlength=”3”>, especifica que el contenido de nuestra caja de texto no debería ser menor a 3 caracteres

3- A través de código javascript y añadiendo las reglas a través del objeto rules.

Un primer ejemplo

[sourcecode language='php' ]
<form method="post" id="ejForm">
    <p>
        Nombre
        <input type="text" id="nombre" name="nombre" class="required" />
    </p>
    <p>
        Edad
        <input type="text" id="edad" name="edad" class="required digits" />
    </p>
    <p>
        <input type="submit" value="Enviar" />
    </p>
    </form>

    <script type="text/javascript">
        $().ready(function () {
$("#ejForm").validate();
        });
    </script>
[/sourcecode]

Estas reglas no son excluyentes y pueden combinarse según nuestras necesidades.

En este formulario:

Se han especificado las reglas de validación a través de nombres de clases.

Se ha llamado al método validate() para el elemento ejForm, que configura el formulario para que sea validado.

A partir de este momento, el formulario no podrá ser enviado si no cumple con las reglas impuestas.

Si ampliamos el ejemplo anterior para que el nombre tenga al menos 3 caracteres y la edad esté comprendida entre 18 y 99 años, tendremos que especificar estas reglas de validación a través de atributos con parámetros:

[sourcecode language='php' ]
<form method="post" id=" ejForm ">
<p>
    Nombre
    <input type="text" id="nombre" name="nombre" class="required" minlength="3" />
</p>
<p>
    Edad
    <input type="text" id="edad" name="edad" class="required digits" min="18" max="99" />
</p>
<p>
    <input type="submit" value="Enviar" />
</p>
</form>

[/sourcecode]

Otra forma de especificar las reglas es utilizar javascript para acceder al objeto rules y declararlas por código:

 

[sourcecode language='php' ]
  <form method="post" id=" ejForm ">
    <p>
        Nombre
        <input type="text" id="nombre" name="nombre" />
    </p>
    <p>
        Edad
        <input type="text" id="edad" name="edad" />
    </p>
    <p>
      <input type="submit" value="Enviar" />
   </p>
    </form>
    <script type="text/javascript">
        $().ready(function () {
            $("# ejForm ").validate({
                rules: {
                    nombre: {
                        required: true,
                        minlength: 3
                    },
                    edad: {
                        required: true,
                        digits: true,
                        min: 18,
                        max: 99
                    }
                }
            });
        });
    </script>

[/sourcecode]

Mensajes de error

Algo importante cuando validamos, es cómo y dónde se muestran los mensajes de error.

Cuando sucede un error durante la validación, por defecto jquery.validation agrega dinámicamente una etiqueta label a continuación del campo validado. Además, el mensaje de esta etiqueta es igualmente predefinido y está en inglés.

Referente al nuevo elemento label creado, es posible especificar el tipo de elemento que queremos crear para mostrar un error, en qué lugar del documento queremos que aparezca, mostrar resúmenes de errores para agrupar los mensajes, etc.

Más adelante se mostraran unas breves indicaciones de cómo personalizar estos mensaje.

Algo muy importante es la traducción del mensaje y la forma más sencilla de traducir los mensajes es bajarse la traducción de los mismos al lenguaje que necesites. Por defecto, jquery.validation está traducido a más de 41 idiomas, pero si aun así tu idioma no está disponible te resultará bastante sencillo traducirlo.

En la misma descarga del plugin hay una carpeta localization donde están todos los ficheros de idioma.

Si por ejemplo, queremos los mensajes en español bastaría con incluir la siguiente referencia a nuestra página, siempre después de la referencia a jquery.validation.

 

[sourcecode language='php' ]
<script src=" jquery-x-x /messages_es.js" type="text/javascript"></script>

[/sourcecode]

Una vez hemos traducido los mensajes predefinidos, podríamos querer mostrar mensajes personalizados o simplemente un mensaje especial para un campo concreto.

jquery.validation resuelve la búsqueda del mensaje a mostrar de la siguiente forma:

1- Primero busca si se ha especificado un mensaje para el elemento a través de javascript. Si lo encuentra, este será siempre el mensaje mostrado. Con javascript podemos especificar un único mensaje para todos los errores de validación o mostrar un mensaje por cada tipo de error de validación.

2- Segundo busca si nuestro elemento tiene definido el atributo title. Si lo encuentra, el valor del mismo será mostrado.

3- Por último, si no encuentra mensajes desde javascript ni el atributo title, buscará en los mensajes predefinidos.

Un ejemplo de personalización a través de javascript:

[sourcecode language='php' ]
$().ready(function () {
            $("#ejForm").validate({
                rules: {
                    nombre: {
                        required: true,
                        minlength: 3
                    },
                    edad: {
                        required: true,
                        digits: true,
                        min: 18,
                        max: 99
                    }
                },
                messages: {
                    nombre: {
                        required: "Nombre es obligatorio",
                        minlength: function (p, element) {
                            return "Nombre tiene que ser igual o mayor que " + p;
                        }
                    },
                    edad: "Este será el único mensaje para edad"
                }
            });
        });

[/sourcecode]

Reglas y métodos de validación personalizados

Es posible también implementar nuestras propias reglas de validación si no nos sirven las incluidas en jquery.validation.

Por ejemplo, crearemos una regla que validará si el nombre suministrado cumple con ciertas condiciones.

La regla de validación se llamara valid_nombre y al método de validación le llamaremos esNombreValido. En la práctica, el método de validación suele llamarse igual que la regla de validación, pero en este ejemplo las he llamado distintas para que veas que no es necesario asociar una regla y su método por nombre.

1. Definir método de validación personalizado

[sourcecode language='php' ]
function esNombreValido (value, element, param) {
    //value es el valor actual del elemento que se está validando
    //element es el elemento DOM que se está validando
    //param son los parámetros especificados por el método
    //  p. ej. en el caso de minlength="3", param será 3
    //  en caso de que el método no tenga parámetros, param será true

    if (value == ‘Pedro”) {
        return true; //supera la validación
    }
    else {
        return false; //error de validación
    }
}

[/sourcecode]

2. Registrar regla de validación, método de validación y mensaje por defecto

[sourcecode language='php' ]
$.validator.addMethod("valid_nombre ", esNombreValido, "No eres Pedro");

[/sourcecode]

3. Utilizar nueva regla de validación

[sourcecode language='php' ]
$().ready(function () {
    $("#ejForm").validate({
        rules: {
            nombre: {
                valid_nombre: true
            }
        }
    });
});

[/sourcecode]

Remote

Remote es muy sencillo de entender. Simplemente se delega la validación del elemento en una llamada a una url que validará el valor en el servidor y tiene que devolver en formato JSON un true si la validación ha tenido éxito o false (o cualquier otro valor distinto de true) en caso contrario.

En codeIgniter podríamos agregar por ejemplo una función p llevar a cabo la tarea de validación en el servidor.

[sourcecode language='php' ]
function nombre_funcion_ajax() {
        $nombre = $this->input->post(‘nombre’);
//se hace la comprobación de que el valor cumpla las condiciones deseadas
        if ($this->nombre_model->value_exist($nombre)) {
            echo 'false';
        } else
            echo 'true';
    }
[/sourcecode]

Y el código javascript necesario para utilizarlo sería:

[sourcecode language='php' ]
$("# ejForm ").validate({
            rules: {
                nombre: {
                required: true,
                remote:{
                    url:"<?php echo base_url(); ?>mi_controlador/ nombre_funcion_ajax ",
                    type:"post",
                    data:{
                        nombre: function(){
                            return $('# nombre ').val();
                        }
                    }
                }
                }},
            messages: {
                nombre: {
                    required: “El valor es requerido”,
                    remote: "el valor no cumple con la condición x"
                }
            }
        });

[/sourcecode]

Por defecto, remote hace una petición GET con los parámetros nombre=valor.

En cualquier caso, remote permite configurar todo lo que queremos la petición AJAX a través de su parámetro options.

En el ejemplo mostrado se envía por el método post y se adjunta como dato el nombre esto no es necesario ya que por defecto se envía el parámetro validado, pero se utiliza en caso de querer enviar algún otro dato junto con el validado.

Además de todas las funcionalidades mencionadas posee muchas más, todas estas configurables que nos permiten enriquecer el trabajo de los datos en el lado del cliente.

Espero les haya servido de ayuda.

Saludos

{ Leer Más }

Cambio de clase de un componente con JQuery

En este artículo te hablaré sobre el uso de función de JQuery toggleClass, que te permite intercambiar clases de un componente en tiempo de ejecución según las necesidades del programador.

$(this).toggleClass('nombre de la clase);

En este ejemplo crearemos por css varias clases con diferentes estilos y tamaños y la intercambiaremos con la función toggleClass.

   1: .image1, .image2, image3{

   2:         float: right; 

   3:         margin-right: 20px; 

   4:         border-radius: 4px; 

   5:         width: 194px; 

   6:         height: 34px;

   7:  }    

   8: .image1{ background: url('../images/image1.png') no-repeat;   }

   9: . image2{background: url('../images/image2.png') no-repeat; }   

  10: . image3{  background: url('../images/image3.png') no-repeat; }

Ahora creamos el fragmento de código html que contendrá las clases creadas.

   1: <div id="example_container">

   2:         <a href="" id="view_images" class=" view_images">

   3:             <div class="images" id="images"></div>

   4:         </a>

   5: </div>

Ahora con el código JQuery podemos cambiar la clase

   1: Clase1

   2: $(‘# view_images).click(function(event){

   3: Event.preventDefault();

   4: $(‘#images’).toggleClass(‘image1’);

   5: })

   6: Clase2

   7: $(‘# view_images).click(function(event){

   8: Event.preventDefault();

   9: $(‘#images’).toggleClass(‘image2’);

  10: })

  11: Clase3

  12: $(‘# view_images).click(function(event){

  13: Event.preventDefault();

  14: $(‘#images’).toggleClass(‘image3’);

  15: })

Otra forma de usarlo sería de la siguiente manera

   1: $(this).toggleClass('opened', x == 1);

Esta sintaxis es la forma abreviada de cambiar una clase si se cumple una condición, en este caso que la variable x sea igual a 1, algo similar a esto:

   1: if (x == 1) {

   2: $(this).addClass('opened');

   3: } else {

   4: $(this).removeClass('opened');

   5: }

En conclusión, hemos visto que la función toggleClass de JQuery puede resultar muy útil para el trabajo con diferentes estilos en una página web. Nos permite hacer de forma dinámica cambios de estado, tamaño, color, etc, de los distintos componentes que conforman la vista que vamos construyendo.

{ Leer Más }