Crea un Complemento (Add-on) para Firefox

El reto de hoy es simple crear un complemento para Firefox

Firefox te provee de mucha ayuda al momento de crear un complemento (en ingles y español) para tu navegador preferido.

  1. Lo primero registrate una cuenta en firefox esto no solo te da acceso a crearte tu propia coleccion de complmentos sino tambien muchas otras mejoras.
  2. Luego podemos acceder al centro de desarrolladores de complementos

complemento FirefoxElige tu entorno de desarrollo

Firefox te brinda 2 entornos de trabajo en web y escritorio para el manejo de su SDK

El desarrollo de complementos para firefox es my sencillo!

Si sabes HTML, CSS y JavaScript, puedes hacer complementos Firefox.

Selection_033 Selection_034Comencemos con la version web:

Selection_035En este paso sera necesario logearse en Persona que es un login único de Firefox para sus servicios.

para tener algo mas de documentación en ingles

por la segunda opcion bajando el sdk podemos ejecutar

Selection_104

Ejecutando las anteriores lineas estoy arrancando el sdk y generando después la documentación off-line

Pero vamos a acelerar un poco las cosas para lo cual lo haremos via web

Selection_105

Una vez dentro del panel ya tnemos nuestro codigo construido y podemos realizar pruebas. para hacerlo correr

Selection_037Le damos click en el icono con el ojo para el test

Selection_036Con esto ya tenemos instalado nuestro primer complemento de Firefox con datos defecto no hace mucho y aun no esta personalizado (solo es un acceso directo a www.mozilla.org)

Selection_038Vamos a personalizarlo un poco para que lleve nuestro nombre y acceso directo a nuestro blog

Selection_039Como pudieron ver el codigo en este caso esta compuesto en un main.js el cual hemos adecuado, la herramienta tambien te drinda la opcion de descargar tu addon para distribuirlo

Selection_040De momento parece que hemos cumplido en el objetivo planteado. Espero en una próxima oportunidad mostrar algún contenido mas elaborado.

Anuncios

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/

Enlace

Un mapa 3D de cualquier web con Firefox

Los principales navegadores incluyen herramientas que ayudan a los diseñadores web en su trabajo: analizar errores, planificar cambios y ver puntos de mejora.

Algunas de estas herramientas son dignas de mención como Opera Dragonfly o el ágil inspector de código de Google Chrome.

En Firefox, los desarrolladores solían confiar en extensiones de terceros como Web Developer Toolbar, pero desde la versión 11 nos ofrece una nueva forma de ver la plantilla de cualquier web: en 3D.