Cristalab

Control de objetos en memoria en AS3

lucasmoyano — Tue, 22 May 2012 14:22:30

En este proyecto en Actionscript 3 cuento con una lista que me va mostrando constantemente los objetos que hay en memoria. Si el objeto es borrado, desaparecer� autom�ticamente de la lista, adem�s el primer item me indica la memoria utilizada.

En un juego, es muy com�n armar una clase Game y crear un objeto de esa clase. Y a la hora de reiniciar, o volver a jugar borrar ese objeto y crear uno nuevo. Pero muchas veces, quedan MovieClips, y objetos almacenados en memoria que no fueron bien borrados. Por esta raz�n, este control de memoria es muy importante.

Archivos del Tutorial

Main.as

Código :

package  
{
   import classes.RAMController;
   import flash.display.MovieClip;
   import flash.display.Sprite;
   import flash.events.Event;
   /**
    * ...
    * @author Lucas Moyano
    */
   public class Main extends Sprite
   {
      public var objectA:MovieClip;
      public var objectB:MovieClip;
      
      public function Main() 
      {
         addChild(RAMController.ins());
         
         RAMController.ins().add(objectA, "ObjectA");
         RAMController.ins().add(objectB, "ObjectB");
         
         objectA.addChild(objectB);
         
         objectA.removeChild(objectB);
         objectB = null;
         
         removeChild(objectA);
         objectA = null;
      }
   }
}

RAMController.as

Código :

package classes 
{
   import fl.controls.List;
   import flash.display.Sprite;
   import flash.events.Event;
   import flash.events.TimerEvent;
   import flash.system.System;
   import flash.utils.Dictionary;
   import flash.utils.Timer;
   /**
    * ...
    * @author Lucas Moyano
    */
   public class RAMController extends Sprite
   {
      private static var instance:RAMController;
      
      private var  objects   :Dictionary;
      private var list      :List;
      private var timer      :Timer;
      
      public function RAMController() 
      {
         objects   = new Dictionary(true);
         list       = new List();
         timer    = new Timer(1000);
         addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
      }
      
      private function onAddedToStage(e:Event):void 
      {
         removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
         show();
      }
      
      public static function ins():RAMController
      {
         if (!instance) instance = new RAMController();
         return instance;
      }
      
      public function add(object:*, reference:String):void
      {
         objects[object] = reference;
         update();
      }
      
      public function update():void
      {
         var object:*;
         var reference:String;
         
         list.removeAll();
         list.addItem( { label: Number(System.totalMemory / 1024 / 1024).toFixed( 2 ) + "Kb" } );
         
         for (object in objects)
         {
            reference = objects[object];
            list.addItem( { label:reference } );
         }
         System.gc();
      }
      
      public function show():void
      {
         timer.addEventListener(TimerEvent.TIMER, onTickTimer);
         addChild(list);
         timer.start();
      }
      
      public function hide():void
      {
         timer.removeEventListener(TimerEvent.TIMER, onTickTimer);
         removeChild(list);
         timer.reset();
      }
      
      private function onTickTimer(e:TimerEvent):void 
      {
         update();
      }
   }
}

Alternativa en PHP a NodeJS con React PHP

hersonHN — Tue, 22 May 2012 14:01:38

Vengo a hablarles de algo que vi "por ah�" que es m�s que todo, una respuesta de la comunidad de PHP al cada d�a m�s creciente Node.JS, ambos lenguajes son buenos en sus aspectos y tienen sus ventajas y desventajas.

El proyecto se llama React, est� en fase alpha y lo pueden ver en la p�gina oficial.

React is a platform built on PHP for easily building fast, scalable network applications. React uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Procedemos entonces a instalarlo. Para instalarlo lo har� en una m�quina virtual con Lubuntu (porque no tengo mucha memoria ram para derrochar).

Entonces, tecleamos:

Código :

sudo apt-get install phpunit

Necesitamos phpunit para instalarlo, no s� si correr� en windows, pero no es algo por lo que nos vayamos a preocupar.

Entonces, como en la m�quina virtual no ten�a instalado ni PHP, ni MySql, ni nada de eso, se instal� tambi�n autom�ticamente PHP, y probamos ver qu� versi�n tenemos:

Código :

php --version

y nos dice que es la 5.3.10. Nos conformaremos con esa versi�n para probar.

Ahora, para manejar las dependencias y esas cosas instalaremos composer de esta forma:

Instalaremos curl (por si no lo tienen en su sistema operativo):

Código :

sudo apt-get install curl

Código :

curl -s http://getcomposer.org/installer | php

Listo, "composser successfully installed".

Tenemos ya, php, phpunit y composer, ahora vamos con nodePHP, pero como acabamos de instalar PHP, necesitaremos php-curl para manejar URLs.

Código :

sudo apt-get install php5-curl

Ahora, siguiendo con la instalaci�n de nodephp, probamos con:

Código :

echo '{ "require": { "react/react": "dev-master" } }' > composer.json
composer install

�ups! me di� error, no reconoce el comando composer, pero si sustitu�mos el �ltimo comando, evitaremos ese problema:

Código :

php composer.phar install

Y comenzar� a instalar dependencias, mientras tanto no caer�a mal una taza de caf�, ya que considerando que lo estoy (o estamos) instalando desde cero, tiene que instalar muchas dependencias, (de Symfony m�s que todo).

Cuando por fin se termine de instalar, procedemos a crear un "hola mundo!".

Código :

writeHead(200, array('Content-Type' => 'text/plain'));
    $response->end("Hello World\n");
});
echo "Server running at http://127.0.0.1:1337\n";
$stack->listen(1337);
?>

Y lo guardamos en un archivo cualquiera, como por ejemplo "server.php" y lo corremos v�a consola con:

Código :

php server.php

En nuestro navegador nos dirigimos a localhost:1337 �y listo!

Espero que a ustedes no les de tantos problemas como a m�, enumer� en el post todo lo que hice. Cabe recalcar que el proyecto a�n est� en estado alpha, pero vale la pena darle una ojeada, probablemente ser� super popular o probablemente nadie lo termine usando, pero eso no importa, lo interesante es aprender.

Saludos

Fotomanipulaci�n realista en Photoshop

sabdiel — Mon, 21 May 2012 16:34:21

Espero que les guste este videotutorial de Photoshop, donde aprender�n varias t�cnicas de fotomanipulaci�n y efectos, mediante los cuales crearemos una ciudad a punto de ser aplastada por los pasos de un gigante, como vemos en la imagen con el resultado final, tratando de lograr un cuadro lo m�s realista posible y de alto impacto visual:

Google Chrome es, desde hoy, el navegador m�s usado del mundo

Freddie — Mon, 21 May 2012 10:12:14

Internet Explorer, tras m�s de una decada, cae al segundo lugar superado por Google Chrome, reporta Memeburn. Chrome ha sido clave en la estrategia de Google de empujar HTML5, Javascript y las nuevas tecnolog�as que hicieron viables las aplicaciones web.

Chrome inici� comiendose el market share de Opera y Firefox, pero IE, a pesar de sus innovaciones con IE9 e IE10, se uni� al resto en una constante tendencia a la baja.

Chrome introdujo varios cambios que han adaptado la mayor�a de browsers. Eliminaron las versiones, se actualiza silencionamente, fusion� las URLs con la busqueda, los plugins se instalan sin reiniciar, el motor V8 aceler� Javascript al infinito, trajo la sincronizaci�n entre dispositivos y aisl� por primera vez los tabs por procesos.

Chrome adem�s hizo que Webkit sea el motor de render dominante en el planeta.

Microsoft entendi� el error de frenar la web con IE6, 7 y 8. IE9 acept� a HTML5 y IE10 empez� a competir de manera seria con el resto de los navegadores modernos. Pero es demasiado tarde. Ha ocurrido. La gente normal, no nosotros, no los techies, no los geeks, quieren instalar un navegador mejor.

�Pero esto es en el primer mundo! �Qu� pasa con latam?

�Qu� pasa con latam? Pasa algo muy similar. Cristalab no es un indicador del p�blico en general, pero vale la pena resaltar qui�n entra a nuestra comunidad:

Internet Explorer es una minor�a brutal. IE9 es el m�s usado, seguido por IE8. IE7 s�lo representa el 1% de nuestro tr�fico y IE6, como en el resto del mundo, no existe. Es hermoso trabajar en Cristalab.

IE6 no existe, IE7 muere r�pidamente. Ya casi, compa�eros, ya casi somos libres.

�Postea screenshots de tu propio Analytics y celebremos!

Tracking en perspectiva en After Effects

arumadigital — Fri, 18 May 2012 12:13:40

Hasta ahora hemos usado el rastreador para ejecutar trackings sencillos en puntos concretos, pero modificando las opciones para utilizar capturas de m�ltiples puntos, como bordes en perspectiva, entenderemos las posibilidades que nos ofrece esta herramienta para obtener composiciones mucho m�s complejas y ajustadas a las necesidades reales de nuestro d�a a d�a, en el mundo de la composici�n dentro de After Effects.

Crearemos un cartel de reemplazo, que incorporaremos en el material original, ajustando su aspecto para que encaje correctamente en el conjunto, capturando el desplazamiento del inicial y componi�ndolo con varios ajustes espec�ficos.

Saludos.

C�mo hacer m�sica en FL Studio utilizando el teclado de tu computadora

XKlibur — Thu, 17 May 2012 09:30:29

Si no tienes un teclado MIDI puedes utilizar el teclado de tu computadora para crear m�sica en FL Studio de forma divertida, intuitiva y sencilla. Obviamente, la experiencia no ser� igual que trabajar con un teclado MIDI, pero es una alternativa muy �til que te permitir� agilizar esta labor, sobre todo si eres un novato. A continuaci�n explicar� como realizarlo:

Paso 1 : Habilitar el teclado

Lo primero que debemos hacer es habilitar el teclado seleccionando la opci�n Typing keyboard to piano en el men� Options.

Tambi�n puede hacerse marcando el icono externo correspondiente sin necesidad de entrar al men� o con el shortcut (Ctrl+T).

Ahora, al seleccionar un instrumento musical y pulsar teclas, se emitir�n notas.

Paso 2: Grabar las notas en el piano roll

Para grabar o registrar en el piano roll las notas correspondientes a cada tecla que presiones debes seleccionar la opci�n Step edit en el men� Options.

Tambi�n puede hacerse marcando el icono externo correspondiente sin necesidad de entrar al men� o con el shortcut (Ctrl+E).

Paso 3: Ajustar

Al seleccionar las dos opciones anteriores podr�s grabar las notas usando tu teclado pero �stas aparecer�n apiladas en el piano roll, e independientemente del tiempo que mantengas pulsada una tecla las notas se registrar�n todas iguales, con una longitud m�nima. En consecuencia, al reproducir lo que grabaste sonar� horrible.

Para ajustar el tama�o, selecciona las notas con la herramienta Select, ver�s que aparece un c�rculo peque�o en la parte derecha. Escoge luego la herramienta Draw y arrastra el referido c�rculo para que todas las barras verdes se agranden.

Para finalizar, realiza los ajustes necesarios de forma manual, en caso de ser requeridos, para que la canci�n suene justo como quieres.

Esta es la forma en la que yo lo hago, pero este programa tiene tantas opciones que es probable que exista alguna alternativa para grabar las notas y que aparezcan en el piano roll con la longitud exacta. �T� como lo haces?.

Espero que este m�todo les sea de utilidad.

Enrutamiento din�mico Rip Redistribute y Default Information

arumadigital — Wed, 16 May 2012 17:55:17

En este videotutorial aprenderemos m�s caracter�sticas del protocolo de enrutamiento din�mico rip, con comandos adicionales que nos ayudar�n a introducir informaci�n que el protocolo no incluir�a por defecto y que ser�a necesaria para obtener la convergencia de la red y conseguir que todas las configuraciones que implementaremos en la topolog�a se complementen y funcionen como un todo, a pesar de sus diferencias de m�trica y caracteristicas.

Implementaremos una ruta est�tica por defecto y haremos que rip la redistribuya con sus vecinos, adem�s de ajustar las opciones del sistema, para que sea inclu�da la informaci�n del enrutamiento est�tico en sus mensajes de intercambio.

Saludos.

La herramienta Interactive Skin Bind en 3D Maya

arumadigital — Tue, 15 May 2012 15:37:14

En las �ltimas versiones de 3D Maya podemos encontrar una nueva herramienta, que nos permitir� asignar la influencia y el peso de deformaci�n de los huesos sobre la maya de una forma m�s visual, gracias a sus ayudantes interactivos y las posibilidades de asignaci�n sobre cualquier geometr�a.

Estudiaremos sus posibilidades de aplicaci�n y el soporte inestimable de las opciones de selecci�n r�pida de huesos y configuraciones que permitir�n desplazarnos por los diferentes conjuntos y editar los sistemas de aplicaci�n seg�n nuestras necesidades.

Saludos.

Herramientas para comenzar a programar para Android

virtualblog1 — Mon, 14 May 2012 09:05:27

�Quieres empezar a desarrollar para dispositivos Android?, si es as�, est�s en el lugar correcto, en este tutorial veremos las herramientas necesarias para empezar a crear aplicaciones en java para este famoso sistema operativo, y pues, no est� de m�s darnos una idea de c�mo funciona esta plataforma haciendo el t�pico �hola mundo�

Manos a la obra con Java y Eclipse

Como cualquier otro lenguaje de programaci�n vamos a necesitar un editor de texto, nosotros vamos a utilizar:

Eclipse

Es un entorno de desarrollo integrado de c�digo abierto multiplataforma para crear aplicaciones. Eclipse es usado como la principal herramienta de desarrollo para java, pero tambi�n podemos instalar plugins para otros lenguajes.

Para utilizar java vas a necesitar el Java Development Kit (JDK) que lo puedes conseguir desde esta p�gina.

�Pero donde est� nuestro IDE? Para descargar eclipse dir�gete a su p�gina oficial.

Una vez hecho esto ya tenemos lo necesario para empezar a trabajar con java, pero no para Android, �entonces qu� debemos hacer?

�Qu� necesitamos para trabajar con Android?

Lo que vamos a hacer es dirigirnos hacia la p�gina de Android developer, cuando est�s dentro de ella haz click en la opci�n SDK, vas a encontrar un cuadro como este:

Podemos descargar una versi�n para Mac OS X y para Linux, en la secci�n se Windows hay dos: uno en formato .zip y otra en .exe. Para que se nos haga m�s f�cil seleccionemos el que nos recomienda la misma p�gina (exe) adem�s as� no tendremos que descomprimirlo. Si tienes problemas con la instalaci�n puedes leer esta buena gu�a: (est� en ingl�s, qu� bueno que contamos con google translate).
Una vez descargado e instalado debe quedarnos lo siguiente:

AVD Manager: aqu� se encuentran las maquinas virtuales que nos permitir�n ver la aplicaci�n en funcionamiento, mas adelante estaremos utilizando esta herramienta.

SDK Manager: aqu� se encuentran todas las herramientas ya instaladas y las que no hemos instalado, cada carpeta es una versi�n de Android. Dentro de ellas se encuentra el SDK que es b�sicamente el elemento que necesitamos para programar.

Plugin ADT para eclipse

Un Plugin es un complemento que a�ade funci�n nueva y generalmente muy espec�fica. Esta aplicaci�n adicional es ejecutada por la aplicaci�n principal.

Sin salirnos de la p�gina �android developer� vamos a seleccionar el ADT 18.0.0 (es un plugin para el IDE de Eclipse que est� dise�ado para darle un ambiente potente e integrado) en el men� izquierdo de la p�gina:

Luego se nos mostrar�n las instrucciones para a�adirlo en eclipse, en una parte de la p�gina vamos a encontrar la siguiente direcci�n: http://dl-ssl.google.com/android/eclipse/

Copiemos la direcci�n y ejecutemos eclipse y dirij�monos a help > install new software

Y pegamos la direcci�n en work with, luego seleccionamos �add�, se nos abre una ventana pidi�ndonos el nombre que le pondremos al plugin en mi caso yo escrib� simplemente �ADT plugin�:

Hacemos click en ok y Eclipse estar� verificando y llamando a la direcci�n que le hemos indicado. Todos los elementos que aparecer�n luego deben estar seleccionados (select all); damos click en next > next > aceptamos las condiciones de uso > finish. Eclipse se va a reiniciar y nos aparecer� una ventana como esta:

Nos vamos a la opci�n use existing SDKs y ubicamos la ruta donde se instal�, de lo contrario usamos install new SDK y marcamos la segunda casilla. Terminamos el proceso y listo!!

Crear un dispositivo virtual

Es algo parecido a usar virtualBox. En eclipse ahora van a aparecer dos iconos en el men�:

El primero es el AVD manager y el segundo es SDK manager, escojamos el segundo para crear una m�quina virtual > click en new. Luego nos aparecer�n las caracter�sticas del dispositivo:

Name: escribimos el nombre
Target: elegimos la versi�n que vamos a usar ej: 2.1
SD card: elegimos la cantidad de espacio que ocupa, podemos poner 1GIB
Hardware: si damos click en new podemos a�adirle soporte para funcionamientos como: acelerometrer, soporte para touch-screen, e.t.c

Para finalizar click en create AVD, si queremos ver en funcionamiento la m�quina virtual, click en start:

Ahora, ya podemos empezar a programar y crear un nuevo proyecto android.

Crear un "Hola mundo" en Android

Antes de empezar vamos a tener una serie de carpetas y me gustar�a se�alar algunas de ellas

SRC: Aqu� se encuentra podr�a decirse nuestra hoja PRINCIPAL del proyecto en java.
Dentro de la carpeta res esta la carpeta layout donde se encuentra nuestro main.xml
XML: es un lenguaje basado en etiquetas, al cual yo llamar�a hermano de html porque lo que hace es crear la parte estructural de (en este caso) componentes para android, ej: los botones, campos de texto, im�genes e.t.c. En main.xml tenemos dos vistas disponibles la forma gr�fica y la forma de c�digo.

Si lo modificamos en la manera gr�fica, autom�ticamente se genera el c�digo xml, haci�ndonos la vida m�s f�cil .

Strings.xml: por defecto si ejecutamos la m�quina virtual con nuestro proyecto veremos un texto que dice Hello World, EjemploActivity! Pero si nos vamos a src, donde est� la hoja principal de java en ninguna parte est� escrito esto, pero sucede que en strings.xml hay una l�nea as�:

Código :

Hello World, EjemploActivity!

Ha, con que de ah� sale!! En java lo �nico que se hace es un llamado a ese contenido con:

Código :

setContentView(R.layout.main);

Adem�s, tambi�n podemos modificar el texto de un bot�n llam�ndolo a trav�s de su nombre.
Para crear nuestro propio hola mundo desde java importemos:

Código :

import android.widget.TextView;

Para llamar a TextView, y escribamos:

Código :

TextView variable = new TextView(this);
variable.setText("Hola Mundo");
setContentView(variable);

F�cil, creamos un texto visual (que llamamos variable), luego le a�adimos el m�todo setText y por �ltimo escribimos que se coloque en pantalla el contenido visual de �texto�.

Espero que este tutorial te haya servido, no olvides dejar tus comentarios.

Uso de Nulls en galer�as cinem�ticas en After Effects

arumadigital — Fri, 11 May 2012 14:20:32

El uso de los objetos Null en After Effects nos ser� de gran utilidad a la hora de controlar el movimiento de otros elementos con m�s dificultades de selecci�n y manejo, gracias al linkado de �stos sobre las caracter�sticas que necesitemos y su posterior animaci�n de claves, que nos permitir�n trabajar m�s comodamente.

En este ejercicio trabajaremos con im�genes fijas, a las que asignaremos propiedades 3D para encajarlas en la composici�n, para posteriormente animar el conjunto y ajustar los keyframes y a�adiendo efectos de Motion Blur para completar el aspecto visual.

Saludos.

Crear un Slider con efectos en Javascript

lordoracle — Wed, 25 Apr 2012 00:18:40

Antes de comenzar este tutorial quiero avisarles que no soy el creador de este slider. Yo lo hice siguiendo un tutorial en ingl�s que compr�. No obstante la traducci�n y la interpretaci�n del mismo fueron por mi parte. Luego le a�ad� diversas explicaciones que consider� pertinentes. Es mi forma de aprender. Estoy igual que ustedes, aprendiendo as� que les pido que si notan algo que llama la atenci�n lo notifiquen.

Ver Demo

Antes de comenzar debemos entender c�mo funciona un slider. Se puede decir que a grandes rasgos son im�genes apiladas una sobre otra. Luego mediante javascript se altera su propiedad z-index.

Comenzaremos creando tres archivos:

Index.html que contendr� el contenedor del mismo y todo lo referente a divs e im�genes, as� como tambi�n la llamada a jquery y los archivos javascript y css.
Un archivo .js que se llame: JWslider.js
Un archivo CSS que contenga los estilos del Slider. Como nombre le pondremos: JWslider.css

Vamos con el c�digo del archivo html:

Código :

De momento todo luce sencillo. Tenemos las llamadas a los archivos antes mencionadas as� como tambi�n un div contenedor con una lista. Cada elemento li de la misma llama a una imagen localizada en el directorio img.

El CSS contendr� los siguientes estilos que a�n no aparecen:

Código :

.JWslider {  
   padding:0px;  
   position:relative;  
   z-index:100;  
   overflow:hidden;  
   }  
.JWslider ul{  
    list-style:none;  
   padding:0px;  
   margin:0px;  
   position:relative;  
   }  
.JWslider ul li {  
       position:absolute;  
       display:block;  
       width:100%;  
   }  
   .JWslider ul li img {  
       position:relative;  
       z-index:1;  
   }  
   .JWslider .active {  
        z-index:10;  
.JWslider .reset {  
       z-index:3;  
   }

Podemos ver que las dos �ltimas clases contienen la propiedad z-index. La clase active tiene un nivel alto y como su nombre lo indica tiene por objetivo aplicarse al elemento de la lista que se est� mostrando. La clase reset por el contrario, tiene por objetivo aplicarse al elemento previo que ya no se muestra, o sea la diapositiva previamente activa. Con esto conseguimos mantenerlas en orden.

Código :

.JWslider span {  
       display:none;  
       color:#fff;  
       bottombottom:0px;  
       padding:10px;  
       width:100%;  
       left:0px;  
       position:absolute !important;  
       z-index:555; background:url('i/comment-bg.png');  
       font-family:Verdana, Geneva, sans-serif;  
   }  
   .control_active {  
       background: url('i/active.png') no-repeat!important;  
       height:20px!important;  
       margin-top:9px!important;  
   }  
   .control_hover {  
       background: url('i/active.png') top no-repeat!important;  
       height:20px!important;  
       margin-top:9px!important;  
   }

Puede parecer extra�o ver un elemento span aqu�. Lo cierto es que el mismo ser� utilizado para mostrar texto que vaya a diversas p�ginas.

Finalmente tenemos las dos �ltimas clases que remiten al control del slider. Como pueden notar, es una simple imagen que podemos conseguir en cualquier lado e incluso dibujar nosotros. Y ahora viene lo dif�cil que es el archivo Javascript. Lo mejor es entender c�mo funciona cada porci�n de c�digo por separado y qu� hace cada una en su totalidad.

Estructura b�sica de un plugin jQuery

Código :

   (function($) {

       $.fn.JWslider = function(options){

       }
}(jQuery));

Se declara una funci�n que recibe el par�metro options que est� entre par�ntesis como todo par�metro, y la funci�n se llama JWslider. Este es el motivo por el cual en el c�digo del CSS anterior usamos como clase principal .JWslider, es porque, si bien todav�a �sta no existe, la a�adiremos con jQuery.

Agregar las opciones

Ahora seguiremos definiendo las propiedades del slider.

Código :

   var defaults = {
       time: 4000,
       width: 600,
       height: 400,
       effect: 'none',
       blocksize: {height:'',width:'' },
       duration: 700,
       controls: true,
       customblocksize: {
         // image transitions global settings
         cubeoutcenter      : { height:100, width:100 },
         cubegrow           : { height:100, width:100 },
         cubesidegrow       : { height:100, width:100 },
         stripealternate    : { height:100, width:40  },
         stripefade         : { height:100, width:40  },
         stripehalfalternate: { height:100, width:40  }
       },
       callback:function(){   } 
   };

Podemos ver que se definen varias cosas. El tiempo de duraci�n de las transiciones, el ancho, el alto, el tipo de efecto, la duraci�n, si mostrar o no los controles (por defecto en true se muestran) y custom blocksize que son las medidas de bloques peque�os que se usar�n para los efectos. Cuando digo bloques peque�os, me refiero a bloques div.

Tienen un ancho y un alto de 100px. �Podemos decir entonces que cada tipo de efecto es un bloque div que se comporta de forma diferente?

Lo �ltimo es una funci�n de llamada:

Código :

callback:function(){   }

Truco utilizado en varios lenguajes de programaci�n Javascript no es la excepci�n. Cito a Wikipedia para que entiendan para qu� sirve un callback:

wikipedia :

es una funci�n "A" que se usa como argumento de otra funci�n "B". Cuando se llama a "B", �sta ejecuta "A".

Aqu� podr�amos decir que el c�digo antes de A es el ancho el alto, la duraci�n, etc, etc y que cuando llamemos a B (callback) ejecutar� A. Rebuscado, interesante y s�per �til.

Agregando las variables:

Ahora, vamos a declarar las variables que utilizaremos en la secuencia de comandos; tambi�n obtendremos referencias a todos los elementos que vamos a utilizar con frecuencia.

Código :

   var options = $.extend(defaults, options);
   var root    = $(this);
   var li      = root.find("li");
   var images  = li.find("img");

   var pos, random_no, timer, image_timer, arr, 
       index, block, w, h, src, parent, im, 
       override = false, 
       in_animation = false,
       controls;

   var current = li.eq(1).toggleClass('active'),
       prev = li.first().addClass("reset");

   var bool = true,
       first_bool = true;

La primer l�nea llama poderosamente la atenci�n. Aparece la primera funci�n de jQuery; �.extend� que recibe dos par�metros: defaults y options. Lo que extend hace es combinar dos objetos. En este caso combina defaults con options. Ahora options tiene todo el power de defaults. Luego tenemos un this que sirve para hacer referencia a un objeto en particular. Se utiliza para decir: esto es propiedad de esto.

La variable li tiene como valor �root.find(�li�)� donde aparece otro elemento de jquery que es .find, el cual cumple una funci�n muy similar a .children. La diferencia con �ste es que puede buscar elementos m�s distantes en el �rbol del DOM y no limitarse s�lo a los hijos directos. Y recibe como par�metro li en este caso.

Luego se declara la variable img en el cual vemos una sentencia parecida:

Código :

   var images  = li.find("img");

Pero esta vez hilamos m�s fino y capturamos el elemento img que l�gicamente es una imagen.
Veremos despu�s qu� hacen el resto de las variables. El siguiente paso es la modularizaci�n del plugin o slider. Esto hace la cosa m�s sencilla.

Una funci�n de inicio llamada Init que contendr� todo.
Una funci�n Switcher que �switchea� los slides.
Un modulo de efectos aplicados a las im�genes.
Una funci�n de efectos que cambia aleatoriamente las animaciones, basado en datos seteados por el usuario.
Una funci�n para darle vida al control del slider.
Una funci�n que traiga las im�genes al frente cuando el usuario hace click en el control basado en su �ndice.
Y una funci�n que se ejecuta cuando el efecto termina, esconde el texto actual y prepara la pr�xima imagen.

Declaramos entonces la primera funci�n y dentro de la misma decimos que si las opciones de control del slider es verdadera, a�ada controles (appendControls), y se le dice que tome el primer elemento de la lista, obtenga la etiqueta span y le aplique las propiedades css display, block y las oculte. Luego a cada elemento root le coloca como clase un elemento contenedor llamado JWslider. Por algo anteriormente seteamos sus estilos en el archivo CSS.

Por �ltimo obtenemos el padre de cada uno de los elementos actuales y les asignamos los width y height que seteamos en options.

Código :

function init()
   {
       if(options.controls==true)
       {
           appendControls();
       }

      li.first().find("span").css("display","block");
      current.children().hide();

      root.wrap("");
      root.parent().css({"width":options.width,height:options.height});

   }

Switcher

Conmutacion de los slides es la palabra. Se trata de la adici�n de la clase active al elemento siguiente y la clase reset al elemento actual. Primero se guarda, el elemento anterior si no lo hubo es porque llegamos al final. Esta es la manera de movernos a trav�s de la lista en el sentido de las agujas del reloj. Esto quiere decir que la primera imagen vendr� despu�s que la �ltima. Se remueve la clase reset con removeClass (de jQuery) y se la a�ade al elemento actual. Por �ltimo, la siguiente diapositiva se establece como activa y su imagen est� oculta, porque nosotros estamos animando los bloques del div que aparecer� mas tarde.

Código :

function switcher()
   {
       if(current.prev().length > 0)
           prev = current.prev();
       else
           prev = li.last();

       prev.removeClass("reset");

       current.toggleClass("active reset");

       if(current.next().length > 0)   // setting the next slide
           current = current.next();
       else
           current = li.first(); 

       current.children().hide();
       current.addClass("active");
       options.callback(current.children()[0]);
   }

Codificando los efectos personalizados

Y ahora viene la parte m�s complicada que es animar los efectos. Se puede crear cualquier efecto usando combinaciones de bloques divs de diversos anchos y altos.

La gran mayor�a de los sliders tiene dos combinaciones: la creaci�n de franjas horizontales o verticales y uno un poco m�s complejo que lo hace por etapas, cubriendo diversos campos de la imagen. De ah� como le dicen en USA �stages�.

[nota:0d13b4b296]Palabra clave para recordar: animaci�n de peque�os bloques de divs.[/nota:0d13b4b296]

Efecto 1: Salida en bloque desde el centro

in_animation es una variable que utilizaremos para ver si proceder o no cuando el usuario manualmente clickea en los controles. w y h son el ancho y el alto de los peque�os bloques de divs.

En este efecto crece un cuadrado desde la posici�n inicial de su zona. Se define entonces la funci�n cubeoutcenter con el par�metro image. Se establece como verdadera la variable in_animation. Y luego chequeamos si el tama�o del bloque global est� seteado por el usuario o no. Recordemos que con anterioridad le pusimos a customblocksize 100px de width y 100px de height. De ah� el options.blocksize.width y options.blocksize.height asignados a w y h.

Código :

   function cubeoutcenter(image)
   {
       in_animation = true;
       if(options.blocksize.width!='') {
           w = Math.floor(options.blocksize.width);
           h = Math.floor(options.blocksize.height);
       }
       else {
           w = Math.floor(options.customblocksize.cubeoutcenter.width);
           h = Math.floor(options.customblocksize.cubeoutcenter.height);    
       }
       parent = image.parent();
       arr = new Array(); i = 0;  j = 0; index = 0;
       src = image.attr("src");
   };

Lo cierto es que ver el objeto Math puede resultar bastante intimidante. A grandes rasgos, posee una serie de propiedades y eventos para sacarle partido a todas las posibilidades aritm�ticas del navegador. El m�todo de Math que interesa aqu� (posee una decena m�s sumados a unas cuantas propiedades) es floor, que lo que hace es redondear un n�mero decimal a su inmediato entero. Y la raz�n por la cual se lo utiliza aqu� es porque las coordenadas del browser son en decimales.

La variable parent obtendr� el elemento padre de la imagen, o sea, li.
Se inicializan las variables i, j e index para utilizarla en loops, etc.
Src contiene el lugar donde est� alojada la imagen y lo usa para asign�rselo como fondo al div.

Y ahora crearemos el div con las siguientes propiedades:

Código :

block = $("", {
       css:{
           position: "absolute",
           width: 0,
           height: 0,
           marginTop: h/2,
           marginLeft: w/2,
           'background-image': 'url('+src+')',
           zIndex: 99,
           display: 'none'
       }
   }).addClass('disblock');

El mismo est� posicionado de forma absoluta con un ancho y un alto de 0 (los tomar� de h y w) y la vieja f�rmula para centrar un elemento es:

Código :

Margin-top: h/2
Margin-left: w/2

Tomar�, como dije antes, la imagen como fondo y tendr� un nivel de z-index de 99. Recordemos que los divs son divisiones y que con z-index los convertimos en capas. Con este valor aparece en el frente.
Se agrega (mediante jQuery) la clase disblock para poder remover el bloque una vez que la animaci�n concluya.

Ahora se debe crear un bucle que itera hasta que la variable sea menor que el ancho del slider y dentro un bucle anidado hasta que la variable sea menor que el alto.

Ahora se crea un clon (con la propiedad .clone de jQuery) del boque div con una imagen de fondo a cambiar. Despu�s de cada iteraci�n cambia la posici�n del fondo (con background-position) para por �ltimo anexarlo (con .append de jquery) a su padre, que es li.

Para realizar el bucle usaremos las variables j e i.

Código :

while(i
Ahora que hemos a�adido los bloques, tenemos que a�adir la animaci�n. Por lo tanto ser� animar los bloques para dar nuestro efecto. Para ello, utilizaremos setInterval con el tiempo de intervalo de 80 milisegundos. Ya tenemos los elementos de bloque dentro de la matriz de arr, que deberemos recorrer desde su posici�n inicial y animar cada bloque.

Estos, a medida que se expanden, reducir�n los m�rgenes para que los mismos aparezcan en el centro de la zona. Finalmente comprobaremos si la variable es mayor que el tama�o del array (matriz) y de ser as� pediremos a la funci�n endeffect que haga eso: End Effect.

Entonces, repasando, sabemos que para el efecto:Se crea el bloque, se lo clona y se lo anexa al elemento padre li.
Se crea la animaci�n.
Se finaliza la animaci�n.


Vamos con la animaci�n:

Código :
i = 0;

   timer = setInterval(function(){

       if(i>=arr.length)
       { 
           endeffect(image);
           return;
       }

       arr[i++].animate({
           height: h,
           width: w,
           marginTop: 0,
           marginLeft: 0
       } , {
           duration: options.duration,
           easing:'easeOutSine'
       });

   }, 80);


Cube Out Center: c�digo completo


	Código :
function cubeoutcenter(image)
   {
       in_animation = true;
      if(options.blocksize.width != ''){
           w = Math.floor(options.blocksize.width);
           h = Math.floor(options.blocksize.height);
       }
       else
       {
           w = Math.floor(options.customblocksize.cubeoutcenter.width);
           h = Math.floor(options.customblocksize.cubeoutcenter.height);    
       }
       parent = image.parent();
       arr = new Array(); i =0;  j =0; index = 0;
       src = image.attr("src");
       block = $("" , {
           css:{
               position: "absolute",
               width: 0,
               height: 0,
               marginTop: h/2,
               marginLeft: w/2,
               'background-image': 'url('+src+')',
               zIndex: 99,
               display: 'none'
           }
       }).addClass('disblock');

       while(i < options.width)
       {
           j = 0;
           while(j < options.height)
           {
               arr[index] = block.clone().css({
                   left:i,
                   top:j,
                   backgroundPosition: -i + "px " + -j + "px"
               });
               parent.append(arr[index++]);
               j = j + h;
           }
           i = i + w;
       }
       i = 0;
       timer = setInterval(function(){

           if(i >= arr.length)
           { 
               endeffect(image);
               return;
           }

           arr[i++].animate({ 
               height: h,
               width: w,
               marginTop: 0,
               marginLeft: 0
           },{
               duration: options.duration, 
               easing: 'easeOutSine'
           });
       },80);
   };   

Animate, perteneciente a jQuery, tiene la funci�n de crear una animaci�n personalizada de un conjunto de propiedades de CSS. En este caso:Height: con los valores de h
Width: con los valores de w
Margin-top
Margin-left
Options.duration fue declarada al principio del tutorial y tiene como valor 700.


Efecto cuadrado 2: Efecto SideGrow o �crecer de lado�


Este efecto, en lugar de crecer desde el centro, lo hace desde uno de los lados. El c�digo es el mismo que el anterior con las siguientes diferencias:

Código :
block = $("" , {
       css: {
           position: "absolute",
           width: 0,
           height: 0,
           'background-image': 'url('+src+')',
           zIndex: 99,
           display: 'none'
       }
   }).addClass('disblock');


Como se puede ver, desaparecen las propiedades que hac�an alusi�n a los m�rgenes top y left. En lugar de indexarlos de manera secuencial se repite la matriz de manera aleatoria utilizando una funci�n llamada: random_array que devuelve un array de n�meros aleatorios y que debe recibir una medida como par�metro:

Código :
random_no = random_array(arr.length); // array of random numbers


La �ltima parte es casi igual, salvo que no necesitaremos los m�rgenes para hacer la animaci�n. Usaremos los valores de la matriz antes mencionada.

Código :
timer = setInterval(function(){

       if(i >= arr.length)
       {
           endeffect(image);
           return;
       }

       arr[random_no[i++]].animate({
           height: h,
           width: w,
           opacity: 1
       },{
           duration: options.duration,
           easing:'easeOutCubic'
       });
   },80);
   


Efecto de bandas


Crearemos una animaci�n de bandas que vaya desde lados opuestos de manera vertical u horizontal. Todo el c�digo anterior es el mismo pero lo que cambia es lo siguiente en la parte de animaci�n y css:

Código :
if(options.blocksize.width!='')
       w = Math.floor(options.blocksize.width);
   else
       w = Math.floor(options.customblocksize.stripefade.width);

   h = options.height;


Tengan en cuenta que estamos aplicando esto para l�neas verticales. Si lo quieren hacer al rev�s, o sea l�neas horizontales, inviertan el c�digo de arriba.

El bloque de CSS cambia a esto:

Código :
   block = $("" , {
       css: {
           position: "absolute",
           width: w,
           height: h,
           'background-image': 'url('+src+')',
           zIndex: 99,
           display: 'block',
           marginTop:options.height,
           opacity: 0
       }
   }).addClass('disblock');


N�tese que el valor de h y w no es 0.  Esto es as� porque no queremos que crezcan las l�neas horizontales y verticales, queremos que las bandas aparezcan de manera alternativa. Por ahora se colocar� cada una debajo del escenario del slider. Esto es porque todos los bloques tendr�n valores de m�rgenes positivos, as� que vamos a implementar una condici�n que aplique una propiedad de margen superior a negativo en base a la altura del slider.

Código :
   while(i
	

La �ltima parte es casi igual, excepto que no necesitaremos las propiedades height y width de animaci�n. Simplemente establecemos: margen superior a 0 y la opacidad a 1. 
Código :
   timer = setInterval(function(){

       if(i>=arr.length)
       {
           endeffect(image);
           return;
       }
       arr[i++].animate({
           marginTop:0,
           opacity:1
       },{
           duration: options.duration, 
           easing:'easeOutSine'
       });
   },80);

	
Efecto de bandas con atenuaci�n 


Pocos cambios con respecto al c�digo anterior. Lo primero es que las animaciones de transici�n suelen tener rayas verticales u horizontales de longitud completa, por lo que la variable de inicializaci�n cambia a esto:

Código :
   if(options.blocksize.width!='')
       w = Math.floor(options.blocksize.width);
   else
       w = Math.floor(options.customblocksize.stripefade.width);

   h = options.height;

	
Estamos creando franjas verticales de longitud completa con anchura definida en las opciones.

El CSS cambia a esto:

Código :
block = $("", {
       css: {
           position: "absolute",
           width: w,
           height: h,
           'background-image': 'url('+src+')',
           zIndex: 99,
           display: 'block',
           opacity: 0
       }
   }).addClass('disblock');


Como s�lo nos interesa atenuar, no hay m�rgenes. En la secci�n del bucle s�lo estamos estableciendo la posici�n del fondo y anex�ndolo en el padre, adem�s de cambiar la posici�n de los bloques.

Código :
while(i

La �ltima parte es casi igual, excepto que no necesitaremos las propiedades margin-top, width y height en la animaci�n. Simplemente establecemos la opacidad a 1.  Ahora tenemos un bonito Fade.

Código :
timer = setInterval(function(){

       if(i>=arr.length)
       {
       endeffect(image);
       return;
       }

       arr[i++].animate({
           opacity:1
       },{
           duration: 700, 
           easing:'easeOutSine'
       });
   },80);


Se podr�a haber utilizado la funci�n fadeIn, pero esto genera un bug en Chrome.

Creaci�n del m�dulo de efecto final


Ahora es el momento de crear la funci�n que se llama despu�s de que todos los bloques han sido animados.

Código :
function endeffect(image)
   {
       current.find("span").fadeIn('slow');
       if(options.controls==true)
       {
           controls.removeClass("control_active");
           controls.eq(current.index(".JWslider li")).addClass("control_active");
       }
       clearInterval(timer);
       setTimeout(function() {
           image.show();            // show the real image
           $(".disblock").remove(); // remove the divs
           // switch next slide
           in_animation = false;
           if(override == false)      // Return if manually triggered
               image_timer = setTimeout(function() { 
                   switcher();
                   image.next().fadeOut('slow');
                   effects();
               }, options.time); 
       },1000);
   };



Construcci�n del m�dulo de efectos


El m�dulo de efectos principales decide qu� efecto mostrar. Es m�s simple que los otros. Lo primero que se hace es generar un n�mero aleatorio entre 0 y el n�mero de efectos disponibles. A continuaci�n comprobamos si la opci�n global se establece en un n�mero especial y se establece una variable en 1.

La parte siguiente es un caso especial: si un usuario intenta hacer click manualmente en los controles antes de que comience la presentaci�n de diapositivas, finalmente usaremos el switcher para seleccionar el efecto basado en el valor de la variable  ch. 

Código :
   function effects()
   {
       var ch = Math.floor(Math.random()*6);

       if(!isNaN(options.effect))
           ch = options.effect;

       if(bool==true)
       {
           li.first().find("span").hide();
           bool=false;
           first_bool = false;
       }

       switch(ch)
       {
           case 0:cubesidegrow(current.find("img"));break;
           case 1:cubeoutcenter(current.find("img"));break;
           case 2:cubegrow(current.find("img"));break;
           case 3:stripealternate(current.find("img"));break;
           case 4:stripefade(current.find("img"));break;
           case 5:stripehalfalternate(current.find("img"));break;
       }
   }

	
Creando los controles


Ahora vamos a trabajar con controles. En este m�dulo agregamos la lista de control despu�s de nuestro slider y establecemos al primer elemento de la lista la clase control_active puesta con anterioridad en el CSS. Los elementos de la lista de control se encargar�n de eventos, tales como la funci�n de setImage on click al cual se lo llama con su �ndice como par�metro, o las funciones hover que alternan con la clase control_hover.

Código :
   function appendControls()
   {
       var str = "";
       for(var i=0;i"+(i+1)+"";

       str = str+"";

       root.after(str);

       controls = root.parent().find(".controls li");
       controls.first().addClass("control_active");

       controls.bind({
           click    : function() { setImage($(this).index());    },
           mouseover: function() { $(this).toggleClass("control_hover"); },
           mouseout : function() { $(this).toggleClass("control_hover"); }
       });
   }


Configuraci�n de la imagen


El Slider est� casi completo ahora hay que implementar el m�dulo setImage. El mismo tomar� el par�metro index y animar� la imagen. 

En primer lugar comprobaremos si in_animation se establece en true. De ser as�, ver� si el usuario ha hecho click en el mismo elemento de control, si eso es cierto volveremos, si  in_animation es false entonces haremos las siguientes tareas: Remover las clases �reset� y active de los slides, y desactivar el sistema autom�tico de slides.

Ahora el bloque de prueba (test en el html) es la condici�n especial que se cumple cuando el usuario hace click en los controles. Para esto tenemos que agregar manualmente la clase reset a la primera diapositiva. Ya que esto es necesario  s�lo la primera vez (si el usuario hace click en el control), estableceremos en false cuando los m�dulos de efectos se llaman la primera vez.

A continuaci�n agregaremos la clase reset a la diapositiva actual y active a la diapositiva que se basa en el par�metro que recibimos de index.

Se hace un fadeIn de la etiqueta span de esa diapositiva y se llama a la funci�n de efectos. Es bastante parecida a la funci�n switch.

Código :
function setImage(index)
   {
       if(in_animation == true || current.index(".JWslider ul li") == index)
           return;

       li.removeClass("reset active");

       current.find("span").hide();   

       clearTimeout(image_timer); // Manual Override...

       if(first_bool==true)
       {
           li.first().addClass("reset");
       }
       current.addClass("reset");
       current = li.eq(index).addClass("active");
       current.children().hide();
       current.find("span").fadeIn(700);   
       override = true;
       effects();
   }


 Arranque de los motores


Por lo tanto, todo est� listo! Vamos a arrancar nuestro slider llamando a la funci�n de efectos con la duraci�n que se define en la opci�n.

Código :
image_timer = setTimeout (function() {effects();}, options.time); / / A partir de la presentaci�n de diapositivas


[nota:0d13b4b296]Todo el c�digo anterior a este fragmento de c�digo se ajusta dentro de la funci�n init; [/nota:0d13b4b296]

 Aplicar el generador de n�meros aleatorios
Ahora vamos a implementar una funci�n sencilla que genera una matriz de n�meros. Esta funci�n est� fuera el plugin de jQuery.

Código :
function random_array(maxn)
   {
       var array = new Array();
       var temp,i,flag=true;
       var index =0;
       while(index


Aunque nuestro slider est� completo, cuando Javascript est� desactivado y todo falla, las im�genes se muestran todas fuera de lugar. Para eso podemos agregar una peque�a correcci�n mediante CSS.
Lo que se hace entonces es agregar un div wrapper (contendor) y estilizarlo un poco. El estilo para este elemento ser�a el siguiente:

Código :
 #wrapper {height: 410px; overflow: auto;}


Si est� activado JavaScript, f�cilmente podemos cambiar esto mediante la funci�n CSS:

Código :
$(function(){
       $("#wrapper").css({height:"auto" , overflow:"visible"}); // Restablecer de nuevo 
       $("#test").JWslider();
   });


Eso es todo.	

Ver Demo - Archivos

Pasar HTML a plantilla base en PHP usando Include

elmaluf — Tue, 24 Apr 2012 08:20:50

Muchos de nosotros hemos utilizado los Templates de Dreamweaver con la esperanza de facilitarnos, a futuro, la tarea de hacer cambios en partes de nuestras webs. As�, por ejemplo, si necesitamos agregar un bot�n al men� de un sitio de 40 p�ginas, hacemos dicha modificaci�n en el template, para no tener que cambiarlo en todas las p�ginas, lo que nos demandar�a un rato muy largo.

Sin embargo, las templates de Dreamweaver pueden no ser siempre la mejor soluci�n ni la m�s f�cil de administrar. Es por eso que resulta mejor maquetar nuestras plantillas en un solo archivo y luego dividirlo en partes: encabezado, menu, sidebar, footer, etc., como hace Wordpress. Esto nos permite un mayor control sobre los elementos que componen nuestras p�ginas.

Vamos a ello:

Supongamos que creamos un archivo index.html, que contiene lo siguiente:

Código :




   
   Titulo de la pagina






Inicio
Qui�nes somos
Contacto









Aqu� va el t�tulo de la p�gina
Aqu� va alg�n texto y m�s abajo ir�an im�genes




Aqu� van algunos links o publicidad




Aqu� pueden ir los datos de contacto

Bien, esto es lo b�sico, si quisi�ramos crear una segunda p�gina, digamos quienes_somos.html, simplemente grabar�amos como y, conservando la misma estructura, cambiar�amos los contenidos, principalmente el del div principal (wrapper).

Pero, si el d�a de ma�ana tuvi�ramos que cambiar los datos del sidebar, el pie, el men�, etc., deber�amos cambiarlos en cada p�gina. Para facilitar las cosas -y de paso no usar plantillas Dreamweaver- vamos a dividir las partes de la p�gina en varios archivos y luego llamarlos con la sentencia include() de PHP.

Lo primero ser� renombrar nuestro index.html a index.php. Luego, podr�amos copiar, por ejemplo, el men� del sitio a un archivo llamado menu.php, que contendr�a s�lo lo siguiente:

Código :



Inicio
Qui�nes somos
Contacto

Luego, volviendo a nuestro index.php, borrar�amos el c�digo que acabamos de copiar y, en su lugar, pondr�amos:

Código :

Con esto tan simple, aparece el men� como si lo tuvi�ramos en la misma p�gina.

Luego, har�amos lo mismo con todas las otras partes, creando los archivos respectivos a cada secci�n del dise�o que se repite en cada p�gina:

encabezado.php
sidebar.php
footer.php

Y reemplazar�amos el c�digo en index.php, quienes_somos.php, contacto.php, etc., por su respectiva llamada

Código :

As�, cuando necesit�ramos agregar un bot�n en el men�, una publicidad en el sidebar o cambiar los datos de contacto en el footer, simplemente acudir�amos a los archivos espec�ficos, con lo cual estos cambios se mostrar�an en todas las p�ginas.

Si alguien no desea utilizar la extensi�n php en los archivos de sus sitio web, puede simplemente renombrarlos mediante un archivo .htaccess.

Ruta est�tica por defecto en Redes

arumadigital — Tue, 24 Apr 2012 07:51:25

En este videotutorial, repasaremos el formato y la teor�a que conforman la aplicacion de la conocida ruta est�tica por defecto ( Quad Zero ) y c�mo nos servir� de apoyo en multitud de configuraciones de nuestras topolog�as de Red, haciendo la funci�n de puerta de salida, para todos los paquetes sobre los que el dispositivo desconozca su red de destino y en la reducci�n de configuraciones y tama�o de las tablas de rutas, debido a la simplificaci�n de su ID, m�scara de red y el �mbito sobre el que se aplica.

Saludos.

Adobe CS6 y Adobe Creative Cloud: Resumen de novedades

Freddie — Mon, 23 Apr 2012 15:56:30

Adobe hoy anunci� Adobe Creative Suite 6 y Adobe Creative Cloud. Adobe CS6 trae mejoras a toda la gama de productos (hasta Fireworks! <3) y Creative Cloud es varias cosas: Una nueva estrategia de precios, un sistema tipo "dropbox" para compartir contenido y una serie de apps que corren en tablets y guardan en la "nube".

Los mensajes principales son: Crear apps nativas para m�viles y tablets sin programar. Exportar HTML5 f�cil. Hacer todas las apps gr�ficas m�s veloces. Cambiar el modelo de pago por software a un modelo de suscripci�n como servicio.

Puedes ver todos los detalles en tiempo real del cubrimiento si sigues la cuenta de Twitter @cristalab.

Adobe Photoshop CS6

Dos cosas resaltan del nuevo Photoshop: Un aumento gigantesco en rendimiento y velocidad (al fin!) que le permitir� correr incluso en maquinas antiguas y una mejora sobre todos sus algoritmos de recreaci�n de bitmaps.

En Photoshop CS5 vimos los filtros "content aware" y su capacidad de rellenar una fotograf�a con patrones similares ultrarealistas al querer hacer retoques o borrar detalles. Ahora "content aware" es extendido a cosas como fotos panor�micas o con filtros "ojo de pescado" y otros casos donde las fotograf�as pierden detalle angular.

Ah y ahora la interfaz se parece a Premiere, gris oscuro. No est� mal. Photoshop sigue siendo la joya de la corona, titulo que en un pasado comparti� con Flash.

Adobe Photoshop Touch

Un Photoshop para iPad y tablets Android, optimizado para usarlo con dedos o "stylus gordos". Tiene todas las capacidades b�sicas: Capas, efectos, selecci�n inteligente, filtros, brochas y hasta los algoritmos "edge aware" y "content aware" para no necesitar la precisi�n de pixel de un desktop. Genera archivos .psd que puede guardar en la "nube" de Creative Cloud o permite compartir los resultados a la c�mara del dispositivo, Facebook o por email.

Y cuesta 10 d�lares.

Adobe Premiere Pro CS6

Puedo resumirlo en una frase: Premiere CS6 es un editor de video con el poder de Photoshop. La mayor�a de los filtros "content aware" ahora son aplicables a videos en movimiento y gracias a "Mercury", el nuevo motor gr�fico de Adobe, los cambios se ven casi al instante. Premiere tambi�n incluye la detecci�n de profundidad 3D de Photoshop y un "live preview" de efectos y clips que es muy similar al de iMovie o Final Cut Pro.

Adobe Flash CS6

Flash CS6 se siente m�s como un CS5.5.1, pero es entendible dado el serio recorte de presupuesto que sufri� el equipo de Flash Platform el 2011. Flash CS6 ahora puede exportar animaciones b�sicas a HTML5 de manera transparente, as� como compilar de manera nativa a iPhone, iPad y Android, incluyendo el uso de Stage3D.

La exportaci�n de Flash a HTML5 estar� optimizada para CreateJS, un framework de creaci�n de "experiencias interactivas" en HTML5, competencia de ImpactJS o, en cierto modo, jQuery. Especializado en animaciones, audio y video. Creado por Grant Skinner.

Flash quiere ser LA herramienta para crear juegos y experiencias multimedia (como libros interactivos para ni�os) en m�viles y tablets. Sea en el navegador o como app nativa. �Lo lograr�? Por primera vez hay alternativas, pero Flash seguir� peleando fuerte.

Un -1 para Adobe por hacer el demo de Flash a HTML5 creando un intro, eso s�.

Adobe Dreamweaver CS6

Conozco pocas personas que sigan usando Dreamweaver, pero para los que les gusta, DWCS6 trae un asistente para crear Responsive Design, llamado "Fluid grid layout". Tambi�n incluye soporte nativo a jQuery Mobile, transiciones CSS3 y la exportaci�n directa de Phonegap.

Dreamweaver aspira a convertirse en el IDE de Phonegap para creaci�n de apps m�viles al igual que Flash Builder 4.6 es el IDE de Flash para juegos m�viles.

En las cosas pro: Live View de Dreamweaver ahora usa un Webkit actualizado. Ya era hora.

Adobe InDesign CS6

Todo el mundo est� migrando del papel a la pantalla y este es un equipo de Adobe que s� supo reaccionar al cambio. InDesign CS6 ahora puede crear revistas y libros interactivos para tablets sin necesidad de escribir una sola linea de c�digo.

Capacidades como Layout Liquido, inserci�n de contenido externo (videos, Flash, HTML, etc) y forms de PDF se combinan con la habilidad m�gica de exportar tu dise�o, en un click, como una app nativa para iPhone, iPad o Android gracias a Adobe Digital Publishing.

Aplausos a un equipo dentro de Adobe que ha sabido responder al futuro con buen PR, buenas herramientas y buen contacto con la comunidad.

Adobe Fireworks CS6

Fireworks es el equivalente al hermano gemelo de Bart Simpson. Vive en el �tico encerrado, le dan cabezas de pescado y nadie quiere hablar de �l, m�s que para mantenerlo con vida. Nada se dijo de esta herramienta, mi favorita de todas. Fireworks no compite con Photoshop, lo complementa siendo el mejor entorno para combinar bitmaps, vectores y areas sensibles, que luego pueden ser exportadas como prototipos para webs o apps.

Fireworks CS6 ahora puede: Exportar CSS "limpio" analizando el dise�o, crear themes para jQuery Mobile, correr m�s r�pido con Mercury. Y ya. Eso es todo. Gracias por las cabezas de pescado.

En sintesis: Not bad

Desde afuera, parec�a un lanzamiento aburrido, pero Adobe tuvo anuncios muy interesantes. El m�s importante de todos, en mi opini�n, es la migraci�n a un modelo "Software as a Service" con la suscripci�n de Creative Cloud.

Extra�� mucho menciones a Fireworks o Illustrator, pero entiendo que quer�an limitarse a mostrar las apps m�viles y los pesos pesados que generan dinero real dentro de Adobe.

La pregunta es para ustedes �Vale la pena CS6? �Lo comprar�n y usar�n? �Migraron a otra plataforma? �O seguir�n usando alguna versi�n vieja de Adobe Creative Suite?

Todas las im�genes de este art�culo fueron creadas y optimizadas con Fireworks CS5

M�todos del Objeto Date de Javascript

Abducted — Mon, 23 Apr 2012 12:31:50

En este tutorial aprenderemos los m�todos del objeto Date de javaScript, analizaremos todos y cada uno de ellos, usaremos ejemplos pr�cticos , e intentaremos comprender de manera fugaz los m�todos set y get de los objetos tambi�n aprenderemos a trabajar con fechas, mediante la realizaci�n de 2 sencillos ejercicios.

La decisi�n de hacer un tutorial sobre el objeto Date, siendo una cosa tan vista y con tanta informaci�n publicada en la red, ha sido, que en Clab no he visto ning�n tutorial concreto sobre ello, y veo a gente de vez en cuando preguntar cosas sencillas sobre las fechas y c�mo trabajar con ellas. Adem�s, as� aprovecho y me vale de introducci�n al tutorial que estoy desarrollando, para crear un calendario en jQuery desde cero, de modo que los interesados estad atentos.

�Qui�n deber�a leer este tutorial y qui�n no?

Caso A: Si de vez en cuando vas andando por la calle, y oyes una voz susurrar a t� o�do ddddaaaatttteee, y eso te causa escalofr�os incontrolables. No te preocupes, es buena se�al, tu eres el target perfecto de este tutorial.
Caso B: Si est�s buscando informaci�n sobre el objeto Date, pero para otro lenguaje, igual no te viene mal, echarle 15 minutillos a este tuto, y debido a las similitudes entre los lenguajes igual le sacas provecho y todo.

1. El objeto Date

Para comenzar vamos a ver c�mo almacenar un objeto date con la fecha actual en una variable y tambi�n veremos que nos muestra la consola de depuraci�n si imprimimos esa variable.

Código :

//Creamos una variable y almacenamos la fecha de hoy (par�ntesis vac�o)
var fechaHoy = new Date();
//Imprimimos la variable en la consola
console.log(fechaHoy);

Si quisi�ramos configurar una fecha diferente a la actual, le pasar�amos los par�metros a Date de la siguiente manera:

Código :

var fechaRequerida = new Date(a�o, mes, d�a, horas, minutos, segundos, milisegundos)

//O con un total de milisegundos que contar�n a partir del 1 de enero de 1970
//Por ejemplo 1334968890477, estar�a dentro del 21 de Abril de 2012
var fechaPorMilisegundos = new Date(1334968890477)

�C�mo funciona el objeto Date?

Aqu� hay varias cosas a tener en cuenta:

El m�nimo de variables que se le pueden pasar al objeto Date para que funcione correctamente son 2, el a�o y el mes, introducidos �stos, a todos los que dejemos vac�os javascript los rellenar� con la fecha m�s cercana al primer milisegundo del d�a 1 del mes del a�o introducidos
Si s�lo se introduce el a�o, javascript rellenar� la fecha con el 1 de enero de 1970, que es la hora universal del objeto Date, pues le estar� sumando a esta fecha entre 1 y 9999 milisegundos que ser�n los a�os que pong�is
Los meses van de 0 a 11, es decir, 0 = enero, 11 = diciembre
Los d�as del mes funcionan normal, del 1 al 31
Los segundos y minutos van de 0 a 59
Los milisegundos van de 0 a 999

Bien, vamos tambi�n a imprimir, nuestra fecha requerida en la consola:

Código :

console.log(fechaRequerida)

Y la consola nos imprimir� lo siguiente en ambos casos:

Date

Que no es ni de lejos lo que queremos ver, aun as� sabemos que contiene una fecha, pues nos lo est� diciendo la consola. As� que vamos a ver los m�todos y al final sabremos c�mo trabajar con el objeto date.

2. Los m�todos del objeto Date

�Qu� son los m�todos de un objeto?

Que nadie se asuste, los m�todos son simples funciones incluidas dentro de un objeto, que desempe�an diferentes acciones.
Imaginemos que tenemos un robot, este ser� nuestro objeto Abducted. Abducted tiene programado un m�todo que le hace decir algo, y otro que le dice lo que debe decir, vamos a verlo en pseudo-c�digo:

Código :

Abducted {
   private var tipoDeFrase:Frase = 'una parida';
   
   function get decirCosa ():Frase {
      return tipoDeFrase
   }
   
   function set queDecir (nuevoTipoDeFrase:Frase):void {
      tipoDeFrase = nuevoTipoDeFrase
   }
}

Código :

//Ok, ahora t� me ordenar�as:
Abducted.decirCosa()
//Y yo te responder�a cual esclavo:
'van 2 y se cae el de en medio'

//Como ves te estar�a diciendo un parida, pues es lo que tendr�a configurado por defecto.

//Ahora bien, t� podr�as ordenarme:
Abducted.queDecir('algo inteligente')

//Si despu�s me volvieras a ordenar:
Abducted.decirCosa()
//A diferencia de la vez anterior, yo te responder�a:
'No hay nada de malo en pasar por tonto, si en realidad lo que uno est� haciendo es inteligente'

Como veis los m�todos o funciones get sirven para pedirle datos a Abducted, sin embargo los set nos valen para cambiar una variable o propiedad de Abducted.
Espero que os haya gustado mi explicaci�n casera breve e incompleta, sobre qu� son los m�todos get y set de un objeto. Y si he conseguido expresarme con claridad, veremos mucho m�s r�pido los m�todos a continuaci�n.

Tipos de m�todos del objeto Date

Vamos a intentar dividir los m�todos del objeto Date en 4 grupos (esta sub-divisi�n no es ninguna convenci�n ni nada parecido, es simplemente que me parece m�s sencillo explicarlo as�, si s� son una convenci�n, pues bueno, entonces he pensado lo mismo que muchos):

A. M�todos para obtener o cambiar los valores del objeto Date
B. M�todos para obtener fechas lectibles
C. M�todos para trabajar con fechas en milisegundos
D. M�todos desfasados

A. M�todos para obtener o cambiar valores del objeto Date

Vamos a ver r�pidamente los nombres simples de estos m�todos (as� no se pueden usar).

FullYear
Month
Date
Day
Hours
Minutes
Seconds
Milliseconds

Todos estos m�todos se pueden usar de 4 maneras, 2 formas de get y 2 formas de set, a excepci�n de Day que s�lo se pueden usar los get.

Voy a tomar como ejemplo Date y Day. Los get los podemos usar de 2 maneras:

Código :

getDate()
getUTCDate()

getDay()
getUTCDay()

Y los set se usan igual, pero como acabo de explicar que los Day son los �nicos que no tienen set, nos quedamos sin ellos en este ejemplo ya que no existen como m�todos:

Código :

setDate()
setUTCDate()

Bien, alguno se preguntar� �y qu� maldita diferencia hay entre poner UTC o no ponerlo?. Como trabajamos con fechas, tenemos que tener en cuenta que ahora mismo no es la misma hora en todo el mundo. Por lo tanto cuando trabajemos con fechas, la diferencia entre ponerlo o no, radica en que si no se pone estar�s usando tu franja horaria (que es lo m�s normal), y si lo pones pedir�s esa fecha en la hora universal (UTC - Universal Time Coordinated), que es GTM+0 (La del meridiano 0 o meridiano de Greenwich)
Wikipedia UTC

Ahora veamos a qu� dato dentro de una fecha corresponde cada uno de los m�todos que acabamos de ver, e iremos viendo ejemplos:
(Los links a partir de aqu�, son links a ejemplos pr�cticos en los que podr�is usar los m�todos a vuestro antojo)

FullYear

Código :

//Obtiene el a�o en 4 d�gitos
getFullYear()
getUTCFullYear()
//Configura la fecha a partir de a�o
setFullYear(a�o, mes, diaMes)
setUTCFullYear(a�o, mes, diaMes)

Month

Código :

//Obtiene el mes (de 0 a 11)
getMonth()
getUTCMonth()
//Configura la fecha a partir del mes
setMonth(mes, diaMes)
setUTCMonth(mes, diaMes)

Date

Código :

//Obtienen el d�a del mes (de 1 a 31)
getDate()
getUTCDate()
//Configuran la fecha con el d�a
setDate(diaMes)
setUTCDate(diaMes)

Day

getDay()

getUTCDay()

Código :

//Obtienen el d�a de la semana (de 0 = Domingo a 6 = s�bado)
getDay()
getUTCDay()

Hours

Código :

//Obtienen las horas (de 0 a 23)
getHours()
getUTCHours()
//Configuran la hora a partir de las horas
setHours(horas, minutos, segundos, milisegundos)
setUTCHours(horas, minutos, segundos, milisegundos)

Minutes

Código :

//Obtienen los minutos (de 0 a 59)
getMinutes()
getUTCMinutes()
//Configuran la hora a partir de los minutos
setMinutes(minutos, segundo, milisegundos)
setUTCMinutes(minutos, segundos, milisegundos)

Seconds

Código :

//Obtienen los segundos (de 0 a 59)
getSeconds()
getUTCSeconds()
//Configuran la hora a partir de los segundos
setSeconds(segundos, milisegundos)
setUTCSeconds(segundos, milisegundos)

Miliseconds

Código :

//Obtienen los milisegundos (de 0 a 999)
getMiliseconds()
getUTCMiliseconds()
//Configuran la hora a partir de los milisegundos
setMiliseconds(milisegundos)
setUTCMiliseconds(milisegundos)

setTime()

Código :

//setTime nos vale para configurar una fecha sumando o restando x milisegundos al milisegundo 1 del 1 de enero de 1970
//as� si un d�a tiene 86.400.000 milisegundos, haciendo esto
var mas1Dia = new Date();
mas1Dia.setTime(86400000);
//Si imprimi�ramos mas1Dia de una manera lectible, ver�amos que mas1Dia = 2 de enero de 1970
console.log(mas1dia.toDateString());
DEVUELVE--> Fri Jan 02 1970

B. M�todos para obtener fechas legibles

Bueno, ya hemos visto como configurar y modificar el objeto date, y obtener datos precisos de �l, ahora vamos a ver c�mo obtener estos datos de tal manera que casi cualquier humano, pueda leerlos. Los m�todos para conseguir esto sin morir en el intento, siempre devuelven un string, son los siguientes:

Ahora que hemos visto sus nombres (y alguno hasta habr� trasteado con los ejemplos pr�cticos), vamos a generar una fecha de hoy y a pasarla por cada uno de los m�todos y veremos lo que obtenemos. A partir de ahora la fecha "Hoy" que se usar� para los ejemplos y ejercicios ser� el 21 de Abril de 2012 y me encuentro en Madrid, Espa�a, las horas nos dan m�s o menos igual, aunque ahora mismo es muy, muy tarde .

Código :

//Creamos la fecha de hoy
var fechaDeHoy = new Date()

//toString() devuelve el objeto completo en nuestra franja horaria
console.log(fechaDeHoy.toString());
//SALIDA ---> 'Sat Apr 21 2012 04:50:14 GMT+0200 (Hora de verano romance)'

//toString() devuelve el objeto completo en GMT+0 � UTC
console.log(fechaDeHoy.toUTCString());
//SALIDA ---> 'Sat, 21 Apr 2012 02:50:14' GMT'

//toLocaleString() devuelve el objeto completo, de acuerdo a las convenciones locales
console.log(fechaDeHoy.toLocaleString());
//SALIDA ---> 'Sat Apr 21 2012 04:50:14' GMT+0200 (Hora de verano romance)'

//toTimeString() devuelve las horas minutos y segundos y franja horaria
console.log(fechaDeHoy.toTimeString());
//SALIDA ---> '04:50:14' GMT+0200 (Hora de verano romance)'

//toDateString() devuelve el d�a de la semana, d�a del mes, el mes, y el a�o
console.log(fechaDeHoy.toDateString());
//SALIDA ---> 'Sat Apr 21 2012'

//toLocaleDateString() devuelve el d�a de la semana, d�a del mes, el mes, y el a�o, de acuerdo a las convenciones locales
console.log(fechaDeHoy.toLocaleDateString());
//SALIDA ---> 'Saturday, April 21, 2012'

//toLocaleTimeString() devuelve las horas minutos, segundos y franja horaria, de acuerdo a las convenciones locales
console.log(fechaDeHoy.toLocaleTimeString());
//SALIDA ---> '04:50:14'

//toISOString devuelve la fecha formateada con el starndard ISO
console.log(fechaDeHoy.toISOString());
//SALIDA ---> '2012-04-21T02:50:14.007Z'

//toJSON devuelve la fecha formateada como fecha JSON
console.log(fechaDeHoy.toJSON());
//SALIDA ---> '2012-04-21T02:50:14.007Z'

C. M�todos para trabajar con fechas en milisegundos

Los siguientes m�todos nos devolver�n milisegundos y todos ellos estar�n basados en torno a la fecha universal del objeto Date de la que ya hemos hablado con anterioridad.
(No os asust�is, al final del tuto en los ejercicios crearemos una sencilla funci�n que nos ayudar�n mucho en nuestros c�lculos con milisegundos)
Estos m�todos son:

Vale, vamos a ver de r�pidamente c�mo usarlos y que obtenemos de cada uno, en la �ltima parte del tuto ya trabajaremos con las fechas

Código :

//Primero creamos una fecha con el d�a de "Hoy".
var fechaHoy = new Date();

//1� - getTime() - sin par�metros
console.log(fechaHoy.getTime());
//SALIDA -->  1334968890477

//2� - UTC(a�o, dia, mes) - 3 par�metros
console.log(Date.UTC(2012, 21, 3));
//SALIDA -->  1380758400000

//3� - valueOf() - sin par�metros
console.log(fechaHoy.valueOf());
//SALIDA -->  1334968890477

//4� - parse('fecha en string') - 1 par�metro
console.log(Date.parse('april 21,  2012'));
//SALIDA -->  1334959200000

//Hasta aqu� todas las salidas que hemos recibido, son la cantidad de milisegundos desde el 1 de enero de 1970, hasta la fecha sobre la que estemos aplicando el m�todo.

//5� - getTimeZoneOffset() - sin par�metros
console.log(fechaHoy.getTimezoneOffset());
//SALIDA -->  -120
//Este es el �nico de los m�todos que estamos viendo que no devuelve milisegundos, devuelve la diferencia en minutos entre nuestra franja horaria y la hora UTC, en mi caso, como estoy en GMT+2, -120 minutos

D. M�todos desfasados

No nos hace falta saber que hacen, lo �nico que necesitamos es que nos chirr�en los ojos si lo vemos escrito por alg�n sitio, porque seguro que nosotros no lo ponemos.

getYear()
setYear()

toGMTString()

Bueno, bueno, bueno, pues con esto hemos terminado nuestro aprendizaje te�rico del objeto Date, ahora s�lo nos queda un poquito de pr�ctica. Vamos a hacer alg�n ejercicio.

3. Ejercicios

Ejercicio1 - Ejercicios sencillos

Empezaremos con unos ejercicios sencillos que no precisen de c�lculos

Crear variable "fechaHoy" con fecha de hoy
Crear variable "fecha85" que sume 85 d�as a la variable "fechaHoy"
Crear variable "fecha187" que reste 187 d�as variable "fechaHoy"
Sumar 2 a�os a la variable "fecha85"
Restar 24 horas a la variable "fecha187"
Crear variable "fechaResto" que sea la resta de fecha85 - fecha187 y observa lo que obtienes
imprimir en la consola cada paso

Resultados:

Código :

//a)
var fechaHoy = new Date();
console.log(fechaHoy.toString());
console.log('');

//b)
var fecha85 = new Date(fechaHoy);
fecha85.setDate(85);
console.log(fecha85.toString());
console.log('');

//c)
var fecha187 = new Date(fechaHoy);
fecha187.setDate(-187);
console.log(fecha187.toString());
console.log('');

//d)
fecha85.setFullYear(fecha85.getFullYear()+2);
console.log(fecha85.toString());
console.log('');

//e)
fecha187.setHours(fecha187.getHours()-25);
console.log(fecha187.toString());
console.log('');

//f)
var fechaResto = new Date(fecha85-fecha187);
console.log(fechaResto.toString());

Ejercicio - Ejercicio medio

si alguna vez tenemos la necesidad de trabajar con milisegundos, ya sabemos c�mo obtenerlos y como configurarlos en una fecha, ahora voy a plantear una funci�n que facilite el trabajo con esos milisegundos.
Lo primero, vamos a ver que son milisegundos y que significan en tiempo.

1.000 milisegundos = 1 segundo = 1000x1
60.000 milisegundos = 1 minuto = 1000x60
3.600.000 milisegundos = 1 hora: = 1000x60x60
86.400.000 milisegundos = 1 d�a = 1000x60x60x24
31.536.000.000 milisegundos = 1 a�o = 1000x60x60x24x365

Vale pues vamos a crear una funci�n que nos convierta los milisegundos a todas esas unidades y viceversa

Código :

//La preparamos para que pueda funcionar en los 2 sentidos, convertir milisegundos a unidades y unidades a milisegundos, por lo que adem�s de la cantidad de unidades y el tipo de unidades le pasaremos un modo
function convertirMilisegundos (cantidad, unidad, modo) {
   //Configuramos la funci�n para que si no la pasamos exactamente 3 par�metros, nos d� una alerta
   if (arguments.length != 3) {
      //Preparamos la alerta
      alert('La funci�n convertirMilisegundos requiere exactamente 3 par�metros\ncantidad, unidad, modo');
      //Salimos de la funci�n sin hacer nada m�s
      return false
   }
   //Declaramos una variable vacia donde almacenaremos el valor por el que multiplicaremos o dividiremos nuestra cantidad
   var valor;
   //Detectamos la unidad a usar e inicializamos valor
   switch (unidad) {
      case 'se': valor = 1000; break;
      case 'mi': valor = 60000; break;
      case 'ho': valor = 3600000; break;
      case 'di': valor = 86400000; break;
      case 'an': valor = 31536000000; break;
   }
   //Detectamos el modo, y devolvemos la operaci�n
   switch (modo) {
      case 'mu': return catidad/valor; break;
      case 'um': return catidad*valor; break;
   }
   
}

Y la usar�amos as�, imaginad que vuestra empresa tiene 2 objetos Date con una hora de salida y una hora de entrada de un d�a cualquiera y el jefe os pide la diferencia en minutos y d�as, despu�s os dice que multipliqu�is esas horas por 5 d�as que tiene la semana y se lo devolv�is en milisegundos para saber cu�nto hab�is vagueado en el trabajo esta semana. Nosotros obedecemos como un perrito faldero.

Código :

//Primero tenemos los 2 objetos Date que la maldita m�quina de fichar del curro no perdona a la hora de comer
var horaA = new Date(2012, 3, 21, 14, 00, 00);
var horaB = new Date(2012, 3, 21, 18, 26, 35);
//Como ver�is nos hemos retrasado un poco con la siesta

//Bien, almacenamos las 2 fechas como milisegundos en nuevas variables
var milisecsA = horaA.getTime();
var milisecsB = horaB.getTime();

//Y ahora a la fecha mayor le restamos la menor, para obtener el intervalo de milisegundos que hay entre las 2
var milisecInter = horaB-horaA;

//Ahora nos ha pedido la diferencia en minutos y d�as
//Muy bien, pues nosotros que somos m�s eficientes y m�s chulos que nadie, escribimos:
var enMinutos = convertirMilisegundos(milisecInter, 'mi', 'mu');
console.log(enMinutos);
//SALIDA --> 266.5833333333333

var enDias = convertirMilisegundos(milisecInter, 'di', 'mu');
console.log(enDias);
//SALIDA --> 0.18512731481481481

//Y ahora nos ha pedido que lo multipliquemos por 5 y se lo devolvamos en milisegundos
var por5 = convertirMilisegundos(enDias*5, 'di', 'um');
console.log(por5);
//SALIDA --> 79975000

Y debido a nuestra eficiencia, el jefe nos perdona las siestas.
Como ver�is todo es bastante sencillo, espero que os haya gustado y que le saqu�is provecho.

Un saludo.

Tracking de fondo para efectos en After Effects

arumadigital — Fri, 20 Apr 2012 12:12:33

En este videotutorial de After Effects comprobaremos c�mo adem�s de serviros en la estabilizaci�n de nuestras tomas, la utilizaci�n de la herramienta rastreador nos ayudar� a capturar el movimiento de los elementos para aplicarlo sobre los efectos, de forma sencilla y ahorr�ndonos trabajo de animaci�n.

Usaremos el fondo de un video como referencia del proceso en el trackeo, adem�s de incluir un efecto sobre la capa, para aplicar posteriormente los datos capturados, corrigiendo el movimiento en los puntos m�s complicados.

Saludos.

Rigging de ojos en 3D Maya

arumadigital — Thu, 19 Apr 2012 11:50:46

Cualquier buen animador sabe que la mayor parte del resultado de las expresiones faciales de un personaje, se recibe a trav�s de su mirada y para su correcto control, aplicando estas ligeras y sutiles variaciones de forma efectiva al conjunto, usaremos nuestro software Maya para crear el sistema de Rig de los ojos, adem�s de incluir atributos adicionales, que aumentar�n nuestro control.

Saludos.

Cartel publicitario 3D en Illustrator

arumadigital — Thu, 19 Apr 2012 11:45:34

Si en alguna ocasi�n, hemos intentado con las herramientas 3D de Illustrator, crear extrusiones de grosor variable de varios elementos, nos habr�n surgido problemas, debidos a la unificaci�n del proceso de la perspectiva, por lo que aprenderemos a separarlos y expandirlos correctamnete, ajustando la creaci�n y obteniendo diferentes grosores y profundidades con una perfecta asignacion del punto de fuga.

Saludos.

Rigging facial con huesos en 3D Autodesk Maya

arumadigital — Wed, 18 Apr 2012 15:22:10

Haremos uso de Maya y su herramienta de huesos, para a�adir elementos individuales de control, que nos ayudar�n como manejadores de detalle adicional sobre otros sistemas de animaci�n, como los Blend Shapes para desarrollo facial y otros espec�ficos de otras zonas

Asignaremos nuevos controles y conexiones para ajustar la deformaci�n y redirigirla a nuestro gusto, adem�s de aplicar un Skin en la malla del modelo, para controlar y deformar los v�rtices y las caras como deseemos.

Saludos.

Branches, SSH y flujo de trabajo con Git y Github (II)

raymicha — Wed, 18 Apr 2012 06:45:28

Aqu� les dejo la segunda y ultima parte de mi introducci�n a Git y Github donde hablamos sobre Branches y tambi�n les ense�o a realizar un workflow unido al servidor con SSH.

Este es el libro que les dejo para que puedan revisar con detenimiento m�s comandos de git. Lo que les mostr� ahora es la forma b�sica en c�mo se trabaja y lo que van a usar en su d�a a d�a: Pragmatic Guide to Git de Travis Swicegood.

Les dejo tambi�n el Cheat Sheet de la ayuda de Github.

Recuerdo que alguien me pregunt� c�mo eliminar archivos de git. El comando es:

Código :

git rm

Quisiera agradecer infinitamente a Pablo Rigazzi (@prigazzi) por su ayuda, sin �l este videotutorial no ser�a tan genial. Muchas gracias Pablo, soy tu fan

Y sin m�s espero sus comentarios y que les guste mucho. Hasta los pr�ximos videos!

Responsive Design: Dise�o receptivo y adaptivo en la Web

lysergtk — Tue, 17 Apr 2012 13:11:12

El Responsive design, dise�o receptivo y adaptivo o como quieran traducirlo es una tendencia totalmente nueva dentro del dise�o Web, la cual consiste en reacomodar los elementos que componen el website seg�n el tama�o de dispositivo que la reproduzca.

�Por qu� debo implementarlo en dise�o web?

Porque responsive design tiene que ser pensado desde el concepto de dise�o de nuestro website. Este dise�o debe tener un concepto de fluido entre los elementos que la componen para as� lograr el perfecto flujo al momento de codificarlo. S�, si s�lo dise�as webs, lo mismo debes implementar el concepto en tus dise�os.

�Entonces no puedo hacer responsive design a mi website actual?

Dependiendo de tu website puede que sea m�s o menos doloroso. En el peor de los casos est�s usando un cms con una plantilla pre-hecha que muy probablemente tenga el c�digo muy desordenado y lo �nico que te ganes sean dolores de cabeza modificando el flujo del mismo.

No obstante te invito a que des el siguiente paso y hagas un dise�o a la medida, es decir que desde ya, pienses qu� es lo que va a tener tu website y en base a eso planear su implementaci�n para tener el flujo correcto y te sientas un h�roe por haberlo logrado (yo soy un h�roe).

�Y c�mo es un dise�o responsive?

Entra ahora mismo a tu website favorito y redimensiona el navegador. Si aparece un scroll horizontal que impide que veas parte del contenido de la web, esta no cuenta con responsive design..

Ahora entra a mejorando.la y redimensiona el navegador y mira como todo el contenido se reacomoda.

Esto es responsive design y se logra con un conjunto de t�cnicas de css3 y en especial las mediaqueries de las cuales hablaremos en siguientes tutoriales. Esto no s�lo es agregarle algo m�s a tu web para que sea m�s fancy, es una necesidad hoy en d�a ya que la navegaci�n movil es cada vez m�s grande y con m�ltiples resoluciones, por lo cual debemos tener un dise�o que se adapte a todo.

Si buscas inspiraci�n para tu propio responsive design entonces puedes visitar mediaqueri.es donde encontrar�s numerosos responsive designs.

La idea dentro de responsive design es que cuando pienses en tu dise�o tengas una idea clara de los bloques que lo conformar�n, luego sea super sencillo trabajar en una maquetaci�n eficaz que mantenga en flujo correcto de la estructura, as� que debes hacerle ajustes ligeros a los bloques del dise�o dependiendo del target.

�Y ahora debo hacer cuatro dise�os?

Tener los dise�os listos antes de su implementaci�n ayuda mucho a tener la mente clara al momento de codificarlo. Pero m�ralo bien, no son cuatro dise�os, es solo uno (tener cuatro dise�os ser�a una muy mala idea) lo que realmente se hace en los �dise�os� adicionales es solo reacomodar el contenido que ya mostraba el �dise�o� principal, esto es un correcto responsive design.

Yo s� que te has dado cuenta...
Para este punto espero ya hayas echado un vistazo a mediaqueri.es

�Te has fijado que el flujo de los elementos es similar?

Por supuesto, porque llevan la filosof�a responsive design desplazando los elementos para una mejor visualizaci�n.

Es muy similar, pero no igual

Yo no sab�a c�mo categorizar estas diferencias y en realidad era consciente que se aplicaban diferentes estrategias para acomodar los elementos pero simplemente no les daba un nombre.

Desde que digo que las webs que hago est�n con html5 la gente me mira m�s bonito.

Entonces cuando digo que mi website tiene responsive design soy una persona m�s cool pero yendo un paso m�s adelante y basadome es este art�culo lukew.com y estando muy de acuerdo con �l es que ahora yo puedo categorizar los patrones dentro del responsive desgin:

Mostly Fluid � m�s o menos fluido

Este quiz� es el m�s popular dentro del responsive design ya que que un muy protagonista primer bloque seguido de otros 2 con menos relevancia y este al momento de tener un dispositivo se adapta siguiendo el flujo que hay en este.

�D�nde he visto algo parecido? ah! mejorando.la

Column Drop � ca�da de columna

Quiz� su cms favorito lleve un aspecto de flujo muy similar a este. Bienvenido, este es el responsive design que buscas.

Este tipo de dise�o se adapta hasta el punto en el que no se pueden manejar las tres columnas en una sola fila, entonces la columna (con el contenido m�s random) pasa a la parte inferior y luego el flujo se sigue desarrollando hasta llegar a una sola columna.

Layout shifter � movimiento de estructura

Este probablemente sea la forma de decirle innovaci�n al responsive design ya que ahora s� cambia ligeramente el dise�o, pero no por esto est� mal, por el contrario, esta estructura est� orientanda a dar una experiencia diferente en dispositivos de pantallas m�s reducidas para invitar al usuario a la navegaci�n en el website.

D�nse cuenta que es muy usada para reacomodar menus y header.

Tyny tweaks � peque�os cambios

Esto es magia pura para los microsites que s�lo brindan informaci�n referencial del producto e invitan a una acci�n r�pida, por tanto la navegaci�n es casi nula y el responsive desgin s�lo adapta los contenidos a la pantalla sin casi hacerle cambios.

Off canvas � fuera del canvas

Estoy seguro es el m�s popular en las webapps que no siempre tienen un dise�o wow sino m�s bien guardan muchas informaci�n y m�ltiples opciones por lo que tienen que recurrir a esta clase de responsive design.

Consiste en s�lo tener un bloque de informaci�n general que no distraiga mucho (como el timeline de facebook en su aplicacion m�vil) y guardan las dem�s opciones o men�s en botones que suelen tener �conos para distinguirlos. Es indispensable que sean interfaces muy usables.

Quiero terminar el art�culo invit�ndote a que sigas un mini curso de responsive design que estar� impartiendo por medio de tutoriales en cristalab.com y en video por mi canal de youtube as� que si est�s interesado en conocer c�mo enfrentar estas 5 t�cnicas de responsive design suscr�bete a youtube.com/leonidasesteban

te dejo un video por si no quieres leer todo lo que esta arriba...

Curso de programaci�n de apps iPhone y Android en Bogot� y M�xico

Freddie — Mon, 16 Apr 2012 13:40:54

Este fin de semana ser� el Curso de desarrollo de apps para iPhone y Android en Bogot� y el 11 y 12 de mayo, este mismo curso estar� en Ciudad de M�xico.

Un curso donde aprender�s las tecnolog�as con las que se crean aplicaciones m�viles compatibles con iPhone, Android y iPad (Y hasta Blackberry si te interesa lo retro). Apps como Wikipedia, Machinarium y hasta Angry Birds para Facebook han sido creadas con los lenguajes que ver�s en el curso.

�Qu� necesito para ir a estos cursos?

Saber programar y querer crear apps para poder vender (o regalar) en la App Store de Apple o en el Google Play Store de Android. No necesitas m�s que los conocimientos b�sicos de programaci�n. Obviamente, si tienes tel�fonos o tablets, lleva todo el hardware que quieras para probar.

El curso de Bogot� es este fin de semana, 20 y 21 de abril. Con un valor de $440.000 pesos.
El curso de M�xico DF es el 11 y 12 de mayo. Con un valor de $2.900 pesos.

Ambos cursos pueden pagarse con tarjeta de cr�dito, Paypal o deposito bancario. Y hay descuentos si vas en grupo, llamando al tel�fono de cada curso.

Si tienes m�s de 100 clabLevel en Cristalab, puedes ir gratis llevando a alguien m�s. S�lo mandas un mail a cursos@cristalab.com y tendr�s tu entrada.

Listado con paginaci�n en jsp con AJAX y SQL SERVER

LocoTriste — Mon, 16 Apr 2012 09:13:55

Hola a todos, hoy traigo un tutorial b�sico de un listado de registros de una Base de Datos en SQL Server 2008 utilizando jsp, jquery y css3. El listado se hace mediante procedimientos almacenados, as� que veremos en primer lugar como podemos conectarnos a sql server 2008 desde jsp y como invocar a un procedimiento almacenado con par�metros desde jsp, y mostraremos los resultados utilizando la tecnolog�a AJAX ( Jquery) y modificaremos el estilo para darle una mejor apariencia utilizando css3� as� que manos a la obra.

Crear una Base de Datos en sql Server

En primer lugar lo que vamos a hacer es crear nuestra base de datos en sql server 2008, preferiblemente utilizando autenticaci�n sql Server; as� que escribimos en el analizador de consultas lo siguiente:

Código :

create database tutorial
go
use tutorial
go

Creamos la tabla CategoriaProductos:

Código :

create table CategoriaProductos
(
CodigoCategoriaProductos int not null identity(1,1),
DescripcionCategoriaProductos varchar(50) not null,
EstadoCategoriaProductos int

constraint clavecategoria primary key (CodigoCategoriaProductos)

)
go

Creamos la tabla Productos con referencia a la tabla CategoriaProductos:

Código :

create table Productos
(
CodigoProductos int not null identity(1,1),
CodigoCategoriaProductos int ,
DescripcionProductos varchar(50) not null,
PrecioProductos decimal(9,2),
SotckProductos int,
EstadoCProductos int

constraint claveproductos primary key (CodigoProductos),
constraint claveforaneaproductos foreign key (CodigoCategoriaProductos)
references CategoriaProductos(CodigoCategoriaProductos)
)
go

Y deber�a quedarnos de esta manera:

Una vez que hemos creado nuestras tablas, procedemos a llenarlas de algunos registros. Insertamos algunos registros en la tabla CategoriaProductos:

Código :

insert into CategoriaProductos values(�Bebidas�,1)
insert into CategoriaProductos values(�Lacteos�,1)
insert into CategoriaProductos values(�Cereales�,1)

Para ver los registros que acabamos de insertar en la tabla CategoriaProductos:

Código :

select * from CategoriaProductos
go

Ahora insertamos algunos registros en la tabla Productos:

Código :

insert into Productos values(1, �Inka Kola 2 Lts�,3.5, 200,1)
insert into Productos values(1, �Pepsi 1 Lt.�,3, 100,1)
insert into Productos values(2, �Leche Pura Vida�,2.5, 400,1)
insert into Productos values(2, �Leche Anchor�,2, 200,1)
insert into Productos values(2, �Leche Gloria deslactozada�,3, 100,1)
insert into Productos values(3, �Arroz Paisana 1 Kg.�,3.5, 50,1)
insert into Productos values(3, �Arroz Coste�o 1Kg.�,3, 50,1)
insert into Productos values(3, �Cereales Angel 1Kg.�,4, 50,1)

Ahora vemos los registros que acabamos de ingresar:
select * from Productos

Ahora pasamos a crear el procedimiento almacenado que me lista los Productos:

Código :

create procedure sp_gen_s_productos
@RegistrosAMostrar int,
@RegistrosAEmpezar int
as

SELECT TOP (@RegistrosAMostrar)* FROM
(
select p.CodigoProductos as codigo, p.DescripcionProductos as descripcion,cp.DescripcionCategoriaProductos as categoria,
p.PrecioProductos as precio,p.SotckProductos as stock,
ROW_NUMBER() OVER (ORDER BY p.CodigoProductos ) AS num

from Productos p
inner join CategoriaProductos cp on p.CodigoCategoriaProductos=cp.CodigoCategoriaProductos

)
AS a
WHERE num > @RegistrosAEmpezar

Para probar lo ejecutamos:

Código :

exec sp_gen_s_productos 3,0

Nos debe salir lo siguiente:

Crear un proyecto jsp

Como entonces ya creamos nuestra base de datos con las tablas correspondientes para el ejemplo, ahora procedemos a crear un proyecto jsp en la IDE que utilizaremos para este ejemplo , que es Net Beans. Ustedes pueden utilizar la que gusten pero el proyecto tendr� la siguiente estructura:

Los resaltados con amarillo, son los directorios y archivos que debemos crear, como sabemos en netbeans , el resto de archivos se crea por defecto, as� que para crear el proyecto en Net Beans nos vamos a la ficha archivo, click en Proyecto nuevo, en categor�as seleccionamos Java Web y Proyectos seleccionamos Web Application, click en siguiente y colocamos un nombre a nuestro proyecto y lo guardamos en la ruta que deseemos, click en siguiente y luego en terminar.

Para empezar a crear nuestros directorios damos click derecho sobre la carpeta Web Pages, luego click en nuevo y luego en carpeta y as� vamos creando las carpetas hasta tener la estructura de la imagen anterior, luego en la carpeta CSS hacemos click derecho y elegimos la opci�n nuevo y luego elegimos Hoja de estilo en cascada (CSS) y le ponemos de nombre estilo.

Una vez que hemos hecho esto, el siguiente paso es descargarnos el archivo de jquery aqu�, ojo, si descargan una versi�n distinta a la que yo utilic�, s�lo tienen que cambiar la referencia en el index por la versi�n que ustedes hayan descargado. Hasta hoy la �ltima versi�n es jquery-1.7.2.min.js, entonces ese archivo lo descargamos y copiamos a la carpeta js de nuestro proyecto. Asimismo tambi�n damos click derecho en la carpeta js y elegimos nuevo, luego elegimos archivos de Java Script y lo llamamos funciones. Para tener toda la estructura lista y empezar con el proceso, descargamos la siguiente imagen y la copiamos en la carpeta images.

Una vez que hemos hecho todo lo anterior procedemos a descargar el proyecto que necesitamos para conectarnos y donde est�n los m�todos de consulta a la Base de datos, as� como tambi�n el driver necesario para conectarme a SQL SERVER 2008. Podemos descargarlo aqu�, descargamos y descomprimimos las dos carpetas en la carpeta ra�z de nuestro proyecto.

En el explorador de windows copiamos las dos carpetas driver sql y jdbc y debe ver as�:

Ahora en el Net Beans nos vamos a abrir proyecto y seleccionamos el archivo jdbc de la carpeta de nuestro proyecto:

�y hacemos click en abrir proyecto. Doble click en el archivo ConectaDB.java del proyecto jdbc y cambiamos los par�metros necesarios para conectarnos: el primer par�metro driver, es la regla del driver que utilizaremos para conectarnos que lo agregaremos despu�s, el segundo la cadena de conexi�n que para este caso ser� mediante un dsn que crearemos luego de nombre dsnProductos, lo siguiente es el usuario de sql y luego su contrase�a.

Una vez que hemos modificado estos valores hacemos click derecho en el proyecto jdbc y elegimos limpiar y construir:

Ahora vamos a crear el dsn de usuario que nos permitir� conectarnos a la base de datos, para esto nos vamos a panel de control:

En el panel de control donde dice ver por, seleccionamos iconos peque�os y luego elegimos la opci�n Herramientas Administrativas.

Luego elegimos la opci�n Origenes de Datos ODBC.

Y se abre la siguiente pantalla:

damos click en agregar:

seleccionamos sql server y click en finalizar

Escribimos en nombre del dsn, una descripci�n y el servidor , para este caso local y click en siguiente:

Escribimos nuestro usuario de sql server y la contrase�a y click en siguiente:

Seleccionamos la db a la cual nos queremos conectar y click en siguiente:

Click en finalizar.

Click en probar origen de datos.

Si todo estuvo bien sale esta imagen, click en aceptar.

Como vemos nuestro DSN de usuario(dsnProductos) ha sido creado.

Lo siguiente que vamos a hacer es agregar el proyecto jdbc y la librer�a para conectarnos a sql server a nuestro proyecto turorialJSP, entonces click derecho en el nombre del proyecto y elegimos propiedades.

Click en libraries.

Click en add project para agregar el proyecto jdbc.

Seleccionamos el proyecto jdbc que hicimos las modificaci�n de conexi�n y que est� dentro de nuestro proyecto tutorialJSP y le damos click en Agregar al proyecto archivos JAR.

Aqu� ya aparece el proyecto jdbc agregado ahora hacemos click en add library.

Click en crear.

Le ponemos en nombre mssql_conect y hacemos click en aceptar.

Click en agregar archivo JAR/Carpeta.

Buscamos el archivo sqljdbc4 que est� dentro de la carpeta driver sql en la carpeta ra�z de nuestro proyecto tutorialJSP y le damos click en Agregar archivo JAR/Carpeta.

Click en Aceptar.

Como se creo la librer�a de nombre mssql_conect, ahora hacemos click en a�adir biblioteca.

Click en aceptar.

Si desplegamos la carpeta libraries de nuestro proyecto vemos las librer�as que acabamos de agregar.

Ahora que ya tenemos nuestras librer�as necesarias ya agregadas, procedemos a programar cada uno de los archivos, empezaremos programando el archivo estilo.css de la carpeta css que nos va a permitir mejorar la apariencia de nuestra p�gina:

estilo.css

Código :

body {
background-color:#F2F2F2;
font-family: verdana,arial;
font-size: 14px;
}

a{
color:#DF7401;
text-decoration: none;
}
a:hover{
color:#FFFF00;
}

#bienvenida
{
background-color: #F5F6CE;
border: 1px solid #FFBF00;
border-radius:5px;
color:#FF8000;
margin: 0px auto;
padding:10px 0 0 0;
text-align: center;

}

#menu{
background: #00BFFF;
border:1px solid #01A9DB;
border-radius: 5px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
height: 50px;
margin:0 auto;
width:50%;
-webkit-border-radius: 5px;
-webkit-border-bottom-right-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-moz-border-radius: 5px;
-moz-border-radius-bottomright: 100px;
-moz-border-radius-bottomleft: 100px;

}

li{
color:#fff;
cursor:pointer;
font-size:15px;
float:left;
list-style: none;
margin-left: 40px;

}
li:hover {
color:#F4FA58;
font-weight: bold;

}
#contenedor{
background-color:#fff;
border:1px solid #BDBDBD;
margin: 20px auto;
min-height: 300px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 70%;

text-align: center;

}
.paginadoractivo{
padding:5px 10px 5px 10px;
font-family: �Trebuchet MS�, Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#F5DAA0;
color:#000000;
border:0.5px solid #000000;
cursor:pointer;
}
.paginador{
padding:5px 10px 5px 10px;
font-family: �Trebuchet MS�, Arial, Helvetica, sans-serif;
font-size:14px;
background-color: #E7F7FF;
color:#000000;
border:0.5px solid #333333;
cursor:pointer;

}
.paginador:hover{
padding:5px 10px 5px 10px;
font-family: �Trebuchet MS�, Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#73ADD6;
color: white ;
border:0.5px solid #333333;
cursor:pointer;
}
.tablita
{
font-size: 12px;
width:90%;
text-align: left;
margin:0 auto;
border: 1px solid #E6E6E6;
border-collapse: collapse;
font-family: �Trebuchet MS�, Arial, sans-serif;
color: #ffffff;
}
.tablita caption
{
font-size: 16px;
font-weight: normal;
padding: 5px;
/* background: #73ADD6 url(�../images/fon_perfil.gif�) repeat-x;*/
border-right: 1px dotted #06C ;
background: #084B8A;
color: #FFFFFF;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tablita th
{
font-size: 13px;
font-weight: normal;
padding: 5px;
/* background: #73ADD6 url(�../images/fon_perfil.gif�) repeat-x;*/
border-right: 1px dotted #06C ;
background: #084B8A;
color: #FFFFFF;
}
.tablita td
{
padding: 4px;
color: #086A87;

}
.tablita tfoot tr td
{
font-size: 12px;
color: #ffffff;
}
.tablita tbody tr:hover td
{
/* background: #FCFDFE; */
color:saddlebrown;
background: #E0F8F7;
}

Ahora procederemos a codificar nuestro archivo Index:

index.jsp

Código :

<%@page contentType=�text/html� pageEncoding=�UTF-8″%>








JSP Page



Bienvenidos a este tutorial JSP- MSSQL SERVER 2008 � JQUERY -CSS




Inicio
Listado
Registro




Aqui se mostrara el listado de productos

Ahora procedemos a codificar el c�digo de la funci�n listarProductos en el archivo funciones.js que se encuentra en la carpeta js de nuestro proyecto:

funciones.js

Código :

function listaproductos(pagina){
var rnd = Math.random()*11;

$.post(�lib/listado.jsp�,{
rnd:rnd,
pagina:pagina
},function(data){
$(�#contenedor�).html(data);
});
}

Por �ltimo codificamos el archivo jsp que nos realiza el listado y el que recibe la variable pagina por el m�todo post en jquery, este archivo se encuentra en la carpeta lib de nuestro proyecto:

listado.jsp

Código :

<%�

Document : listado
Created on : 31/03/2012, 02:28:29 PM
Author : Jose Garcia
�%>

<%@ page import=�java.util.Vector, jdbc.*� %>
<%@page contentType=�text/html� pageEncoding=�UTF-8″%>
<%

out.println(�

�);

out.println(��);
out.println(��);
out.println(��);
out.println(��);
out.println(��);
out.println(��);
out.println(��);
out.println(��);

out.println(��);
out.println(��);
int RegistrosAMostrar=4;
int PaginasIntervalo=3;
int RegistrosAEmpezar=0;
int PagAct = 1;
String pag = request.getParameter(�pagina�);
if (pag==null || pag==�"){
RegistrosAEmpezar=0;
PagAct=1;
}else{
RegistrosAEmpezar=(Integer.valueOf(pag).intValue()-1)* RegistrosAMostrar;
PagAct=Integer.valueOf(pag).intValue();
}
%>
<%
Vector productos = Sql.consulta(�exec [sp_gen_s_productos] @RegistrosAMostrar=��+RegistrosAMostrar+��,@RegistrosAEmpezar=��+RegistrosAEmpezar+���);//nos permite ejecutar un sp con parametros para la paginacion
for (int fils = 1; fils < productos.size(); ++fils) { //recorre el vector productos con los resultados del metodo Sql.consulta
String[] unaFila = (String[]) productos.get(fils);
%>


<%

} %>
<%
String NroRegistros = Sql.getCampo(�select count(*) from Productos p �
+ � inner join CategoriaProductos cp on p.CodigoCategoriaProductos=cp.CodigoCategoriaProductos�);// obtengo la cantidad de registros actuales
int PagAnt=PagAct-1;
int PagSig=PagAct+1;

double PagUlt=Integer.valueOf(NroRegistros).intValue()/RegistrosAMostrar; //calculo cuantas paginas tendra mi paginacion
int Res=Integer.valueOf(NroRegistros).intValue()%RegistrosAMostrar;
if(Res>0){
PagUlt=Math.floor(PagUlt)+1;
}

out.println(��);
out.println(�LISTADO DE PRODUCTOSCodigo Producto Categoria Precio Stock



<%=unaFila[0]%>
<%=unaFila[1]%>
<%=unaFila[2]%>
<%=unaFila[3]%>
<%=unaFila[4]%>


�);
//principio del paginador
out.println(��);

if(PagAct>(PaginasIntervalo+1)) {
out.println(�<< Primero�);
out.println(� �);
}
for ( int i = (PagAct-PaginasIntervalo) ; i <= (PagAct-1) ; i ++) {
if(i>=1) {
out.println(��+i+��);
out.println(� �);
}
}
out.println(��+PagAct+��);
out.println(� �);
for ( int i = (PagAct+1) ; i <= (PagAct+PaginasIntervalo) ; i ++) {
if(i<=PagUlt) {
out.println(��+i+��);
out.println(� �);
}
}
if(PagAct<(PagUlt-PaginasIntervalo)) {
out.println(�Ultimo >>�);
}
out.println(��);
//fin del paginador
%>

LISTADO DE PRODUCTOS
Codigo	Producto	Categoria	Precio	Stock
<%=unaFila[0]%>	<%=unaFila[1]%>	<%=unaFila[2]%>	<%=unaFila[3]%>	<%=unaFila[4]%>

Si hemos hecho todo bien cuando hacemos click en listado de la pagina index.jsp nos aparecer� el listado en el div contenedor con su respectiva paginaci�n y nos mostrar� 4 registros por p�gina cuando hacemos click en los n�meros de p�ginas (si queremos que nos muestre m�s registros por p�gina cambiamos el valor de la variable RegistrosAMostrar en la pagina listado.jsp) y se mostrar� de la siguiente manera:

Primera p�gina del paginador:

Segunda y �ltima pagina del paginador

Espero que este tutorial les haya sido de gran ayuda

Gracias por la atenci�n brindada ..hasta otra oportunidad

Tutorial de AMFPHP y Actionscript 3

bubudrc — Sat, 05 Dec 2009 00:00:00

AMFPHP es un famoso sistema del lado del servidor para usar Remoting en PHP en conexión con Flash. En este tutorial veremos cómo instalarlo y adaptarlo a Actionscript 3, Flash CS4 y Flex.

Programaci�n orientada a objetos en Visual Basic .NET

Wyrm — Mon, 14 Sep 2009 00:00:00

Un completo manual de programación orientada a objetos en Visual Basic .NET, donde hablamos de herencia, encapsulación, polimorfismo, proyectos en VB.NET y todo lo que abarca el OOP en Visual Basic.

Tutorial de Visual Basic .NET

Wyrm — Tue, 01 Sep 2009 00:00:00

En este tutorial básico crearemos una aplicación usando los Windows Forms de .NET y el lenguaje Visual Basic .NET. Todo usando el IDE Microsoft Visual Studio 2008 y Visual Basic 2008.

Tutorial de PHP y YAML

Duilio — Mon, 24 Aug 2009 00:00:00

YAML es un formato de serialización de datos que nos permite crear archivos de variables fácilmente leíbles. En este tutorial usaremos YAML o YML para archivos de configuración en PHP.

Coloreado de dibujos en Flash

Victor-Nael — Mon, 10 Aug 2009 00:00:00

En este tutorial de coloreado digital, veremos el proceso de entintado de personajes y dibujos usando Adobe Flash como herramienta.

Efectos de sonido en FL Studio

RattaMono — Mon, 10 Aug 2009 00:00:00

Hay muchos tipos de efectos de sonido en FL Studio (antiguo Fruity Loops). En este tutorial veremos los efectos de audio Delay, Reeverb, Flanger, Phaser, Chorus, Compressor, Clipper, Fast Distortion y Vocoder.

Crear una base de datos en MySQL

Wyrm — Mon, 10 Aug 2009 00:00:00

En este tutorial veremos cómo crear una base de datos de MySQL, crear tablas y ejecutar comandos de MySQL con phpMyAdmin, sin necesidad de tener conocimientos extensos de SQL.