miércoles, 1 de agosto de 2012

Cristalab

Cristalab

Manejo de cadenas 4/4 en Python

Posted: 01 Aug 2012 04:56 AM PDT

En este videotutorial se cierra el apartado "Manejo de cadenas" en Python, analizando algunas funciones básicas bastante útiles cuando se trabaja con objetos del tipo String.

Enviar comentario

Dibujo y animación vectorial HTML5 con Raphael.js y SVG

Posted: 31 Jul 2012 03:04 PM PDT

Este tutorial es una introducción a raphael.js, una librería de Javascript que permite usar el elemento SVG de HTML5 de forma fácil e intuitiva, por lo que podrás usar gráficos vectoriales en tus aplicaciones web.

Dificultad: Media-Baja
(Lo mejor de Raphaël es que lo hace jodidamente fácil)
Compatibilidad: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ y Internet Explorer 6.0+
(WTF!?, compatible con IE6+?!)

Introducción a SVG


SVG significa Gráfico Vectorial Escalable (Scalable Vector Graphics) y se trata de un "formato" de imagen vectorial, como las imágenes de Illustrator (archivos .ai) o las de Autocad (.dwg).

Si abres un archivo SVG con un editor de texto plano verás un lenguaje de marcado, algo similar a HTML o XML.

Aunque la recomendación de la W3C sobre SVG es de hace 10 años a nadie le importó un carajo hasta que llegó HTML5 su logo 'cool' con sus importantes mejoras.

La diferencia con Canvas es que SVG maneja vectores y canvas mapas de bits. SVG sería Illustrator y canvas Photoshop.

Raphaël, javascript para vectores


Raphaël es una librería Javascript que permite manejar los elementos SVG 'like a boss'. Para usarla en nuestro proyecto sólo tenemos que descargarla de la página oficial (sólo 31kb con gzip) y cargarla en nuestro HTML como cualquier archivo js:

Código :

  <script src='http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js'></script>


El objeto Raphael

Lo primero que tenemos que crear es el objeto Raphael. Este genera un elemento SVG donde crearemos los objetos vectoriales:

Código :

  window.onload = function(){     var mesa = new Raphael(10, 15, 300, 400);  }

Así creamos un elemento SVG que estará a 10px de la izquierda y a 15px de la parte superior de la página (en posición absoluta) y que mide 300px de ancho y 400px de alto.

Si tenemos un elemento creado donde queramos embeber nuestro SVG, el constructor también acepta esta forma:

Código :

     var contenedor = document.getElementById('contenedor');     var mesa = new Raphael(contenedor, 200, 100);

Así introduce el elemento SVG dentro de la capa con id 'contenedor' con dimensiones 200px por 100px. El objeto Raphael tiene muchos métodos para manejar sus hijos, como .getById(), .remove(), o .getElementByPoint().


Los elementos

Gracias al objeto Raphael podemos crear elementos vectoriales dentro del SVG.
[nota:323fe413e8]Importante Las coordenadas que utiliza Raphael para los elementos son relativas al SVG creado, y entiende como punto 0,0 la esquina superior izquierda. Cuanto mayor es x, mayor es la distancia con el extremo izquierdo, y cuanto mayor es y, mayor es la distancia con el superior.[/nota:323fe413e8]
Existen varias formas predefinidas, por ejemplo:

  • Círculo, pasándole posición "x", posición "y" y radio

    Código :

    var circulo = mesa.circle(30, 30, 10);

  • Rectángulo, pasándole las posiciones "x" e "y" de la esquina superior izquierda y de la inferior derecha

    Código :

    var rectangulo = mesa.rect(10, 20, 50, 50);

    [nota:323fe413e8]Si le pasamos un 5º valor, indicamos el radio del borde[/nota:323fe413e8]
  • Elipse, pasándole posición "x", posición "y" y los radios horizontal y vertical

    Código :

    var elipse = mesa.ellipse(100, 100, 50, 30);

También podemos crear un elemento "path". Los paths son polilíneas de mayor complejidad que las formas básicas. Estas polilíneas se definen como Strings de la siguiente forma:

Código :

  var polilinea = mesa.path('M 50 80 120 10 230 110 130 280 z');

"M" es un comando que significa "mover a" y sitúa nuestro "cursor invisible" en el punto definido por los pares de puntos que vienen a continuación. Cada par indica la posición x e y. Los pares del ejemplo serían 50 80, 120 10, 230 110 y 130 280. "z" indica que se cierra la polilínea.

Podemos utilizar todos comandos indicados en la documentación de paths SVG de la W3C.


Atributos

Los elementos que hemos creando son elementos del DOM y podemos acceder a ellos por Javascript. Raphael nos permite cambiar los atributos de estos elementos muy fácil:

Código :

  var cir = mesa.circle(200, 200, 30);  cir.attr('fill', 'red');

Este código hará que nuestro círculo tenga relleno rojo. Si queremos cambiar varios atributos a la vez lo haremos así:

Código :

  cir.attr({'stroke-width': 10,'stroke': 'red'});

Tienes una lista de atributos en la documentación de Raphael.


Eventos y animaciones

Con Raphael.js tenemos podemos aplicar eventos a los elementos, como .click(), .dblclick(), .hover(), etc. que funcionan parecidos a los eventos de jQuery. Por ejemplo:

Código :

  cir.click(function(){     alert('Has hecho click en el círculo');  });

Además de los eventos, con Raphael tenemos un control sencillo y potente de las animaciones. Primero declaramos la animación en sí:

Código :

  var anim = new Raphael.animation({cx: 10, cy: 20}, 400, "bounce");

El primer parámetro que le pasamos son los atributos a los que queremos aplicar la animación. En este caso hemos usado cx y cy que son las variables de posición. Podríamos haber utilizado atributos como los que habíamos visto antes, por ejemplo:

Código :

  var anim = new Raphael.animation({"stroke-width":12, cx: 10, cy: 20}, 400, "bounce");

El segundo parámetro es la duración en milisegundos. El tercero la función de easing que quieras usar. Por último podemos, opcionalmente, añadir un callback.

En la web del autor hay gran cantidad de ejemplos increibles

Una vez tengamos nuestra animación, la podemos aplicar usando el método .animate() del elemento.

Código :

  cir.animate(anim);


Este es un ejemplo sencillo de todo lo que hemos visto.

En resumen


Tardé 1 hora en escribir este tutorial y 3 en reducirlo a un tamaño "normal" para un blog. Son tantas las opciones que permite Raphael y en general el SVG que podrían llenar varios capítulos de un libro. Pretendo que te sirva de introducción y que descubras con la práctica, los ejemplos y la genial documentación de la librería todo su potencial.


Bonus

En http://readysetraphael.com/ puedes convertir archivos vectoriales .SVG en Raphael.


Bonus 2

En http://g.raphaeljs.com/ encontrarás también las librerías gRaphael para la creación de gráficas a partir de raphael.js.

Si tenéis alguna duda o queréis saber más acerca de SVG y Raphaël, no dudéis en preguntarme aquí o en twitter: @ajnavajas

Enviar comentario

Efecto de cámara lenta con fusión en After Effects

Posted: 06 Jul 2012 05:22 AM PDT

En este nuevo videotutorial de After Effects estudiaremos varios métodos rápidos para recrear el efecto de cámara lenta, obteniendo resultados que a pesar de no ser viables para su uso profesional de alto nivel, nos permitirán crear composiciones interesantes y aceptables para niveles más modestos y recursos que utilizar en nuestras propias creaciones, añadiendo profundidad a cualquier material y la cercanía visual en este tipo de tomas.

Trabajaremos con un clip importado y ajustado correctamente, para no extender el ámbito de aplicación del efecto, en el que ajustaremos la duración, gracias a la incorporación de un manejador específico, con los valores correctos.




Saludos.

Enviar comentario

Crear plumaje con pincel de plumas en Illustrator

Posted: 05 Jul 2012 11:14 AM PDT

En este videotutorial de Illustrator, crearemos un sencillo pincel de plumas, que nos ofrecerá añadir más detalle en los personajes que tengan plumaje, para lo que usaremos una serie de pautas en la creación del motivo y la posterior modificación de determinados valores de color e iluminación, junto a efectos específicos.





Saludos.

Enviar comentario
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)