Otro punto importante, es que la posibilidad de reducir el fichero concatenado a un fichero mucho menor. La reducción puede ser tal, que según que librerías pueden llegar a reducirse un 80% del total de su peso. Si estamos de aplicaciones de intranet, podemos estar hablando de reducir la carga de 1 Mb a 300 Kb, lo cual es una mejora sustancial.

En post bastante antiguos expliqué el uso de la compresión de ficheros js mediante el PHP. Esta técnica es muy cómoda para sitios pequeños, pero en el momento que el proyecto reciba muchas peticiones, este sistema se puede volver en nuestra contra ya que estamos sobrecargando el servidor con un trabajo extra que puede ser evitado.

La versión más óptima de enviar ficheros comprimidos es que estos ya lo estén y que el servidor web únicamente se encargue de servir esta petición. Para ello vamos a utilizar gran librería creada por los expertos en optimización web de Yahoo: YUI Compressor. Necesitamos descargarnos esta librería y utilizar el fichero jar que tenemos en la carpeta build. Para los que no sepáis Java, tranquilos, no es necesario. Únicamente vamos a configurar nuestro XML de Ant para que utilice dicha librería para comprimir nuestros ficheros javascript (esta técnica también es aplicable a ficheros CSS).

Para ello, agregaremos la siguiente porción de código XML a nuestro fichero creado en el anterior post:

Este grupo de tareas se llama comprimirFicheros y antes de ejecutarse, ejecutará de forma no paralela el grupo de tareas concatenarFicherosJs. Más adentro, se le define la carpeta dónde están ubicados los ficheros js y que ficheros queremos comprimir, en este caso, el fichero que hemos generado después de concatenar los ficheros del grupo de tareas concatenarFicherosJs. Luego aparecen un grupo de líneas que detallan que la ejecución de la librería y algunos argumentos que ésta precisa.  Y por último no menos importante, se define que todos los ficheros js seleccionados para ser comprimidos, tendrán una copia con el mismo nombre pero acabado en -min.js.

<target name="comprimirFicheros" depends="concatenarFicherosJs">
<apply executable="java" parallel="false">
<fileset dir="js/" includes="fichero.js"/>
<arg line="-jar"/>
<arg path="yuicompressor.jar"/>
<srcfile />
<arg line="-o"/>
<mapper type="glob" from="*.js" to="js/*-min.js"/>
<targetfile />

Así, cuando hemos ejecutado este grupo de tareas, se ha ejecutado otro grupo (concatenarFicherosJs) y se ha generado un fichero comprimido del fichero generado por el grupo anterior (fichero-min.js). En este caso la reducción es mínima ya que son ficheros muy pequeños, pero si hacéis pruebas con ficheros más grandes, podréis comprobar la gran mejora sobre el peso del fichero que provoca la compresión con esta utilidad.

Esto debe ser un MUST, como dicen los anglosajones, dentro de nuestras técnicas para mejorar el rendimiento de nuestro sitio web.

Dentro de este tema de reducir las peticiones, aparece un tema recurrente en prácticamente todo proyecto web que se precie: la llamada a múltiples ficheros js para cargar una página web. Normalmente, nuestra página cuenta con algún framework javascript, cómo jQuery, el uso de algún plugin de este framework que estamos utilizando y por último, nuestro propio fichero js con javascript que hemos manufacturado nosotros. Es decir, de inicio, ya tenemos como mínimo tres peticiones. Veamos cómo podemos reducir el número de peticiones de 3 a 1.

Para ello, haremos uso de Ant. Para quien no lo conozca, es una herramienta que permite realizar tareas mecánicas, normalmente muy utilizada en proyectos Java. Las tareas se definen en ficheros xml que dicha herramienta interpreta. Entornos de desarrollo como Netbeans o Eclipse, llevan integrado esta utilidad. Veamos el siguiente xml:

< ?xml version="1.0" encoding="UTF-8"?>
<project name="DemoJavascript" xmlns:rsel="antlib:org.apache.tools.ant.types.resources.selectors">
<target name="concatenarFicherosJs" description="Unir varios ficheros js en orden">
<concat destfile="js/fichero.js">
<filelist dir="js/">
<file name="ficheroUno.js" />
<file name="ficheroDos.js" />
<file name="ficheroTres.js" />
</filelist>
</concat>
</target>
</project>

Lo primero que se define es un nombre del proyecto más el xlmns de Apache Ant, lo cual nos sirve para validar nuestra sintaxis dentro del fichero xml.

Luego definimos un grupo de tareas – target (nuestro fichero puede contener más de  un grupo de tareas) y la llamamos concatenarFicherosJs. Este grupo tiene una tarea llamada concat la cual indica que se deben concatenar ficheros. Esta tarea, define un atributo destfile que indica el fichero que contendrá los tres ficheros concatenados. Ya hemos indicado que queremos concatenar y en dónde queremos guardar el fichero generado. Ahora nos queda indicar que ficheros y en que orden queremos que se concatenen. Eso se realiza mediante la definición de una lista de ficheros – filelist, dónde indicamos la ruta – dir – dónde encontrar los ficheros que a continuación definimos. A partir de ahí, definimos cada uno de los ficheros que queremos concatenar y en que orden necesitamos que se concatenen. El orden es importante ya que si primero si intenta cargar un plugin de jQuery sin que el framework se haya cargado antes, nos dará un error.

Para los que no han utilizado nunca Ant, hay muchos ejemplos sencillos en internet de cómo ejecutar tareas de Ant desde Eclipse y Netbeans.

Esto es todo. Ahora ya podemos modificar nuestra página para que en vez de realizar tres solicitudes, cargue un único fichero. En la utilización de proyectos mucho más complejos, esto puede ser una mejora sustancial ya que podemos reducir las peticiones de 8 o 9 a 1 o 2.

El problema, es que esta generación al vuelo, si no se hace bien, puede producir que nuestra página sufra grandes retardos e incluso a mucha gente le aparezca el contenido a golpes. Esto suele ser debido a que el contenido que se está generando, se está inyectando al DOM durante su proceso de creación. Esto provoca que recorramos continuamente al DOM. Veamos un ejemplo:

var accessDiv = document.getElementById('access');
for (var i = 0; i < 50; i++){
accessDiv.innerHTML += 'hola';
}

De siguiente forma, generamos el html y una vez generado, entonces lo introducimos en el DOM:

var html = '';
for (var i = 0; i < 50; i++){
html += 'hola';
}
document.getElementById('access').innerHTML = html;

var elementosDiv = document.getElementsByTagName('div');
for (var i = 0; i <  elementosDiv.length; i++){
//Trabajar con el array elementosDiv[i]
}

En la variable elementosDiv guardamos un array con todos los elementos DIV que contiene en nuestra página. Después, vamos iterando sobre este array trabajamos con cada uno de los elementos que componen este array. El problema que tiene este código, es que la variable elementosDiv contiene un array de elementos vivos, es decir, contiene una referencia directa al objeto DOM de nuestra página. Si durante la ejecución del bucle se agrega un nuevo elemento DIV a la página, automáticamente elementosDiv.length valdrá lo que valía antes más uno. Esto nos indica que para cada iteración del bucle, nuestro código solicita que se cuenten cuantos elementos DIV tiene el objeto DOM, lo cual produce una gran carga al navegador.

Para evitar este comportamiento, es tan sencillo como guardar cuantos elementos DIV hay justo antes de comenzar con la iteración.

var elementosDiv = document.getElementsByTagName('div');
for (var i = 0, count = elementosDiv.length; i < count; i++){
//Trabajar con el array elementosDiv[i]
}

En este código, justo cuando se inicializa el bucle, se guarda en la variable count el número de elementos del array. De esta forma, ya no es necesario que en cada iteración del bucle se tenga que ir a contar el número de elementos DIV al objeto DOM.

En este primer post, vamos a ver un truco  muy sencillo para optimizar el rendimiento de nuestro código javascript y así conseguir una respuesta más rápida de nuestro navegador.

Suponemos el siguiente código:

   var start = new Date().getTime();
   for (var i = 0; i < 5000; i++){
      document.getElementById('s').value = i;
   }
   var elapsed = new Date().getTime() - start;
   console.log(elapsed);

Este código accederá 5000 veces a un objeto y le cambiará su valor. Si ejecutáis este código con el firebug, podréis el tiempo en milisegundos que tarda en ejecutar dicho código. Cada vez que itera en el bucle, debe acceder al DOM y recorrerlo buscando un elemento que tenga un identificador igual a ‘s’.

Optimizar este código es muy sencillo y únicamente debemos acceder una vez al dom y guardar el objeto en una variable.

   var start = new Date().getTime();
   var s = document.getElementById('s');
   for (var i = 0; i < 5000; i++){
      s.value = i;
   }
   var elapsed = new Date().getTime() - start;
   console.log(elapsed);

Y aún mejor, si no queremos realizar ningún tipo de animación, únicamente mostrar un valor después de un bucle, podemos asignarlo al final del proceso

  var start = new Date().getTime();
  var j;
  for (var i = 0; i < 5000; i++){
   //Aquí haríamos nuestro cálculo
   j = i;
  }
  document.getElementById('s').value = j;
  console.log(end.getTime() - start);

A partir de ahora, intentaré volver a publicar de forma más periódica y no volver a dejar tan descuidado el blog.

Así pues, es breve nos veremos en nuevo post.

Saludos

• Pido cita (día y hora para hacer el examen a través de la página de Pearson VUE que es la empresa encarga de autorizar centros para la realización del exámen)
• Cuadro la cita con mis vacaciones
• Dos días antes del examen, repaso y hago exámenes de pruebas (se pueden comprar en la página de Zend)
• Me presento en el centro. Me tienen 30 minutos de reloj esperando para al final decirme que no puedo hacer el exámen ya que, según ellos, los de Pearson Vue han cambiado el programa y desde entonces, a ellos no les funcionan por no se cuantas escusas más.
• Me traslado a mi pueblo e intento cambiar el examen, pero ya no me dejan por que ya ha pasado.
• Tengo que llamar varias veces hasta contactar con Pearson (más vale que habléis inglés si os pasa esto) para realizar la reclamación. Tengo que mandar un e-mail a una dirección determinada.
• Mando el e-mail y contactan conmigo dos días después. Hablan con el centro y en teoría en una o dos semanas estará todo arreglado.
• Pasan las semanas, mando e-mail sin respuestas hasta que estallo y mando un e-mail acordándome de ciertos parientes. A este e-mail si que recibo respuesta. Intercambio de e-mail con tono tenso.
• Busco centro en Madrid (agosto), llamo al centro pero hasta septiembre está cerrado y no me pueden dar información.
• Llamo el 2 de septiembre y me comunican que el sistema funciona correctamente y puedo realizar el examen.
• Programo viaje para finales de septiembre (y de paso de turismo).
• Por fin hago el examen el 25 de septiembre en el centro Azpe de Madrid.
• Apruebo!!!!

Cómo podéis comprobar, el camino ha sido largo, pero bueno, ya se ha acabado y ahora toca prepararse para el SCJP de Java.

En cuanto al examen, lo que os puedo contar es que es algo más difícil que los de test, principalmente por que aparecen cuestiones referentes a funciones que no están incluidas en el libro de preparación de Apress. No os puedo contar más ya que te hacen firmar que no comentes nada sobre el examen. De todas formas, si os preparáis bien y lleváis bien controlado todo lo que aparece en el libro de Apress, (y mucha práctica, por supuesto), no tendréis problemas para sacaros la certificación.

En cuanto al lugar y forma de realizar el examen, pues lo más resañable sería que cuando lleguéis os verificarán vuestra identidad mediante la solicitación de dos documentos identificativos, luego os pedirán firmar algún documento, iréis a un habitáculo cerrado con cámara, no se puede entrar con ningún objeto personal, ni incluso el reloj. La pantalla del programa de preguntas es toda blanca y podréis revisar todas las preguntas en cualquier momento hasta al hacer clic sobre el botón de evaluar, y por supuesto, todo en inglés.

Espero que más o menos, os haya aclarado un poco la idea del examen.

Un saludo y ánimo a todos

P.D.: aquí os dejo el logotipo con el enlace al perfil mi certificación

Haz clic en el logo para ver mi perfil

Pero, a lo que iba en este post: la certificación Zend de PHP. He comenzado a prepararme seriamente dicha certificación que tenía en mente hace ya mucho tiempo. He comprado el Voucher (ticket para poder hacer el examen) y 5 exámenes de prueba. Tengo previsto realizar la prueba dentro un mes, durante junio probablemente. El examen se puede realizar en cualquier centro Vue autorizado y consiste en 70 preguntas tipo test, multiselección o de escritura, durante un tiempo máximo de 90 minutos. El temario intenta contemplar todos los ámbitos de PHP, he incluso diferencias entre la versión 4 y la 5. Una vez superada la prueba, tu perfil aparece en un listado en la página de Zend, con la gente que ha aprobado el examen, y cuya finalidad es de que si alguna empresa necesita de un programador PHP certificado, pueda ser fácil encontrarlo. Además, te ofrecen colocar un logo de la certificación enlazado con tu perfil de usuario dentro de Zend. El porcentaje de preguntas aprobadas necesarias para poder aprobar el examen, no lo he encontrado en ningún sitio, así que no puedo dar detalles sobre ese tema.

Dentro de unos días, tengo intención de continuar escribiendo tutoriales que nos ayuden con el día a día, dentro de nuestro mundo de la programación web.

Un saludo

Un problema que podemos tener al trabajar con nuestra base de datos, es que ésta no esté disponible en un momento determinado por que esté sobrecargada o por que no hay posibilidad de conexión. Por ello, debemos controlar que si no tenemos conexión a la base de datos, la ejecución de nuestra aplicación sea detenida inmediatamente (en el caso de que el uso de la base de datos sea crítico y nuestra aplicación sea 100% dependiente de la conexión a la base de datos.

Existen multitud de formas de controlar y gestionar los errores. PHP nos da ciertas herramientas para intentar capturar estas situaciones. En el ejemplo vamos a utilizar la función exit, que permite detener inmediatamente la ejecución de nuestro script, y también la función error_log que permite registrar en el log de errores de nuestro servidor web un evento, en nuestro caso, una frase identificadora para que podamos saber cúando ha pasado el problema. Si tenemos un hosting contratado (no un servidor dedicado), es prácticamente seguro que no tendremos acceso al fichero de logs del servidor web, pero lo bueno de esta función es que también es capaz de guardar el registro que nosotros queramos en un derminado fichero o incluso mandar un e-mail a una determinada cuenta. Recomiendo mirar la documentación por que además de las capacidades citadas, permite más opciones, las cuales puedes ser muy útiles para nuestra aplicación.

Lo que vamos a hacer es modificar la función pública conectar() de la clase Db. En dicha función vamos a detectar si nuestra conexión ha fallado, y si se da el caso, registrar dicho error para luego diagnosticar el problema, además de mostrar un error por pantalla avisando al visitante de existe un problema con nuestra aplicación.

/*Realiza la conexión a la base de datos.*/
private function conectar(){
   switch ($this->tipo){
      case 'mysql':       $link=mysql_connect($this->servidor, $this->usuario, $this->password);
                          if ($link){
                             mysql_select_db($this->base_datos,$this->link);
                             @mysql_query("SET NAMES 'utf8'");
                          }
                          break;

      case 'postgress':   $this->link=pg_connect("host=".$this->servidor." dbname=".$this->base_datos." user=".$this->usuario." password=".$this->password)
                          break;
      break;
   }
   if (!$link){
      error_log(0,'Problema de conexión a la base de datos.');
      exit('Perdonen las molestias. Tenemos un problema técnico. Esperamos resolverlo en los próximos minutos');
   }else{
      $this->link=$link;
   }
}

Descargar fichero Db.class.php actualizado (en formato UTF8)

Con esto ponemos fin a una pequeña colección de tips. Espero que esto les haya servidor para ir aprendiendo como poder crear y desarrollar una clase, utilizar un patrón de diseño y crear niveles de abastracción.

Temas relacionados:

Crear una clase para conectar a la base de datos

Crear una clase para conectar a la base de datos (II)

Crear una clase para conectar a la base de datos (III)

En esta siguiente parte del tutorial vamos a realizar una sencilla mejora para hacer que nuestra clase sea capaz de conectarse a diferentes tipos de base de datos. En concreto vamos a ver cómo adaptarla para que se conecte a PostgreSQL.

Lo primero que debemos realizar es agregar una nueva variable a nuestro fichero de configuración:

config.php

//Datos de configuración de la conexión a la base de datos

//Servidor
$host='localhost';

//Usuario
$user='user';

//Password
$password='test';

//Base de datos a utilizar
$db='testDB';

//Qué sistema gestor de base de datos utilizamos, mysql, oracle, ...
$dbType='mysql'

Podemos observar una nueva última variable llamada dbType la cual utilizaremos para saber que tipo de base de datos vamos a utilizar.

Ahora vamos a adaptar nuestra clase Conf para que lea dicho valor y lo guarde ($_dbType). Además agregaremos una función getDBType() para poder obtener dicho valor.

Conf.class.php

Class Conf{
   private $_domain;
   private $_userdb;
   private $_passdb;
   private $_hostdb;
   private $_db;
   private $_dbType;

   private static $_instance;

   private function __construct(){
      require 'config.php';
      $this->_domain=$domain;
      $this->_userdb=$user;
      $this->_passdb=$password;
      $this->_hostdb=$host;
      $this->_db=$db;
      $this->_dbType=$dbType;
   }

   private function __clone(){ }

   private function __wakeup(){ }

   public static function getInstance(){
      if (!(self::$_instance instanceof self)){
         self::$_instance=new self();
      }
      return self::$_instance;
   }

   public function getUserDB(){
      $var=$this->_userdb;
      return $var;
   }

   public function getHostDB(){
      $var=$this->_hostdb;
      return $var;
   }

   public function getPassDB(){
      $var=$this->_passdb;
      return $var;
   }

   public function getDB(){
      $var=$this->_db;
      return $var;
   }

   public function getDBType(){
	  $var=$this->_dbType;
	  return $var;
   }

}

Por último los cambios más significativos vienen dentro de nuestra clase Db. Dentro de las funciones de conectar, ejecutar una query y obtener una fila de resultados es dónde podemos ver cómo en función del  valor tipo de base de datos, la clase utiliza unas funciones u otras.

Db.class.php

/* Clase encargada de gestionar las conexiones a la base de datos */
Class Db{

   private $servidor;
   private $usuario;
   private $password;
   private $base_datos;
   private $tipo;
   private $link;
   private $stmt;
   private $array;

   private static $_instance;

   /*La función construct es privada para evitar que el objeto pueda ser creado mediante new*/
   private function __construct(){
      $this->setConexion();
      $this->conectar();
   }

   /*Método para establecer los parámetros de la conexión*/
   private function setConexion(){
      $conf = Conf::getInstance();
      $this->servidor=$conf->getHostDB();
      $this->base_datos=$conf->getDB();
      $this->usuario=$conf->getUserDB();
      $this->password=$conf->getPassDB();
      $this->tipo=$conf->getDBType();
   }

   /*Evitamos el clonaje del objeto. Patrón Singleton*/
   private function __clone(){ }

   private function __wakeup(){ }

   /*Función encargada de crear, si es necesario, el objeto. Esta es la función que debemos llamar desde fuera de la clase para instanciar el objeto, y así, poder utilizar sus métodos*/
   public static function getInstance(){
      if (!(self::$_instance instanceof self)){
         self::$_instance=new self();
      }
      return self::$_instance;
   }

   /*Realiza la conexión a la base de datos.*/
   private function conectar(){
      switch ($this->tipo){
         case 'mysql':     $this->link=mysql_connect($this->servidor, $this->usuario, $this->password);
	                   mysql_select_db($this->base_datos,$this->link);
	                   @mysql_query("SET NAMES 'utf8'");
			   break;

       case 'postgress':   $this->link=pg_connect("host=".$this->servidor." dbname=".$this->base_datos." user=".$this->usuario." password=".$this->password)
		           break;
       break;
      }
   }

   /*Método para ejecutar una sentencia sql*/
   public function ejecutar($sql){
      switch ($this->tipo){
         case 'mysql':     $this->stmt=mysql_query($sql,$this->link);
			   break;
         case 'postgress': $this->stmt=pg_Euery($this->link,$sql);
			   break;
         break;
      }
      return $this->stmt;
   }

   /*Método para obtener una fila de resultados de la sentencia sql*/
   public function obtener_fila($stmt,$fila){
      switch ($this->tipo){
         case 'mysql':     if ($fila==0){
	                      $this->array=mysql_fetch_array($stmt);
	                   }else{
	                      mysql_data_seek($stmt,$fila);
	                      $this->array=mysql_fetch_array($stmt);
	                   }
	                   break;
         case 'postgress': if ($fila==0){
			      $this->array=pg_fetch_row($stmt);
			   }else{
			      $this->array=pg_fetch_row($stmt,$fila);
			   }
			   break;
          break;
      }
      return $this->array;
   }

}

En el siguiente y última parte, veremos cómo controlar los errores.

Un saludo

Ficheros del ejemplo (en formato UTF-8)

Temas relacionados:

Crear una clase para conectar a la base de datos

Crear una clase para conectar a la base de datos (II)

Crear una clase para conectar a la base de datos (IV)