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

• En la Parte I: Aprendimos a instalar NodeJS a través de Cygwin, recordar que NodeJS es la herramienta principal necesaria para poder trabajar con Stylus, Jade y Coffee Script.
• En la Parte II: Aprendimos a instalar Stylus, Jade y Coffee Script.
• Además, hemos aprendido a mejorar Cygwin a través de Console.

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 llamaremos “app.coffee” y desde una ventana de Cygwin, lo ejecutaremos de la siguiente manera.

$ coffee app.coffee

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!.

Entradas relacionadas:

• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte II)
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte I)
• Añadir a SublimeText soporte para Jade, Stylus y Coffee Script
• Refrescar un container <div> con JQuery
• Redireccionar páginas a través de JavaScript

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

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.

2. Instalación de Stylus

Al igual que Jade, simplemente que modificamos el comando:

$ npm install -g stylus
$ npm install stylus

A continuación verificamos que la instalación sea la correcta a través del comando:

$ stylus --help

Que deberá darnos el siguiente resultado:

3. Instalación de Coffee-Script

Igualmente, modificamos el comando que anteriormente usamos por:

$ npm install -g coffee-script
$ npm install coffe-script

A continuación verificamos que la instalación sea la correcta a través del comando:

$ coffee --help

Que deberá darnos el siguiente resultado:

4. Instalación de Express

Por último es necesario una última herramienta que también trabaja bajo NodeJS cuyo nombre es “Express” (que permite crear un servidor web para poder ver nuestro trabajo) y para instalarla, al igual que los otros módulos, ejecutamos el comando:

$ npm install -g express

Ya tenemos listo en nuestra computadora todos los módulos necesarios. Y recuerda que puedes recurrir a los siguientes tutoriales relacionados:

• Instalación de NodeJS en Windows a través de Cygwin
• Iniciando el uso de Jade, Stylus y Coffee-Script (Próximamente)

Enlace – Jade GitHub

Enlace – Stylus GitHub

Enlace – Coffee-Script GitHub

Enlace – Express GitHub

Entradas relacionadas:

• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte III)
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte I)
• Añadir a SublimeText soporte para Jade, Stylus y Coffee Script
• Refrescar un container <div> con JQuery
• Redireccionar páginas a través de JavaScript

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.

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

• Instalación de NodeJS a través de Cygwin (Bash Shell  de Linux)
• Instalación de Jade, Stylus y Coffee Script. (Próximamente)
• Iniciando el uso de Jade, Stylus y Coffee Script. (Próximamente)

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.

Descargamos el instalador de Cygwin, y luego lo ejecutamos. Se iniciará el instalador y seguimos los pasos de las siguientes imágenes:

En ésta opción elegimos los paquetes necesarios para poder compilar y hacer funcionar a NodeJS en Cygwin. Son los siguientes:

• devel > gcc-g++
• devel > git
• devel > make
• devel > pkg-config
• devel > zlib-devel
• libs > openssl-devel
• net > openssl
• python > python
• editors > nano
• web > curl

Para instalar cada uno de esos paquetes los buscamos por el nombre, los seleccionamos como el ejemplo de la siguiente imagen:

Luego de seleccionar todos los paquetes necesarios hacemos clic en “Siguiente”.

El ejecutar Cygwin tendremos la siguiente ventana:

Con todos los pasos anteriores ya tenemos instalado Cygwin (BashShell de Linux) en nuestro ordenador con todos los módulos requeridos para el funcionamiento y compilado de NodeJS. Así que el siguiente paso es justamente ese, descargar y compilar NodeJS.

Descargar – Cygwin Setup

2. Instalar NodeJS en Windows

Al tener instalado Cygwin, el siguiente paso es la instalación de NodeJS y para ello, en la ventana de Cygwin ingresamos las siguientes líneas:

$ cd ~
$ git clone git://github.com/joyent/node.git
$ cd node
$ git fetch --all
$ git tag
$ git checkout v0.4.12
$ ./configure
$ make
$ make install

El siguiente paso es editar las DNS de Cygwin pues suele tener conflictos con las DNS propias de Windows, para ello editamos el archivo de DNS de Cygwin a través del siguiente comando:

$ nano /etc/resolv.conf

Ingresamos las respectivas DNS de la siguiente manera:

nameserver 8.8.8.8
nameserver 8.8.4.4

Guardamos a través de la combinación de teclas “<Control> – X” y luego presionamos la letra “S” y “Enter”. Con todos los pasos anteriores, ya tenemos listo NodeJS listo y funcional en nuestro ordenador.

Puedes seguir con el tutorial de:

• Instalación de Jade, Stylus y Coffee Script.
• Iniciando el uso de Jade, Stylus y Coffee Script.

Enlace – NodeJS Website

Entradas relacionadas:

• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte III)
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte II)
• Añadir a SublimeText soporte para Jade, Stylus y Coffee Script
• Refrescar un container <div> con JQuery
• Redireccionar páginas a través de JavaScript

En este caso, aprenderemos a usar esta librería para refrescar el contenido de un container (<div>) de nuestro sitio web, puede ser útil en el caso de querer mostrar la cantidad de usuarios activos en un sitio web en un mismo momento, o en el caso de Gmail para mantener actualizada la cantidad de espacio disponible para usar en nuestra cuenta de correo, etc.

Lo primero que hacemos es agregar antes de la etiqueta </head> las siguientes líneas de código:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function() {
 	 $("#responsecontainer").load("response.php");
   var refreshId = setInterval(function() {
      $("#responsecontainer").load('response.php?randval='+ Math.random());
   }, 9000);
   $.ajaxSetup({ cache: false });
});
</script>

Luego crear un container (<div>) que tenga el ID (en este caso): “responsecontainer”; no debe tener contenido este container pues el contenido será agregado por y actualizado constantemente por el script; entonces dentro del cuerpo de nuestra página quedaría así:

<div id="responsecontainer">
</div>

Entonces ahora toca crear un archivo PHP dentro de la misma carpeta de nuestra página llamado “response.php” y para detectar que realmente funciona el script podemos agregarle la siguiente línea de código que puedes modificar por lo que desees:

<? echo rand(); ?>

Entonces nuestra lista de archivos quedaría más o menos así:

Si deseas puedes descargar el archivo de ejemplo.

Fuente – Web Design Blog

Entradas relacionadas:

• Redireccionar páginas a través de JavaScript
• Crear tabs para cualquier sitio con jQuery (Parte I)
• JavaScript un pequeño gran amigo
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte III)
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte II)

La redirección común a través de la etiqueta meta es la siguiente (la se debe evitar):

<meta http-equiv="refresh" content="5; url=http://www.xploit29.com">

Y respecto a redirección a través de JavaScript tenemos las siguientes opciones:

QUE SE IMPRIMA TEXTO HTML A TRAVÉS DE JAVASCRIPT
Tal y como lo dice el sub-título, podemos realizar una redirección haciendo que java script imprima texto en HTML, ya que al bot de Google se le hace difícil entender JavaScript:

<script type="text/javascript">
var string = (location.href);
var getit = new Array();
var getit = string.split('/');
var result = getit[ getit.length-1 ];
var filename = result.split('.');
 
document.write("<meta http-equiv='refresh'");
document.write("content='0; url=http://www.xploit29.com/");
 
if(filename[1]=="html"){
 
	document.write(getit[getit.length-3] + "/");
	document.write(getit[getit.length-2] + "/");
	document.write(filename[0] + "/");
 
}
 
document.write("'/>");
</script>

Modificamos el tiempo (segundos) en que deseamos que se genere la redirección y indicamos la URL a la que desee que sus visitantes lleguen luego de la redirección.

ESTABLECIENDO UNA NUEVA DIRECCIÓN A LA PÁGINA
A través del siguiente código, se establece una nueva URL a la página a la cual será redirigida en el tiempo que se establezca:

<script type="text/javascript">
 
    var pagina = 'http://www.xploit29.com';
    var segundos = 5;
    function redireccion() {
        document.location.href=pagina;
    }
    setTimeout("redireccion()",segundos);
</script>

Modificamos la página y el tiempo (segundos)

EXTRA: redirección con PHP
De forma adicional también es posible redireccionar una página web haciendo uso de PHP a través del siguiente código:

<? header("location: http://www.xploit29.com"); ?>

Modificamos la URL

Entradas relacionadas:

• Refrescar un container <div> con JQuery
• JavaScript un pequeño gran amigo
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte III)
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte II)
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte I)

Aprendiendo Web

Germán Martínez quien está a cargo de Aprendiendo Web, ha creado a través de Amazon una “librería virtual” en la que se muestran libros relativos al temas de la semántica, las nuevas prácticas en el diseño web, uso correcto y muchos otros libros interesantes que estoy seguro que valen la pena adquirir. El que nos recomienda para iniciar es uno titulado: Head First HTML with CSS & XHTML.

Como el mismo menciona, no se trata de un beneficio monetario sino que se trata de que en la medida que personas adquieran libros a través de su tienda, él pueda recibir libros como obsequio y así enseñar más cosas. Excelente oportunidad para todos los interesados, y que mejor recomendación antes de comprar un libro que la de un experto.

Yo por mi parte, seguiré ahorrando para adquirir uno de esos libros tan pronto sea posible.

Enlace | AW Design Store
Enlace | Aprendiendo Web (AW)

Entradas relacionadas:

• Redireccionar páginas a través de JavaScript
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte III)
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte II)
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte I)
• Dale forma a cualquier texto con CSS Text Wrap

Es muy fácil y sencilla de usar ya que únicamente tenemos que ingresar 4 datos y listo. Los datos necesarios para realizar el proceso son el código de color del plano y de fondo; la medida de la esquina (en píxeles) que se desea crear y también no menos importante, si deseamos que alguno de los colores de plano o fondo sean transparentes.

Y si con ello no basta luego de haberse creado las 4 imágenes (1 por cada esquina) esta utilidad nos muestra un ejemplo de como agregar estas esquinas en nuestro código fuente, tanto en la CSS como en la HTML.

Una herramienta muy útil para ahorrarnos unos minutos y darle algo más de estilo a los sitios web ya que se ha vuelto una tendencia el diseño de los sitios con estas formas.

Enlace | CornerShop
Vía | Geeks Room

Entradas relacionadas:

• Utilidades 7: Creative Docs .NET
• Twitter cambia su interfaz
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte III)
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte II)
• Instalación de Stylus, Jade, Coffee Script en Windows con NodeJS (Parte I)