Creando nuestra primera aplicacion al instante en Django

Con Django puedes montar de manera rápida tu primera aplicación. Primer creamos nuestra base de datos, yo la llamaré ‘djangodb’. La base de datos que voy a usar es MySQL.

Nota: La versión de Django que estoy usando es la 1.11.4

Creando un nuevo proyecto

Primero voy a crear un proyecto nuevo, voy a mi consola de comandos y ejecuto la siguiente instrucción:

django-admin startproject admin_django

El sistema crea la estructura de archivos de nuestro proyecto:

admin_django/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        wsgi.py

Ahora verificamos si el proyecto ha sido creado correctamente, para ello iniciamos el servidor ejecutando:

python manage.py runserver

Vamos a nuestro navegador y escribimos http://localhost:8000/  y nos cargara nuestro proyecto creado correctamente.

Configurando la Base de datos

Primero instalo la librería para darle soporte MySQL dentro de Django, ejecuto:

pip install MySQL-python
Collecting MySQL-python
  Downloading MySQL-python-1.2.5.zip (108kB)
Installing collected packages: MySQL-python
  Running setup.py install for MySQL-python: started 
...

Luego ingresamos a la carpeta de nuestro proyecto y abrimos el archivo settings.py , vamos a la linea DATABASES y conectamos nuestra base de datos MySQL:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'django',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306',
        'OPTIONS': {
            'sql_mode': 'traditional',
        }
    }
}

Creando nuestra aplicación

Ahora sencillamente ejecutamos:

python manage.py migrate

Con este comando Django crea las tablas en la base de datos y monta un paquete completo con login, usuario, etc.

Si corremos el servidor:

python manage.py runserver

Vamos a nuestro navegador y escribimos http://localhost:8000/admin/admin  y nos cargara nuestra primera aplicacion que nos pide que iniciemos sesión :

Coloco mi usuario y contraseña e ingreso a la aplicación:

 

Pueden ver en la imagen anterior que puedo agregar, editar, eliminar usuario y grupos.

Creando mi Usuario de acceso a la aplicación

Acá muy atento, recuerda que debes de usar la consola de comandos de Windows CMD la abres y ejecutas el siguiente comando:

python manage.py createsuperuser
Username (leave blank to use 'frontend'): miusuario
....

Al ejecutar colocamos nuestro usuario y luego el pass para nuestra cuenta, luego regresamos a la pantalla de login e iniciamos sesión con nuestro usuario y password que hemos creado.

Espero que les sirva de mucho este tutorial.

Nos vemos hasta un próximo tutorial.

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

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

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…

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.

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 !