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 😀

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.

Participa, Hay 5 Comentarios. →

SASS vs LESS, ¿cual es mejor?

18 May

+ 2

Hace unos días hablamos de SASS y de LESS, metalenguajes CSS que permiten añadir capacidades programáticas a un lenguaje de marcado, pero ¿cual es mejor? Los chicos de css-tricks se han hecho esta misma pregunta y aunque os anticipo que el ganador ha sido SASS, lo han detallado perfectamente. Os recomiendo que le echéis un vistazo si os interesa el tema.

Participa, Hay 2 Comentarios. →

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 😀

//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?

Participa, Hay 0 Comentarios. →

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.

Participa, Hay 5 Comentarios. →

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().

Participa, Hay 6 Comentarios. →

La vuelta a las buenas costumbres y de como han cambiado las cosas

15 May

+ 24

Dicen que a veces hay que dejar de hacer algo un tiempo para luego volver con más ganas e ilusiones, no sé si será mi caso, pero creo que es el momento de volver.

aNieto2k nació para solucionar una carencia de mi memoria, incapaz de almacenar de forma ordenada la cantidad de nuevos conocimientos que estaba absorbiendo en mi evolución como desarrollador, nació con la intención de servirme como hemeroteca de cosillas que probaba, y que explicada con mis palabras me sirviera para volver algún día a revisar como hacer esto o lo otro. Una forma de mantenerme al día en el frenético sector en el que estamos metidos, donde de un día para otro las cosas cambian radicalmente.

Y ahora, casi 7 años después, quiero volver a coger las riendas de esa idea.

Como todos sabemos y asumimos, las cosas cambian y las personas no son un excepción, lo que hoy te puede parecer lo más interesante de repente te aburre y se vuelve rutinario, a veces sin ningún motivo y otros por que te satura. En mi caso, he sufrido ambos, pasaron los años y lo que hacía con pasión y dedicación cada día se convirtió en una obligación y en ese momento dejó de ser todo lo divertido que parecía en un principio.

Creo que ha pasado el tiempo suficiente para volver a cogerlo con ganas y disfrutar como lo hacía antes sin caer en los errores del pasado, tomándomelo con más calma y definir un poco más el camino que quiero que siga el blog.

¿Que ha pasado durante este tiempo?

Personalmente muchas cosas y laboralmente muchas más, pero aunque crea que son muchas no son nada con lo que me he encontrado cuando me he puesto a investigar.

En el TODO list, tenía pendiente hacer cositas con Node.js, y cuando he empezado a tirar de la manta se ha destapado todo lo que Node.js ofrece, ya publicaré algunos artículos más concretos para los rezagados como yo que aún no le han metido mano, pero os puedo decir que viendo el código de alguna aplicaciones que hay por internet hace sentirse un abuelo de la programación que aún se sabe de memoria como definir una llamada Ajax usando el objeto XMLHttpRequest, a pelo o hacer los border-radius con una cantidad ingente de div’s para incrustar imágenes con los bordes.

Como persona que se haya en la mediana edad (si, aunque no nos guste como suene es donde estamos trentañeros :D) tengo sentimientos enfrentados al respecto, unos de rechazo frente a lo nuevo y otros de admiración por los cambios, espero que con el uso se vayan disipando.

Así que bueno, pongamos la rueda a rodar a ver hasta donde nos lleva.

Gracias por estar ahí!

Participa, Hay 24 Comentarios. →

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.

Participa, Hay 0 Comentarios. →

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😀

Participa, Hay 2 Comentarios. →

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.

Participa, Hay 0 Comentarios. →

*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 😀

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.

Participa, Hay 1 Comentario. →