miércoles, 10 de octubre de 2012

Cristalab

Cristalab

Cristalab


3D panorámico con CC Cylinder en After Effects

Posted: 10 Oct 2012 08:33 AM PDT

En este nuevo videotutorial de After Effects, crearemos un entorno tridimensional, de forma cilíndrica, por el que podremos desplazar la cámara en tres dimensiones y que incluso con las limitaciones implícitas de su sencillez, nos permitirá obtener composiciones dinámicas y efectivas, que podremos enriquecer posteriormente con nuevos elementos de texto o formas animadas, que encajarán con la toma y el fondo, si aplicamos los ajustes adecuados.

Crearemos un fondo, dotado de profundidad, gracias a una imagen panorámica y el uso del efecto CC Cylinder, incorporando después la cámara, que animaremos con keyframes y expresiones y efectos de luz y texto, que fusionaremos con la toma, gracias a su posición y los ajustes de la cámara y el entorno.



Saludos.

Enviar comentario

Introducción a Ruby on Rails

Posted: 18 Sep 2012 08:36 AM PDT

Una de las cosas que siempre me ha asombrado es cuando toda la comunidad de una tecnología nueva dice: "esto es simple", "esto es fácil", "esto es hermoso" y cuando me muestran cómo se hace algo, me muestran, como si fueran trucos de magia, una serie de acciones que me dejan un poco asustado e intimidado respecto a esta nueva tecnología. Es por eso que quiero comenzar estos tutoriales siguiendo un poco el mismo camino que tuve que seguir para aprender sobre muchos temas que no conocía.

Cuando hablamos de Ruby on Rails hablamos de dos cosas. Por un lado hablamos de Ruby, un lenguaje de programación de los tantos que hay. ¿Qué lo hace especial? Como toda tecnología tiene características muy buenas e interesantes que sería muy largo listar pero lo que lo hace especial es que realmente es como arcilla moldeable y permite, con gran flexibilidad, programar de una forma muy cómoda.

Otra cosa que me gusta mucho de Ruby es que no dejas de encontrar novedades en cada rincón que recorres y siempre me está asombrando. Pero, como todo en la vida, tiene que ver con el gusto del programador. Un programador experto puede dar aquí diez millones de razones técnicas de lo hermoso de este lenguaje pero yo no voy a hacer eso. Yo solamente te voy a invitar a que lo pruebes pero un poco más adelante.



Por otro lado hablamos de Rails, un framework que se usa para desarrollo web como otros frameworks que hay para Ruby: Sinatra, Padrino, Waves, Camping, Remaze y otros muchos pero ¡un momento!

¿Qué es un Framework?


Claro, todos me comienzan a hablar de frameworks para Java, PHP, Ruby, Python. Ay si! Ay si! que Synfony, que CakePHP, Rails, Django y ¡nadie me ha dicho qué es un Framework!. No te voy a dar una explicación muy técnica ya que esa la puedes leer aquí.

Yo te voy a contar una versión resumida de lo que es.

Supongamos que programas en un lenguaje determinado. Digamos Java para no amarrarlo a Ruby. Digamos que eres feliz desarrollando en Java y realizas varios proyectos. De pronto en todos los proyectos te das cuenta que tienes que ingresar números enteros por la consola. Esto es muy pesado pues todo lo que entra por teclado en la consola es texto y cuando necesitas que el valor sea numérico te ves enfrentado a la necesidad de convertirlo.

Tenemos algo como esto:

Código :

int miVariableNumerica;  miVariableNumerica = Integer.parseInt(in,readLine());  


…esa línea hace que, lo que ingreso por teclado (in.readLine()) se convierta en un entero (Integer.parseInt). Luego de poner unas 1000 veces eso, decido que estoy aburrido de ponerlo siempre y decido crear una biblioteca que me permita simplificarme el trabajo porque siempre me estoy equivocando en la sintaxis y con tantas mayúsculas y minúsculas me confundo.

Decido que la mejor forma de cambiar esta situación es crear un método llamado ingresaEntero que reciba ese ingreso por teclado y haga esa operación.

Muy bien! Entonces en un archivo llamado miFramework.java creo esto:

Código :

class miFramework     public int ingresaEntero(String ingreso){         int respuesta;         respuesta  = Integer.parseInt(ingreso);         return respuesta;  }  end  


Bien, a partir de este punto podemos usar en el programa principal algo como:

Código :

int numero;  numero =  ingresaEntero(in.readLine());  


Estoy tan felíz con eso que decido hacer lo mismo con in.readLine() y lo llamo a ese método leerTeclado. Luego comienzo a darme cuenta de que, por ejemplo, siempre que me conecto a la base de datos realizo el mismo código y decido crear un método llamado conectar(String NombreBase de Datos) y así comienzo a poner todas las tareas repetitivas bajo métodos y nombres de comando que engloban una o varias tareas. Si a esto le sumo patrones, acciones, eventos, etc y tienen un entorno de trabajo uniforme entonces nace un Framework (desde un punto de vista resumido por supuesto).

Entonces cuando en un framework como Rails pones una instrucción, por lo general, lo que hace es realizar varias instrucciones de Ruby que pueden pasar por acciones como por ejemplo, crear un HTML, crear una tabla, crear una controladora y dejar todo listo e interrelacionado para que tú puedas programar solamente la inteligencia de negocio. El objetivo de usar un framework es dejar las tareas repetitivas y las mejores prácticas en manos del framework.

Y eso es a "groso modo" lo que es un framework y su funcionamiento. Si bien aquí solamente estamos dando una ligera introducción lo importante es que te hagas una idea de cómo funciona, pues en la segunda parte vamos a comenzar con el uso de Rails, entonces ya tendrás una idea de qué es lo que está pasando cada vez que pones un comando y ocurren cosas mágicas y maravillosas.

Ve a la segunda parte, donde veremos la parte técnica del framework


En la segunda parte de la introducción a Ruby on Rails aprenderás mucho más a fondo cómo crear proyectos e nteros en RoR.

Enviar comentario

Retoque con Raw en Photoshop

Posted: 10 Sep 2012 05:13 AM PDT

Damos comienzo a una nueva serie que tratará sobre retoque fotográfico, mientras hacemos una pausa en la de diseño Web, para ir aprendiendo las técnicas más efectivas, cuando de mejorar el aspecto de los modelos de fotografías e imágenes se trata, gracias al ajuste de su apariencia general, el color y suavidad de su piel, ojos y pelo.

Para ello empezaremos mostrando las dos posibilidades más comunes, Raw y compresión, hablando de formatos generales de imagen que encontraremos en nuestros proyectos y que gracias a módulos como el magnífico Camera Raw de Photoshop, nos permitirán aplicar y realizar los ajustes iniciales más importantes, para importar la imagen al programa con las mejores características para su retoque.



Saludos.

Enviar comentario

Cómo hacer animaciones en CSS3

Posted: 07 Sep 2012 08:40 AM PDT

En este tutorial veremos el uso y los parámetros de animation en CSS3. Las animaciones de CSS3 son la herramienta perfecta para animar cualquier elemento, para crear un efecto puntual o para crear un movimiento contínuo de algún elemento (es decir, se pueden mover varios elementos de forma continuada pudiendo crear animaciones que antes sólo se veían en Flash o Javascript).

Las animaciones usan el parámetro animation en CSS para su uso estándar, por lo que es más correcto (por cuestiones de compatibilidad) también incluir el prefijo de cada navegador. La mayoría de los navegadores son compatibles, pero Internet Explorer no (en su versión 9).



Código :

/* Parámetro estándar */  animation:    /* Parámetros según navegador */  -webkit-animation:/* Chrome y Safari */  -moz-animation:/* Mozilla */


Cómo funcionan las animaciones en CSS3


Las animaciones de CSS3 funcionan distinto a otros parámetros de CSS. Debemos de establecer en el parámetro animation, además de la duración de la animación y el número de repeticiones que hace, un keyframe, que es el fragmento de código donde se escribe la secuencia que hará el elemento con esta animación (es decir, se especifica qué propiedades tendrá en cada momento, pudiendo modificar por ejemplo: el color, la altura, la posición...).

Keyframes en CSS3


Keyframes es una propiedad de CSS3 que va independiente de los selectores (que son el conjunto de palabras que usamos para seleccionar elemento de una página, como: "#CONTENEDOR div.cuerpo"), esta propiedad también usa los prefijos de ciertos navegadores por motivos de compatibilidad y también precede a un contenedor que se abre y cierra con {}, es decir, pondremos la propiedad keyframes, y dentro de las llaves su contenido.

Código :

/* Parámetro estándar */  @keyframes [Nombre del keyfremes] {}    /* Parámetros según navegador */  @-webkit-keyframes [Nombre del keyfremes] {}/* Chrome y Safari */  @-moz-keyframes [Nombre del keyfremes] {}/* Mozilla */



Código :

/* Ejemplo de un keyframes */  @keyframes Ejemplo {  0%{width:100px}  100%{width:200px}  }



Contenido del keyframe


Dentro del keyframes debemos de especificar los keyframes de forma individual, donde se especifica el porcentaje del tiempo de la animación en el que cierta propiedad cambia y posteriormente se especifican las propiedades que cambian escribiéndolas dentro de llaves. Si queremos que empiece la animación de determinada forma debemos añadir un keyframe con el porcentaje del tiempo de la animación en el que empieza (en el caso del inicio es el 0%), de esta forma podemos especificar que en cualquier momento de la animación cambien los parámetros (en el 30% de la animación o en el 50% por ejemplo), hasta máximo del 100%.

[nota:68f144cae7] El punto 0% y el 100% son necesarios.[/nota:68f144cae7]

Código :

@keyframes Ejemplo {  0%{width:10%}  33%{width:20%}  66%{width:60%}  100%{width:10%}  }



Parámetros de animation


La propiedad animation puede contener distintos parámetros, como el nombre del keyframe que especifica su animación, su duración, el número de repeticiones y la función de tiempo.

Código :

animation: [Nombre del keyfremes] [Tiempo] [Número de repeticiones] [Función de Tiempo];


La propiedad animation tiene los siguientes parámetros:
  • Nombre del keyframe: En este parámetro es donde establecemos el nombre del keyfreme, teniendo que ser igual al keyfreme que usemos para especificar la animación.
  • Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner "1s".
  • Repeticiones: Con este parámetro podemos especificar con un número entero las veces que se repite la animación o hacer que se repita infinitamente estableciéndolo como "infinite".
  • Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración.
    Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in... Por defecto usa el ease, y es el más recomendado, consiste en un comienzo lento y una terminación lenta, acelerándose en la parte media.


Fuente: Xitrus | Ver completo con ejemplos de funcionamiento.

Enviar comentario

No hay comentarios:

Publicar un comentario