SlideShows Drupal – (Secuencias ánimadas de contenidos o imágenes)

Slideshow es una transición animada de imágenes o textos, que se ha orientado principalmente a destacar contenidos relevantes y que funcionalmente permite al usuario la lectura de varios contenidos sin necesidad de llevar a cabo una recarga de la página.

Entre los portales que tienen SlideShows en sus páginas principales podemos nombrar algunos como CaracolTV, ColombiaTravel, Revista Shock, etc

Ejemplo de SlideShow empleado en el portal de MTV Uk

Slideshow drupal

SlideShow Drupal

Si bien hay cientos de plugins e implementaciones en JavaScript para lograr lo deseado, integrar estos plugins con gestores de contenido puede resultar en una extensa tarea de investigación y programación. Para facilitarnos a todos el trabajo en un futuro (Tanto a quienes nunca han hecho una implementación de este tipo, como a los que la hemos hecho y olvidamos de que manera concreta lo solucionamos).

A continuación se lista algunos módulos y herramientas que ofrece Drupal para SlideShows:

  1. Featured Content Slider: Brinda un bloque al que se le pueden añadir nodos o contenidos creados previamente. Su implementación es rápida y su despersonalización se hace a través de hojas de estilo (CSS). Una de las limitantes que tiene es que no se puede determinar el orden en que aparecen los elementos de una manera sencilla.
  2. Slideshow: Una opción de sencilla configuración, convierte todas las imágenes adjuntadas a un contenido en elementos de un slideshow. Solo trabaja con imágenes.
  3. Views Slideshow: ImageFlow: Una excelente opción cuando se quieren por ejemplo mostrar imágenes a manera de galería. Presenta un efecto estético muy agradable de zoom y una barra de desplazamiento en vez de botones (Al estilo del visor de carátulas de ITunes). Se integra con el módulo Views; para su implementación solo es necesario crear una vista que tenga campos de imagen y asignarle el estilo SlideShow – ImageFlow. Está orientado a la creación de galerías de imágenes únicamente.
  4. Dinamic Display Block: Es la opción más robusta, configurable y flexible. Se integra con el módulo views de modo que se tiene absoluto control sobre los campos que aparecen, el orden en el que aparecen los elementos (En combinación con el módulo nodequeue) y ofrece muchos estilos de visualización, desde un simple slide con imágenes y selectores con números, hasta selectores con imágenes en miniatura y pequeñas descripciones. A cambio de su funcionalidad se debe saber que se tiene que generar funciones de preprocesado en las plantillas que se esté utilziando y emplearle como mínimo unas dos horas de investigación. Se ofrecen tutoriales en la web del autor que describe como hacer slideshows sencillos y avanzados. Es la opción más cercana a lograr un slideshow como el de MTV Uk.

Cabe resaltar que sea cual sea la solución que se elija, viene bien tomar en cuenta si vale la pena generar un Slideshow para el sitio.

Anuncios

Aplicaciones MySQL GUI

Que es un GUI?

Un GUI (Graphical User Interface)  o Interfaz Gráfica de Usuario es un programa aplicación que permite de forma visual realizar algunas tareas de manera más rápida, intuitiva y eficaz saliendo de la consola utilizando un conjunto de imágenes para este motivo.

Así es que de este modo como desarrolladores siempre intentaremos ganar algo más de tiempo en las tareas y algunos de los GUI que utilizaremos más seguido serán desde un editor de texto hasta alguna herramienta que pueda ayudarnos a realizar diagramas y queries elaborados.

Tambien un GUI Mysql puede ser de gran ayuda al momento de consultar un servidor externo

Algunos GUI para Mysql

guimysql_1

Es una aplicación Abierta pensada para SO Windows, pero que tambien corre dentro de Linux con ayuda de wine. Nos ofrece muchas mejoras en sus versiones previas a la oficial. La ultima version oficial fué 7.0 y lo pueden descargar desde el siguiente link

Entre algunas de sus características tenemos:

  • Auto Ordenado de Consultas Ctrl+F8 y ordena un query de una linea a varias haciéndolo más legible.
  • Guardado de querys como snippets (fragmentos)
  • Filtrado de base de datos para poder ubicar mas rápidamente, filtrado de tablas, filtrado registros dentro de una tabla (mismo que se puede convertir luego en un query)
  • Auto completado en el editor con Ctrl + Space
  • Exportaciones entre Bases de datos (con un detalle de registros y % de progreso por tabla)
  • Administración de indices de forma visual
  • imagepreview en campos BLOB
  • Conexión a diferentes BD con administración de carpetas
  • Detalles de tablas y vistas que pueden ser cambiados entre columnas.
  • logs de los queries ejecutados
  • Update Check que verifica la versión que tienes y puede actualizar a la ultima versión. Generalmente la aplicación realiza una actualización diaria.

Una captura de la interfaz, podrán encontrar más en el sitio en este link

gui_mysql_2

gui_mysql_3

Otro buen GUI para mysql es SqlYog quien también se renovó recientemente con mejora en la edición de  datos en tabla a modo de formulario, lamentablemente esta aplicación es de Paga, pero también tiene una versión community pensado nuevamente solo en SO Windows, pero que también funciona muy bien en Linux con ayuda de Wine. Pueden descargarlo desde este link

Algunas características de este GUI son:

  • Permite Copiar las bases de datos de manejar muy sencilla
  • Sacar dumps velozmente.
  • Tiene auto completado de query con el tecla Tab
  • Logs de los queries ejecutados
  • No puedes filtrar entre tus bases de datos lo cual dificulta si tienes una gran cantidad de bases de datos.
  • No puedes filtrar entre tablas
  • Tienes que ordenar los queries manualmente.
  • El verificador de nuevas versiones solo dirige al sitio oficial.

Adjunto una imagen de como se ve corriendo en mi equipo pueden ver mas capturas en el sitio oficial

gui_mysql_4

gui_mysql_5

Esta es otra aplicación bastante util para poder modelar una base de datos y de ahí poder convertir este modelo en tablas reales en tu base de datos. es totalmente libre promocionado por mysql y lo pueden descargar desde el siguiente link pueden bajarlo para SO windows y Linux (deb)

Características:

  • Diseño y modelado de Base de Datos
  • Desarrollo y Administración de SQL (este no es muy avanzado y puede resultar algo incomodo en comparación con las demás opciones mencionadas)
  • Migración de Base de Datos

A criterio personal no existe mejor herramienta para modelado y diagramación que WorkBench ya que nos facilita el trabajo de crear los campos en base de datos.

A continuacion dejo una Captura

gui_mysql_6

gui_mysql_7Esta es una opción reciente que encontré de la cual tengo muchas expectativas. La primera que me llamo la atención es que es plataforma Windows Linux (rpm, deb) y IOs lo pueden  descargar desde el siguiente link

Caracteristicas:

  • Valentina puede trabajar con DB, MySQL, Postgre y SQLite.
  • Maneja multiples bases de datos y multiples operaciones en tabs y vistas.
  • manejo de esquemas de base de datos (al estilo de workbench) con arboles, columnas, etc.
  • Administración de Procedimientos.
  • Data Editor browses/sorts/filters records, export found records, inline edits records, previews images.
  • Editor SQL soporta auto completado, sintxis de colores, logs, etc.
  • Utilidades de diagnostico y reparación de Bases de datos.

gui_mysql_8

Finalmente quería contarles sobre otra GUI esta vez web que nos ayuda siempre al momento de instalar alguna base de datos en un servidor que no tiene acceso externo. es 99% seguro que tendrá phpmyadmin.

Características principales

  • Creación de Bases de Datos
  • backup en zip, tar, tar.gz (formatos comprimidos cargan mas rápido a la hora de restaurar)
  • Filtros por tablas a nivel de campo
  • Formularios de administración de registros
  • Manejo de usuarios
  • Impresión.

Adjunto una captura de pantalla.

gui_mysql_9

Finalizando espero les haya gustado el post y tengan en cuenta que existen muchas mas GUI para Mysql y de las cuales solo detallo las que he podido utilizar. Como siempre espero esta información pueda ser de utilidad para todos.

Escrito por: Gaston Nina

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/

3 exelentes plugins jQuery para crear layouts responsive

Ahora es el turno para que los usuarios sean capaces de navegar de manera satisfactoria gracias al Responsive Design de Jquery, independientemente del dispositivo en el que se encuentren.

Es la solución para reducir la tasa de rebote, haciendo que el usuario pase más tiempo en la página por su facilidad de lectura y óptima visualización de los contenidos (se acabo la molestosa tarea de pellizcar la pantalla para hacer zoom).

A continuación se presentan 3 muy importantes plugins especialmente seleccionados de jQuery para realizar sliders, galerías, elementos de navegación, etc. Todo ello con la vista puesta en que dichos elementos tengan un comportamiento responsive y se adapten a la resolución del dispositivo desde el que serán visualizados.

Responsive Image Gallery with Thumbnail Carousel

Crea una galería de imágenes sensible, con un carrusel miniatura con Elastislide. Inspirado en “galería de usuario” , muestra una integración de Elastislide, Implementa una galería de respuesta que se adapta al ancho de la visión del dispositivo mobil. La galería tiene un interruptor de vista que permite verlo con el carrusel en miniatura o sin ella. También añade la posibilidad de navegar con el teclado.

Responsive Image Gallery with Thumbnail Carousel

plugin jquery

PhotoSwipe

Se puede integrar fácilmente en sus sitios web para móviles. Está muy optimizado para los navegadores móviles webkit. Sin embargo, si necesita un apoyo más amplio navegador de escritorio o si está utilizando jQuery Mobile, PhotoSwipe viene empaquetado con una implementación de jQuery también.

PhotoSwipe

PhotoSwipe

jQuery Masonry

jQuery Masonry es un plugin que nos permite organizar los elementos-hijos flotantes de un elemento principal CSS. Tiene una forma peculiar de ordenar, pues es como si se pusiera ladrillo por ladrillo en la construcción de un muro, tal como se observa en la imagen siguiente.

jQuery Masonry

jQuery Masonry

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

Cloud9 IDE para desarrollo colaborativo

cloud-9-ide

Que es?

Cloud 9  o c9 es un Integrated Development Environment (IDE) para desarrollo que tiene como plataforma la nube.

En el link https://c9.io/ podrán registrase y comenzar a realizar pruebas.

Para que puedan apreciar de forma gráfica el IDE, les recomendamos el video oficial.

Que beneficios obtengo?

code-smarter-image

  • Trabajar colaborativamente.
  • Eliminar versiones de código.
  • Acceso a cuentas GitHub y BitBucket
  • Edición de código HTML, CSS, PHP, Java, Ruby y 23 lenguajes mas.
  • Centralización de Código y manejo de versiones (en caso de trabajar con manejador de versiones como git).
  • Control de los cambios realizados.
  • Mantener tu código en la nube (Internet), esto te permite acceder desde cualquier computador con acceso a Internet.

Cómo comienzo?

Lo primero que necesitas es crear una cuenta en https://c9.io/ a continuación se desplegará un panel de administración donde puedes ver tus proyectos. seleccionando un proyecto puedes comenzar a trabajar en el codigo puedes compartir el proyecto con otra persona mediante mail simplemente compartiendo el link de tu proyecto.

Si relacionas c9 con tu cuenta de github lo que tienes que hacer es crear una llave SSH desde github y habilitarlo en c9, de esta forma podrás rescatar cualquier proyecto que tengas en github o podrás crear nuevos repositorios a tu cuenta.

Puedes adicionar un atajo a Chrome con el siguiente enlace

Capturas

Panel de Control

Dashboard - Cloud9

Un proyecto

Dashboard - Cloud9_1

Espacio de Trabajo

prueba - Cloud9_1

Alternativas

C9 tiene un beta para trabajo offline.

Por ultimo no dejes tu cuenta abierta recuerda que puedes comprometer tu código.

Escrito por: Gaston Nina

URL Schemes

Los URL Schemes son recursos que invocan las aplicaciones instaladas en cada dispositivo, para poder delegar funcionalidad en ellas. De esta manera conseguiremos una experiencia más fluida para el usuario. Los schemes son válidos para las aplicaciones nativas de iOS, Android y HTML5.

Las URL Schemes permiten a las aplicaciones comunicarse, enviar y recibir mensajes y ejecutar acciones entre si a través de una URL personalizada.

VENTAJAS

  • No obligan al usuario a estar conectado permanentemente a la red.
  • Son un método simple y rápido de integrar las aplicaciones de sistema con nuestras aplicaciones. Llegando a poder utilizarse dentro del código HTML.
  • Proporcionan una interfaz de comunicación pública, que cualquier aplicación puede aprovechar.

Aquí vamos a ver el uso de unos Schemes de las más básicas:

SMS

Permite enviar rápidamente un mensaje de texto, indicando en el enlace un número e incluso el cuerpo del mensaje. El marcado html sería:

<a href="sms:700600400">Cuerpo del mensaje</a>

TELEFONO

En este caso el enlace nos permitirá hacer una llamada a un número. Como en el anterior recuerda el código del país antes del número. El marcado sería:

<a href="tel:700600400">700600400</a>

MAILTO

El esquema mailto, es un antiguo conocido de los maquetadores web. Se utiliza para iniciar la aplicación de correo predeterminada del dispositivo.  En su forma más simple, un mailto URL contiene una dirección de correo de electrónico:

<a href="mailto:ejemplo@mail.com">ejemplo</a>

Existen múltiples schemes ya creados para iPhone, Android o HTML5 que puedes buscar en la web.

Existe 9 opciones con los cuales podemos integrarnos mas con la red social mas importante del mundo Facebook

Las herramientas de propósito general permiten gestionar varios servicios y plataformas desde un mismo lugar.

Es una opción interesante para comenzar a interactuar con redes sociales desde tu Pagina Web.

Facebook

1. Share On Facebook

Un plugin sencillo que permite a los usuarios compartir el contenido de tu blog con sus amigos a través de Facebook. Fácil de instalar y configurar.

2. WP Facebook Connect

plugin facebook

plugin facebook

Creado por el desarrollador de Facebook Adam Hupp. Permite que los usuarios se identifiquen con su cuenta de Facebook, publica la actividad que realizan en el muro y muestra la fotografía en los comentarios. Requiere crear una aplicación en Facebook para obtener una API y clave secreta.

3. Facebook Connect

sociable-facebook-connect

sociable-facebook-connect

Permite añadir algunas opciones interesantes como crear tu propia comunidad de usuarios. Desarrollado por Sociable.es, es otra opción para interactuar con Facebook Connect y así dejar los usuarios usen su cuenta de Facebook para identificarse y comentar en tu sitio. También requiere API y clave secreta para funcionar.

4. Simple Facebook Connect

La principal diferencia con otro plugins es que interactúan a través de Facebook Connect es que permite habilitar o deshabilitar opciones individualmente. Este diseño permite escoger si se quiere habilitar la opción de inicio de sesión, la opción de compartir contenido y mostrar la información a través de widgets. Interesante para tener un mayor control si no pensamos incorporar todas las funcionalidades.

5. Facebook Comments

Uno de los problemas más frecuentes cuando el mismo contenido se distribuye en diferentes lugares es la fragmentación de la interacción. Si publicás el contenido de tu pagina web en Facebook este plugin te permite copiar los comentarios que recibas a tu blog. De esta forma cualquier opinión que recibas desde Facebook quedará también reflejada en tu propia web.

6. Publish To Facebook

Otro plugin con una funcionalidad específica: publicar desde tu página web hacia Facebook. De esta forma evitar tener que agregar a mano las notas que vayas escribiendo. Funciona para WordPress.

Página: http://nothing.golddave.com/?page_id=111
Plugin para WordPress: http://wordpress.org/extend/plugins/publish-to-facebook/

7. Facebook Dashboard Widget

Esta opcio es para personas que no quieren estar cambiando de página para saber qué pasa en Facebook, este plugin muestra la actividad de tus amigos desde el tablero de administración de WordPress. Para fanáticos o gente muy ocupada:

8. Drupal’s Facebook Connect module

No todo es WordPress. Si tu sitio está basado en Drupal este módulo permite inteactuar con Facebook Connect para permitir la identificación de usuarios, mostrar tus actualizaciones de estado y compartir contenido con Facebook. Un detalle interesante: permite que los usuarios existentes asocien su cuenta con Facebook.

9. Facebook Connect Commenters

En este caso vincula Facebook con aquellos blogs que funcionan sobre Movable Type. Permite a los usuarios identificarse, comentar y publicar sus acciones en Facebook. Es Open Source y se encuentra en fase beta.

http://wibiya.conduit.com/

UNED Abierta – cursos, podcasts y libros gratuitos de la Universidad Nacional de Educación a Distancia

UNED Abierta – cursos, podcasts y libros gratuitos de la Universidad Nacional de Educación a Distancia.

Los mejores regalos, los tiene enbolivia.com

Enbolivia.com en esta navidad presenta una Oferta Navideña única, a sola mención de nuestro boletín recibirá el descuento de 15% en nuestro plan básico, además de otros regalos adicionales como la creación, integración y configuración de cuentas en las redes sociales, plan de hosting y dominio gratuito por un año. Una oferta que no se debe dejar pasar.

boletín navidad enbolivia.com

Boletín de Oferta Navideña enbolivia.com