Cristalab |
- Switching y conectividad IP en Redes
- Vectores estilo retro en Illustrator
- Animar figuras punteadas con CSS3
- Animar una pelota rompiendo una superficie en After Effects
| Switching y conectividad IP en Redes Posted: 20 Sep 2012 09:13 AM PDT Aprenderemos cuáles son las primeras características a tener en cuenta, para la selección de los dispositivos que van a ser incorporados dentro de nuestra Red jerárquica y cómo debemos realizar un estudio de los puntos críticos de tráfico, además de otros atributos y elementos específicos, para lograr posteriormente realizar una gestión eficiente de nuestra Red. Comenzaremos viendo una presentación sobre estas consideraciones y otras no menos importantes, para tener en cuenta a la hora de obtener Switches, que encajen de forma correcta en las necesidades de las diferentes áreas de la topología, mientras estudiamos los conceptos relacionados para esta tarea, como el flujo de tráfico, la áreas de usuarios y la localización de servidores específicos. Para terminar, aprenderemos a configurar la conectividad IP de en nuestros Switches, gracias a la asignación de direccionamiento en una interface, que posibilitará el acceso remoto para configuración y gestión del dispositivo. 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.
|
| Animar figuras punteadas con CSS3 Posted: 27 Aug 2012 02:22 AM PDT En este tutorial os enseñaré un ejemplo de las animaciones que se pueden hacer con CSS3 gracias a Animation y a transform:rotate() con unos simples puntos e imaginación. Para hacer estas animaciones simplemente hago girar todos los puntos que suben y bajan simplemente (más adelante explicaré como).  El ejemplo está en funcionamiento en la página de referencia (link abajo) con varios diseños (gota, corazon, flor y aro) y se puede cambiar el sentido de la rotación y ver los elementos de la animación con sus bordes. Cómo animar los puntosPara empezar esto se hace con animaciones CSS3 y el código HTML consiste en un DIV que contiene a 18 DIV más con un punto dentro de cada uno. [nota:1123565cdd]El código CSS3 real tiene prefijos -webkit- y -moz- (en la propiedad animation y transform) pero los omitiré en el resto de artículo.[/nota:1123565cdd] Código : <div> <!-- Contenedor --> <div>•</div> <!-- 18 x DIV --> <div> La explicación la haré con el círculo (lo podemos seleccionar con el formulario de abajo del ejemplo). La animación del círculo simplemente es una rotación, más lenta en el punto central, y el keyframe del círculo, que es añadido a todos los DIV con el punto dentro es el siguiente (Si no sabes aún que es un keyframe puedes verlo en la documentación de animaciones). [css:1:1123565cdd]@keyframes Circulo { 0%{transform:rotate(0deg);} 20%{transform:rotate(120deg);} 80%{transform:rotate(240deg);} 100%{transform:rotate(360deg);} }[/css:1:1123565cdd] Para crear el propio dibujo hay que hacer la animación con el trazado (de gota, círculo...) y de ésta forma se moverán los puntos, pero irán todos juntos, para separarlos tenemos que establecer un retardo a la animación de cada punto, es decir: si cuando el primer punto lleva 10px recorridos y sale el siguiente, y cuando éste lleve 10px sale el siguiente, haremos una línea que parecerá contínua (para ver cómo funciona este paso en el ejemplo, visualízalo con el borde en un punto). Cómo calcular el retardoPara añadir el retardo usamos la propiedad animation-delay y en este caso además usamos la pseudo-clase de CSS3 nth-child (que ahora lo que hará es seleccionar cada DIV numéricamente).[css:1:1123565cdd][Segundos que dura la animación] / [Número de DIV] = [Retardo] 3s / 18 = 0.166s[/css:1:1123565cdd] Ahora tenemos que añadir el retardo a todos los DIV incrementando el retardo de todos a 0.166s: [css:1:1123565cdd]/* Al primer DIV le ponemos un retardo de 0.166s */ .CONTENEDOR div:nth-child(1) {animation-delay:0.167s;} /* En el segundo 2 x 0.166s */ .CONTENEDOR div:nth-child(2) {animation-delay:0.333s;} /* En los siguientes es el mismo procedimiento */[/css:1:1123565cdd] Los códigos son muy extensos, por ese motivo no he podido añadir todos en el tutorial, aún así puedes descargar el código CSS en la página de referencia. Aquí encontrarás el ejemplo en funcionamiento
|
| Animar una pelota rompiendo una superficie en After Effects Posted: 24 Aug 2012 10:30 AM PDT Cuando necesitemos hacer una animación de una pelota rompiendo alguna superficie en After Effects, el efecto dispersión es uno de los mas usados si queremos realizar algo sencillo, puesto que nos ofrece una amplia variedad de tipos de fracturas, que también nos permitirá ajustar el resultado a diferentes tipos de material. El efecto de animación de rotura lo aplicaremos a una imagen estática que importaremos, duplicaremos y oscureceremos para que sirva de base en la posterior fractura. Sobre la copia principal, aplicaremos el efecto dispersión y asignaremos la animación que nos permitirá fracturar la superficie y crear la fusión de las diferentes capas, terminando con varios efectos de partículas y desenfoque de movimiento que ayudarán a realizar el efecto de animación. Saludos.
|
| You are subscribed to email updates from Cristalab To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No hay comentarios:
Publicar un comentario