Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte III)

manual-nodejs

Repasando la Parte I y la Parte II de éste tutorial, hasta el momento hemos hecho lo siguiente:

Ahora nos corresponde el aprender a crear nuestro primer sitio web con Jade y Stylus. Jade será nuestra herramienta de trabajo para la generación de código HTML y un poco de JavaScript; Stylus lo usaremos para crear nuestras hojas de estilo CSS para nuestro sitio web.

Lo primero que necesitamos es montar nuestro servidor web (gracias a Express) de manera local para poder empezar a trabajar; pero antes, algunos detalles:

  • Al montar el servidor web, de preferencia usemos un puerto diferente al puerto “80” y “8080” para evitar con otros programas que puedan estar usando esos puertos; Como por ejemplo AppServ, XAMPP o ISS.
  • Todos los proyectos que deseemos trabajarlos con Jade y Stylus tendremos que trabajarlos desde la carpeta “home > Usuario” de “Cygwin”; que por defecto es “C:\cygwin\home\<Usuario>\”.
  • Es sumamente importante tener cuidado con la tabulación del código fuente de nuestro proyecto, pues tanto Jade como Stylus trabajan en base a la tabulación.
express = require "express"
app = module.exports = express.createServer()
 
app.configure () ->
	app.set "views", __dirname
	app.set "views engine", "jade"
	app.use express.static( __dirname )
 
app.get "/", (req, res) ->
	res.render "index.jade"
 
# Define el puerto de tu proyecto
app.listen 8002
# Definir el nombre de nuestro proyecto (Cualquier nombre)
console.log "xploit29 - Tecnologia al alcance de tus manos"

Guardamos ese código en un archivo al que llamaremosapp.coffee” y desde una ventana de Cygwin, lo ejecutaremos de la siguiente manera.

$ coffee app.coffee

Console-8

Lo siguiente será crear dentro de la misma carpeta los siguientes archivos:

  • index.jade
  • layout.jade
  • style.styl

El archivo “index.jade” y el archivo “layout.jade” pero nuestro servidor web le dará preferencia a los cambios realizados en “layout.jade”.

El siguiente paso es compilar el código CSS, para ello simplemente en una nueva ventana o pestaña de Cygwin ejecutaremos:

$ stylus -w style.styl

Éste comando realizará lo siguiente: compilará el CSS es un archivo llamado “style.css” (dentro de la misma carpeta) y lo segundo que hará es vigilar los cambios que se realicen en él, es decir el comando se mantiene siempre activo hasta que cerremos la pestaña.

Para visualizar nuestro proyecto nos dirigimos en la barra de nuestro navegador a: “http://localhost:8002” dependiendo del puerto que escogimos en nuestro archivo “app.coffee”.

Espero que hayan disfrutado de éste tutorial, algo largo, pero definitivamente vale la pena!.

Etiquetas:

Mejorando Cygwin con Console

Console-1[6]

Días atrás escribí un post acerca de cómo instalar NodeJS en Windows a través de Cygwin, y bueno en muchas situaciones va a ser necesario usara múltiples ventanas de Cygwin al mismo tiempo para poder compilar los distintos archivos de nuestro proyecto. Es ante ese problema que es necesario agrupar todas las ventanas de Cygwin en una sola y para poder hacer eso simplemente necesitamos “Console”.

Para adaptar “Console” a Cygwin primero lo descargamos desde SourceForge donde se almacena el proyecto, descargamos la última versión (actualmente es: 2.00b). Luego de descargarlo, lo descomprimimos donde deseemos y ejecutamosConsole.exe”.

Console-2Por defecto se verá la línea de comandos de MS-DOS y para que por nos muestre el BashShell de Linux al iniciarlo necesitamos realizar unas modificaciones a su configuración. Sigue las instrucciones de las siguientes imágenes:

Console-3

En el recuadro que se muestra simplemente hacemos clic en los puntos suspensivos de “Shell”, para modificar el programa de arranque por defecto.

Console-4

Nos dirigimos a la carpeta donde se encuentra de Cygwin, y seleccionamos “Cygwin”, pero por defecto no aparecerá, para ello en la parte inferior en la barra desplegable de “Tipo” escogemos “Batch Files (*.bat, *.cmd)” y aparecerá.

Console-5

Guardamos todos los cambios realizados y al volver a ejecutar Console veremos que se inicia directamente Cygwin, donde tendrás la posibilidad de manejar muchas ventanas de Cygwin que se encuentran separadas por pestañas, simplemente haciendo clic en el siguiente botón:

Console-7

Enlace – Instalar Cygwin
Enlace – Console SourceForge
Descarga – Console

Etiquetas:

Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte II)

manual-nodejs

Si aún no tienes instalado correctamente NodeJS, puede recurrir a la Parte I del tutorial para que luego instalar Jade, Stylus y Coffee Script.

1. Instalación de Jade

Para instalar Jade, abrimos una ventana de Cygwin como se muestra en la siguiente imagen y escribiremos lo siguiente para iniciar la instalación de Jade:

$ npm install -g jade
$ npm install jade

Cygwin-11

Para asegurar una instalación correcta de Jade, lo instalamos a través de esos dos comandos. Para comprobar que Jade está instalado correctamente, simplemente escribimos:

$ jade --help

Y deberá aparecer la información de ayuda de Jade.

Jade-1

Leer Más »

Etiquetas:

Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte I)

manual-nodejs

Como todo programador Front-End, siempre es tedioso el tener escribir una y otras vez las llaves de apertura y de cierre de una etiqueta ya sea en HTML, CSS o en JavaScript, es por eso que ante este problema surgen herramientas que nos ayudan a solucionar este problema, todas estas herramientas funcionan gracias a NodeJS.

  • Jade: Escribir código HTML
  • Stylus: Escribir código CSS
  • Coffee Script: Escribir código JavaScript

Para no aburrirlos escribiendo el “cómo funciona cada herramienta”, les mostraré el siguiente vídeo, creado por @neojp (un verdadero ninja del Front-End) mostrando todas éstas herramientas en funcionamiento conjunto.

Simplificando el Font-End

El vídeo es bastante emocionante y ahora sí, empecemos con el tutorial.

1. Instalar Cygwin en Windows

Es posible ejecutar NodeJS en Windows, pero lo que nosotros necesitamos es instalar módulos de NodeJS para Windows, lo cuál no es posible a través de ese medio; es por ello que necesitamos simular un entorno de Linux para poder instalar módulos de NodeJS. Para hacer ello necesitamos instalar Cygwin, quien nos permitirá crear el entorno de Linux.

Leer Más »

Etiquetas:

[Guía] Como montar un servidor Gunz online

Paso 1 – Creación de la base de datos y la ODBC

Creando y conectado la base de datos:

Lo primero que tienes que hacer es abrir el Server Management Studio Express* (SMSE) y en Explorador de Objectos encontrara una parte que dice Database, a continuación pulse el clic derecho de raton y dele crear Nueva base de datos, alli se le abrirá un pequeño dialogo alli en Nombre de base de datos deben escribir en nombre de la base de datos en este caso seria “GunzDB” y presione Aceptar. Ya Listo ya tenemos la base de datos creada

Leer Más »

Etiquetas:

Volver al antiguo chat de Facebook

Thumb   Thumb   Thumb

Anduve husmeando por la Internet y conseguir un simple script que funciona en tu navegador (Firefox, Chrome o Safari), en el cual te termine volver a usar el viejo chat de facebook.

Es fácil solo descarga el script, haces clic en “Install” donde sale a la derecha en verde, luego le das “Guardar” y por ultimo te avisa cuando se instalo bien. Cierra y abres tu navegador y tendrás el chat viejo con todas las personas que estén conectadas.

Enlace – Facebook Sidebar Chat Reversion Script

Etiquetas:

Linux Ubuntu emulando Windows XP con Virtual Box y probando su aceleracion gráfica

 

Estas es una muestra de como es capaz manejar y emular eficazmente Windows bajo linux podiendo usar aplicaciones que requiera de acceleracion grafica como (Photoshop, y juegos en 3D).

Este vídeo se Uso:

  • Ubuntu 11.04 – Natty Narwhal – released in April 2011
  • VirtualBox 4.1
  • Windows XP SP3 instalado bajo Virtual Box.
  • Interl Dual Core 2.2 GHz, 2 Gb. de RAM

Intenciones de este video: Motivar a los usuarios de windows (Gamers, Diseñadores y empresas) a migrar a Linux.

Etiquetas:

Tips para Netflix

Netflix llegó a Perú. y a todo Latinoamérica y seguirá creciendo. En Twitter se lee que el público esperaba mucho más por el servicio, esperaban que finalmente iba a ser posible ver las series sin esperar 3 meses a que salgan en cable, películas actuales, pero como anuncia lo anunció la gente de Netflix: “No venimos a competir con la TV por Cable ni con la TV Tradicional…

Sea cual sea el caso a continuación les dejo unos pequeños trucos para administrar Netflix de una mejor manera .

Cambiar el idioma de Netflix a Español.

Dirigirse en la parte superior de la ventana de Netflix a “Your Account”

Netflix-1

En la zona de “Manage Account” elegir la opción “Language preferences

Netflix-2

Seleccionar el idioma deseado, en éste caso: “español

Netflix-3

Finalmente, hacer clic en “Continue” y listo.

 

Establecer una calidad de vídeo por defecto.

De igual manera, nos dirigimos a “Your account” o “Tu cuenta” en la esquina superior derecha de la ventana.

Netflix-1

En el recuadro de “Administrar Cuenta” elegir la opción “Administrar calidad de vídeo

netflix-21

Un detalle a tener en cuenta antes de elegir la calidad de vídeo deseada, es que en Latinoamérica aún no hay contenido en HD disponible, además el pobre ancho de banda que posee la región hace muy complicado el ver vídeo en HD, mi recomendación es elegir como máximo “Mejor calidad

Netflix-22

Cancelar el servicio de Netflix antes de que te cobren el siguiente mes.

Muchos se han registrado en Netflix usando su tarjeta de crédito/débito para probar por un mes el servicio, y estoy seguro que muchos desearán abandonar el servicio antes de que cumpla el mes para evitar cargos en sus tarjetas, es por eso que te enseñamos a como cancelar tu cuenta.

Para dar de baja a la cuenta, nos dirigimos a “Your Account” o a “Tu Cuenta” en la esquina superior derecha de la página de Netflix.

Netflix-1

En el recuadro de “Administrar Cuenta” elegimos la opción “Dar de baja la membresía

Netflix-31

Marcas el check correspondiente y haces clic en “Completar la baja”.

netflix-32

Recibirás un correo electrónico con un enlace para confirmar la eliminación de la cuenta. Un detalle adicional, es que la cuenta no se eliminará hasta la finalización del último periodo facturado, es decir, si tu cuenta la creaste hoy (09/09/2011) y la eliminas mañana (10/09/2011), la cuenta estará activa hasta el siguiente mes (09/10/2011). Es un detalle importante para todos aquellos que desean proteger sus tarjetas, evitar cargos por olvidarse cancelar el servicio.

Sitio web – Netflix

Etiquetas:

Facebook ahora identifica usuarios que se conectan al Chat desde un smartphone

Facebook-Logo

Hace unas semanas RIM (Research in Motion) fabricantes de Blackberry y desarrolladores de las mejores aplicaciones del mismo lanzó una renovada versión de la aplicación de Facebook la cual tiene mucha similitud con la versión de Facebook para iPhone, una aplicación muy completa, con una interfaz totalmente renovada y cuyo agregado principal era el “Chat de Facebook” integrado en la aplicación en ambos dispositivos.

El cambio fue muy bueno a pesar de que el chat de Facebook sea algo difícil de maniobrar cuando la conversión tiene muchas líneas de texto. Ahora Facebook ya distingue a los usuarios que se conectan al chat desde un smartphone de aquellos que se conectan desde su sitio web, de la misma manera que lo hace Windows Live Messenger. Parece que de momento la función no está totalmente integrada con Facebook, pero el día de hoy tuve la oportunidad de visualizar el ícono que menciono y se los muestro a continuación.

Facebook-ChatMobile

Es cierto que han existido aplicaciones de terceros que permitían conectarse al Chat de Facebook, sin embargo, si ahora la aplicación oficial del fabricante del equipo te presenta una versión con Chat, lo que busca Facebook es a apoyar la aplicación y difundir el hecho de que un usuario de encuentre conectado al chat desde su dispositivo móvil.

Sitio web Facebook

Etiquetas: