xploit29 - Tecnología al alcance de tus manos » CSS

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

ikcam — Wed, 05 Oct 2011 20:52:41 +0000

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\\”.
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)

ikcam — Mon, 03 Oct 2011 13:00:00 +0000

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 I)

ikcam — Sun, 02 Oct 2011 18:01:30 +0000

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.

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 “ – 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:

Enlace – NodeJS Website

Entradas relacionadas:

Adquiere libros de diseño web

ikcam — Thu, 16 Oct 2008 03:03:26 +0000

Aprendiendo Web es una bitácora (blog) que nos enseña y motiva al buen uso de los lenguajes de CSS, XHTML y más. En cada post nos indica pequeños aspectos a tomar en cuenta en el momento en el que desarrollemos una página 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:

Twitter cambia su interfaz

ikcam — Fri, 19 Sep 2008 01:45:56 +0000

El día de hoy, Twitter repentinamente cambió toda su apariencia a una que algunos consideran mejor y que otros las consideran peor (dependiendo de gustos) personalmente me gusta y me llama más la atención que la anterior interfaz.

Twitter ha realizado todo un conjunto de modificaciones a su plantilla por defectos, cambios que detallaré a continuación:

Las pestañas han cambiado de lugar, pues ahora se encuentran en el lado derecho del sitio.

Ajax para una mayor velocidad, las actualizaciones (simplemente haciendo clic sobre “Home”) se hacen a través de esta tecnología evitando así el tener que refrescar la página constantemente (aunque seguramente los seguiremos haciendo por costumbre)
Iconos de control de tweets, los íconos de borrar, replicar y agregar a favoritos a primera vista no se ven pues aparecerán al arrastrar el cursor sobre un tweet.

“Ligero, elegante y simple”; líneas sencillas y espaciado entre tweets, el logo lo han reducido unos cuantos píxeles, el sistema de actualización de tweets, la esquinas ahora están redondeadas (que no se verán en Internet Explorer pero si en Safari, Firefox y hasta en Chrome)

Opciones de personalización de diseño, para aquellos que no les guste el diseño, se han incluido plantillas ya diseñadas a las que podemos modificar el fondo o cambiar su combinación de colores.

La pestaña “Archivo” ha sido removida, pues para poder visualizar nuestro archivo es posible hacerlo desde la URL de nuestro perfil de Twitter.

De momento no son más que cambios visuales pero según se menciona en el post oficial con los cambios en Twitter, esto no es más que el comienzo para un serie de cambios que se vienen para el sitio:

…it was an investment in the future. We plan to have more tabs, and we’d run out of room putting them along the top. This was the driving factor for this redesign, but you won’t see all the benefits until a future release (hopefully, very soon!).

Personalmente me gusta como es Twitter ahora y no creo que requiera más pestañas o funciones que lo hagan más complicado.

Enlace | Twitter
Vía | Twitter Blog

Entradas relacionadas:

Crear esquinas redondeadas con CornerShop

ikcam — Tue, 19 Aug 2008 23:48:35 +0000

CornerShop con la cuál podemos simplificar minutos en crear las esquinas redondeadas para nuestro proyecto en alguna aplicación de diseño como Photoshop o Corel Draw.

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:

Dale forma a cualquier texto con CSS Text Wrap

ikcam — Wed, 16 Jul 2008 13:00:00 +0000

CSS Text Wrap es una elegante y sencilla herramienta con la que podemos darle casi cualquier forma a nuestros textos a nuestros textos de forma, ya sea la de un circulo, la de un triángulo, un corazón, prácticamente puede formar cualquier polígono con esta herramienta.

La herramienta trabaja a través de nodos algo similar a como se trabaja con Corel Draw al momento de trabar con líneas y editar vectores. El trabajo con CSS Text Wrap es algo similar a la siguiente imagen:

Fácil de usar y lo más importante es que luego de darle forma a nuestro texto, es muy sencillo acoplarlo a nuestro sitio, pues nos da 3 tipos de códigos, ya sea código CSS/XHTML, XHTML con Classes y Javascript.

Enlace | CSS Text Wrap
Vía | Wwwhat’s new

Entradas relacionadas:

Guía CSS para el envío de email’s

ikcam — Wed, 18 Jun 2008 18:51:08 +0000

Quizás alguna vez te has preguntado de que forma se deben trabajar las CSS al la hora de enviar un correo electrónico, es bien sabido que existen diversas plataformas y software para la lectura de un correo electrónico y creo que es bueno saberlas por si algún día queremos enviar un masivo y sea posible que todas las personas que lo reciben lo lean correctamente.

Se trata de una guía de estilos CSS en la cuál nos muestra que tipo de etiquetas CSS es capaz de aceptar cada software lector de correos electrónicos y cada aplicación web lectora de correos electrónicos.

Enlace | Guía estilos CSS
Vía | Sentido Web

Entradas relacionadas:

Bug en CSS permite saber que redes sociales usan usuarios

ikcam — Thu, 29 May 2008 19:29:00 +0000

El desarrollador web Aza Raskin sabe que redes sociales usamos sin siquiera preguntarnoslo.

Por si acaso es no está violando ningun ley de privacidad ni mucho menos alguna regla de privacidad ya que simplemente él está aprovechando una vulnerabilidad que existe para “CSS” en nuestros navegadores.

¿Y saben cómo?
Pues no lo sé, porqué no nos lo cuentas
Bueno, consiste en que insertando un script en el código fuente, el puede ser que redes sociales hemos visitado simplemente diferenciando el color del enlace
¿Como que diferenciando el color del enlace?
Bueno si te fijas normalmente cuando escogemos una red social éste cambia de color azul a un color morado, ¿cierto?
Si tienes razón
Entonces su script lo que hace es recopilar esos enlaces en esos colores y enviarlo directamente a su digamos “base de datos”.
¡Oh!, maravilloso trabajo, pero, ¿eso va a durar por siempre?
No, él ha publicado el script para quien quiera usarlo pero ya en pocos días dicho bug será parchado.

Así es, el bug ha sido ya reportado en BugZilla aquí. Raskin ha denominado a su script SocialHistory y puede ser descargado libremente sin ningún problema. Como él menciona en su blog, el script no funciona perfectamente pero a pesar de ello tiene una efectividad de un 88%.

Un descubrimiento muy interesante y lo mejor es que lo ha dado a conocer al mundo, con lo cuál demuestra que no es tan malo, digo que no es tan malo porque me supongo que habrá jugueteado ya un poco con su script.

Descarga | SocialHistory
Enlace | Aza Raskin
Vía | DownloadSquad