AT boletín - INFORMA: octubre 2012

miércoles, 31 de octubre de 2012

Cristalab

Crear efecto Instagram en Photoshop
Animación fluida con CSS3
Coloreado de dibujos en Flash
Efectos de sonido en FL Studio

Posted: 31 Oct 2012 03:34 AM PDT

No tienes un smartphone, tablet, ipad o cualquier dispositivo donde Instagram pueda funcionar? ¿sólo tienes un típico celular nokia 1100, y quieres impresionar a tus amigos con fotos tipo instagram? Con este vídeotutorial aprenderás a recrear el efecto Nashville de Instagram en Photoshop.

Animación fluida con CSS3

Posted: 01 Oct 2012 02:13 AM PDT

Hace un tiempo creé un ejemplo de lo que se podría hacer con animaciones con simples puntos y ahora os quiero mostrar que con animation de CSS3 podemos crear movimientos bastante "naturales" con rotaciones, que sean fluidos (en el ejemplo se puede ver a lo que me refiero).
En este artículo daré por hecho que todos sabemos como funcionan las animaciones, y si no es así os invito a ver este manual de como hacerlas.

Ver ejemplos aquí

Crear la fluidez

Tenemos varios ejemplos, el del Balancín, el de subir una escalera y el de la biela manivela, en los tres jugamos con las rotaciones, pero en elementos que están por debajo del anterior. Por ejemplo, en el balancín tenemos 3 barras, y una está dentro de otra, lo que significa que al girar la primera la siguiente también lo hará y que a su vez gira.

Puede ser un poco difícil de explicar y de entender, pero si nos fijamos en el primer ejemplo vemos este efecto, girando la barra azul y por otro lado las que están dentro (más abajo con el código se ve claro cómo surge este efecto).

Cómo funciona

Como he comentado antes tenemos que crear el efecto de fluidez, pero antes de esto tenemos que crear la estructura, que simplemente son tres etiquetas DIV, una dentro de la otra.

Código :

  <div>      <div>          <div>          </div>      </div>  </div>

El balancín

La estructura del código HTML es la misma en los tres ejemplos, lo que varía son los @keyfreme. El @keyfreme de la barra central hace un balanceo simple sin rotar y las 2 interiores tienen el mismo (simplemente una rotación que en cierto punto vuelve) y la diferencia de los recorridos de ellas está en que lo hacen en distinto tiempo.

Este es el @keyfreme de este ejemplo:

Código :

/* Es el @keyfreme de la barra con el borde azul */  @keyframes balanzin_principal {      0%{transform:rotate(60deg)}      50%{transform:rotate(-60deg)}      100%{transform:rotate(60deg)}  }  /* Es el @keyfreme de la barra con el borde azul */  @keyframes balanzin_principal {      0%{transform:rotate(40deg)}      50%{transform:rotate(-600deg)}      100%{transform:rotate(40deg)}  }

En el momento que establecemos el @keyfreme de la animación podemos probar la velocidad para que se ajuste a un movimiento más o menos realista.

Escalera y biela manivela

En estos dos ejemplos se diferencian del primero (balancín) en que la rotación empieza en el extremo de la etiqueta que lo contiene, y esto se hace con una propiedad que afecta a todas las transformaciones que se crean con transform llamada transform-origin, donde establecemos desde dónde empieza a rotar.

Código :

<!-- En el ejemplo de la escalera y de la biela manivela tomamos como origen la parte superior y el medio -->     transform-origin:top;

Esta es una forma con la que podemos animar varias cosas con CSS3 (por ejemplo se podría recrear el movimiento de una serpiente o un árbol que lo mueve el viento) y podríamos crear cosas parecidas a las que se podían crear con flash, simplemente hay que saber sacar partido a lo que actualmente tenemos.

Ver ejemplos: Xitrus

Coloreado de dibujos en Flash

Posted: 09 Aug 2009 05:00 PM PDT

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

Posted: 09 Aug 2009 05:00 PM PDT

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.

Big Data: la ciencia (y el negocio) de pescar en el mar de datos

Fundación Telefónica te invita a

'Vivir en un mar de datos': ¿Cómo gestionarlos y visualizarlos?

Las técnicas tradicionales ya no son suficientes para interpretar, gestionar y visualizar la gran cantidad de datos disponibles sobre objetos y personas y, hoy, emerge una nueva ciencia mezcla de informática, matemáticas y arte que permite visualizar patrones y anticipar tendencias en la sociedad. Este será el eje de las jornadas 'Vivir en un mar de datos', que se celebran en el Espacio Fundación Telefónica los días 6, 7 y 8 de noviembre y que contarán con mesas redondas y talleres de la mano de grandes expertos.

Ya puedes inscribirte desde aquí.

Información práctica:
Lugar: Espacio Fundación Telefónica de Madrid. Talleres en planta 3 y en MediaLab-Prado.
Dirección: Edificio Telefónica en Gran Via, 28
(entrada por C/ Fuencarral, 3. Madrid)
Fechas: 6,7 y 8 de octubre.
Horario: De 10:00 a 14:00 horas y talleres por la tarde.

Más información en: www.espacio.fundaciontelefonica.com
Twitter: @EspacioFTef

Sigue toda la actualidad de Fundación Telefónica en www.fundacion.telefonica.com

Si no ve correctamente este mensaje pulse aquí

Importante, no responda a este mensaje. Esta dirección electrónica sólo se utiliza para enviar la información desde la página http://www.fundacion.telefonica.com, y no existe un destinatario para su recepción.

Usted recibe esta comunicación porque sus datos se encuentran insertos en el fichero 'Comunicación Web', un fichero automatizado de datos de carácter personal propiedad de Fundación Telefónica, . Este fichero automatizado ha sido correctamente registrado en la Agencia Española de Protección de datos y su finalidad es 'USUARIOS REGISTRADOS PARA EL INTERCAMBIO DE INFORMACIONES Y CONTENIDOS A TRAVES DE LA PAGINA WEB DE FUNDACION TELEFONICA'. Este mensaje puede contener información privilegiada y/o confidencial. Si Ud. no es el destinatario indicado en este mensaje no está autorizado para copiar o entregar este mensaje a ninguna persona. En este caso, deberá destruirlo y se le ruega que avise al destinatario por e-mail.

SI NO DESEA RECIBIR MAS COMUNICACIONES DE FUNDACIÓN TELEFÓNICA PUEDE DARSE DE BAJA PULSANDO AQUÍ

martes, 30 de octubre de 2012

Cristalab

Calcular distancia de un punto a otro con jQuery

Posted: 30 Oct 2012 08:33 AM PDT

En este tutorial les voy a mostrar cómo utilizar jQuery para obtener la distancia de un punto a otro con el mouse de un determinado elemento en la página. Este trozo de código puede ser útil en una aplicación web en donde se desee ejecutar un evento cuando el ratón del usuario se encuentre en una distancia determinada de un elemento.

Sólo creamos las variables globales, el evento y la función para el documento.

Código :

  <script type="text/javascript">  $(document).ready(function(){     var mX, mY, distance,      $distance = $('#distancia span'),      $element  = $('#elemento');         function calculateDistance(elem, mouseX, mouseY) {          return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));      }         $(document).mousemove(function(e) {          mX = e.pageX;          mY = e.pageY;          distance = calculateDistance($element, mX, mY);          $distance.text(distance);      });  });  </script>

Como se puede ver en el código, hemos establecido una función en el evento .mousemove, luego se utiliza la variable e para obtener la posición X e Y del mouse y envía esto a la función calculateDistance con un parámetro de elemento.

Ahora creamos nuestros contenedores divs para recibir los datos:

Código :

<div id="distancia">La distancia hasta el punto es: <span> </span>     pixeles.</div>  <br />  <div id="texto">    <h4>Partiendo del punto de partida que es el 0 de color naranja</h4>    <p>Un ejemplo seria calcular la distancia desde el punto que es el 0 de color naranja hasta una caja azul con circulo blanco: </p>  </div>  <div id="elemento">0</div>

Eso es casi todo, acá dejo una demo en donde está todo el código completo:

DEMO

Eso es todo, espero te haya gustado y que te sea muy útil.

Cielo y nubes con Particle World en After Effects

Posted: 28 Sep 2012 08:47 AM PDT

Regresamos al uso del efecto de partículas Particle World en After Effects, para ajustar sus opciones, ralentizando el desplazamiento y limitando las variaciones en las partículas que crea, para generar un manto de nubes dinámico en tres dimensiones, por el que podremos navegar gracias a una cámara, después de incorporar elementos de iluminación y un texto estilizado que enriquecerá nuestra escena y completará el efectoque buscamos obtener.

Añadiremos una composición sencilla, agregando un plano al fondo con un degradado lineal aplicado, que nos permitirá simular el cielo, para posteriormente añadir una cámara y las partículas obtenidas del Particle World, junto con varios efectos de iluminación y movimiento natural de cámara, que aumentará el realismo.

Saludos.

Marketing para profesionales independientes

Usuario Web
Si eres un profesional independiente
esto te va a encantar. - Miguel

http://www.marketineros.com/cpi01.html

***************

Cómo estás!

Hace un tiempo puse en marcha un
curso de marketing para profesionales
independientes que fue muy exitoso,
pero por razones particulares (no
quiero trabajar tanto) lo he quitado de
circulación.

Ahora bien, no sería un buen marketinero
si no aplicara mis propios consejos.

Por eso, hoy lo puse a tu disposición
en formato de ebook. Más rápido, más
fácil, más barato (y menos trabajoso para
mi :)

http://www.marketineros.com/cpi01.html

Convertir tus conocimientos en cursos y
estos a su vez en ebooks es una gran
estrategia. Estos son los famosos
infoproductos, con los que tantos
marketineros han hecho su buen dinero.

El curso estaba planteado para
entregarse periódicamente así que, ...

... bien, tomé las clases una a una,
las reuní y puse todo en formato
PDF, por su portabilidad, facilidad
de lectura e impresión (sí, porque
si lo imprimes lo puedes leer, marcar,
escribir, en tu sillón más cómodo,
mientras disfrutas de tu bebida favorita).

Y el curso de marketing para profesionales
independientes quedó convertido en un documento
de más de 180 páginas de valiosos consejos
(más algunos BONUS) que yo no desaprovecharía.

Recomendadísimo para quienes quieren
aprovechar la Internet para multiplicar sus
ingresos.

Ve por él!

http://www.marketineros.com/cpi01.html

- Miguel Angel de Alzáa

PD: como dije más arriba, va con BONUS,
échale una mirada.

Marketineros.com - Centenario 2151, Asunción, 1209 Paraguay.

To unsubscribe or change subscriber options visit:
http://www.aweber.com/z/r/?rJzM7CwctKwMnAwMDGyctEa0jGxMrEyczKw=

lunes, 29 de octubre de 2012

Cristalab

Convertir personaje a zombie en After Effects
Escalar un Paper de Raphaël
Partículas, telas y fluidos en Maya
Diagrama de topología y sus herramientas en Redes
Vectores estilo retro en Illustrator
Introducción a TDD con Ruby on Rails y Test Unit

Convertir personaje a zombie en After Effects

Posted: 29 Oct 2012 04:08 AM PDT

En este videotutorial de After Effects haremos un especial de Halloween 2012, donde transformaremos a cualquiera de nuestros amigos, familiares o incluso a nosotros mismos, en un ser salido de las tenebrosas tinieblas, o en algo muy feo, por lo menos, ayudados por el uso de las capas y uno de los mejores filtros de deformación, que combinaremos gracias a las opciones de fusión de capas y animaremos con técnicas clásicas.

Usaremos en primer lugar el pincel de rotoscopía, para lograr separar el rostro del personaje, en un duplicado previamente creado y de esa forma obtener una especia de máscara que usaremos para filtrar el área concreta y aplicar los efectos de deformación con licuar y de oscurecimiento con formas, únicamente en esa zona.

Para completar el trabajo, añadiremos varios ajustes en el color y retocaremos la animación para sincronizarla con los diferentes cambios que producen los efectos, durante la toma.

Saludos.

Escalar un Paper de Raphaël

Posted: 29 Oct 2012 02:32 AM PDT

Ayer mismo culminó el curso de HTML5 de mejorando.la impartido por @freddier y @cvander en Madrid. Entre los muchos contenidos que se impartieron, se enseñaron los principios básicos de cómo utilizar la útil librería de Javascript Raphaël de la cual ya se ha comentado anteriormente por acá. Con esta librería podemos dibujar y manipular elementos vectoriales en el navegador utilizando para ello SVG, con la asombrosa característica de que si se está utilizando Internet Explorer 6+ (que no cuenta con soporte para SVG hasta la versión 9) entonces los gráficos se representarán utilizando VML.

En el curso surgió la duda de cómo lograr escalar un Paper de Raphaël de manera correcta. Aunque existe una solución para lograr esto, a mí en particular me ha dado problemas de no escalar bien los elementos en algunas aplicaciones web. Como lo prometido es deuda y les prometí a los participantes del curso que iba a publicar un pequeño tutorial de cómo lograr esto, aquí cumplo mi promesa.

En realidad no se necesita una función muy compleja para lograr nuestro objetivo, sólo con utilizar el atributo viewBox del SVG se puede lograr de manera sencilla. Este atributo se utiliza para hacer un recorte en los gráficos SVG utilizando para ello unas coordenadas iniciales del recorte y el ancho y el alto del mismo.

Utilizar el atributo viewBox directamente en un SVG

La manera de hacerlo directamente en el código del encabezado del SVG es la siguiente:

Código :

  <svg version="1.1" id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve">  ...  ...  ...  </svg>

En este caso, al tener el documento un viewBox con su mismo tamaño, se escalará proporcionalmente cuando se varíen sus dimensiones sin ocultar ninguna parte del gráfico. Esto mismo es lo que vamos a utilizar en el Paper utilizando un método propio de Raphaël: setViewBox.

Asignar el atributo viewBox al SVG usando Raphaël

La forma de utilizar el método setViewBox es la siguiente:

Código :

  Paper.setViewBox(x, y, w, h, fit);

Donde x, y, w, h corresponden respectivamente a las coordenadas x e y de inicio y al ancho y alto del recorte. El parámetro fit determinará si se desea que al gráfico se muestre completamente dentro del borde del recorte (en caso de ser true). Utilizando este método ya nuestro SVG se escalará manteniendo sus proporciones cuando se varíe de tamaño el objeto Paper mediante el método setSize.

Utilización opcional del atributo preserveAspectRatio

También existe un atributo que permite que el gráfico SVG se escale comportándose de manera diferente, nos referimos a preserveAspectRatio. Este atributo puede utilizarse para que el gráfico mantenga sus proporciones o se escale sin mantener su relación de aspecto.

Si este atributo tiene valor none el gráfico no mantendrá su relación de aspecto, los demás valores mantendrán su proporción pero variarán la posición del mismo con respecto al borde definido por el tamaño del SVG. Ponemos algunos ejemplos de valores que puede tomar preserveAspectRatio:

1 - xMidYMin. 2 - xMinYMax. 3 - xMaxYMin

Notar que estos valores están compuestos por la posición que deben ocupar las x y las y del gráfico, los cuales pueden ser Min (Mínimo), Mid (Medio) y Max (Máximo).

Para poder añadir este atributo al SVG debemos acceder al objeto SVGSVGElement directamente, para hacerlo accederemos a la propiedad canvas del Paper.

Código :

  paper.canvas.setAttribute("preserveAspectRatio", "xMaxYMin");

[nota:013220f661]Cada vez que se llame al método setSize del objeto Paper, el atributo preserveAspectRatio tomará su valor por defecto: xMinYMin meet o xMinYMin dependiendo de si el parámetro fit del método setViewBox se sitúa en true o false respectivamente, por lo tanto cada vez que se llame a dicho método, se debe volver a añadir el atributo preserveAspectRatio en el valor deseado.[/nota:013220f661]

Ejemplo práctico

El poder variar las dimensiones del Paper a nuestra conveniencia variando el tamaño de todos los elementos dibujados en él, nos será muy útil si se desea implementar Responsive Design utilizando gráficos vectoriales. Vamos a ver un pequeño ejemplo donde se le dará a un Paper de Raphaël las dimensiones de un div contenedor y los gráficos contenidos en el mismo se ajustarán a las dimensiones de dicho div.

Fichero CSS

[css:1:013220f661]body, html{
height: 100%;
width: 100%;
}

body{
margin: 0;
padding: 0;
}

#raphaelContainer {
height: 100%;
width: 100%;
}[/css:1:013220f661]

Fichero HTML

Código :

<!DOCTYPE HTML>  <html>  <head>  <meta charset="UTF-8">  <title>Responsive Raphael Example</title>  <link href="styles/styles.css" rel="stylesheet" type="text/css">  <script type="text/javascript" src="scripts/leaves.js"></script>  <script type="text/javascript" src="scripts/raphael-min.js"></script>  <script type="text/javascript">          var drawWidth = 100;     var drawHeight = 100;     var paper;          //---Al estar listo el DOM     window.addEventListener("load", init);          //---Inicizalizar la aplicación     function init(){                //---Crear el canvas de Rapahel        paper = Raphael("raphaelContainer", drawWidth, drawHeight);                //---Aplicar el viewBox (esta línea es la que hace que el gráfico se escale proporcionalmente)        if(Raphael.svg) paper.setViewBox(0, 0, drawWidth, drawHeight, true);                //---Dibujar todos los elementos        paper.add(leaves);                //---Al iniciar variar el tamaño        setSize();             }          //---Cambiar las dimensiones del canvas al máximo tamaño     function setSize(){                //---Dimensiones del container        var width = document.getElementById("raphaelContainer").offsetWidth;        var height = document.getElementById("raphaelContainer").offsetHeight;                paper.setSize(width, height);                //---Esta línea es la que varía la propiedad preserveAspectRatio        //paper.canvas.setAttribute("preserveAspectRatio", "xMedYMin");             }          //---Al variar el tamaño de la ventana     window.addEventListener("resize", setSize);    </script>  </head>    <body>       <div id="raphaelContainer">         </div>    </body>  </html>

Descargar los ficheros usados en el tutorial

Un saludo y ojalá les sirva de ayuda este pequeño tutorial.

Partículas, telas y fluidos en Maya

Posted: 28 Sep 2012 08:42 AM PDT

Empezamos una nueva serie, en la que iremos descubriendo las posibilidades que nos ofrecen los sistemas dinámicos de Maya, junto con las herramientas y atributos más útiles que pone a nuestra disposición para trabajar con las simulaciones de este tipo de procesos, que nos ahorrarán tiempo en nuestro trabajo en lo que a animación de físicas y sistemas dinámicos se refiere.

Empezaremos esta serie con una rápida introducción a los diferentes módulos, herramientas y pestañas más utilizados a la hora de trabajar con estos procesos.

Continuaremos cargando ejemplos desde el Visor, para conocer de antemano, los resultados que podremos lograr con el uso adecuado de las herramientas del programa, como partículas, telas y fluidos, mientras realizamos ejercicios de ejemplo para irnos acostumbrando al sistema de trabajo.

Saludos.

Diagrama de topología y sus herramientas en Redes

Posted: 27 Sep 2012 05:01 AM PDT

Estudiaremos la necesidad de generar y usar los diagramas de topologia, recuperándolos o incluyéndolos en la documentación de nuestras redes, para conseguir la mayor cantidad de información general de la infraestructura de la red con la que vamos a trabajar, de una forma rápida y efectiva, obteniendo datos sobre su diseño, qué dispositivos la forman y qué áreas participan en su funcionamiento.

Haremos un estudio detallado del formato y los diferentes atributos que forman parte de los diagramas de topo logia, así como los elementos que podremos incorporar.

Para poder trabajar desde el principio con ellos, repasaremos varios programas que nos ayudarán en su creación y practicaremos con sus posibilidades.

Saludos.

Vectores estilo retro en Illustrator

Posted: 20 Sep 2012 04:29 AM PDT

Recrearemos una carátula de CD o vinilo en Illustrator, a la que impregnaremos de un marcado aspecto Retro, gracias a los detalles y la utilización de una base de color intenso, que nos recordará diseños que decoraban los discos de grupos musicales de épocas anteriores.

Saludos.

Introducción a TDD con Ruby on Rails y Test Unit

Posted: 19 Sep 2012 08:18 AM PDT

Uno de los temas que más me llamó la atención del desarrollo web en esta época fue el uso de todas las metodologías ágiles (si no sabes qué son, debes leer inmediatamente ese vínculo que estamos en el siglo XXI). Una de las que me pareció más intrigante e interesante fue TDD. Para darles un poco de contexto yo venía de una formación un poco más ~~aburrida~~ "formal" donde tenía RUP, Java y PHP como herramientas de desarrollo principal. Sin embargo mi tesis la hice en Action Script 2.0 y Macromedia Flash :cool:

(todavía no era Adobe).

Luego de muchos años comencé a escuchar sobre TDD y cuando comencé a trabajar con el equipo de Xenda me encontré con un universo totalmente nuevo y maravilloso. Sobre TDD solamente voy a agregar a lo que dice el vínculo que puse antes, que es una técnica que nos asegura un software bastante limpio. Lo que sí voy a remarcar es que es una forma de desarrollo que está más vinculada a unos lenguajes que a otros. TDD es más usada por programadores de Ruby y Python que programadores de PHP y Java por ejemplo. Sin embargo PHPUnit y JUnit nos permiten trabajar con toda comodidad usando TDD en esos lenguajes.

Es importante que tengas en cuenta que es una metodología de desarrollo que requiere de práctica y que puede parecer un poco engorrosa al inicio pero luego nos trae muchos beneficios como por ejemplo tener un código limpio, asegurarme que, según va creciendo el proyecto mi código se mantiene funcionando correctamente, etc.

Este ejemplo lo voy a hacer usando TDD con Test Unit para Ruby. Test Unit para Ruby no es el único entorno de trabajo en TDD para Ruby y podemos ir más alla de los test unitarios y desarrollar usando test a niveles superiores. Tenemos rspec, capybara, cucumber y otras maravillosas herramientas de desarrollo que podrás investigar luego. Por ahora vamos a la base.

Necesitas para este ejemplo tener instalado Ruby. No te compliques la vida e instala Ruby on Rails, y si eres Windows user recomiendo RailsInstaller.

Para comenzar debemos tener un directorio llamado Calculadora y dentro de él dos archivos con extención rb (de Ruby) llamados Calculadora.rb y Calculadora_Test.rb.

Y ahora comenzamos.