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 }