17 jul

Siguiendo con las prácticas node.js, vamos a instalar y probar la base de datos MongoDB, Simplemente vamos a hacer una instalación, carga de datos y luego un server que muestre los datos en una web

Una herramienta útil para OSX:Brew

Probablemente hubiera sido de los más util empezar por este programa, pero lo descubrí luego de estar trabajando en Node.js y estos tutoriales y resultó ser de lo más útil y sencillo. Homebrew es una aplicación que permite la instalación y gestión de otros programas

Perfectamente se puede saltear este parte si ya tenés brew instalado, sino lo tenés ni te interesa, podés instalar mongodb descargando e instalandolo como cualquier otro paquete desde su página oficial

Para instalar brew necesitás antes tener instalado el xquartz y la command line tool

Para el primero bajate el dmg de aca, instalalo, deslogeate, y luego volvé a logearte

Para el segundo bajalo desde aca, ciertamente es necesario tener un id de developer en el sitio de Apple. Algo que va a ser muy necesario siempre

Luego podrás instalar brew con la siguiente linea en la consola

ruby -e “$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)”

No es necesario usar SUDO, simplemente se instalará en /usr/local

instalar mongodb

Luego de tener instalado homebrew, abrimos la consola y tipeamos

brew install mongodb

Ahi se instalará mongodb:

To have launchd start mongodb at login: ln -sfv /usr/local/opt/mongodb/*.plist ~/Library/LaunchAgents Then to load mongodb now: launchctl load ~/Library/LaunchAgents/homebrew.mxcl.mongodb.plist Or, if you don’t want/need launchctl, you can just run: mongod

Trabajando con Mongo DB

Para hacer andar la db ejecutamos en consola mongod

De esa manera tenemos la base de datos corriendo en nuestro localhost en el puerto 27017. Luego de arrancar la db podemos abrir un editor de mongo tipeando mongo en otra instancia de la consola

para probar, allí podemos cargar un dato a la db:

db.test.save( { a: 1 } )
> db.test.find()

el método find nos devolverá el dato recién cargado. Por ejemplo:

{ “_id” : ObjectId(“51ddaceb9639ad48df5a18db”), “a” : 1 }

Usando node.js

Vamos a cargar un dato sencillo, usando el clásico ejemplo de personas. En la consola donde ejecutamos la sintaxis de mongo vamos a cargar unos datos:

db.personas.insert({nombre:’pepe’,apellido:’gonzalez’})
db.personas.find()

vamos a instalar la libreria de node mongodb:

sudo npm install mongodb -g

luego creamos un archivo app.js, con el código muy similar al primer ejemplo, pero cargando toda la lógica de mongo:

var mongodb = require('mongodb'); var http = require("http"); var serverdb = new mongodb.Server("127.0.0.1", 27017, {}); var dbTest = new mongodb.Db('test', serverdb, {}) var data; var elservidor = function(request, response) { response.writeHead(200, {"Content-Type": "text/html"}); for(i=0;i<data.length;i++){ response.write(data[i].nombre); response.write("
") response.write(data[i].apellido); } response.end(); } dbTest.open(function (error, client) { if (error) throw error; var collection = new mongodb.Collection(client, 'personas'); collection.find().toArray(function(err, docs) { data = docs; }); http.createServer(elservidor).listen(8888); });

Podemos ver que primero llamamos la librería mongodb, luego se conecta al servidor(serverdb), luego con la base de datos (dbTest), y luego el método dbTest.open() obtiene la colección de ‘personas’. estas son guardadas como un Array en la variable data. Luego se crea el server que ejecuta la función “elservidor” que se encarga de parsear la variable data y mostrarla en el documento html.

Luego de esto simplemente:

node app.js

Vamos a localhost:8888, y allí veremos los datos de personas.

Un paso mas en la batalla :)

10 jul

Less Es uno de los módulos que empezamos a ver en nuestros anteriores ejemplos como complemento a express y hbs. Less es un pre procesador de CSS que nos permite generar nuestro archivo css a partir de nuestro código less. Este último, nos permite usar variables, funciones y herencia.

El uso de las variables es algo muy útil cuando tenemos que reutilizar código. Un ejemplo muy típico sería el de guardar un color:

@color-base: #2d5e8b; .class1 { background-color: @color-base; } .class2 { background-color: #fff; color: @color-base; } .class3 { border: 1px solid @color-base; }

En el ejemplo podemos ver que la variable “@color-base” es usada por 3 clases diferentes. Algo muy útil para manejar una paleta de colores.

De acuerdo a la documentación de su sitio oficial podemos ver que less puede ser usado tanto como pre-procesador desde el lado del server, tanto como desde el lado cliente. Obviamente, aqui lo veremos desde la primera opción, interactuando con express y hbs

Less-middleware, el compilador de less para usar en express

al hacer una instalación del modulo less, podemos ver que podemos crear generar nuestro archivo css a partir del less como strout en la consola

$ lessc styles.less

Luego copiar esa salida a un archivo css. Algo no muy cómodo. También se puede usar su método render, y hacer unas cuantas cosas mas aún. Incluso se puede encontrarse un tutorial aca para hacer un compilador de less en node.js

Siendo que vamos a utilizar Express como Framework podemos contar con otro módulo: less-middleware que tal como su nombre indica se trata de less + el software necesario para la comunicación con Express. Se instala igual que tantos otros módulos:

sudo npm install less-middleware -g

Si seguimos el primer tutorial de esta serie, ya podemos usarlo sin problemas.

Un ejemplo

Retomándo el último tutorial de parciales vamos a agregarle un par de líneas para usar less sobre ese mismo ejemplo. Abrimos el archivo app.js en donde editaremos nuestro código. Allí creamos dos nuevas variables: path y lessMiddleware respectivamente

var path = require('path'); var lessMiddleware = require('less-middleware');

luego a la variable app le agregamos unas cosas usando el método “use”

app.use(app.router); app.use(lessMiddleware({ src: __dirname + '/public' })); app.use(express.static(path.join(__dirname, 'public')));

router es el código que corre las rutas de la aplicación, express.static es la función que sirve la carpeta, que en este caso se llama public, todo el código en defenitiva sería el siguiente:

var fs = require('fs'); var express = require('express'); var hbs = require('hbs'); var path = require('path'); var lessMiddleware = require('less-middleware'); var app = express(); hbs.registerPartials(__dirname + '/views/partials'); app.set('view engine', 'hbs'); app.set('views', __dirname + '/views'); app.use(app.router); app.use(lessMiddleware({ src: __dirname + '/public' })); app.use(express.static(path.join(__dirname, 'public'))); app.get('/', function(req, res) { res.locals = { title: 'testeando hbs' } res.render('index'); }); app.listen(3000);

Aun no probamos la app, porque como dijimos, debemos crear la carpeta public, la cual lo haremos dentro del proyecto, al mismo nivel que app.js

Luego allí, creamos el archivo style.less

Algo sobre la sintaxis de Less

Abrimos el archivo, vamos a crear unos estilos para esto. Primero unas variables que serán para colores:

@color-base: #2d5e8b; @gray-color: #999;

y además vamos añadir dos funciones (si, css con funciones):

.border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); }

Estas funciones lo que hacen es dar el borde redondeado y la sombra al objeto html que pretendamos pasando como parametros los valores de radio en la primera función y de dirección, profundidad y transparencia en la segunda función. Su implementación sería:

.class{ .box-shadow(5px, 5px, 6px, 0.3); }

y en el archivo css que imprima el resultado será:

.class{ -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3); -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3); }

por qué la función? porque estamos englobando una serie de propiedades que logran un mismo efecto. (en los ejemplos, bordes redondeados y sombra proyectada) aplicables según un navegador correspondiente.

Finalmente el código nos quedaría de la siguiente manera

@color-base: #2d5e8b; @gray-color: #999; .border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); } html{ background: @gray-color; } body { font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; width: 900px; margin-left: auto; margin-right: auto; background: #FFF; .border-radius(20px); .box-shadow(0px, 0px, 20px, 2); } header{ border-bottom:1px solid @gray-color; padding:20px; } section{ padding:20px; min-height: 300px; } footer{ text-align: center; padding: 5px; font-size: 10px; color: #333; } h1{ color: @color-base; }

Finalmente vamos a la consola y allí ejecutamos

node app.js

Allí tendremos la página creada con unos estilos aplicados.

25 jun

Hemos visto en un post anterior como usabamos express para hacer todo un scaffolding de nuestra aplicación haciendo uso del comando express nombre-de-la-app y luego el comando npm install. En los siguientes ejemplos usamos como template engine a hbs, a diferencia de lo que nos permite express en su instalación por defecto que utiliza jade. Por ende esta instalación no nos sirve. Sin embargo sería muy util hacer una instalación local de los módulos que vamos a utilizar por una simple cuestión de portabilidad.

Con el primer comando express creamos la estructura de carpetas y el archivo json. Esta es la principal utilidad para hacer la instalación de los módulos. El archivo en cuestión tiene la siguiente estructura:

{ "name": "application-name", "version": "0.0.1", "private": true, "scripts": { "start": "node app.js" }, "dependencies": { "express": "3.2.6", "jade": "*" } }

Como podemos ver, en el último elemento “dependencies” nos está diciendo los módulos que va a instalar cuando se ejecute el comando npm install. En la documentación de Express podemos encontrar que podemos setear las dependencias desde el comando express: Sabemos que Express tiene la capacidad de crear el scaffolding con los pre procesadores de html y css que le indiquemos. Por ej:

express –sessions –css less –template ejs myapp

Lo que hace esto es hacer una instalación de express con soporte para sessions, less como motor de css y ejs como motor de template. Generando este json:

{ "name": "application-name", "version": "0.0.1", "private": true, "scripts": { "start": "node app.js" }, "dependencies": { "express": "3.2.6", "jade": "*", "less-middleware": "*" } }

Lo lógica indica que deberíamos poder hacer una instalación de igual manera con hbs. Desgraciadamente, al día de escribir este post, eso no es posible.

Lo que si podemos hacer es crear un package.json “from the scratch”:

{ "name": "pkg-example", "version": "0.0.1", "dependencies": { "express": "3.1.x", "hbs":"*" } }

Creamos este archivo en la carpeta de nuestro proyecto, y luego simplemente en la consola tipeamos

npm install

Luego encontraremos la carpeta node_modules con los dos modulos: express y hbs. Tal como se lo indicamos en el “dependencies” de nuestro json.

Claramente allí podemos agregar todos los módulos que necesitemos. Es necesario familiarizarse con estos archivos de configuración porque son sumamente necesarios y sumamente utilizados.

Sumamente útil tener siempre a mano el cheatsheet o chuleta del packaje.json

19 jun

hbs continuando con su herencia de Moustache, trabaja con logic-less, esto es evitar la lógica de la aplicación en el modo de vista para un mejor mantenimiento. Parte de eso se trata el uso de los templates parciales

Un ejemplo típico de cualquier web es que se repitan la cabecera y el pie. Esto invita a imaginarnos que en nuestra carpeta de views podemos tener los archivos header.hbs y footer.hbs. Suena lógico y de eso se trata.

(más…)
17 jun

Como vimos en el post anterior, la instalación basica de Express utiliza Jade como motor de templates. Antes de ponerme a ver Jade y sus posibilidades me interesó el Hbs. Este motor de templates basado en HandleBars el cual está basado en Moustache. La diferencia radica que hbs se adapta a express de manera sencilla

Se puede ver en la documentación oficial de Express que no hay soporte para hbs. Allí mismo se habla como alternativa a Jade el ejs, un motor de template que puede instalar con la estructura misma que se genera con express:

$ express – –ejs myapp

Desgraciadamente no es posible hacerlo con Hbs, Entonces este se instala como un Módulo externo:

$ sudo npm install hbs -g

(más…)
13 jun

En el tutorial anterior, hablamos de Express, un framework MVC para trabajar con Node.js. Su uso es sumamente popular.

Lo instalamos como cualquier módulo:

sudo npm install express -g

Luego de unos segundos el modulo se habrá instalado. Para ver las opciones que express trae tipeamos:

express -h

(más…)
12 jun
logo de NPM

Los Módulos son la parte esencial de Node.js. Todo nuestro desarrollo se basa en ellos. Nuestra instalación por defecto ya tiene algunos que pueden encontrarse en usr/local/lib la carpeta de node_modules y usr/local/bin los binarios de estos.

Vas a notar que en cualquier desarrollo que hagamos vamos a necesitar siempre instalar algún modulo. Hay cientos de ellos y los podés encontrar en su sitio: NPMjs.org

NPM es la herramienta para instalar, desarrollar y gestionar los módulos en Node.js. En muchos tutoriales que podés encontrar por ahi, vas a ver que te dicen que es una instalación aparte en el pkg que hemos bajado en el tutorial anterior veremos que el NPM ya está instalado.

La forma básica de instalación que encontrarás en las documentaciones de los módulos es a travéz de la consola: npm install [nombre-del-modulo]. Sin embargo en nuestro entorno eso está incompleto.

(más…)
11 jun

Node.js es la nueva tecnología de la que muchos están hablando. Un usual error que me llevó a profundizar en esto es la terminación de js como si se tratara de otra librería javascript para manejar datos, eventos y objetos dentro del navegador.

Node.js NO es una tecnología de la parte cliente. Es una tecnología del servidor como php, Solo que a diferencia de este no necesita de un servidor apache sino que el mismo Node es el creador del servidor en si.

cómo?

Vamos por el principio: Por qué elegí OSX como SO? porque me va bien trabajar en Mac. y Node no es una tecnología muy afin al entorno windows. De hecho en sus anteriores versiones no corría bajo el Sistema de Microsoft. Hasta hace no mucho, solo podías verlo en OS X y Linux.

(más…)
16 ene

El término “página” es una metáfora que refiere a un elemento de la era pre-web y sigue de alguna manera determinando la manera en que componemos el diseño en la pantalla: de tal manera como si se tratase de una pieza gráfica para un soporte de papel. Algo que ya deberíamos replantearnos.

tu diseño en cualquier dispositivo?

Hasta hace unos años, el tamaño de la “hoja” sobre la que armábamos la composición tenía una leve y regular variación dada fundamentalmente por la resolución de su monitor: 640 x 480 – 800 x 600 – 1024 x 768 – 1280 x 800.. etc.

Luego aparecieron las notebooks. Mas tarde los dispositivos móviles, encabezado por teléfonos celular y reproductores mp3 al principio y luego las tablets. Y la variación es mas radical en todos estos dispositivos dado que usan browsers particulares y “portviews” con un tamaño muy diferente según marcas y modelos. Y a todo esto los browsers de televisores HD (resoluciones de 1920 x 1080 pixels) y consolas de juegos… socorro!!

¿Qué hacemos? Armamos una página diferente para cada uno de los dispositivos? ¿No será posible crear un layout lo suficientemente flexible para que este pueda verse elegante en cualquiera de ellos? Justamente, de eso se trata esta el Responsive web design.

El desafío que presenta este nuevo concepto es la adaptabilidad de un layout según el dispositivo con que se accede. Donde por ejemplo, el ancho de columnas, o la cantidad de estas variaría según el ancho de la pantalla o dispositivo.

Andy Hume nos muestra con el responsive es un fenómeno que se da por defecto en los navegadores y ciertamente su mismo blog aplica esta filosofía. Tal como ocurrió otras veces, la moda rescata un concepto o criterio que existía desde hacía mucho tiempo

Suena bien ¿no? pero ¿cómo lo resolvemos?

(más…)
30 sep
Con el objetivo inicial de investigar la posibilidades multimedia del html5, fundamentalmente lo que es la etiqueta audio y sus capacidades. Desarrollé esta aplicación que permite leer un archivo de audio (mp3/ogg) de un tema, asociarlo a un archivo en formato json que muestra la letra de la canción en cuestión y generar un slideshow de imágenes con los resultados del servicio de google image search haciendo búsquedas con las palabras de la letra de la canción. diagrama de aplicación (más…)