Instalación de Node.js, Express y Jade en Windows

La instalación de estas tres tecnologías, permiten diseñar, crear, implementar paginas web dinámicas de manera muy profesional. Para esta oportunidad te enseñare sus respectivas instalaciones en windows de estas tecnologias: Node.js, Express y Jade

Instalación de node.js

1.Para la instalación de node js, visitamos su página node y nos descargamos el instalador, click en install

2.Una vez que se encuentre descargado, lo abrimos y lo ejecutamos, y le damos next, y finalizamos con la instalación. Para comprobar que tenemos instalado node.js en nuestro windows, abrimos nuestra terminal y tecleamos lo siguiente:
node --version
si sale la versión es porque la instalación ha sido correcta.

Instalación de Express

Para crear un servidor de manera sencilla, y sacando provecho a node.js, instalaremos un framework web para node.js.

1. Tener instalado node.js, debido a que necesitaremos el gestor de paquetes npm

2. Abrir la terminal de windows, y teclear lo siguiente:
npm install express --save

3. Listo, y tienes instalado un framework web 

Instalación de Jade

1. Si estas interesado en escribir código sencillo, simple y usable, y quieres un gestor para escribir templates de manera profesional, instala jade
2. Abre la terminal de windows, y teclea lo siguiente:
npm install jade --save

3. Listo tenemos instalado nuestro motor de render

Consideración: La instalación de express y jade se realiza directamente en la carpeta de su proyecto web.

Muy pronto pequeño tutorial de Jade

Primeros pasos con Stylus CSS

Pequeño tutorial sobre como escribir css de manera correcta usando Stylus

Uno de los problemas de codificación, es la manera correcta y precisa de escribir css. Muchos de los diseñadores web y/o programadores o cualquiera que sienta pasión por la tecnología web, se ha visto envuelto en este tipo de problemas.
Tratar de escribir css sin repetir código, mantener de manera sencilla y rápida nuestro proyecto web, puede convertirse en un arduo trabajo. Pero no te preocupes porque la solución llego y se llama Pre-Procesadores css, hoy en día existen muchos como son: less, sass, STYLUS (mi favorito).

Para los amantes al orden, al fácil acceso de datos y al sencillo mantenimiento, y para aquellos que buscan nuevos paradigmas como python, pues este es el camino mas correcto a elegir.

En esta oportunidad te mostraré un pequeño tutorial sobre el uso correcto de css usando Stylus.

Si no sabes como instalar y configurar nuestro Pre-procesador Stylus en Windows te dejo el siguiente manual.   

1.Uso de clases

.primeraClase

background-color red

font-size 16px

&:hover 

background-color blue

color white

Resultado de nuestro .css :

.primeraClase{background-color:red;font-size:16px;}.primeraClase:hover{background-color:blue;color:white;}

2.Uso de Id

#primerId

background-color yellow

font-size 20px

&:visited

color black

Resultado de nuestro .css :

#primerId{background-color:yellow;font-size:20px;}#primerId:visited{color:black;}

3.Uso de Variables

colorVariable = red

.clase, #id

color colorVariable

Resultado de nuestro .css :

.clase,#id{color:red;}

4.Uso de Operadores Matemáticos 

tamanoletra = 16px

.clase, #id

font-size tamanoletra + 2px /*adición*/

font-size tamanoletra * 2px /*multiplicación*/

font-size tamanoletra - 2px /*resta*/

font-size (tamanoletra / 2px) /*división*/

Resultado de nuestro .css :

.clase,#id{font-size:18px;}/*para la adición*/

5.Uso de Mixins

mixins(variable)

   -webkit-border-radius variable

   -moz-border-radius variable

   -o-border-radius variable

   border-radius variable

.clase, #id

   mixins 5px

Resultado de nuestro .css

.clase,#id{-webkit-border-radius:5px;-moz-border-radius:5px;-o-border-radius:5px;border-radius:5px;}

Explicación: & = al nombre de la clase o id al que pertenece

Espero tengan una idea mas clara acerca de cómo estilizar de manera correcta nuestra web usando Stylus.

Es una gran ventaja tener nuestro  css comprimido, de esa manera permitirá la rápida carga de la pagina web. MUY IMPORTANTE PARA LOS ROBOTS DE GOOGLE

Mejora tu CSS usando STYLUS

Usando el pre-procesador STYLUS

Si eres uno de los desarrolladores o diseñadores que les apasiona el código limpio, y fácil de mantener pues aquí esta STYLUS, un procesador que te brinda todas las características antes mencionadas.

Si quieres que tus estilos se renderizen de manera mucho mas rápida pues te dejo este pequeño tutorial, donde escribirás css de manera correcta

Para esta oportunidad instalaremos stylus para WINDOWS (7/8)

1.Para la instalación de stylus, debido a que es un pre-preprocesador necesitaras tener instalado node.

2.Para instalar node.js visitaremos desde su página y descargamos el instalador (click en install)

3.Una vez descargado, lo ejecutamos y le damos (típico siguiente) y listo.

4.Abrimos la terminal de windows y procedemos a teclear lo siguiente:

• npm -g install stylus 

5.Se descargaran los paquetes necesarios para la instalación, debido a que a instalación fue global (-g) no necesitara configuraciones. 

Listo tenemos instalado STYLUS!.

Para empezar a escribir código css de manera correcta

1.Creamos dos archivos en nuestra carpeta CSS de nuestro proyecto; el primero será style.css y el segundo será style.styl 

2.En nuestro head del documento principal (index/home), hacemos referencia al archivo style.css:

3.Ahora sí, empezamos a escribir css con stylus de manera correcta, les mostraré un pequeño ejemplo: 

4.Al ejecutar este pequeño código en nuestro navegador no saldrá nada, debido a que referenciamos el archivo .css y como directamente no estamos escribiendo nada. Cabe aclarar que lo que hemos hecho hasta ahora es solo escribir en el archivo style.styl, ahora debemos decirle que procese este script para que funcione nuestro css

5.Para poder procesar nuestro código escrito anteriormente, abrimos la terminal de windows y nos ubicamos a nuestra carpeta donde están nuestros css:

6. Luego escribimos lo siguiente: stylus -w -c style.styl , y enter, y listo ya tenemos nuestro codigo en el archivo .css 

7.Como vemos es un código muy comprimido, este permitirá la carga rápida del archivo. Listo ya tenemos un pre-procesador trabajando por nosotros y escribiendo código correcto.

Te agrado el pequeño tutorial. ACCEDE AL CURSO PRÁCTICO DE STYLUS CSS