Acerca de jhenrryalvaro

:-) ... :-)

Reproductores multimedia para Drupal 7

html5-videoEn muchos de los proyectos Drupal se tiene la necesidad de implementar la reproducción de videos dentro de nuestro sitio. Una alternativa, la más sencilla, es implementar el módulo Video Embed Field que permite permite incrustar videos desde Youtube y Vimeo o mostrar sus thumbnails para ingresar a la dirección url del video. Sin embargo, cuando se requiere reproducir videos que no estén hospedados en servidores de terceros, es necesario implementar un reproductor multimedia. Drupal 7 tiene varios módulos que permiten realizar esta tarea.

A continuación se muestra los módulos que implementan esta funcionalidad.

MediaElement.js

Sitio oficial: http://mediaelementjs.com/

Módulo Drupal: https://drupal.org/project/mediaelement

Permite implementar el plugin del reproductor HTML5 MediaElement.js en Drupal. MediaElement es un plugin jQuery que permite emplear los tags video y audio usando h.264 para trabajar en los navegadores que no soportan el tag o el códec y proporcionar una consistente interface a través de todos los navegadores.

Video.js

Sitio oficial: http://www.videojs.com/

Módulo Drupal: https://drupal.org/project/videojs

Video.js es un reproductor de video basado en HTML5 con un fallback Flash para navegadores antiguos. Por medio de este reproductor, se puede reproducir videos en casi todos los dispositivos y sistemas operativos, proporcionando los codecs adecuados que serán usados.

JW Player

Sitio oficial: http://www.longtailvideo.com/

Módulo Drupal: https://drupal.org/project/jw_player

Permite implementar el reproductor JW Player en Drupal. Proporciona un formateador de campo para renderear archivos usando JW Player. Usa la versión de video HTML5 del reproductor, el cual es compatible con dispositivos móviles, con lo cual sólo se usa Flash si es necesario.

jPlayer

Sitio oficial: http://www.jplayer.org/

Módulo Drupal: https://drupal.org/project/jplayer

Este módulo permite implementar un reproductor basado en HTML5 que emplea un fallback Flash para navegadores que aún no tienen soporte para HTML5. Permite una presentación por defecto para el reproductor, además integra mediante el módulo Content Construction Kit (CCK) campos de archivo y un estilo de visualización de vistas.

MediaFront

Sitio oficial (Open Standard Media (OSM) Player): http://mediafront.org/osmplayer

Módulo Drupal: http://drupal.org/project/mediafront

El módulo MediaFront es una solución multimedia frontend para Drupal. Emplea un innovativo e intuitiva interface de administración que permite al administrador del sitio personalizar la experiencia multimedia en frontend para sus usuarios sin escribir ningún código. Este módulo proporciona una interfaz con la cual reproductores multimedia de terceros pueden integrarse y utilizar los ajustes preestablecidos para visualizar multimedia.

Si se quiere realizar una comparación entre los distintos reproductores multimedia, de manera que se pueda conocer las características de cada uno de ellos. En la página presentada en html5video.org se muestra una breve comparación entre los reproductores multimedia presentados e incluso algunos más.

Frameworks para el desarrollo de aplicaciones para dispositivos móviles basados en tecnología web

En el desarrollo de aplicaciones para dispositivos móviles se puede indicar tres tipos de aplicaciones: aplicaciones basadas en tecnología web, aplicaciones nativas y aplicaciones hibridas.

Las aplicaciones basadas en tecnología web son básicamente páginas web que interactúan dinámicamente mediante Javascript y pueden presentar un diseño similar a una aplicación nativa, sin embargo tienen algunas limitaciones en cuanto a la interacción con el hardware del dispositivo debido a que deben ser ejecutados en un navegador instalado en el dispositivo además que requieren de acceso a internet.

Las aplicaciones nativas son desarrolladas en el lenguaje que es soportado por el sistema operativo del dispositivo móvil, por ejemplo Objective C para IOS o Java para Android, mediante el cual se puede tener acceso a todas las características del hardware del dispositivo, sin embargo la aplicación es ejecutada solo en el sistema operativo para el cual fue desarrollado.

Las aplicaciones hibridas es una fusión de los conceptos de aplicación basada en tecnología web y nativa. El código nativo es proporcionado por medio de un framework que tiene un API de Javascript con el cual el código Javascript de la aplicación puede acceder algunas funciones del hardware del dispositivo móvil, como ser tomar fotografías con la cámara, acelerómetro y otras. Los archivos de la aplicación hibrida son almacenados localmente, por lo cual no se requiere de un navegador y acceso a internet para que la aplicación sea ejecutada.

apps-hibridas

HTML5 se está convirtiendo en la mejor alternativa para el desarrollo de aplicaciones multiplataforma, por lo cual se puede desarrollar aplicaciones móviles hibridas haciendo uso de esta tecnología. Como se indicó anteriormente, se necesita de un framework que permita convertir una aplicación con código HTML5, Javascript y CSS3 en una aplicacion que se ejecute en diferentes dispositivos móviles como iOS, Android, Blackberry y otros, PhoneGap o Apache Cordova es un framework de código abierto con el cual se puede empaquetar el proyecto y distribuirlo en tiendas como Appstore o Google Play.

Se puede desarrollar aplicaciones HTML5 desde cero, sin embargo existen diversos frameworks que permiten desarrollar interfaces similares al de las aplicaciones nativas pero usando tecnología web, es decir HTML5, Javascript y CSS3. A continuación se muestran algunos de los frameworks:

JQuery Mobile
jQuery Mobile

JQuery Mobile es un framework basado en HTML5 optimizado para todas las plataformas de dispositivos móviles, es uno de los más populares y está desarrollado a partir de JQuery y JQuery UI. Su implementación es sencilla y posee amplia documentación, además cuenta con ThemeRoller for Mobile para la creación la temas personalizados aprovechando las ventajas de CSS3.

Sencha Touch 2

sencha

Sencha Touch 2 es una framework para el desarrollo de aplicaciones móviles de alto rendimiento basados en HTML5. Este framework incluye soporte para Blackberry 10 e IE 10 y es compatible con iOS, Android, BlackBerry, Windows Phone y otros. Esta desarrollado a partir de la plataforma HTML5 de Sencha, por lo cual se puede emplear Sencha Cmd, que es una herramienta de línea comando multiplataforma que permite realizar muchas tareas de manera automática como ser generar un nuevo proyecto.

PhoneJS

PhoneJS

PhoneJS es un framework que contiene lo necesario para crear aplicaciones usando HTML5 y Javascript para desarrollar aplicaciones compatibles con los más populares smartphones y tablets. Es compatible para aplicaciones de IOS, Android y WindowsPhone. PhoneJS aprovecha todas las funcionalidades de JQuery y opcionalmente se puede incluir Knockout para el desarrollo de las interfaces de usuario con el modelo MVVM (Model-View-ViewModel).

Kendo UI

kendoUI

Kendo UI es un framework para el desarrollo de sitios web con HTML5 y aplicaciones mobiles. Posee widgets basados en JQuery, una simple y consistente interfaz de programación, un framework MVVM, temas y templates. Permite construir aplicaciones que parecen y se usan igual que una aplicación nativa por medio de un simple código de interfaz de usuario usando solo HTML5 y JavaScript.

Instalación de Drupal 7 y Drush 5.8 en Windows 7

En el presente artículo, describe una de las maneras por la cuales se puede realizar la instalación, en el sistema operativo Windows 7, del conocido CMS Drupal en su versión estable más reciente Drupal 7.22 y Drush 5.8 que es un paquete de comandos para Drupal que permite descargar, habilitar, deshabilitar, desinstalar, actualizar módulos, temas, perfiles y traducciones desde la línea de comandos.

Instalación de Drupal 7.22

Primeramente, es necesario tener instalado un servidor con tecnología WAMP (Windows + Apache, Mysql y PHP), como ser wampserver o xampp.

En el sitio oficial de Drupal se puede descargar todas sus versiones, la versión estable más reciente a la fecha es Drupal 7.22. Una vez descargado el archivo, se debe descomprimir el mismo y subirlo a su servidor. Suponiendo que se está trabajando en un servidor local, se deberá copiar la carpeta descomprimida Drupal-7.22 en la carpeta que contiene los archivos de sitios en tu servidor local, por ejemplo C:\xampp\htdocs\ en xampp o C:\wamp\www\ en wamp. Comprueba también que se han subido todos los archivos y carpetas, incluyendo el archivo .htaccess.

Se debe crear un host virtual, para el acceder mediante una dirección url, por ejemplo http://www.miprimersitiodrupal.com/, a la carpeta del sitio en nuestro servidor local. Asegúrate que la dirección apunte a la ruta “c:/wamp/www/drupal-7.22” o “C:/xampp/htdocs/drupal-7.22” a menos que hagas renombrado la carpeta.

En nuestro navegador web preferido, ingresamos al nombre del servidor que se asignó en nuestro host virtual, como por ejemplo http://www.miprimersitiodrupal.com/.

Aparece la primera pantalla de instalación de Drupal 7, la cual está en inglés.

Select an installation profile_Drupal

El proceso de instalación es sencillo, por lo general se seleccionarán los valores por defecto. Se puede cambiar el idioma durante el proceso de instalación, en la segunda pantalla se muestra un enlace Learn how to install Drupal in other languages el cual explica los pasos a seguir para continuar con la instalación en otro idiomaother_language

Se debe descargar el paquete de traducción del idioma que se quiere instalar, en nuestro caso español, para el cual se puede acceder en en el link https://localize.drupal.org/translate/downloads?project=drupal y seleccionamos el link que hace referencia a Spanish en la versión 7.x.

Como indica en la página de instalación actual, el archivo descargado drupal-7.22.es.po en ruta \profiles\standard\translations en la carpeta de nuestro sitio Drupal. Una vez realizado esto, se debe hacer clic en el link Reload the language selecction page after adding translations, el cual recarga la página de instalación actual.

select_language

Ahora el sistema tiene dos opciones, English (built-in) y Spanish (Español), seleccionamos Spanish y continuamos.

Se verificará los requisitos para el funcionamiento de Drupal 7, y posteriormente en la página de Configurar base de datos, se debe ingresar el nombre de una base de datos existente y el nombre de un usuario y su contraseña.

Instalando Drupal_Drupal

Una vez verificada la información de acceso a la base de datos, comienza el proceso de instalación automático. Luego, se sigue con la configuración del sitio, en el cual se debe ingresar: nombre del sitio web, dirección de email, nombre de usuario, contraseña y otros datos opcionales.

Al finalizar el proceso se debe mostrar la siguiente pantalla.

completedInstall

Ahora, puedes hacer clic en Visite su nuevo sitio el cual te mostrará tu sitio Drupal 7 en modo local.

www.miprimersitiodrupal.com

Instalación de Drush 5.8

Como se indicó, Drush básicamente es un paquete de comandos para Drupal los cuales se pueden ejecutar desde la línea de comandos. Para instalar Drush en Windows 7, se debe descargar el instalador para sistemas operativos Windows del sitio oficial de Drush  , además en el sitio se cuenta con toda su documentación. Ejecuta el instalador en como Administrador, por defecto están seleccionadas las 3 primeras características del árbol de opciones, pero es necesario activar todas las características de lo contrario se tendría que configurarlos “a mano”. La pantalla de configuración debería quedar así:

select_items

Luego se selecciona “Next”, en la siguiente ventana haz clic en “Install” comienza el proceso de instalación. Una vez concluido, cierra la ventana del instalador.

En el escritorio, o mediante el botón inicio de Windows, busca el acceso a Drush Command Prompt y ejecútalo como administrador.

El comando drush status nos permite conocer el estado actual de Drush. Para realizar alguna acción con Drush en nuestro sitio web, se debe ingresar al directorio del sitio web.

drush status

Para descargar un módulo, se emplea el comando dl (download) y el nombre del módulo. Por ejemplo, se puede descargar el módulo pathauto:

drush dl pathauto

Los módulos adicionales de Drupal se encuentran en el directorio \sites\all\modules\ y es ahí donde Drush los descarga.

Para habilitar un módulo se emplea el comando en (enabled) y el nombre de un módulo que está dentro del directorio \sites\all\modules\. Por ejemplo, se puede habilitar el módulo pathauto que ya se ha descargado:

Drush en pathauto –y

-y no muestra un mensaje de confirmación, asume “yes”.

Los comandos arriba descritos, se deben ejecutar en el orden como aparecen en la siguiente imagen:

drush_command_prompt

Ingresa a tu sitio Drupal y en ingresa en módulos, ahora se podrá observar que se ha añadido un nuevo módulo Pathauto y el mismo está habilitado.

Módulos_www.miprimersitiodrupal.com

Herramientas online para la edición de imágenes

 Existen muchos programas que permiten la edición de imágenes de manera profesional, como ser Adobe Photoshop, Corel PhotoImpact, GIMP entre otros. Sin embargo, los mismos requieren un tiempo para aprender a usarlos. En la actualidad con el boom de las redes sociales en internet, con las cuales es frecuente subir y descargar imágenes, muchas personas requieren de herramientas para la edición de imágenes antes de postearlas en su red social. Tareas simples como insertar un título, recortar, añadir efectos e incluso manejas varias imágenes en capas ya es posible en un entorno web, sin embargo con limitaciones con respecto a los programas anteriormente mencionados.

A continuación, se muestra una colección de las mejores herramientas online de edición de imágenes.

Ribbet

ribbet

Ribbet es una herramienta de edición e inserción de efectos a imágenes en la cual se tiene muchas opciones para usuarios que necesitan una manera rápida, fácil y simple para editar y retocar sus imágenes.

ipiccy.com

iPiccy

iPiccy es otra herramienta de edición de imágenes, no posee muchas características como Ribbet, sin embargo tiene un mejor rendimiento en el procesamiento de efectos y permite la configuración de los efectos en un instante.

pixlr

pixlr

Es una herramienta gratis, la cual permite el tratamiento de una imagen con una interfaz y herramientas similares a las que tiene Photoshop, por supuesto con algunas limitaciones.

Posee muchas características avanzadas como ser: Herramienta de varita, capas, historia, deshacer ilimitado, filtros, etc. Además de redefinir el tamaño de la imagen o el tamaño del lienzo, rotar / voltear lienzo. Añadir, duplicar, eliminar, fusionar, reordenar, rotar o voltear capas, añadir máscara de capa, aplicar estilos de capa y rasterizar capas.

picMonkey

picMonkey

Sin lugar a dudas, es una de las mejores herramientas disponibles, además de poseer una interfaz elegante, amigable e intuitiva. Permite a los usuarios retocar y editar imágenes, añadir cientos de efectos, marcos, texturas y temas desde su librería a través de pocos clics y operaciones de arrastrar y soltar.

Desarrollo de software en la nube


Si desarrollas para la nube programa en la nube

La computación en nube (Cloud Computing) y la virtualización permiten crear máquinas virtuales y el uso de los servicios basados ​​en la nube. Para desarrollar aplicaciones en la nube se debe puntualizar de qué manera se va realizar, existen distintas formas en las cuales se puede adoptar la nube las cuales son:

Infraestructure as a Service (IaaS): Hace referencia a la capacidad de los procesos y el almacenamiento. En este entorno se puede desplegar aplicaciones propias que por motivos de coste o falta de conocimientos no queremos instalar en nuestra propia empresa. El proveedor se encarga de su gestión y para el cliente se convierten todos los gastos en variables (sólo se paga por lo que se usa). Ejemplo: EC2 de Amazon y Azure de Microsoft.

cloud_stack

Platform as a Service (PaaS): Proporciona las herramientas y opciones necesarias para disponer de un espacio donde se ejecutarán las aplicaciones de la compañía, es decir un servidor de aplicaciones y una base de datos. El objetivo principal es el de instalarlas correctamente y luego ejecutarlas desde dicho lugar. Para incorporar PaaS, se deben tener en cuenta ciertas restricciones según el proveedor que la compañía contrate para disponer de este servicio. La idea principal es disponer de una plataforma completa que se gestione como dicho servicio.

Software as a Service (SaaS): Es una aplicación específica para un usuario final que realiza un pago por la utilización determinada de un software. La gran ventaja del SaaS es la disposición del software como un servicio con lo cual no es necesario que los usuarios adquieran un software propietario), instalarlo, configurarlo y mantenerlo. Ejemplo: Google Docs, Zoho o Office365.

¿Por qué desarrollar software en la nube?

La computación en nube y virtualización permite que sea fácil para los equipos de desarrollo combinar perfectamente múltiples entornos de desarrollo, prueba y producción con otros servicios en la nube. A continuación se menciona algunas ventajas que conlleva el desarrollo de software en la nube.

Pruebas en tiempo real. Cada vez que se realice la prueba al desarrollo se estará validando que el desarrollo va bien en la nube.

Mejorar la experiencia de los clientes. Sin necesidad de crearle nada especial, simplemente se tiene que dar la dirección de tu servidor y podrá dar opiniones sobre el software.

Programar desde cualquier sitio. No necesitas depender de tu portátil o de una máquina física para entrar en tu código, puedes programar desde cualquier sitio que te imagines.

Plataformas de desarrollo en la nube

A continuación, se muestran algunas plataformas de desarrollo en la nube:

Google App Engine

googleApps

Google App Engine permite crear y alojar aplicaciones web en los mismos sistemas con los que funcionan las aplicaciones de Google. Google App Engine ofrece procesos de desarrollo y de implementación rápidos, y una administración sencilla, sin necesidad de preocuparse por el hardware, las revisiones o las copias de seguridad y una ampliación sin esfuerzos. Descubre por qué los desarrolladores eligen App Engine.

Zend Developer Cloud

PHP-Cloud

Zend Developer Nube, es un entorno basado en la nube diseñado para ayudarle a desarrollar más rápido y más eficientemente. Incluye una robusta pila PHP, capacidades de depuración avanzadas, herramientas de colaboración y mucho más.

AppFog

appfog

Una de las mejores Cloud PaaS, está disponible en las nubes privadas manera simple, elegante y moderna para desarrollar y desplegar aplicaciones. Aplicaciones ilimitadas dentro de 2 GB de RAM, hasta 8 instancias de servicio de 100 MB por MySQL o PostgreSQL instancia.

OpenShift

OpenShift

Es la PaaS autoescalable y gratuite de Red. Como una plataforma de aplicaciones en la nube, OpenShift gestiona la pila para que tú te concentres en tu código.

Analizar el rendimiento de las consultas SQL en aplicaciones PHP con FirePHP

FirePHP

FirePHP

FirePHP

FirePHP es un complemento para Mozilla Firefox, el cual permite registrar en la consola de Firebug usando una simple llamada a un método en PHP. Toda la información es enviada por medio de cabeceras de respuesta y no interfiere con el contenido de su página. FirePHP es apropiado para el desarrollo con AJAX donde se requieren respuestas JSON y XML.

Instalar los complementos para Firefox

El primer paso es instalar el complemento Firebug en Firefox, el cual se puede descargar de Firebug 1.11.2.

Luego, se tiene que instalar el complemento FirePHP, el cual se puede descargar de FirePHP 0.7.1.

Para abrir FireBug presiona las teclas Ctrl + F12, posteriormente lo puedes acoplar a la ventana principal de Mozilla FireFox. Al principio el panel de Red (Network) por defecto está desactivado, por tanto se tiene que activar el panel de Red para mostrar algunas salidas de FirePHP en la consola de Firebug.

FireBug: Panel desactivado

Instalar la librería en el servidor

Se tiene que descargar la versión más reciente de la librería FirePHPCore, la cual se puede descargar de FirePHPCore.

Luego, descomprime el archivo y mueve el contenido del directorio lib/FirePHPCore a una carpeta en tu servidor.

Para el ejemplo, se sugiere la siguiente estructura de archivos:

FirePHP: archivos

Registrar las consultas SQL ejecutadas

Como todo buen desarrollador, de seguro tienes una clase PHP que permite establecer la conexión con tu base de datos y ejecutar las consultas. Por tanto, se puede incluir las funciones que se muestran a continuación en clase.

Primero incluimos la clase FirePHP y FB.

if (!class_exists('FirePHP')) {
  require_once(dirname(__FILE__) . DIRECTORY_SEPARATOR . "FirePHPCore/FirePHP.class.php");
  }
if (!class_exists('FB')) {
    require_once('FirePHPCore/fb.php');
}

En la función que permite ejecutar consultas SQL, calculamos el tiempo que duró la ejecución de la consulta. Además declaramos una variable global $allQuery en la cual se irá almacenando todas las consultas sql.

Nota.- La siguiente función deberá ser empleada sólo en consultas de selección (SELECT)

public function executeSelectQuery($query) {
    global $allQuery;
    $time_ini = microtime(true);
    $this->id_query = mysql_query($query, $this->id);
    $time_fin = microtime(true);
    $timeProcess = $time_fin - $time_ini;
    $totRows = ($this->id) ? $this->numRecords() : 0;
    $allQuery[] = array("query" => $query, "time" => $timeProcess, 'totalRows' => $totRows);
    return $this->id_query;
}

La siguiente función estática permite calcular el número total de consultas, tiempo total de ejecución de todas las consultas y la consulta con mayor duración. Además muestra el detalle de todas las consultas ejecutadas:

Nota.- Se recomienda emplear la función ob_start () si output_buffering no está establecido en “on” en el archivo php.ini, .htaccess, etc.

Revise los permisos del archivo, esté seguro de que los archivos a los que está accediendo puedan ser leídos por el servidor.

static function firePhpShowQueries() {
    global $allQuery;
    ob_start();
    $firephp = FirePHP::getInstance(true);
    $expensive_query_time = 0;
    $expensive_query = "";
    $total_time = 0;

    $query_time = 0;
    $query_arr = array();
    $query_arr[] = array('Num', 'Total Rows', 'Time', 'SQL Statement');
    $query_c = 0;
    foreach ($allQuery as $query) {
        $query_time+=$query['time'];
        $query_arr[] = array(++$query_c, $query['totalRows'], round($query['time'], 5), $query['query']);
        if ($query['time'] > $expensive_query_time) {
            $expensive_query_time = $query['time'];
            $expensive_query = $query['query'];
            $total_time += $query['time'];
        }
    }
    // Display the query summary 
    $firephp->group('Query Summary', array('Collapsed' => false,'Color' => '#000'));
    $firephp->log(count($allQuery), 'Total Queries');
    $firephp->log($total_time, 'Time');
    $firephp->log($expensive_query, 'Expensive Query Time');
    fb(array(count($allQuery) . ' SQL queries took ' . ($query_time) . ' seconds', $query_arr), FirePHP::TABLE);
}

A continuación, se muestra el archivo database.php

<?php
if (!class_exists('FirePHP')) {
  require_once(dirname(__FILE__) . DIRECTORY_SEPARATOR . "FirePHPCore/FirePHP.class.php");
  }
if (!class_exists('FB')) {
    require_once('FirePHPCore/fb.php');
}
class DataBase {
    var $host;
    var $user;
    var $password;
    var $database;
    var $id;
    var $id_query;

    public function __construct() {
        $this->host = "localhost";
        $this->user = "root";
        $this->password = "";
        $this->database = "bd_prueba";
        $this->id_query = 0;
        $this->Conectar();
    }

    private function Conectar() {
        if (!($this->id = mysql_connect($this->host, $this->user, $this->password))) {
            echo "Error conectando a la base de datos.";
            exit();
        }
        if (!mysql_select_db($this->database, $this->id)) {
            echo "Error seleccionando la base de datos.";
            exit();
        }
        mysql_query("SET NAMES 'utf8'");
        return $this->id;
    }

    function numRecords() {
        return @mysql_num_rows($this->id_query);
    }

    public function executeSelectQuery($query) {
        global $allQuery;
        $time_ini = microtime(true);
        $this->id_query = mysql_query($query, $this->id);
        $time_fin = microtime(true);
        $timeProcess = $time_fin - $time_ini;
        $totRows = ($this->id) ? $this->numRecords() : 0;
        $allQuery[] = array("query" => $query, "time" => $timeProcess, 'totalRows' => $totRows);
        return $this->id_query;
    }
    static function firePhpShowQueries() {
        global $allQuery;
        ob_start();
        $firephp = FirePHP::getInstance(true);
        $expensive_query_time = 0;
        $expensive_query = "";
        $total_time = 0;

        $query_time = 0;
        $query_arr = array();
        $query_arr[] = array('Num', 'Total Rows', 'Time', 'SQL Statement');
        $query_c = 0;
        foreach ($allQuery as $query) {
            $query_time+=$query['time'];
            $query_arr[] = array(++$query_c, $query['totalRows'], round($query['time'], 5), $query['query']);

            if ($query['time'] > $expensive_query_time) {
                $expensive_query_time = $query['time'];
                $expensive_query = $query['query'];
                $total_time += $query['time'];
            }
        }
        // Display the query summary
        $firephp->group('Query Summary', array('Collapsed' => false,'Color' => '#000'));
        $firephp->log(count($allQuery), 'Total Queries');
        $firephp->log($total_time, 'Time');
        $firephp->log($expensive_query, 'Expensive Query Time');
        fb(array(count($allQuery) . ' SQL queries took ' . ($query_time) . ' seconds', $query_arr), FirePHP::TABLE);
    }
}
?>

Nota.- Recuerda que solo puedes insertar las nuevas funciones en tu clase con la cual conectas y realizar tus consultas a tu base de datos.

A continuación se presenta un archivo de ejemplo, index.php, en el cual se incluye la el archivo database.php, se realizan algunas consultas de prueba y una vez ejecutadas todas las consultas se realiza una llamada al método estático DataBase::firePhpShowQueries().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Queries</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <?php
        include("lib/database.php");
        $db = new DataBase();
        $min = 1;
        $max = 10;
        $inicio = rand($min, $max);
        $fin = rand($inicio, $max);
        for ($i = $inicio; $i <= $fin; $i++) {
            switch(rand(0,2)){
                case 0; $query = "select round(RAND()*100000) as c1,round(RAND()*100000) as c2"; break;
                case 1: $query = "SELECT DATE(NOW()) as c1, DATE(DATE(NOW())-10) as c2"; break;
                case 2: $query = "SELECT ADDTIME(HOUR(now()), '02:00:00.999998') as c2, ADDTIME('01:00:00.999999', '02:00:00.999998') as c2"; break;
            }
            $result = $db->executeSelectQuery($query);
            echo "<h1>Consulta - ".$i."</h1>";
            echo "<table>";
            echo "<tr><th>Columna 1</th><th>Columna 2</th></tr>";
            while ($r = mysql_fetch_array($result)) {
                echo "<tr>";
                echo "<td>".$r[0] . "</td><td>".$r[1] . "</td>";
                echo "</tr>";
            }
            echo "<table>";
        }
        DataBase::firePhpShowQueries();
        ?>
    </body>
</html>

Resultado

A continuación se muestra el detalle de todas las consultas en la consola de Firebug.

FirePHP: resultados en consola

Conclusión

FirePHP es una herramienta bastante útil en el desarrollo de aplicaciones PHP porque permite verificar si las consultas SQL que construye dinámicamente la aplicación están correctas, además permite medir el rendimiento de las consultas al realizar las pruebas y el mantenimiento del sistema. Sin embargo, cabe mencionar que este es un simple ejemplo de lo que se puede conseguir con FirePHP debido que este complemento otras funcionalidades las cuales se puede investigar.

Referencias:

http://www.ecartservice.net/04082009/using-firephp-firebug-with-prestashop/
http://www.firephp.org/HQ/Use.htm
http://agileadam.com/firephp-introduction
http://www.codediesel.com/mysql/benchmarking-wordpress-sql-using-firephp/

HighCharts: Librería para creación de gráficos

1. ¿Qué es HighCharts?

highcharts

HighCharts es una librería escrita en Javascript que permite la creación de gráficas. La librería ofrece un método fácil e interactivo para insertar graficas en su sitio web o aplicación web.

2. Características

Browsers

Browsers

La librería es compatible con todos los navegadores modernos incluyendo iPhone/iPad e Internet Explorer desde su versión 6.

No es comercial, no se necesita el permiso de los autores para su implementación en sitios web personales o sin fines de lucro.

Es abierto, todas las características pueden ser personalizadas permitiendo una gran flexibilidad además HighCharts está escrito solamente con código Javascript, sólo se requiere incluir el archivo highcharts.js y cualquiera de los tres frameworks más populares de Javascript (jQuery, MooTools o Prototype).

3. Ejemplo práctico: creación de una gráfica a través de la información obtenida de una base de datos de MySql.

El siguiente ejemplo muestra la implementación de la librería HighCharts para la generación de gráficas dinámicas a partir de los datos recibidos de una base de datos de MySql en un servidor con lenguaje de programación web Php.

3.1. Instalación de los archivos

La implementación de la librería highCharts requiere la inclusión previa de cualquiera de los frameworks de javascript JQuery, MooTools o Prototype. En el ejemplo, se incluye el framework jQuery por tanto se debe descargar el archivo jquery.js del sitio oficial: http://www.jquery.com, o bien incluir el siguiente código en la sección <head> de su página web.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Posteriormente, se debe descargar el archivo highcharts.js del sitio oficial: http://www.highcharts.com, o bien incluir el siguiente código en la sección <head> de su página web.

<script src="http://code.highcharts.com/highcharts.js/"></script>

En caso de haber descargado los archivos .js mencionados, la secciónde su página web debería incluir el siguiente código haciendo referencia a la ruta donde ha copiado los archivos.

<script src="/js/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>

3.2. Creación de la base de datos

A continuación se muestra el código sql para la creación de la base de datos “bd_bolivia” y la tabla “departamentos” con la inserción de 9 registros.

CREATE DATABASE IF NOT EXISTS `bd_bolivia` ;
USE `bd_bolivia`;
CREATE TABLE IF NOT EXISTS `departamentos` (
  `id_departamento` int(10) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(50) DEFAULT NULL,
  `poblacion_masculino` int(11) DEFAULT NULL,
  `poblacion_femenino` int(11) DEFAULT NULL,
  `poblacion_total` int(11) DEFAULT NULL,
  KEY `id_departamento` (`id_departamento`)
) ENGINE=MyISAM AUTO_INCREMENT=10 DEFAULT CHARSET=latin1;
INSERT INTO `departamentos` (`id_departamento`, `nombre`, `poblacion_masculino`, `poblacion_femenino`, `poblacion_total`) VALUES
	(1, 'Chuquisaca', 345255, 343254, 688509),
	(2, 'Cochabamba', 985321, 985302, 1970623),
	(3, 'La Paz', 1254552, 1252751, 2507303),
	(4, 'Santa Cruz', 1369815, 1369124, 2738939),
	(5, 'Oruro', 280589, 290365, 570954),
	(6, 'Potosí', 358965, 358991, 717956),
	(7, 'Tarija', 198621, 220545, 419166),
	(8, 'Beni', 128565, 135684, 264249),
	(9, 'Pando', 53568, 51355, 104923);

3.3. Código en el servidor

En este ejemplo se crea un simple script de PHP, en el cual se establece la conexión al servidor (localhost) y se selecciona la base de datos (bd_bolivia), se realiza una consulta con la cual mediante su resultado se crea un array con los valores de los registros. El array generado permite el envío de la información obtenida en formato JSON.

ajax_json.php

<?php
extract($_GET);
switch ($caso) {
    case 'grafico1':
        if (!($cn = mysql_connect("localhost", "root", ""))) {
            echo "Error conectando a la base de datos.";
            exit();
        }
        if (!mysql_select_db("BD_Bolivia", $cn)) {
            echo "Error seleccionando la base de datos.";
            exit();
        }
        mysql_query("SET NAMES 'utf8'");

        $sql = "SELECT id_departamento, nombre, poblacion_masculino as cm, poblacion_femenino as cf, poblacion_total as ct
FROM departamentos
ORDER BY nombre ASC";
        $res = mysql_query($sql, $cn);
        $arrayX = array();
        while ($dep_rows = mysql_fetch_array($res)) {
            $arrayX[$dep_rows["nombre"]][] = (int) ($dep_rows["ct"]);
            $arrayX[$dep_rows["nombre"]][] = (int) ($dep_rows["cm"]);
            $arrayX[$dep_rows["nombre"]][] = (int) ($dep_rows["cf"]);
        }
        // solo para ver cambios en la grafica
        $v1 = (int)(rand(1000,2000000));
        $v2 = (int)(rand(1000,2000000));
        $arrayX["Litoral"][] = $v1 + $v2;
        $arrayX["Litoral"][] = $v1;
        $arrayX["Litoral"][] = $v2;
        // solo para ver cambios en la grafica

        echo json_encode($arrayX);
        break;
    // case n // otras opciones
}
?>

3.4. Código en el cliente

Highcharts utiliza la estructura de objetos de javascript para definer las opciones. El objeto options, es usado por su contructor Highcharts.Chart para indicar los valores para el gráfico y la personalización de la presentación. Los principales atributos se definen de la siguiente manera:

var chart1 = new Highcharts.Chart({
chart: { 
renderTo: 'container', // div contenedor
type: 'bar' // tipo de grafico
},
title: {
text: 'Redes sociales' // título  del gráfico
},
xAxis: { // eje x
categories: ['Facebook', 'Twitter', 'Myspace'] // categorías en el eje x
},
yAxis: { // eje y
title: { text: 'Nro. usuarios' } // título del  eje y
},
series: [ // valores de las series a graficar
{
name: 'America',
data: [12311, 12321, 4334]
}, {
name: 'Europa',
data: [23242, 23427, 3433]
}
]
});

O bien:

var options = {
             chart: { 
             renderTo: 'container', // div contenedor
              type: 'bar' // tipo de grafico
              },	
              xAxis: [],
        	series: [],
              yAxis: {
              title: { text: 'Nro. usuarios' }
},
…
}
var chart = new Highcharts.Chart(options);

En ejemplo que se está desarrollando, se crea un archivo scripts.js el cual contiene la única función “recarga()”.

scripts.js

function recarga()
{
    var options = {
        chart: {
            renderTo: 'container_highchart',
            type: 'column',
            margin: [ 50, 50, 120, 80]
        },
        title: {
            text: 'Población en Bolivia'
        },
        xAxis: [],
        yAxis: {
            min: 0,
            title: {
                text: 'Número de habitantes'
            }
        },
        legend: {
            layout: 'vertical',
            backgroundColor: '#FFFFFF',
            align: 'left',
            verticalAlign: 'top',
            x: 80,
            y: 40,
            floating: true,
            shadow: true
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>' + this.series.name + ': ' + this.y + ' habitantes';
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: []
    }
    var url = 'ajax_json.php?caso=grafico1';
    var xAxis = {
        categories: [],
        labels: {
            rotation: -45,
            align: 'right',
            style: {
                fontSize: '12px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    };
    var seriesTotal = {
        data: []
    };
    seriesTotal.name = 'Total';
    var seriesMasculino = {
        data: []
    };
    seriesMasculino.name = 'Masculino';
    var seriesFemenino = {
        data: []
    };
    seriesFemenino.name = 'Femenino';
    jQuery.getJSON(url, function(data) {
        jQuery.each(data, function(key1,val1) {
            xAxis.categories.push(key1);
            jQuery.each(val1, function(key2,val2) {
                if(key2 == 0){
                    seriesTotal.data.push(val2);
                }
                else if(key2 == 1){
                    seriesMasculino.data.push(val2);
                }
                else if(key2 == 2){
                    seriesFemenino.data.push(val2);
                }
            });
        });
        options.xAxis.push(xAxis);
        options.series.push(seriesTotal);
        options.series.push(seriesMasculino);
        options.series.push(seriesFemenino);
        var chart = new Highcharts.Chart(options);
    });
    return false;
}

3.5. Vista HTML

En el archivo index.html, se incluyen los archivos js en el orden indicado y se debe insertar un elemento <div> con el mismo id al cual se hace referencia en el atributo “chart” en su opción renderTo.

index.php

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        <script type="text/javascript" src="js/scripts.js"></script>
    </head>
    <body>
        <input type="button" id="btn_genera" onclick="javascript: recarga()" value="Ver gráfico" />
        <br/>
        <div id="container_highchart"></div>
    </body>
</html>

3.6. Resultado

El gráfico se genera al hacer la llamada a la función “recarga()” el cual está insertado en el botón “Ver gráfico”.

Resultado: Gráfica generada con highcharts

Resultado: Gráfica generada con highcharts

4. Conclusiones

La implementación de la librería Highcharts, como se pudo observar, es bastante sencilla, la cual consiste en generar el objeto options y pasarlo como parámetro a su constructor. Se recomienda revisar los ejemplos que existen en el sitio http://www.highcharts.com/demo/ , en el cual están todos los tipos de gráficos que se puede generan con la librería, además se cuenta con la herramienta jsfiddle con la cual se puede editar el objeto options y ejecutarlo en tiempo real.

jsfiddle

jsfiddle