Publicado en nodejs javascript el 13/09/11 a las 07:42 pm
El sábado pasado disfrute de las conferencias de Mejorando la Web, una iniciativa de Cristalab y Maestros del Web. En la cual por aproximadamente 5 horas se expusieron temas como HTML5, Python, Ruby on Rails, Dopamina. Sin embargo lo que mas capto mi atención fue la combinación: Stylus + Jade + Coffee Script + Node.js; de este ultimo va el post.
Node.js es Javascript del lado del servidor, asíncrono y orientado a eventos. Utiliza el motor Javascript V8 de Google y soporta protocolos TCP, DNS y HTTP.
Tengo un par de días haciendo algunos ejemplos, aprendiendo como utilizarlo y sus capacidades. A continuación quiero compartir la instalación y el primer ejemplo que realice. Esto dentro de un entorno Mac OS X v10.6.8 y Node.js v0.4.11.
Instalación
Toda la instalación se realiza desde la Terminal:
1. Descargamos desde esta la ultima versión estable de Node.js:
$ curl -O http://nodejs.org/dist/node-v0.4.11.tar.gz
2. Descomprimimos el archivo .tar.gz:
$ tar -xvf node-v0.4.11.tar.gz
3. Accedemos al folder descomprimido:
$ cd node-v0.4.11
4. Ejecutamos un comando de configuración:
$ ./configure
5. Ejecutamos la instalación: (la cual lleva algunos minutos)
$ make && make install
6. Revisamos que Node.js este correctamente instalado:
$ node --version
Ejemplo
Utilizando nuevamente la Terminal y el editor TextMate (opcional), levantaremos un servidor HTTP y enviaremos un "Hola Mundo" al browser.
1. Creamos un folder para nuestro ejemplo:
$ mkdir nodejs
2. Accedemos al folder creado:
$ cd nodejs
3. Creamos nuestra primera aplicación (sustituye "mate" por tu editor preferido)
$ mate app.js
4. dentro de nuestro archivo app.js escribimos el siguiente codigo:
var http = require('http');
var server = http.createServer(function(request,response) {
response.writeHead(200, {
'Content-type' : 'text/plain'
});
response.end('Hola Mundo');
});
server.listen(8000);
console.log('Servidor inicializado en http://127.0.0.1:8000');
5. Ejecutamos desde la Terminal nuestro ejemplo: (Esto nos debe mostrar un "Servidor inicializado en http://127.0.0.1:8000" como resultado dentro de la Terminal)
$ node app.js
6. En nuestro browser accedemos a http://127.0.0.1:8000 y debe mostrarnos un "Hola Mundo"
7. Para terminar el servidor HTTP, presionamos la combinación de teclas "control" + "c"
Asi concluye este primer ejemplo, para accesar directamente a la consola de Node.js desde la Terminal, solo necesitamos teclear "node":
$ node
Ya dentro de la consola podemos ver algunos comando básicos de ayuda a través de help:
> .help
Esto es todo por lo pronto, la próxima semana un ejemplo nuevo.
Publicado en javascript el 31/10/09 a las 02:33 pm
Tengo más de un año utilizando el script de shadowbox.js para desplegar galerías, formularios u videos. Recientemente comencé a utilizar la última versión y me pareció lo suficientemente agradable para recomendarlo.
El script es práctico de utilizar y la versión más reciente me parece estar más ordenada.
Para utilizarlo basta descargarse la versión más reciente de Shadowbox.js y descomprimir todo en un folder, en mi caso lo llamo js. Posteriormente en el archivo que vamos a mandarlo llamar colocamos las siguientes líneas dentro de la etiqueta <head>:
<link rel="stylesheet" href="js/shadowbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/shadowbox.js"></script>
El primero es el archive CSS donde definimos parte de su apariencia y el Segundo llamamos al archive JS que se encarga del funcionamiento.
En seguida agregamos lo siguiente:
<script type="text/javascript">
Shadowbox.init({
overlayColor: "#eee",
language: "es",
players: ["img"]
});
</script>
El script requiere ser inicializado, por lo que colocamos dentro de una etiqueta <script> un Shadowbox.init(); el cual se encarga de dicha tarea.
Dentro colocamos algunas propiedades como es el caso de overlayColor el cual nos permite asignar un color que tendrá el background semitransparente alrededor de nuestra ventana de Shadowbox. language en el cual podemos declarar en qué idioma aparecerán los elementos. Y por ultimo un elemento importante, players al cual le especificamos de qué tipo de información mostrara nuestro Shadowbox, en este caso img por que será una imagen o imágenes. Podría ser también iframe para llama html, u otros, dependiendo lo que deseamos mostrar con shadowbox.
En seguida declaramos la imagen que nos interesa mostrar dentro de Shadowbox:
<a title="Hotel" rel="shadowbox" href="gallery/bienvenidos-01.jpg">
<img alt="Hotel" src="gallery/bienvenidos-01t.jpg" /></a>
Si se aprecia es una imagen como link, hasta ahí todo normal, sin embargo agrega un elemento extra dentro de la etiqueta <a>, me refiero a:
rel=”shadowbox”
Donde:
shadowbox manda llamar al script.
Y listo, basta hacer click en nuestra foto y se abrirá shadowbox mostrándonos la imagen.
Ahora, si lo que nos interesa es mostrar más de una foto como una galería. A nuestro rel=”shadowbox” habrá que agregarle un elemento que identificara a esas fotos como que forman parte de algo, esto seria así:
rel=”shadowbox[fotos]”
Donde:
[fotos] es el id que le hemos dado a esta galería y que todas las imágenes que pertenezcan a la galería, deberán llevarlo si queremos que aparezcan dentro de nuestro shadowbox.
El script puede ser bien aprovechado y costumizado. Lo pueden ver en acción en el siguiente link
Estamos ante un boom
de efectos en la Web (jQuery, Ajax, Mootools, Prototype, etc.), divs que se refrescan sin refrescar la pagina completa, cajas de texto que se arrastran, que flotan, contenidos que se deslizan, decenas de efectos y mensajes de alerta muy cools
, con colores y sombras que nos hacen sentir por momentos dentro de otro sistema operativo.
Pero bien, me pregunto que tan recomendable es usar estos efectos y scripts para mejorar la experiencia del usuario.
En este momento no he metido nada de ello en el blog, pero siempre que pienso en cambiar algo, me pregunto una y otra vez si valdrá la pena ser parte de ese boom
y que tanto valoran los usuarios todo esto.
Por que nosotros como desarrolladores podemos verlo muy cool
un efectito aquí y otro por allá, pero ¿y el usuario? ¿Alguien ya hizo algún estudio al respecto?
Me gustaría conocer tu opinión como desarrollador y como usuario y por supuesto, que tutoreales o artículos recomiendas, para hacer un buen uso de estos métodos.
Publicado en javascript el 11/12/05 a las 03:13 am
Desde que comencé a navegar por los blogs se me ha creado el habito de darle click al titulo del blog para regresarme a la pagina de inicio, sin embargo en un gran numero de blogs la cosa no funciona así.
Tienen un titulo o logo del blog estático e integrado a su menú o contenido un enlace para regresar a la pagina inicial.
Habito bueno o malo, aun lamentablemente lo sigo haciendo en algunos sitios nuevos. Ahora para el nuevo rediseño estuve buscando la manera de hacer eso posible en mi blog, ya que mi titulo anteriormente era estático también.
Encontré que con Javascript es posible solucionar la interrogante, he aquí el código XHTML/Javascript y CSS que utilizo para esa tarea.
Código XHTML/Javascript
<div id="titulo"
onclick="window.location='http://www.stanmx.com/';"
title="Pagina Principal">
<h1><span>Stanmx</span></h1>
<h2><span>Buscando la Accesibilidad.</span></h2>
</div>
Código CSS
#titulo h1{
background: transparent url(../images/titulo.gif) no-repeat top;
width: 190px;
height: 52px;
margin-top: 10px;
margin-left: 25px;
margin-bottom: 0;
padding: 0;
border: 0;
cursor: pointer;
}
#titulo h1 span,#titulo h2 span {
display:none;
}
Sugerencias y aportaciones en los comentarios.