Clase abstracta para el manejo de bases de datos MySQL en Java

Manejar bases de datos MySQL con los métodos nativos de Java puede ser harto complicado, en el presente artículo se describe cómo crear una clase abstracta de base de datos genérica, reutilizable, simple y muy fácil de utilizar.

Esta clase esta basada en el artículo “Creando una capa de abstracción con PHP y mysqli”.

Primeramente, nuestra clase abstracta deberá proveer de métodos públicos, que puedan ser llamados de forma estática, para crear un objeto conector, no sea necesario.

Propiedades

public class db {
  protected static Connection conn; // objeto conector
  protected static PreparedStatement stmt; // objeto sentencia preparada
  protected static String sql; // sentencia SQL a ser preparada
  public static ResultSet rs; // colección de resultados de la consulta
  protected static List<String> data; // lista de los tipos de datos
  public static List<Map<String, String>> results; // colección de datos para ser retornados
  public static String insertId; // último id insertado
}

La consulta SQL, deberá ser seteada en los modelos (clases) donde se requiera, incluyendo marcadores de parámetros (embebidos con el signo ?), en la posición donde un dato deba ser enlazado. Un ejemplo de ella, podría ser el siguiente:

String sql = "INSERT INTO productos (categoria, nombre, precio) VALUES (?, ?, ?)";

Mientras que la lista “data”, deberá contener los datos a ser enlazados (todos de tipo string):

List<String> data = Arrays.asList(categoria,nombre,precio);

Métodos

Conectar a la base de datos:

protected static void conectar() {
  db.conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASSWORD);
}

Preparar una sentencia SQL (con marcadores de parámetros):

protected static void preparar() throws SQLException {
  db.stmt = db.conn.prepareStatement(db.sql, Statement.RETURN_GENERATED_KEYS);
}

Enlazar los datos con la sentencia SQL preparada:

private static void setParams() throws SQLException {
  if (db.data != null) {
    int dataSize = db.data.size();
    for (int i = 0; i < dataSize; i++) {
      db.stmt.setString(i + 1, db.data.get(i));
    }
  }
}

Enlazar resultados de una consulta de selección:

private static void getData() throws SQLException {
  db.results.clear();
  db.rs = db.stmt.getResultSet();
  ResultSetMetaData metaData = rs.getMetaData();
  int columnCount = metaData.getColumnCount();
  while (db.rs.next()) {
    Map<String, String> columns = new LinkedHashMap<String, String>();
    for (int i = 1; i <= columnCount; i++) {
      columns.put(metaData.getColumnLabel(i), db.rs.getString(i));
    }
    db.results.add(columns);
  }
  db.rs.close();
}

Cerrar conexiones abiertas:

public static void finalizar() throws SQLException {
  db.stmt.close();
  db.conn.close();
}

Un método público que ejecute todas las acciones:

public static void ejecutar(String sql, List<String> data) throws SQLException {
  db.sql = sql;
  db.data = data;
  db.conectar();
  db.preparar();
  db.setParams();
  boolean rpta = db.stmt.execute();
  if (sql.toLowerCase().contains("INSERT".toLowerCase())) {
    ResultSet keys = db.stmt.getGeneratedKeys();
    keys.next();
    db.insertId = keys.getString(1);
  } else if (rpta) {
    db.getData();
  }
  db.finalizar();
}

La estructura de control de flujo condicional, que utiliza el método ejecutar(), es la encargada de discernir si se trata de una consulta de “lectura” a la base de datos para así, llamar al método getData, o si se trata de una consulta de “escritura” (INSERT, UPDATE ó DELETE). En ese caso, verifica si es una escritura de tipo “INSERT” para retornar la id del nuevo registro creado.

¿Cómo utilizar la clase creada?

En todos los casos, siempre será necesario invocar estáticamente al método ejecutar, pasándole al menos dos parámetros: la sentencia SQL a preparar y una lista con los datos a enlazar a la sentencia SQL preparada:

String sql = "INSERT INTO productos (categoria, nombre, precio) VALUES (?, ?, ?)";
List<String> data = Arrays.asList(categoria,nombre,precio);
db.ejecutar(sql, data);
this.idPaciente = db.insertId;

Consulta de selección:

String sql = "SELECT nombre, descripcion, precio FROM productos WHERE categoria = ?";
List<String> data = Array.asList(categoria);
db.ejecutar(sql, data);

Consultas Mysql como Objeto

bdHola a todos nuevamente, el día de hoy les presento una pequeña aportación para hacer sus consultas mysql como si fueran objetos, comúnmente llamado ORM.

No estoy seguro si realmente la clase que les voy a mostrar cumple completamente con ser un ORM pero eso si, en un nivel sencillo podrían manejar su base de datos como si fueran objetos.

Les presento sgMysql una clase básica pero funcional que la pueden descargar de aquí => https://github.com/sagitarius29/sgMysql

Comentando un poco la utilización de la clase

Tenemos el archivo sgMysql.php, para configurar nuestra conexión tenemos que hallar los siguiente y modificarlo.


private $host = 'localhost'; // El servidor
private $user = 'root'; //Usuario
private $pass = ''; //Password
private $database = 'pruebas'; // Nombre de la base de datos

Ya configurado esa parte esencial para podernos conectar a nuestro servidor, el siguiente paso es crear un archivo en el cual el nombre de la clase tiene que ser igual al nombre de la tabla con la siguiente arquitectura.

Ejemplo: usuario.php

class usuario extends sgMysql
{

var $principal_table = __CLASS__; //no cambiar
var $primary_key = ‘id’; // Indicamos la llave primaria
var $engine = ‘InnoDB’; // Indicamos el tipo de motor

//Aqui la estructura de la tabla
var $structure = array(
‘id’ => ‘INT NOT NULL AUTO_INCREMENT’,
‘nombre’ => ‘VARCHAR(200) NULL’,
‘apellidos’ => ‘VARCHAR(200) NULL’
);
}

Perfecto, para este entonces ya tenemos configurado nuestra clase sgMysql y creado el primer archivo usuario.php que contiene la clase usuario con la estructura de la tabla.

Cabe mencionar que si queremos usar mas tablas, debemos de crear también mas clases con las diferentes estructuras de tablas.

Genial!, ahora lo demás es muy sencillo para hacer las consultas sólo deberemos llamar a los archivos sgMysql.php y como queremos actuar en la tabla usuario, entonces también llamaremos a usuario.php


require_once('sgMysql.php');
require_once('usuario.php');

ya llamados a estos archivos podemos hacer las siguiente consultas.

para crear nuestra tabla, por si no la tenemos creada bastará con hacer lo siguiente:

$usuario = new usuario();
$usuario->CreateTable();

Pos si queremos insertar algún dato en nuestra tabla hacemos lo siguiente:

$usuario = new usuario();
$usuario->nombre = 'Adolfo';
$usuario->apellidos = 'Cuadros';
$usuario->Save();

Para modificar algún dato

$usuario = new usuario();
$usuario->nombre = 'Nuevo Nombre';
$usuario->Where('id','=',1);
$usuario->Update();

Para Hacer consultas Select

$usuario = new usuario();
$usuario->Where('id','=',2);
$usuario->Select('nombre', 'apellido');
while ($obj = $usuarios->result->fetch_object()) {
echo 'Nombre y apellidos: '.$obj->nombre.' '.$obj->apellidos;
}

Y por último para eliminar algún dato

$usuario = new usuario();
$usuario->id = 3;
$usuario->Delete();

Como vemos todo funciona de forma más sencilla y comprensible haciendo consultas a la base de datos como si fueran objetos, espero que esta pequeña aportación le sirva a alguna persona e iré actualizando la clase…

Evento Scroll con jQuery

A veces necesitamos realizar un determinado evento cada ves que movemos el scrollbar o las barras de navegación de nuestros Navegador.

Por ejemplo si necesitamos mostrar una alerta, una novedad o un formulario de suscripción, en toda la pantalla para hacérselo saber a un visitante de nuestra Página Web y que luego al bajar con el scrollbar, que esta alerta desaparesca.

escjq

En este tutorial voy a mostrarles una forma de hacer uso de este evento, que de hecho lo deben haber visto en muchas Paginas Webs.

Primero, Hacemos referencia a nuestro archivo jQuery:

src="http://code.jquery.com/jquery-1.9.1.js"

Creamos los estilos para nuestros items:

body{font-family:Arial,Georgia,Serif;}
   body a:link{text-decoration: none;}
   body a:hover{text-decoration: underline;}
	
  .parrafos{float: left; margin-right: 30px; text-align: justify;}
  
  .boletin{
   position: fixed; background-color: #000; padding: 20px; float:right; opacity: 0.9; border; 3px solid #fff; color: #fff; font-family:Arial,Georgia,Serif; 
   top: 40%; left: 50%; margin-top: -100px; margin-left: -100px; border: 5px solid #fff;
   }
   
   .bgbody{background-color: #666; opacity: 0.9;}

Creamos nuestro script jQuery:

$(document).on('ready', function(){

	var posicionActual, posicionNueva = 0;

	$(window).scroll(function(){
	posicionNueva = $(this).scrollTop();

	if(posicionNueva>posicionActual){
	$('.boletin').hide('slow');
	$('body').removeClass('bgbody');
	} 
	posicionActual=posicionNueva;
	});

	})

Finalmente creamos nuestro HTML:


 

Actualiza tu Navegador ( o presiona F5 ) para volver a ver el ejemplo !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Baja hacia abajo
y esta ventana
se ocultará !



Suscribete a Nuestro Boletin:





Bueno les dejo una DEMO
Pueden ver el codigo, solo le dan click boton derecho del mouse y luego ver codigo Fuente.

Espero les sirva mucho !

Saludos

Obtener el Alto y el Ancho del Navegador con jQuery

obtayacjq
A veces cuando estamos muy metidos desarrollando un proyecto web, necesitamos obtener las medidas de la ventana del Navegador por algun motivo.
En este Tutorial les voy a mostrar como podemos obtener el Ancho y el Alto de la ventana de nuestro navegador con el framework jQuery.

Utilizaremos las funciones .width() y .height().

Comencemos:

Paso 1:

Primero hacemos referencia a nuestro archivo del framework jQuery, colocamos antes de la etiqueta < / head >, lo siguiente:

src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"

Paso 2:

Ahora le damos un poco estilos CSS:

body{padding:20px;}
.btncls{padding: 10px; background-color:#000; color:#fff; border:none; cursor:pointer; margin:10px;}
.txtcls{color:#44f; font-size:20px;}

Paso 3:

Ahora creamos nuestros 2 botones uno para obtener el ancho y otro para obtener el alto de nuestra ventana. Asi mismo crearemos 2 capas, uno para mostrar el ancho y otro para mostrar el alto.



 
 

Paso 4:

Ahora creamos nuestras funciones, una para obtener el ancho y otra para obtener el alto:

 
function obtenerAncho( obj, ancho ) {
  $( "#anvent" ).text( "El ancho de la " + obj + " es " + ancho + "px. (Width)" );
}
$("#obtan").click(function() {
  obtenerAncho( "ventana", $( window ).width() );
});

 
function obtenerAlto( obj, alto ) {
  $( "#alvent" ).text( "El alto de la " + obj + " es " + alto + "px. (Height)" );
}
$( "#obtal" ).click(function() {
  obtenerAlto( "ventana", $( window ).height() );
});

Listo !

Eso es todo, les dejo una demo:
DEMO

En la Demo Puedes jugar con la ventana del navegador, estíralo y dale mas alto o mas ancho, para ver sus medidas, tanto el ancho como el alto, como gustes.
Ademas en la Demo pueden ver el código fuente de este tutorial solo le dan botón derecho del mouse y luego en la opción de ver código fuente.

Que tengas un buen día !

Despliegue de Aplicaciones Web con Git

Comúnmente, a la hora de poner en producción una aplicación web, se utiliza FTP; sin embargo realizar cambios de esta forma se hace complicado debido a que se debe volver a subir cada archivo modificado y si necesitamos realizar un backup de la versión debemos hacer una copia manual.

Y entonces ¿por qué no utilizar Git?, con Git podemos desplegar nuestras aplicaciones de forma ágil y además llevar un control por versiones.

En este artículo se describe paso a paso cómo utilizar Git para el despliegue de aplicaciones web.

Para empezar se debe crear un repositorio central en un servicio en línea, para ello podemos usar GitHub o Bitbucket.

Seguidamente en nuestro proyecto debemos agregar el siguiente script: deploy.php, éste ejecutará los comandos necesarios para actualizar la aplicación desde el repositorio central hasta el servidor de producción.

En nuestro proyecto crearemos el repositorio local (En NetBeans: click derecho sobre el proyecto > Versioning > Inicialize Git Repository).

inicialize

Ejecutamos los comandos necesarios para subir el proyecto al repositorio central (En NetBeans: click derecho al proyecto > Git > Commit, y luego click derecho al proyecto > Git > Remote > Push).

figura-2

Hasta aquí ya tenemos la aplicación en el repositorio central.

Ahora viene la parte del despliegue para lo cual existe la posibilidad de hacerlo automáticamente cada vez que se actualice el repositorio:

En GitHub:

  1. Iniciar sesión y seleccionar el repositorio correspondiente.
  2. Ir a Settings > Service Hooks.
  3. Ingresar la URL de script de despliegue “deploy.php”.
  4. Click en “Update Settings”.

figura-3

En Bitbucket:

  1. Iniciar sesión y seleccionar el respositorio.
  2. Ir a configuración > Hooks.
  3. Seleccionar POST e ingresar la URL de “deploy.php”.
  4. Click en “Save”.

figura-4

Entonces clonamos el repositorio en el servidor de producción, ejecutando el siguiente comando:

git clone https://[username]:[password]@bitbucket.org/[username]/[repositorio].git [directory]

*Para GitHub solo reemplazamos el dominio.

Ahora ya debemos tener nuestra aplicación corriendo en el servidor.

Finalmente, para actualizar los cambios solo debemos actualizar (commit, pull, push) el proyecto y ejecutar deploy.php en el navegador (Ejemplo: http://server.com/deploy.php)

En el caso de Github no sera necesario ejecutar deploy.php, ya que cada vez que se realice una actualización del proyecto, el despliegue será automático.

Mapas interactivos para la Web utilizando Inkspace, SVG y el plugin JVectorMap

Me encontré con la necesidad de mostrar mapas interactivos en un sitio web, pero que funcione en los navegadores de internet más usados (Firefox, Chrome, InternetExplorer), así que descarte por adelantado a Adobe Flash.

Investigando en la red encontré 2 plugins basados en JQuery, el primero JQVMap es el más sencillo de usar, pero una de las principales desventajas que encontré es que no me funciona en InternetExplorer, el segundo plugin por el que me decidí por usar es el JVectorMap, es un poco difícil de utilizar y tiene más opciones, pero la ventaja es que funciona en los navegadores más usados y recientemente salió la versión 1.2.2.

JVectorMap es un plugin para construir mapas interactivos, en su sitio web oficial se puede descargar la última versión y algunos mapas del Mundo, pero tienen que tener en cuenta que su documentación no está actualizada.

DEMO

DOWNLOAD

Pasos:

Dibujar mapa en Inkscape

  • Primero he dibujado un mapa en Inkscape en este caso un mapa de mi País Perú.jvm01
  • Ahora editamos las regiones en Inkscape para tener un mejor resultado etiquetamos las regiones de los mapas, para ello seleccionamos la región haciendo click derecho sobre una región y escogemos la opción “Propiedades del Objeto”:jvm02
    En este caso seleccionamos la región de Puno, y le pusimos un ID y un nombre para esta Región, esto es con el fin de que en nuestro resultado HTML se muestre esta etiqueta.
  • Ahora guardamos el mapa en un archivo por defecto que es (SVG de Inkscape).
  • Este archivo podemos abrirlo en el bloc de notasjvm03

 

SGVTO (Convertidor de SGV a formato .js de JVectorMap)

  • Seleccionamos todo el contenido del bloc de notas, lo copiamos y pegamos en el campo de texto del formulario que se encuentra en dirección:
    http://svgto.jvectormap.com/jvm04
  • Presionando el botón “Convert to map” podemos editar el nombre del mapa, los ids y los names de cada región; en este caso renombramos el nombre del mapa con “peru”.jvm05
  • Finalmente generamos el mapa para JVectorMap presionando el botón “Save”.jvm06Este resultado lo seleccionamos y copiamos en un archivo que podemos llamarlo “jvectormap.peru.js”.

 

JQuery y JQVectorMap

Entramos a la página oficial de JQuery para descargar su última versión en este caso JQuery 1.10.2 y la última versión de JVectorMap en este caso JVectorMap 1.2.2, este último tiene 2 archivos (.js y el .css).

Funcionamiento

  • Ahora en nuestra carpeta debemos tener los siguientes archivos:jvm07
  • Creamos un archivo peru.html que será donde se mostrara el mapa interactivo, Copiamos en el contenido del archivo:

HEAD

jquery-1.10.2.min.js
jquery-jvectormap-1.2.2.min.js
jvectormap.peru.js

BODY

< div id="world-map" style="width: 290px; height: 400px;">

JS

$(function() { $('#world-map').vectorMap({ map: 'peru' }) });
  • Teniendo como resultado jvm08
  • Mejorando nuestro mapa.
$('#world-map').vectorMap({
	map: 'peru',
	backgroundColor: '#b3d1ff',
	series: {
		regions: [{
				values: {"c0": "1", "c1": "2"},
				scale: ['#d9d4ca', '#b3d1ff'],
				normalizeFunction: 'polynomial'

			}]

	},
	regionStyle: {
		initial: {
			fill: "#f4f3f0",
			stroke: "#666666",
			"stroke-width": 1,
			"stroke-opacity": 1

		},
		hover: {
			fill: "#faa432",
			"fill-opacity": "1"

		}

	}
})
  • Resultado finaljvm09

Conclusión

En este tutorial se intentado enseñar como mostrar un mapa interactivo, espero haya aprendido y puedan aplicarlo a su trabajo. Pueden revisar su documentación de JVectorMap y agregarle más detalles como colores, bordes, opacidad, markers, eventos, etc.

Automatizando Jade y Stylus

Es momento de pasar el diseño de nuestro website a código fuente, a este paso se le llama maquetar y para lo cual normalmente se tiene que escribir infinidad de etiquetas HTML con los infaltables símbolos de menor (<) y mayor (>), de la misma forma para los estilos tenemos que escribir infinidad de puntos y comas (;) y llaves ({}).

Sin embargo existen alternativas para evitar el trabajo anterior, en este artículo hablamos de Jade y Stylus, el primero es un motor de plantillas que genera código HTML y el segundo un pre procesador de CSS, los cuales agilizan el trabajo de maquetación sin necesidad de escribir etiquetas, puntos y comas y llaves, más bien, es necesario llevar un código ordenado.

Realizaremos un ejemplo donde generaremos código HTML y CSS al mismo tiempo de guardar los archivos en Jade y/o Stylus. Para esto necesitamos tener instalado Jade, Stylus y el editor Sublime Text.

Primero debemos instalar nodejs, para ello lo instalamos desde nodejs.org

Luego instalamos stylus y jade desde la línea de comandos de windows:

npm –g install stylus
npm –g install jade

 

En Sublime Text debemos instalar los paquetes correspondientes para tener los código Jade y Stylus resaltados.

Para empezar debemos crear un nevo sistema de construcción para Jade de la siguiente forma:

figura-1

Se abrirá un archivo JSON modificamos el archivo como sigue:

{
  "cmd": ["cmd","/c","jade","-P","$file"],
  "selector": "source.jade"
}

Lo guardamos con el nombre “Jade.sublime-build” en la ubicación que se abre por defecto (C:\Users\[USERNAME]\AppData\Roaming\Sublime Text 2\Packages\User).

Para Stylus buscamos el archivo correspondiente (Stylus.sublime-build) en la carpeta de paquetes de Sublime Text y dentro de la carpeta Stylus. Lo editamos como sigue:

{
  "cmd": ["cmd","/c","stylus", "-c", "$file"],
  "file_regex" : ".",
  "selector": "source.stylus"
}

Hasta aquí podemos generar el código HTML y/o CSS presionando CTRL + B. Sin embargo si queremos generar el código al momento de guardar debemos instalar el paquete SublimeOnSaveBuild; una vez instalado lo configuramos seleccionando:

Preferences > Package Settings > SublimeOnSaveBuild > Settings > Default

Copiamos el código a:

Preferences > Package Settings > SublimeOnSaveBuild > Settings > User

Y agregamos las extensiones “styl” y “jade” a “filename_filter”,  asegurándonos de que “build_on_save” valga “1”.

Con esto al momento de guardar archivos Jade y/o Stylus se generará automáticamente el código HTML y/o CSS correspondiente.

figura-2

figura-3

figura-4

figura-5

Al abrir el archivo “hola.html” obtendrémos el siguiente resultado:

figura-6

Crear una Pagina Web con PHP – POO

webphp_progoo
En este tutorial les voy a mostrar una manera de las muchas que puedan haber para crear una Pagina web con PHP Orientado a Objetos.

Hay muchos que tiene esa duda, espero poder resolver esa duda, existen CMS como wordpress, joomla, etc. Que hace uso bastante del paradigma de la POO(Programacion Orientada a Objetos).

Bueno esta es una pagina básica la cual contiene:

– Cabecera
– Menú
– Contenido
– Pie de pagina.

Entonces manos a la obra.

Primero voy a crear mi Hoja de Estilos CSS. Lo guardare con el nombre oop-estilos.css y estara en mi carpeta css/

Creamos las propiedades CSS

body{
font-family: 'Text Me One', sans-serif;
color: #000;
}

#cabecera{
width: 100%;
height: 50px;
}

#menu{
width: 100%;
height: 50px;	
background-color:#036;
text-align: center;
}

#menu a:link{
color:#fff;
text-decoration: none;
}	

#menu a:active{
color:#ff;
text-decoration: none;
}	

#menu a:visited{
color:#fff;
text-decoration: none;
}	

#menu a:hover{
color:#fff;
text-decoration: none;
}	

#contenido{padding: 10px;}

#img_php{
float: left;
margin-top:5px;
margin-right: 10px;
}

#text_der_img_php{
margin-top:5px;
}

ul.menu_nav ,
ul.menu_nav  li,
ul.menu_nav  ul {
 list-style: none;
 text-align: center;
 margin-right: 30px;
}

ul.menu_nav  {
 position: relative;
 z-index: 597;
 float: left; 
}

ul.menu_nav  li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 text-align: center;
 zoom: 1;
 width: 180px;
}

ul.menu_nav  li.hover,
ul.menu_nav  li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
 background-color:#F90;
 float: left;
 width: 180px;
}

ul.menu_nav  ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.menu_nav  ul li {
 float: left;
 background-color: #000;
 margin-left: -40px;
}

ul.menu_nav  ul ul {
 top: 1px;
}

ul.menu_nav  li:hover > ul {
 visibility: visible;
}

ul.menu_nav  li.rtl ul {
 top: 100%;
 right: 0;
 left: auto;
}

ul.menu_nav  li.rtl ul ul {
 top: 1px;
 right: 99%;
 left: auto;
}

ul.desplegable {
 font-weight: bold;
}

ul.desplegable li {
padding: 7px 10px;
border-style: solid;
border-width: 1px 1px 1px 0;
border-color: #fff #d9d9d9 #d9d9d9;
background-color: #f6f6f6;
color: #000;
}

#footer{
float: left;
width: 100%;
text-align: center;
font-weight: bold;
}

Ahora voy a crear un archivo llamado index.php, este archivo sera la pagina principal en donde graficare mi web a traves de metodos, objetos, clases, etc. de PHP.

Haciendo Referencia.

Hacemos Referencia o llamamos a nuestros archivos externos.



NOTA: Dentro de las etiquetas body vamos a ir colocando todos nuestros métodos, objetos, clases, etc. de PHP.

Creamos la estructura de nuestra web:

//Cabecera
texto = $titulo;
	}
	
	public function graficar() //Metodo
	{
		//echo"

".$this->texto."

"; ?>

texto;?>

lineas[] = $li; } public function graficar() { for ($i=0;$ilineas);$i++) { ?>

lineas[$i];?>

texto = $cadena; } public function graficar() { ?>
texto;?> cabecera = new Cabecera($texto_cabecera); $this->menu = new Menu(); $this->body = new contenido(); $this->pie = new Footer($texto_pie); } public function iniciar_contenido($texto) { $this->body->iniciar_linea($texto); } public function vista() { echo "
"; echo "
"; $this->cabecera->graficar(); echo "
"; echo ""; echo "
"; $this->body->graficar(); echo "
"; echo ""; echo "
"; } } //************************************************************************* //Ahora creamos la vista de nuestra web $pag = new Pagina("Bienvenido a mi Web","Desarrollado por Juan Castro Lurita - 2013"); $pag->iniciar_contenido( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquet lectus sit amet tortor imperdiet iaculis. Cras ornare scelerisque libero et pellentesque. Mauris malesuada interdum sapien a porta. Curabitur cursus odio et nibh pretium, quis ornare purus aliquet. Aliquam gravida sodales convallis. Fusce nec viverra quam. Proin ultrices augue massa, in accumsan dui volutpat a. Quisque fringilla augue at nisl sagittis vestibulum. Duis venenatis, mauris in pharetra aliquet, ipsum massa aliquam lectus, ut volutpat nisl arcu iaculis turpis. Ut vehicula sollicitudin diam, ut pulvinar justo ornare vitae. Sed gravida auctor faucibus. Sed vel risus ac lorem commodo tincidunt a in dui. Fusce tellus magna, adipiscing et suscipit eget, malesuada at orci. Aenean vitae dignissim velit. Sed facilisis tempor lacus ac bibendum.

Nullam et lacus lobortis, congue erat at, lacinia eros. Ut dictum sodales nisi id convallis. Fusce posuere quam eget orci interdum sagittis. Maecenas vitae elementum sem. Sed et massa sem. Phasellus ac lobortis est. Praesent sit amet euismod leo. Maecenas sagittis vel ligula vitae imperdiet. Etiam condimentum elit nibh. Aliquam urna purus, sollicitudin quis est nec, convallis aliquet leo. Cras elementum, est sed feugiat sollicitudin, lorem ante venenatis urna, quis consectetur libero odio sed libero. Mauris nisi arcu, molestie ac enim nec, sagittis scelerisque turpis. Fusce sodales, nulla a venenatis eleifend, quam velit venenatis dui, vel aliquam lorem odio a lacus. Morbi vehicula felis lectus. Mauris faucibus, ante sed cursus imperdiet, est urna suscipit libero, vitae. " ); $pag->vista(); ?>

Esos es todo.

Por si tienen algun problema aca les dejo los archivos para descargarlos:

LINK

Tambien les dejo una DEMO

Espero les sirva mucho.

Gracias.

Sonido de Notificación tipo Facebook con jQuery

Sonido de Notificacion tipo Facebook

Cuando recibimos una respuesta en el chat de Facebook, el sistema reproduce un sonido particular que nos alerta que tenemos un nuevo mensaje.

En este tutorial les voy a explicar como pueden reproducir un sonido con jQuery cuando pulsamos enter o presionamos el botón enviar luego de escribir un mensaje en nuestro chat.

Paso 1.- Haciendo referencia a nuestros archivos

Creamos un archivo llamado index.php , , en donde colocaremos el chat.

Antes de finalizar la etiqueta head de nuestro html, hacemos referencia y llamamos a nuestra hoja de estilos CSS:

A su vez también hacemos referencia y llamamos a nuestro framework jQuery:

No olviden que llamamos a nuestros archivos antes de finalizar la etiqueta head, de nuestro html.

Paso 2.- Creación de las funciones en jQuery

Ahora crearemos 2 funciones con sus eventos.

La primera función que vamos a crear nos detecta cuando estamos pulsando la tecla ENTER para enviar nuestro mensaje, porsupuesto luego de haber escrito nuestro mensaje en el chat.

$(document).keypress(function(enter) {
    if(enter.which == 13) {
    var snd = $("#txt_chat_fb").val().trim();
    if(snd.length > 0){
	$("#txt_chat_fb").val('');   
	$("#txt_chat_fb").focus(); 
    $("
  • ").html(''+snd+'').appendTo("#msg_fb_chat"); $("#chat").animate({"scrollTop": $("#chat")[0].scrollHeight}, "slow"); $('#audio_fb')[0].play(); } } });

    Ahora creamos nuestra segunda función la cual nos detecta cuando estamos pulsando el botón para ENVIAR nuestro mensaje, luego de haber escrito nuestro mensaje en el chat.

    $(document).ready(function(){  
    	$("#txt_chat_fb").focus(); 	
        $('').appendTo("body");	   
        $("#btn_enviar").on("click",function(){
        var snd = $("#txt_chat_fb").val().trim();
        if(snd.length > 0){
    	$("#txt_chat_fb").val('');   
    	$("#txt_chat_fb").focus(); 
        $("
  • ").html(''+snd+'').appendTo("#msg_fb_chat"); $("#chat").animate({"scrollTop": $("#chat")[0].scrollHeight}, "slow"); $('#audio_fb')[0].play(); } } ) });

    Paso 3.- Estructura del contenido en el body

    Ahora creamos la estructura dentro de la etiqueta body de nuestro html, con las capas o divs(divisiones), formulario, botón, etc. para nuestro chat.

    
    

    Chat

      • Hola Amigo
     
    • Como estás ?
    " Activa el Sonido"

    Listo !

    Eso es todo, espero les sirva de mucho.
    Les dejo una demo para que vean como funciona y si desean pueden copiar el codigo fuente, solo le dan click con el boton derecho del mouse y luego ver codigo fuente a la pagina demo.

    DEMO

    Muchas Gracias amigos !

    Bitcoin… el dinero de internet

    Bitcoin la moneda de internet.
    Bitcoin la moneda de internet.

    Muchos ya han de saber que el comercio electrónico ha tocado un punto fuerte a la Internet  Pero eso no es todo, también en la red se ha presenciado el nacimiento de una moneda muy diferente a las demás ya que solo existe en la red.

    ¿Como puede ser esto posible?

    Según wikipedia la moneda nació en 2009 por su inventor Satoshi Nakamoto, pero muchas otras fuentes indican que fueron un grupo de desarrolladores ya que Satoshi Nakamoto solo es un nombre y del cual no existe evidencias de ser una persona física.

    El bitcoin es una moneda basada en en el protocolo P2P, poseyendo una arquitectura de alto cifrado y así permitiendo la transacción segura de bitcoins entre la red.

    ¿Cómo funciona?

    Para ser parte de la red bitcoin el usuario tiene que descargar un programa cliente llamada “monedero” el cual se sincroniza con toda la red bitcoin, después poder adquirir bitcoins y dar bitcoins.

    Las transacciones se realizan de forma segura y anónima ya que sólo las dos partes del intercambio tendrían conocimiento de la transacción.

    Los bitcoins se generan en la red por cualquier computador con un programa llamado “minero”, el cual con cálculos matemáticos basados en la potencia de las tarjetas de vídeo “GPU” y la dificultad que da la red para poderlos generar.

    En la actualidad hay sitios de intercambio de bitcoins por dolares, euros y otras divisas como www.bitcoin.com.es. por lo que a la fecha de hoy 1 bitcoin vale:

    1 Bitcoin = 232.81 Nuevos Soles
    1 Bitcoin = 70.26 Euros
    1 Bitcoin = 90.04 Dolares Estadounidenses

    (29/03/2013)

    Según el algoritmo el número máximo de bitcoins que pueden entrar en circulación es de 21 millones de BTC. pero es infinitamente divisible.

    En todo este tiempo el valor del bitcoin ha ido aumentando por lo que en términos económicos se le denominaría una deflación en el bitcoin.

    El BTC, los gobiernos y los bancos

    Muchos gobiernos alegan que esta moneda pueda ser utilizada por transacciones ilegales como por ejemplo el lavado de activos y los bancos por su lado sufren una preocupación al no poder tener control sobre la moneda.

    Uno de los artículos de RT en español (http://actualidad.rt.com/economia/view/89860-bitcoin-moneda-digital-monopolio-bancos) indican que Estados Unidos busca regular la circulación del bitcoin ya que ésta en el fondo hace temer a bancos por que podría acabar con el monopolio que en la actualidad tienen.

    Entonces será esta moneda la posible salvadora de la crisis económica que ya viene azotando a muchos países del mundo ? o por otro lado ¿Sera esta la moneda libre para el mundo libre?

    Los dejo con este vídeo del Bitcoin.

    Actualización 09/05/2016:

    1 Bitcoin = 1485.67 Nuevos Soles
    1 Bitcoin = 392.64 Euros
    1 Bitcoin = 447 Dolares Estadounidenses