Archivo de la etiqueta: javascript

Instalación y Hola Mundo en Node.js

Hola a todos.

Hoy vamos a ver como hacer el típico hola mundo en node.js.

Lo primero que necesitamos es instalar node.js en nuestro sistema.

Si entramos en la página oficial https://nodejs.org/ veremos un botón INSTALL que detecta automáticamente el sistema operativo desde el cual accedemos y nos descarga el archivo correspondiente en cada caso.   Si estas trabajando desde Windows o desde MAC solo tienes que descargar el archivo, ejecutarlo y seguir los pasos para instalarlo. En linux se descarga un paquete que hay que compilarlo según la distribución que tengas instalada. Si estas trabajando en ubuntu o alguno de sus derivados puedes instalarlo de manera sencilla desde el repositorio de terceros de Chris Lea ejecutando los siguientes comandos:

sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

Si estas acostumbrado a trabajar en php o cualquier otro lenguaje de servidor sabrás que se necesita un servidor web como por ejemplo apache para poder responder a las peticiones y servir las paginas que generemos, sin embargo en node.js no necesitamos un servidor web como tal si no que  nosotros nos tenemos que encargar de gestionar las peticiones, puede parecer complicado, pero es realmente sencillo y rápido.

Pasemos a la práctica:

Crea una carpeta donde mejor consideres  para guardar los archivos que vamos a crear en node.js y crea dentro un nuevo archivo en blanco que llamaremos server.js

A continuación edita el archivo que acabamos de crear e introduce las siguientes lineas de código:

var http = require("http");
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/html"});
response.write("Hola Mundo");
response.end();
}).listen(8888);

La primera línea require, requiere al módulo http que viene incluido con Node.js y lo asigna a la variable http.

Luego llamamos a la función createServer que forma parte del módulo http. Esta función retorna un objeto que contiene un método llamado listen al cual le asignamos el el número de puerto en que nuestro servidor HTTP va a escuchar, en este caso el 8888.

Vemos que a la función createServer le pasamos como parámetro una función que a su vez recibe dos parametros: request y response.

En este caso solo nos interesa response, que es un objeto que contiene varios métodos:

Con writeHead le indicamos que escriba las cabeceras y le indicamos que el  Content-Type es  “text/html”.

Después escribimos el contenido de la página, en este caso la frase “Hola Mundo” con response.write. Esta función sería similar al echo de php.

Y por ultimo le indicamos que hemos terminado de escribir el contenido con respose.end();

Para ejecutar el servidor que hemos creado tenemos que abrir la consola de comandos (cmd en windows) , situarnos en la carpeta donde se encuentra nuestro archivo y ejecutarlo escribiendo el comando node seguido de el nombre del archivo que queremos ejecutar:

node server.js

Ahora si escribimos en la barra de direcciones de nuestro navegador http://localhost:8888/ nos muestra una preciosa página con ese texto tan original,  profundo y elaborado llamado “Hola Mundo” ;-P.

Este ha sido nuestro primer acercamiento a node.js.

En posteriores entradas aprenderemos mas cosas sobre node.js.

Calcular días transcurridos entre dos fechas en javascript

Hola de nuevo:

En el post anterior vimos como sumar o restar días a una fecha dada en javascript, ahora vamos a ver como calcular los días transcurridos entre dos fechas. Para ello vamos a crear una pequeña función:

Actualización: He actualizado la función ya que la original tenía un error y además he reducido el número de lineas de código para conseguir el mismo resultado.
// Función para calcular los días transcurridos entre dos fechas
restaFechas = function(f1,f2)
 {
 var aFecha1 = f1.split('/');
 var aFecha2 = f2.split('/');
 var fFecha1 = Date.UTC(aFecha1[2],aFecha1[1]-1,aFecha1[0]);
 var fFecha2 = Date.UTC(aFecha2[2],aFecha2[1]-1,aFecha2[0]);
 var dif = fFecha2 - fFecha1;
 var dias = Math.floor(dif / (1000 * 60 * 60 * 24));
 return dias;
 }

Esta función nos devolverá el número de días que han transcurrido entre las dos fechas pasadas.

Las fechas pasadas deben ser dos strings en formato ‘dd/mm/aaaa’.

Un ejemplo de llamada sería este:

var f1 = '10/09/2014';
var f2='15/10/2014';
alert(restaFechas(f1,f2));

Esto nos sacará un alert con el número 35 que son los días transcurridos entre las dos fechas.

Eso es todo por hoy, espero que os sirva de ayuda.

Sumar días a una fecha en javascript

Hola a todos:

En el post anterior vimos como “Sumar o restar días, semanas, meses o años a una fecha con PHP“.

Hoy me han preguntado como sumar días a una fecha desde javascript y he preparado una función con un pequeño ejemplo de como hacerlo.

La función para sumar o restar días a una fecha seria la siguiente:

Actualización:  La función original se ha modificado debido a un error que provocaba que no se calculasen correctamente algunas fechas, . (Gracias a Edisson y a Gustavo por el aviso). 
// Función que suma o resta días a la fecha indicada

sumaFecha = function(d, fecha)
{
 var Fecha = new Date();
 var sFecha = fecha || (Fecha.getDate() + "/" + (Fecha.getMonth() +1) + "/" + Fecha.getFullYear());
 var sep = sFecha.indexOf('/') != -1 ? '/' : '-';
 var aFecha = sFecha.split(sep);
 var fecha = aFecha[2]+'/'+aFecha[1]+'/'+aFecha[0];
 fecha= new Date(fecha);
 fecha.setDate(fecha.getDate()+parseInt(d));
 var anno=fecha.getFullYear();
 var mes= fecha.getMonth()+1;
 var dia= fecha.getDate();
 mes = (mes < 10) ? ("0" + mes) : mes;
 dia = (dia < 10) ? ("0" + dia) : dia;
 var fechaFinal = dia+sep+mes+sep+anno;
 return (fechaFinal);
 }

La función recibe como parámetros el número de días que se le quiere sumar y la fecha a la  cual que se le van sumar los días.

Si no se le pasa ninguna fecha coge por defecto la fecha actual.

Esta función está pensada para ser usada con fechas en formato dd/mm/aaaa y dd-mm-aaaa. Admite como separador ‘/’ y ‘-‘.

Un ejemplo de llamada seria este:

var fecha = sumaFecha(8,'01/07/2014');
alert(fecha);

En este ejemplo sumaríamos 8 días a la fecha 01/07/2014 sacaría un alert con la fecha ’09/07/2014′.

Espero que os sea de utilidad.

Usar Media Uploader de Worpress para subir imágenes desde tu plugin o tema.

 

Hola de nuevo:

Hoy os voy a mostrar la manera de añadir el Media Uploader de WordPress donde queramos dentro de el plugin o el theme que estemos desarrollando.

Esto nos permitirá subir y/o asignar la url de la imagen a un campo del formulario que estemos creando.

He añadido también un div contenedor donde se pre-visualizará la imagen seleccionada.

El código html que debemos añadir a nuestro formulario es el siguiente:

<label for=”upload_image”> <input id=”upload_image” type=”text” size=”36″ name=”ad_image” value=”http://” /> <input id=”upload_image_button” class=”button” type=”button” value=”Subir Imagen” /> <br />Introduce una url o sube una imagen. </label>

Ahora debemos crear un archivo javascript ,lo llamaremos por ejemplo wp_uploader.js  y lo vamos a guardar en una carpeta llamada js dentro de la carpeta del plugin que estemos creando.

Editamos el archivo que acabamos de crear y escribimos el siguiente código:

jQuery(document).ready(function($){


 var custom_uploader;


 $('#upload_image_button').click(function(e) {

 e.preventDefault();

 //Si el objeto uploader ya ha sido creado volvemos a abrir el dialogo.
 if (custom_uploader) {
 custom_uploader.open();
 return;
 }

 //Extendemos el objeto wp.media
 custom_uploader = wp.media.frames.file_frame = wp.media({
 title: 'Selecciona Imagen',
 button: {
 text: 'Selecciona Imagen'
 },
 library : { type : 'image'},
 multiple: false
 });

 //Cuando se selecciona un archivo ponemos su URL como valor del campo de texto
 custom_uploader.on('select', function() {
 attachment = custom_uploader.state().get('selection').first().toJSON();
 $('#upload_image').val(attachment.url);
 // Mostramos la imagen dentro del div con id "magen_preview".
 $('#imagen_preview').html('<img src="'+attachment.url+'" style="max-width:200px" />');
 });

 //Abre el dialogo del uploader..
 custom_uploader.open();

 });
});

Ahora solo nos queda añadir el archivo js que acabamos de crear:

En el archivo functions.php del theme o en nuestro plugin ponemos lo siguiente:

add_action('admin_enqueue_scripts', 'upload_script');
function upload_script(){
  wp_enqueue_media ();
  // Esto para cargarlo desde la carpeta js de nuestro plugin, si lo tenemos alojado el otro sitio cambiar url
  wp_enqueue_script( 'uploader',plugins_url( '/js/wp_uploader.js', __FILE__ ));
}

Y con esto ya tenemos un campo en nuestro formulario que al pinchar sobre el botón subir imagen nos abrirá la galería multimedia de WordPress para poder elegir o subir una imagen.

Como siempre espero que os sea de  utilidad. 🙂

¿Necesitas un presupuesto para un desarrollo WordPress a medida?

¿Quieres un plugin a medida que realice una funcionalidad concreta que necesitas para tu WordPress?

Solicita un presupuesto sin compromiso:

WordPress – Acceder al idioma seleccionado y los idiomas activos de qTranslate desde javascript.

Hola a todos:

Hoy toca hablar de WordPress y de ese maravilloso plugin que nos permite utilizar varios idiomas en los sitios creados con WordPress llamado qTranslate.

A veces podemos necesitar saber cual es el idioma que está seleccionado para realizar una acción determinada en función a esté.

Para obtener el código iso del idioma actual escribimos esto:

<?php
    $global $q_config;
    $iso = qtrans_getLanguage();

    echo 'El idioma actual es: '.$iso;
?>

Por ejemplo si el idioma actual es el español  obtendríamos esto:

El idioma actual es:  es

Si queremos obtener el nombre del idioma en lugar de su iso escribimos esto:

<?php
    $global $q_config;
    $iso = qtrans_getLanguage(); // obtenemos el código iso.
    $idioma =  qtrans_getLanguageName($iso); // Obtenemos el idioma.
    echo 'El idioma actual es: '.$idioma;
?>

Y obtendríamos como resultado algo como esto:

El idioma actual es: Español

Y si queremos saber todos los idiomas activos podemos obtenerlos de esta manera:

<?php

global $q_config;
$activos = $q_config['enabled_languages'];
foreach ($activos as $l)
{
    echo  qtrans_getLanguageName($l).'<br />';
}

?>

Hasta aquí puede que le haya servido de ayuda a alguien pero en el titulo del post ponía ‘desde javascript’, no se me ha olvidado :-).

Puede que escribiendo tu propio plugin, o modificando el tema para darle alguna funcionalidad extra necesites acceder a las variables anteriores pero desde javascript (a mi me ha pasado por eso os cuento todo esto).

Podríamos crear variables globales escritas con php tipo algo así:

<?php  echo  "Idioma =".qtrans_getLanguage()."" ?>

Pero es un método  feo, poco elegante y una mala práctica.

Bien, imaginemos que estamos escribiendo un plugin, lo primero que tendríamos que hacer es añadir el archivo .js donde estarán nuestras funciones javascript.

para ello utilizamos la función de wordpress wp_enqueue_script.

wp_enqueue_script( 'mi_script',plugins_url( '/js/mi_script.js', __FILE__ ));

El primer parámetro es el nombre que le damos para identificar al script,  puede ser el que queramos.

El segundo parámetro es la url donde se encuentra el archivo, en esta ocasión se encuentra en la carpeta de nuestro plugin en una subcarpeta llamada js.

Para obtener la ruta de nuestro plugin utilizamos la función plugins_url();

Y ahora llega el momento mágico, para hacer que las variables php sean accesibles desde nuestro javascript escribimos lo siguiente:

// Obtenemos los idiomas y los pasamos a una variable javascript
global $q_config;
$arrLang = array();
$languages_iso = $q_config['enabled_languages'];
foreach ($languages_iso as $l)
{
  $arrLang[$l] = qtrans_getLanguageName($l);
}

wp_localize_script( 'mi_script', 'lang',array('languages' => $arrLang, 'iso' => qtrans_getLanguage()));

La función  wp_localize_script nos permitirá  acceder desde nuestro javascript a las variables que le pasemos siempre que antes hayamos definido nuestro script con wp_enqueue_script.

El primer parametro de wp_localize_script() debe ser el nombre que le hayamos dado a nuestro script al añadirlo con wp_enqueue_script.

El segundo parámetro es el nombre del objeto desde el cual accederemos desde javascript a los datos, y el tercero es un array que contiene las variables que despues utilizaremos desde javascript.

Ya solo nos queda la parte javascript.

En nuestro archivo mi_script.js cremos por ejemplo pla siguiente función:

function dime_el_idioma(){
    alert(lang.languages[lang.iso]);
}

Llamamos a esta función desde el html por ejemplo con un botón:

<input type="button" onclick="dime_el_idioma()" value="Idioma" />

Si probamos todo esto veremos que al pulsar el botón nos mostrará un alert con el nombre del idioma activo que ahora lo tenemos accesible desde javascript.

Y… eso es todo…

Espero que a alguien le sirva de ayuda.

¿Necesitas un presupuesto para un desarrollo WordPress a medida?

¿Quieres un plugin a medida que realice una funcionalidad concreta que necesitas para tu WordPress?

Solicita un presupuesto sin compromiso: