Instalación de NodeJS, AngularJS (y Bootstrap) en Windows

Nos instalamos NodeJS desde su web oficial nodejs.org, haciendo clic en el botón ‘INSTALL’. Se descargará un fichero MSI que deberemos instalar en nuestro Windows.

Una vez instalado, nos aseguraremos que se ha instalado correctamente, para ello buscaremos en el botón de inicio de Windows, una nueva carpeta llamada ‘NodeJS’, y ahí haremos clic en ‘Node.js command prompt‘. Escribiremos:

node -v

Y deberemos ver la versión de NodeJS que acabamos de instalar.

Hasta aquí tenemos instalado correctamente NodeJS en nuestro sistema operativo Windows.

Para nuestra prueba, además instalaremos los módulos ‘connect‘ y ‘serve-static‘ de NodeJS, para podernos hacer un simple servidor web en NodeJS.

Para ello, desde la ventana previa abierta usando ‘Node.js command prompt’ escribiremos:

npm install -g connect

npm install -g serve-static

Con esto (deberíamos) haber terminado la instalación de NodeJS.

Ahora pasamos a descargarnos AngularJS, para ello vamos a su web oficial y pulsamos el botón ‘Download’, esto nos abrirá un popup, donde volveremos a pulsar ‘Download’ y se nos descargará un fichero angular.js.

Lo siguiente es descargar Bootstrap de su web oficial, por su simpleza y distintas posibilidades de descarga no voy a entrar en detalles de como se descarga, únicamente, al final de la descarga, deberemos tener los ficheros: bootstrap.cssbootstrap-theme.css.

Hasta este momento hemos descargado todo lo que nos hace falta, y tenemos NodeJS instalado.

Lo siguiente que vamos hacer es crear un ejemplo que cargue todo, para ello nos crearemos una carpeta nueva, por ejemplo c:\na, y ahí nos crearemos un fichero server.js con el siguiente contenido:

var connect = require(‘connect’),
serveStatic = require(‘serve-static’);

var app = connect();

app.use(serveStatic(“.”));
app.listen(5000);

Y desde la consola abierta usando ‘Node.js command prompt’ escribimos:

c:

cd c:\na

node server.js

A partir de este momento tendremos un pequeño servidor NodeJS oyendo en el puerto 5000.

En caso que nos muestre error de que no encuentra ‘connect’ o ‘serve-static’, deberemos hacer:

c:

cd c:\na

npm link connect

npm link serve-static

node server.js

Nos crearemos un nuevo directorio para nuestra prueba, en c:\na\e1, y dentro coparemos angular.jsbootstrap.cssbootstrap-theme.css, crearemos un nuevo fichero llamado index.html con el siguiente contenido:

<!DOCTYPE html>
<html ng-app>
<head>
<script src=”angular.js”></script>
<link href=”bootstrap.css” rel=”stylesheet” />
<link href=”bootstrap-theme.css” rel=”stylesheet” />
</head>
<body>
<div class=”btn btn-default”>{{“AngularJS”}}</div>
<div class=”btn btn-success”>Bootstrap</div>
</body>
</html>

Si abrimos un navegador y escribimos http://localhost:5000/e1 y vemos una web simple con un botón “bonito”, y con la salvedad que a pesar de haber escrito {{“AngularJS”}} vemos AngularJS significa que tenemos NodeJS + AngularJS + Bootstrap correctamente instalados y listos para ser usados.

 

jQuery: Plugin para mostrar las fechas en formato amigable

Habréis visto que en muchas webs en vez de poner fechas de forma: “20/08/2011” ponen algo como “Hace 3 semanas”, a esto se llama mostrar fechas en formato amigable, y nuestro amigo John Resig a creado un plugin, para jQuery, llamado Pretty Date que cumple su cometido a la perfección.

jQuery: Plugin para hacer zoom de imágenes

Con el plugin Zoomy de jQuery podremos hacer zoom de imágenes de nuestro HTML, y tan fácil como el siguiente código:

[sourcecode language=”javascript”]
$(‘.zoom’).zoomy();
[/sourcecode]

El código anterior aplicará el plugin a todas las imágenes que tengan asociada una clase ‘zoom’, por ejemplo:

[sourcecode language=”html”]
<img src=’mi_imagen.png’ class=’zoom’ />
[/sourcecode]

Toda la información, ejemplo y código fuente en su página oficial:
Zoomy jQuery Plugin.