Configurando proxy SOCKS 5 para Maven en Netbeans

Para configurar un proxy SOCKS 5 para Maven podemos hacerlo a través del archivo settings.xml, otra forma es agregar al “path” del sistema la variable MAVEN_OPTS.

En el caso particular de Netbeans 8.2, existe una forma fácil, para lo cual nos dirigimos al menu Herramientas > Opciones > Java > Maven (Activar si aún no lo está).

Ingresamos la dirección IP (o nombre del host) y el puerto del proxy en el campo Opciones de Ejecución Global:

Finalmente hacemos click en el botón “Aceptar”.

Eso es todo, ahora Maven se conectará a Intenet a través del proxy SOCKS.

3 formas de uso de los Certificados Digitales

Un certificado digital es un archivo que asocia una clave criptográfica a uno o varios atributos de un usuario (persona o entidad), y son firmados por autoridades de certificación (AC).

Los componentes básicos de un certificado incluyen:

  • El nombre del usuario o entidad que está siendo certificado.
  • Una clave pública del usuario o entidad.
  • El nombre de la autoridad de certificación.
  • Una firma digital.

La especificación X.509 de la ITU (International Telecomunications Union) provee un estándar para la estructura de un certificado digital de clave pública.

En el Perú, por ejemplo, el RENIEC (Registro Nacional de Identificación y Estado Civil) actúa como AC, firmando las claves públicas de los ciudadanos y generando los certificados digitales correspondientes. Cualquier entidad que disponga de la clave pública del RENIEC estará en condiciones de verificar sus certificados digitales, otorgando la confianza correspondiente a las claves públicas asociadas a los mismos.

Las aplicaciones que usan este sistema incluyen el correo electrónico seguro, las comunicaciones seguras en la web, la firma digital de archivos de software, autenticación de smartcard y cifrado de archivos de sistema. Al final de este artículo conocerás las 3 principales formas de uso de certificados digitales.

1. Certificados SSL

Son utilizados para establecer una conexión cifrada entre un navegador (computadora del usuario) y un servidor (sitio web). Por ejemplo, protege la información de una tarjeta de crédito que es intercambiada durante cada visita (sesión).

Funcionan de la siguiente manera:

  1. El navegador solicita una página segura (https://).
  2. El servidor envía su clave pública con su certificado.
  3. El navegador verifica que el certificado fue firmado por un CA raíz, que aún sea válido y que esté relacionado al sitio web contactado.
  4. El navegador usa la clave pública para cifrar una clave simétrica aleatoria y la envía al servidor con la URL y los datos necesarios cifrados.
  5. El servidor descifra la clave simétrica usando su clave privada y la usa para descifrar la URL y los datos.
  6. El servidor retorna la página web solicitada y los datos cifrados con la clave simétrica.
  7. El navegador descifra los datos y la página web usando la clave simétrica, entonces muestra la información.

2. Certificados de firma digital

Una firma digital es equivalente a una firma manuscrita, identifica a la persona que firma un documento. A diferencia de una firma manuscrita, una firma digital es difícil de falsificar porque contiene información cifrada que es única al firmante y es fácil de verificar.

Una firma digital está compuesta de tres elementos:

  1. Un certificado digital única para cada firmante.
  2. Una clave privada, a la cual sólo el firmante puede acceder.
  3. Una clave pública, la cual permite a cualquier persona validar la firma.

Las firmas digitales son una aplicación de la criptografía de clave asimétrica (ver figura).

criptografia-asimetrica

3. Certificados de Autenticación Cliente

Imagina que visitas un sitio web e instantáneamente y automáticamente inicias sesión, sin llenar un usuario y una contraseña, sin hacer click en el botón de autologin del navegador, sin una cookie enviada del navegador al servidor.

Los certificados clientes son instalados en el navegador y transferidos al servidor cuando el servidor los solicita y el usuario está de acuerdo.

La  AC es responsable de otorgar un certificado cliente y relacionarlo con una clave privada. El certificado es enviado por sí mismo al servidor, mientras que la clave privada es usada para firmar la solicitud de autenticación. La firma es verificada en el servidor, entonces el servidor sabe que realmente eres tu a quien le pertenece el certificado.

En el Perú. por ejemplo, el programa social Beca 18 utiliza los certificados de autenticación del DNI electrónico de los becarios, para darles acceso a su intranet.

Conclusiones

Los certificados digitales son de gran ayuda para el desarrollo de las comunicaciones seguras en internet, lo cual involucra también al comercio electrónico. Los usuarios, administradores y desarrolladores de internet necesitan tener una sólida comprensión de estos sistemas de seguridad basados en certificados con el objetivo de aprovechar todo su potencial.

Los certificados digitales protegen internet asegurando la autenticidad de los mensajes enviados a través de la red.

¿Y tú ya utilizaste Certificados Digitales? Comparte tu experiencia en los comentarios.

Recibir mensajes de facebook mediante tu sitio web

Seguramente alguna vez te preguntaste como recibir mensajes en tu página del facebook mediante tu sitio web, algo así como un chat en línea.

Pues para esto la exitosa red social ha habilitado esta función mediante su renovado plugin para páginas web, en  donde no solamente podrás mostrar los likes y las actualizaciones de tu muro, sino ahora también un componente para enviar mensajes directamente a tu fan page y mantener la conversación mediante la aplicación del facebook messenger.

En este árticulo te enseñamos una forma de como agregar esta funcionalidad a tu sitio web.

Para empezar debes crear un botón o enlace, para ello debes ubicar el siguiente código HTML justo debajo de aperturar la tag body:

<a href="/mensajes-facebook.html" target="_blank" id="btn-msg-face">Envíanos un mensaje</a>

Seguidamente agregamos el estilo CSS:

#btn-msg-face{
  position: fixed;
  bottom: 0;
  height: 30px;
  right: 10px;
  min-width: 183px;
  z-index: 16000002;
  background: #1F93DF;
  color: #fff;
  font:bold 12px Verdana;
  line-height: 30px;
  overflow: hidden;
  text-align: center;
}

Con lo cual obtendremos lo siguiente:

boton-chat

Cada vez que el usuario haga click sobre el botón se abrirá una nueva ventana del navegador en donde se cargará el plugin de facebook, para lo cual anexaremos el siguiente código javacript con jquery:

$(document).ready(main);

function main(){
  $('#btn-msg-face').on('click', function(){
    PopupCenter(this.href, this.target, '350','450'); return false;
  });
}

function PopupCenter(url, title, w, h) {
    var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
    var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;

    width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    var left = ((width / 2) - (w / 2)) + dualScreenLeft;
    var top = ((height / 2) - (h / 2)) + dualScreenTop;
    var newWindow = window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);

    if (window.focus) {
        newWindow.focus();
    }
}

Finalmente en el archivo “mensajes-facebook.html” colocaremos el código fuente que Page Plugin nos proporciona:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Envíanos un mensaje</title>
	<style>
		body{margin: 0;padding: 0}
	</style>
</head>
<body>
	<div id="fb-root"></div>
  <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.5&appId=xxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="https://www.facebook.com/foo" data-tabs="messages" data-width="350" data-height="450" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/foo">
Cargando chat...
</blockquote></div></div>
</body>
</html>

Con todo esto nuestros visitantes podrán interactuar con nuestras empresas mediante facebook :)

chat-facebook

Listar todas nuestras rutas de Laravel 5.1 con Git Bash

En ocasiones tenemos la necesidad de revisar nuestra rutas o URL amigables de nuestro proyecto mientras estamos trabajando.
Por suerte existe una manera de verlas, solo abrimos Git Bash y Ejecutamos el siguiente comando siempre y cuando nuestro Laravel este confgurado correctamente y no presente errores:

php artisan route:list

Ampliamos nuestra ventana de Git para ver la tabla en donde nos muestra la los métodos, la URI de nuestras rutas:
dsa

 

No olvidar que el listado de rutas que se nos muestra en pantalla varia según tu proyecto, no va a ser similar.

Espero les sirva de mucho para poder visualizar mejor sus rutas.

Gracias por su atención.

Autocompilando Stylus

Stylus es un lenguaje innovador de hojas de estilo, el cual se compila a CSS. Inspirado en SASS, Stylus está construido con node.js y tiene la capacidad de ejecutarse en el navegador.

Para utilizar Stylus en Windows es necesario instalar node.js, el cual lo podemos descargar desde su sitio web nodejs.org.

Una vez instalado abrimos la línea de comandos (Windows + R > cmd) y ejecutamos lo siguiente:

npm –g install stylus

En esta oportunidad mostraremos una alternativa a la Automatización de Stylus con Sublime Text mediante una funcionalidad en línea.

Para esto simplemente accedemos a la línea de comandos y nos ubicamos en el directorio del proyecto, asumiendo que tenemos nuestros archivos de Stylus (.styl) en la carpeta styl y los archivos de hojas de estilo compilados (.css) en la carpeta css, ejecutamos lo siguiente:

stylus -w styl/ -o css/

Con esto estamos indicando a Stylus que monitorize (-w) los cambios que se realicen en la carpeta styl y compile automaticamente guardando el resultado (-o) en la carpeta css.

auto

Usar la consola Git Bash en vez de la consola de Digital Ocean

En este tutorial les quiero mostrar una manera de como conectar la Consola Git Bash  a nuestro Servidor VPS, VPN, etc. para gestionar los paquetes y hacer nuestras propias configuraciones, es decir que usaremos la consola mas famosa del mundo que viene con GIT, en ves de la consola que tiene nuestro Droplet en Digital Ocean.

c d

Pero pocos encuentra información rápida al respecto, por eso decidí hacer este tutorial para ayudarlos, es uno de los motivos por lo cual me gusta escribir tutoriales, y es para ayudar y compartir conocimiento con los mas jóvenes que se inician en el mundo del desarrollo de software en general.

Les voy a mostrar una manera rápida y sencilla sin hacerle bolas, de hacer esto.

Acotar que use la versión 1.9.4 de Git para este tutorial. Vamos con ello:

Paso 1

Abrimos el Git Bash, Hacemos doble click  para ello.

Para los que requieren permisos, no olviden botón derecho del mouse y ejecutar como administrador.

a

Cargamos y Dejamos abierto nuestro Git Bash:

c

Paso 2

Iniciamos Sesión con Nuestra Cuenta de Digital Ocean, Nos Dirigimos al contenedor de Droplets, para esto hacemos click en el botón Droplets que esta en el menú de navegación del lado izquierdo.

Anotamos la IP Address de nuestro Droplet que esta al costado del nombre de nuestro Droplet:

2

 

Paso 3

Escribimos el siguiente comando en nuestro consola Git Bash:

ssh -l root XXX.XXX.XXX.XXX (IP Address)

En ves de root ponemos nuestro nombre de usuario, pero por defecto el nombre de usuario es root. Presionamos ENTER y nos pedira el password:

4

Ingresamos nuestro password y listo !

Ya deberíamos estar conectados y podemos configurar e instalar paquetes a nuestro servidor con el Droplet determinado.

NOTA: No olvidar que es mejor y se recomienda usar SSH Keys, pero solo para salir del paso podemos usar el comando que les mostre.

 

Espero les haya servidor de mucho.

Muchas Gracias

 

 

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 !