Hace unos días buscaba un script en JavaScript que me permita hacer circular contenido de manera eficaz y tras no encontrar algo realmente sencillo, decidí crear yo mismo un script que me permita solucionar ese problema.

Su funcionamiento es muy básico, el script está listo para ser usado y no solo sirve para el desplazamiento de fotos, sino para el desplazamiento de cualquier tipo de contenido. Lo he creado haciendo uso de jQuery por ser una excelente librería de Javascript que funciona en todos los navegadores.

En caso desees reportar un bug o desees alguna implementación por favor deja tu comentario y gustosamente te atenderé.

Demo – Slice fotos/contenido jQuery
Descarga – Slice fotos/contenido jQuery

Entradas relacionadas:

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

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)

Para iniciar el proceso, entre las etiquetas <head> y </head> debemos añadir las siguientes líneas:

  <script src="http://code.jquery.com/jquery-latest.js">
  	 <!--mce:0-->
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript">
     <!--mce:1-->
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript">
     <!--mce:2-->
  </script>
  <script type="text/javascript">
     <!--mce:3-->
  </script>

A continuación, insertaremos entre las etiquetas <body> y </body> el contenido del recuadro, más adelante, veremos como agregar más recuadros también.

    <div id="EJEMPLO" class="estilo">
    <ul>
        <li><a href="#tab-1">Título 1</a></li>
        <li><a href="#tab-2">Título 2</a></li>
    </ul>
    <div id="tab-1">
            Aquí el contenido</div>
    <div id="tab-2">
            Aquí el contenido</div>
    </div>

Podemos agregar tantas pestañas como deseemos sin ningún problema, pero hay que intentar mantener el órden así que es mejor no recargar de pestañas un recuadro. El siguiente paso será la hoja de estilos (el mismo al que uso para esta plantilla) para poder asignarle un diseño al recuadro que contiene la pestañas:

.estilo{
			margin:0 0 15px 0;
			padding:0;
			width:310px;
		}
		.ui-tabs-nav{
			margin:0;
			padding:0;
			list-style:none;
		}
		.ui-tabs-nav li {
			margin:0 2px 0 0;
			padding:0 5px 0 5px;
			float:left;
			height:30px;
			border-top:1px #3399FF solid;
			border-right:1px #3399FF solid;
			border-left:1px #3399FF solid;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			line-height:30px;
			text-transform:uppercase;
		}
		.ui-tabs-nav li:hover {
			background:#EBEBEB;
			color:#333333;
		}
			.ui-tabs-nav li:hover a {
				color:#333333;
			}
		.ui-tabs-nav li {
			background:#FFFFFF;
		}
			.ui-tabs-nav li a {
				color:#336699;
				text-decoration:none;
			}
		.ui-tabs-panel {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-panel ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-panel ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-panel a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-panel a:hover {
				color:#3399FF;
				text-decoration:underline;
			}
		.ui-tabs-hide {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			display:none;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-hide ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-hide ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-hide a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-hide a:hover {
				color:#3399FF;
				text-decoration:underline;
			}

El significado de cada una de las etiquetas de estilo CSS:

• estilo: Es el estilo de todo el recuadro con el cual trabajaremos
• ui-tabs-nav: Es la lista que alojará a los títulos de las pestañas
• ui-tabs-panel: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro visible
• ui-tabs-hide: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro oculto que más adelante al pulsar sobre el título del recuadro se verá y convertirá en ui-tabs-panel

El agregar otro recuadro con contenido no es difícil, simplemente duplicamos el anterior recuadro y realizamos lo siguiente:

• id: modificamos este atributo del primer div para asignarle un identificador al recuadro
• href: modificamos este atributo por otro que identifique a otro título (manteniendo el símbolo de numeral)
• Añadimos entre las etiquetas <script> y </script> que usamos en el primer paso lo siguiente:

  	$(document).ready(function(){
      $("#EJEMPLO2 > ul").tabs();
    });

  En donde editamos la palabra EJEMPLO por el nombre que le asignamos al segundo recuadro (el atributo id)

Definitivamente, este es un uso básico de esta herramienta y existen uso m´ñas complejos que se le pueden asignar, tal y como se puede observar en el sitio de jQuery.

Actualización: Si tienes un blog en WordPress, puede seguir el siguiente manual para integrarlo.

Entradas relacionadas:

• Crear tabs para cualquier sitio con jQuery (Parte II)
• Refrescar un container <div> con JQuery
• Solucionar problema con Google Analytics
• Solucionar conflicto entre Filezilla y Adobe Air
• Solución a problema al instalar aplicaciones de Adobe CS3 en Windows Vista

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:

• 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)
• Adquiere libros de diseño web

JavaScript fue creado por los desarrolladores de Netscape a la hora de crear navegadores web comerciales como fue el primero de su tipo el Netscape Navigator 2.0 que actualmente ya no es distribuido.

Mediante JavaScript muchos desarrolladores establecen parámetros, modifican objetos, transforman la interfaz, mejoran la calidad y muchas cosas más. Gracias a sus diversas variaciones, JavaScript se ha perfeccionado de tal manera, logrando así la creación de de lenguajes como son el DHTML y AJAX, éste último es más usado actualmente para la creación de páginas webs dinámicas dando al servidor la potestad de tomar decisiones de acuerdo a lo que se le presente y en ciertos casos almacenando éstas decisiones en una base de datos que puede ser temporal o puede ser permanente.

Decimos que puede ser temporal cuando se almacena en la memoria de nuestro computador únicamente cuando está siendo ejecutado el script y quizás inserta algunas cookies en nuestro sistema para almacenarlos a largo plazo, es ese el problema con JavaScript.

Por poseer propiedades del lenguaje C, JavaScript puede ser dañino para nuestro equipo y según el grado de complejidad de sus cadenas y de los códigos con que éste sea creado, es por eso que se nos menciona tener cuidado con la página que estamos visitando ya que cuando uno menos se lo espera, éste puede estar dañando a nuestro equipo.

Ante nosotros tenemos un lenguaje de programación potente que ciertamente al mismo tiempo es un arma de doble filo que puede hacernos daño como beneficiarnos increíblemente a nuestra empresa o negocio. Y en el mundo de los buenos y de los malos, todo puede pasar.

Entradas relacionadas:

• Refrescar un container <div> con JQuery
• Redireccionar páginas a través de JavaScript
• Crear tabs para cualquier sitio con jQuery (Parte I)
• ¡Felíz día de la Internet!
• Yahoo! solo quiere a Internet Explorer