Contenido

jQuery.ascensor.js, plugin jQuery que lleva el scrollTo() a otro nivel

18 may

+ 5

jQuery.ascensor.js, es un plugin jQuery que nos permite convertir el plugin jQuery.scrollTo() en un ascensor :D

Instalación

Lo primero que debemos tener en cuenta es que el plugin, obviamente, requiere jQuery y que además necesita de scrollTo() para funcionar, así que tendremos que cargarlos antes de llamar al plugin.

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script> 
<script src="js/jquery.ascensor.js" type="text/javascript"></script>
<script src="js/myscript.js" type="text/javascript"></script>

Visión de arquitecto

Una vez cargado, debemos tener en cuenta nuestro HTML ya que necesitaremos ver nuestro código como si de un edificio de N plantas se tratara.


<div id="house">
        <div>
                <div id="piso1"></div><!-- Contenido del piso 1-->
        </div>
        <div> 
                <div id="piso2"></div><!-- Contenido del piso 2-->
        </div>
        <div>
                <div id="piso3"></div><!-- Contenido del piso 3-->
        </div>  
        <div>
                <div id="piso4"></div><!-- Contenido del piso 4-->
        </div>
        <div>
                <div id="piso5"></div><!-- Contenido del piso 5-->
        </div>
</div>

Y una vez ya definido el contenido en los diferentes pisos indicaremos al plugin ascensor() que le aplique el scroll dinámico que buscamos.

$('#house').ascensor();

Opciones y más opciones

Con lo anterior ya tendríamos funcionando una versión simple del uso de jQuery.ascensor(), pero aún podemos utilizar una gran cantidad de parámetros que nos permitirán personalizar completamente nuestras transiciones.


$('#house').ascensor({
                                        
        AscensorName:'house',
                //Es posible usar id's o clases (default:'maison')
        WindowsFocus:true,
                //Si empezamos en el primer piso(default:true)
        WindowsOn:'0',
                // Si empezamos en cualquier otro piso
        Direction:'y',
                //Dirección en la que va el "ascensor"
        NavigationDirection:'xy',
                //Lo que será la dirección de navegación(par défaut:'xy')
	Navig:true,
		//Nos permite añadir un sistema de navegación	
	Link:true,
		//Si necesitamos un link por piso hacia el siguiente piso
	PrevNext:true,
		//Botones prev/next
	KeyArrow:false,
		//Activamos o desactivamos las flechas	
	keySwitch:false,
		//Activamos o desactivamos la navegación por flechas.
	CSSstyles:true,
		// Si necesitamos un plugin CSS por defecto
	ReturnURL:true,
		//Si necesitamos un URL por páginca
	ReturnCode:true,
		//Nos ofrece id y class para navig/link/content  
	ChocolateAscensor:true,
		//Si necesitas estar en todos los pisos
	AscensorMap: '4|3',
	   //Define el tamaño del mapa
	ContentCoord:'1|1 & 2|2 & 1|2 & 3|4 & 1|3 & 3|1 & 2|3'	
		// Define las posiciones X y Y de cada piso dentro del mapa
});

Interesante herramienta para preparar presentaciones online.

dynamo.js, añade un curioso efecto a tu HTML con jQuery

16 may

+ 0

Dynamo.js es un plugin jQuery que nos permite añadir un curioso efecto a nuestros contenidos HTML. El efecto me recuerda al reloj de la película “Atrapado en el tiempo” de Bill Murray, ya que nos permite definir una serie de palabras que irán solapándose unas sobre las otras como si de el paso de minutos se tratara… no sé como explicarlo mejor, así que será mejor que lo veáis vosotros mismos :D

//HTML
<p>I wish I could 
   <span class="dynamo" data-lines="modify,mutate,morph,switch">change</span>
the text here.</p>

// Javascript
$(function() {
  $('.dynamo').dynamo();
});

Además dispone de solo 4 atributos para personalizar el efecto y todos ellos los indicaremos en el elemento HTML mediante atributos data-* haciendo que este se programe a si mismo.

  • data-lines: Reemplazos separados por comas, el texto inicial no está incluido.
  • data-speed: Velocidad de la transición (default: 350ms)
  • data-delay: Retardo entre ciclos (default: 3000ms)
  • data-center: Centrar el texto en contenedor dynamo (default: false)

Sencillo, ¿verdad?

Node.js para yayodesarrolladores web

16 may

+ 5

Me considero yayodesarrollador web, no por que sea viejo sino por que soy de esa generación de desarrolladores que conocieron la web en su fase 1.0 y que formaron parte de la estandarización de la web 2.0. Soy un desarrollador web que se encuentra más cómodo desarrollando en Javascript “puro” que usando jQuery y que aún recuerda como hacer una petición Ajax “a pelo”, usando el objeto XMLHTTPRequest y el odiado ActiveX para que IE no se queje.

De esa generación de desarrolladores que acababan de conocer Ajax y lo usaban para todo, hasta para lo que ahora te da vergüenza admitir, que descubrieron que los selectores CSS3 iban a revolucionar el Javascript que conocían y que vieron como Google Chrome, con su motor  de Javascript V8 entraba en el mercado para literalmente darle la vuelta.

Y aquí es donde entre Node.js, que está basado en el uso de V8 como motor de procesamiento de javascript, pero a diferencia de lo que habíamos visto en nuestros tiempo mozos, hace 10 años, esta vez se usa en el servidor… ¿!EN EL SERVIDOR!?, si si, como lo oyes, puedes programar en Javascript pero en el servidor…O.o.

La idea no es nueva, por allá en el 2008 aparecía Jaxer que intentaba hacer algo parecido, y poco más he leido después de él. Y lo que se consigue es acercar las maravillas de un lenguaje como Javascript, con capacidad de orientarse a eventos permitiendo programar de forma asíncrona fácilmente al servidor, todo ello por que este tipo de programación consigue unos resultados de rendimiento espectaculares al estar básicamente en estado latente esperando a que se ejecute el evento X o el evento Y.

Vale vale, pero ¿nos ponemos a ello?

Lo primero es instalarlo, para ello, lo descargamos de la página oficial y lo instalamos (doble click en Windows y en Macmake && make install en Linux). Una vez instalado ya podemos ponernos a tocar código que es lo que nos gusta!

// Cargamos el módulo HTTP
var http = require('http');

// Creamos un servidor HTTP que devolverá "Hola Mundo!" en cualquier petición
var server = http.createServer(function (request, response) {
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.end("Hola Mundo!\n");
});

// Escuchamos el puerto 8000
server.listen(8000);

// Mostramos un mensaje en la terminal
console.log("Server running at http://127.0.0.1:8000/");

El típico “Hola Mundo” nos muestra ya por donde van a ir los tiros en cuenta al asincronismo que os comentaba. El objeto server, queda asociado al puerto 8000 que ejecutará el callback definido unas líneas por encima.

Ahora para ejecutar esto en tu máquina, tendrás que guardar este código dentro de un fichero .js para ser llamado por node.js de la siguiente forma.

node fichero.js

El resultado, en la consola que hemos ejecutado el comando debería parecerse a esto:

Captura de pantalla 2012-05-15 a la(s) 23.09.42
(Ver Imagen)

Y como la consola indica, nos dirigiremos al enlace http://127.0.0.1:8000/ y veremos el texto “Hola Mundo!“. Sencillo, rápido y funcional.

Módulo, módulos y más módulos

Parte del éxito de Node.js reside en la comodidad para trabajar con módulos, y la facilidad de incluirlos a tu proyecto, traído de otros lenguajes se adhiere a nuestros proyectos de forma tan eficiente y práctica que no da pereza generar nuevos y nuevo módulos. De ahí que la comunidad se haya puesto las pilas y haya generado implementaciones de casi todos los componentes que te puedas imaginar.

npm install package

El comando npm, se instala con Node.js y mediante esa sencilla sintaxis podemos añadir un módulo a nuestro proyecto o al repositorio global de node.js dejándolo disponible para todos los proyectos dentro de esa máquina (node install -g package).

package.json

Para hacernos aún la vida más fácil, podemos especificar el fichero package.json, en el que definiremos el nombre de nuestra aplicación y las dependencias que este necesita.

{
    "name": "application-name"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "2.5.8"
      , "stylus" : "0.27.0"
      , "coffee-script": "1.3.2"
      , "swig": "0.11.2"
  }
}

Luego, como si de magia se tratara solicitamos que se instalen todas las dependencias del proyecto.

npm install -d

Y automáticamente empiezan a descargar los paquetes y guardarlos en la carpeta node_modules/ del proyecto.

Captura de pantalla 2012-05-15 a la(s) 23.28.16
(Ver Imagen)

Simplemente eso, cargamos lo que necesitamos y lo empezamos a usar en nuestro proyecto, así de sencillo. Esto da lugar a que un proyecto node.js, incluya frameworks para casi cualquier cosa, para escribir HTML más rápido (jade), para hacer un Javascript más eficiente (CoffeeScript) o para que las CSS’s se comporten como un lenguaje de programación (Stylus), o como he dicho antes, para hacer casi cualquier cosa.

Incluso, proyectos que juntan estos y otros frameworks/módulos y definen una forma ágil y robusta de trabajar como ExpressJS o Meteor que merecen la pena tratar con más detalle en otra serie de posts.

LESS, CSS enriquecido en el cliente

15 may

+ 6

Hace unos días vimos SASS, una herramienta pensada para agilizar la maquetación CSS de nuestros proyectos. Vimos que ofrecía una serie de herramientas que nos permitía trabajar con una versión enriquecida de CSS con variables, funciones, anidamiento de selectores,…

LESS

Pues LESS, nos ofrece más de lo mismo, usando una sintaxis similar a que vimos con SASS, y nos ofrece las mismas maravillas que ya hemos visto.

Variables

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Mixins

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Anidamiento de selectores

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Funciones y operaciones

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Como podemos ver, nuestros CSS’s cogen una aspecto de lenguaje de programación que permite dinamizarlas fácilmente.

Compilación en el cliente

A diferencia de SASS, LESS permite compilar las hojas de estilos dinámicas (.less) directamente en el navegador mediante una librería JS que cargaremos en nuestras páginas (para Chrome, Safari y Firefox).

<head>
	<link rel="stylesheet/less" type="text/css" href="styles.less">
	<script src="less.js" type="text/javascript"></script>
</head>

Es importante poner las hojas de estilos antes de añadir la librería javascript e indicar que mediante el atributo rel que el tipo de stylesheet del que se trata es uno de los que se han de compilar.

Además, nos añade la capacidad de refrescar los estilos mediante el Watch Mode, que podremos activarlo mediante un parámetro en la URL a la que accedemos (#!watch) o desde la consola de Firebug ejecutando less.watch().

cssSandpaper, unifica transformaciones CSS3 en todos los navegadores

15 may

+ 0

cssSandpaper es otra librería javascript que pretende hacernos la vida más fácil haciendo que dispongamos de transformaciones CSS3 en nuestros navegadores de forma estandarizada, omitiendo las versiones personalizadas de cada navegador e incluso dotando a Internet Explorer de ellas.

Pie Menu, añade un menú circular a tu página con jQuery y CSS3

14 may

+ 2

Pie Menu, es un plugin jQuery que se aprovecha de las animaciones CSS3 para generar curioso menu circular desplegable.

piemenucss3
(Ver Imagen)

Además usarlo es muy sencillo, ya que solo tendremos que definir un listado de opciones e indicar que el elemento contenedor debe comportarse como un Pie Menu.


  <div id='outer_container' class="outer_container" >
        <a class="menu_button" href="#" title="Toggle"><span>Menu Toggle</span></a>
        <ul class="menu_option">
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
          <li><a href="#"><span>Item</span></a></li>
        </ul>
    </div>

Una vez definidas las opciones del menu, activamos el menú:


$('#outer_container').PieMenu({
	'starting_angel':0(Starting Angle in degree),
	'angel_difference' : 90(Displacement angle in degree),
	'radius':100 (circle radius in px),
}); 

Siempre que veo menus de estos, me recuerdan a aquellos del juego Secret of Mana de la Super NES:D

Datavisualization.ch, colección de herramientas para crear tus gráficas en javascript

14 may

+ 0

Si eres de los que ya hemos perdido la cuenta de la cantidad de herramientas que hay para incluir gráficas en tus páginas mediante javascript, te recomiendo datavisualization.ch. Una web donde podrás encontrar todas, o casi, las que te puedan sacar de un apuro en un momento dado. Recomendable para tenerla siempre a mano.

*JS, el hijo bastardo entre Javascript y C

13 may

+ 1

No paran de salir herramientas para hacernos la vida más facil, aunque hay veces que para evitar aprender un lenguaje concreto tienes que aprender otro que te convertirá el código en este primero. Este es el caso de *JS, un lenguaje pensado para programar Javascript como si de C se tratara.

Por el momento es una versión beta que no permite trabajar con ella en el mundo real, pero que sirve para poner una serie de ideas sobre la mesa con las que mejorar nuestra programación de bajo nivel sobre Javascript.

Programación más eficiente

*JS ofrece un lenguaje tipado que permite especificar el tipo de variables que vamos a definir, lo que hará que la conversión a Javascript sea más robusta y  segura. Para ello usa las herramientas de más bajo nivel que Javascript puede ofrecer, haciendo que nuestro código roce la ilegibilidad extrema :D

Código *JS

struct Node {
  let Node *next;
  let int value;
}

let Node *head = new Node, *tail = head;

function Node * add (int value) {
  let Node * next = new Node;
  next->value = value;
  tail->next = next;
  tail = next;
  return next;
}

trace(add(1));
trace(add(2));
trace(add(3));

traceList(head->next);

function void traceList(Node * p) {
  while (p) {
    trace("Node at address: " + p + ", has value: " + p->value);
    p = p->next;
  }
}

Código Javascript

Una vez compilado el código anterior, nos quedaría en algo así que podría ser ejecutado por cualquier navegador…

const $U4 = U4;
var head = (malloc(8) >> 2), tail = head;
function add(value) {
  const $I4 = I4, $U4 = U4;
  var next = (malloc(8) >> 2);
  $I4[next + 1] = value;
  $U4[tail] = next;
  tail = next;
  return next;
}
trace(add(1));
trace(add(2));
trace(add(3));
traceList($U4[head]);
function traceList(p) {
  const $I4 = I4, $U4 = U4;
  while (p) {
    trace('Node at address: ' + p + ', has value: ' + $I4[p + 1]);
    p = $U4[p];
  }
}

Además, *JS nos ofrece herramientas como malloc() y free() (como en C) que nos servirán para gestionar la memoria que consumen nuestros scripts de forma explícita.

CamanJS, manipulación de imágenes mediante javascript

11 may

+ 1

CamanJS une dos de mis más grandes pasiones, la fotografía y el javascript. Y gracias a las nuevas tecnologías lo permiten hacer de una forma muy eficiente.

Gracias al uso de <canvas /> y su control mediante javascript nos permite disponer de una serie de métodos para dar efectos predefinidos o crear los nuestros propios de forma sencilla.


<-- cargamos la funcionalidad de camanJS -->
<script type="text/javascript" src="caman.full.min.js"></script>
 
<script type="text/javascript">
// Modificamos la apariencia de la imagen indicada.
Caman("images/example-image.jpg", "#example-canvas", function () {
    this
        .saturation(20)
        .gamma(1.4)
        .vintage()
        .contrast(5)
        .exposure(15)
        .vignette(300, 60)
        .render();
});
</script>

<canvas id="#example-canvas"></canvas>

Aunque la compatibilidad con los diferentes navegadores no es completa (obviamente) soporta una buena cantidad de navegadores (Google Chrome, Safari 5+, Firefox 4+, Opera 10+, Internet Explorer 9+) que junto a la completa documentación nos ofrece una herramienta más que interesante para trabajar con imágenes desde el navegador.

-prefix-free, dí adios a los prefijos CSS

11 may

+ 5

Ayer vimos la cantidad de líneas de código que debemos incluir en nuestros CSS’s para disponer de ciertas funcionalidades en los diferentes navegadores, no es algo nuevo, hace ya tiempo nos quejábamos de ello. Y parece que a medida que van saliendo más y más propuestas por parte de los diferentes navegadores estos prefijos se están haciendo más y más populares.

El problema, radica en que dentro de X años esos prefijos dejarán de ser necesarios por que por lo general adoptan una nomenclatura estándar, lo que nos obligará a recorrer todos nuestros CSS’s para adaptarlos a los atributos del momento.

Para solventar prácticamente por completo ese problema aparece prefix-free, un librería Javascript que se encarga de gestionar estos prefijos por nosotros dejándonos a nosotros la nomenclatura estándar y él adaptándose al navegador que está visitando nuestra aplicación web.


// Nuestro CSS
border-radius: 1em; // Para cuando se cumplan los estandares.

// Resultado
-moz-border-radius: 1em; // Mozilla 
-ms-border-radius: 1em; // Internet Explorer 8 (No soportado) 
-webkit-border-radius: 1em; // WebKit y Safari 

Como podemos ver el cambio es significativo, y únicamente hemos de añadir un fichero JS a la carga de nuestra aplicación web.

<script src="js/prefixfree.min.js"></script>

Compatibilidad

Actualmente está disponible para los principales navegadores, IE9+ Opera 10+, Firefox 3.5+, Safari 4+ y Chrome para escritorio y Mobile Safari, Android browser, Chrome y Opera Mobile para móviles.

Problemas detectados.

En CristaLAB comentaban que nos funcionan en:

  • CSS’s cargados mediante @include.
  • ficheros CSS’s locales en Chrome y Opera.
  • Estilos inline
  • y CSS’s de diferentes dominios

Aún así, el trabajo que nos ahorramos a largo plazo es realmente interesante para tenerlo en cuenta.