AT boletín - INFORMA: junio 2012

viernes, 29 de junio de 2012

Cristalab

Comandos de enrutamiento EIGRP en Redes
Animar un ecualizador de barras en After Effects
Copy y Mirror de influencias de huesos en Maya
Introducción a GitHub en Linux Ubuntu

Posted: 29 Jun 2012 08:45 AM PDT

Continuaremos aprendiendo más comandos permitidos por los dispositivos, para implementar opciones y posibilidades del protocolo de enrutamiento dinámico EIGRP en redes, testeando las configuraciones introducidas y revisando la información de los paquetes que se transmite entre los diferentes vecinos, que pertenecen al conjunto EIGRP.

Repasaremos el uso de EIGRP y de los comandos generales usados para recabar información del sistema, como show run y show ip route, terminando con el comando debug para revisar los datos transferidos en los mensajes del protocolo y sus temporizadores de envío, entre otra información.

Saludos.

Animar un ecualizador de barras en After Effects

Posted: 29 Jun 2012 05:33 AM PDT

Empezamos a aprender las posibilidades y opciones que nos ofrecen las herramientas de generación y asignación de expresiones en After Effects y que nos permitirán crear animación conducida de forma automática, modificando las características de los elementos, basándonos en procesos y obtención de valores aleatorios, ajustados gracias al uso de manejadores, la características de las conexiones y el uso de un lenguaje simple.

Generaremos la base del material con formas rectangulares, a las que ajustaremos su pivote, para afectar de forma correcta a la escala, que irá conectada a un slider personalizado, conectado a una expresión de creación aleatoria y que posteriormente duplicaremos, introduciéndolo en una nueva composición y añadiéndole efectos de resplandor y blur que ajustarán el resultado final.

Saludos.

Copy y Mirror de influencias de huesos en Maya

Posted: 06 Jun 2012 09:34 AM PDT

Tras asignar las influencias de deformación de los huesos sobre las mallas, pintar los pesos y corregir errores de asignación, debemos conocer el uso de otras herramientas del menú de Skinning, que nos ahorrarán tiempo en determinadas tareas de edición, copiado y suavizado de este tipo de valores en Maya, permitiéndonos reflejar las asignaciones entre extremos, optimizar el proceso del sistema y hacer las deformaciones más progresivas.

Saludos.

Introducción a GitHub en Linux Ubuntu

Posted: 06 Jun 2012 02:35 AM PDT

¿Qué es control de versiones?

El control de versiones es la gestión de los diversos cambios que se realizan sobre algún archivo, en este caso, código.

¿Qué es Git?

Git es un sistema de control de versiones diseñado por Linus Torvalds, pensando en la eficiencia y la confiabilidad del mantenimiento de versiones de aplicaciones cuando éstas tienen un gran número de archivos de código fuente.

¿Qué es GitHub?

Es un sistema de control de versiones basado en Git, tiene una comunidad muy activa y aloja algunos proyectos muy interesantes como el Bootstrap de Twitter, el HTML5 Boilerplate, jQuery, entre muchos otros.

GitHub en Ubuntu

Debido a que no tenemos un cliente gráfico como en Windows o en Mac, deberemos proceder desde la consola.

Instalación

Lo primero que tenemos que hacer es instalar Git y XClip, para eso abrimos la consola y tecleamos:

Código :

sudo apt-get install git  sudo apt-get install xclip

Ó para comprobar si lo tenemos instalado anteriormente tecleamos:

Código :

git --version

Y nos deberá salir algo como esto:

Código :

git version 1.7.9.5

Después configuraremos nuestros datos (usaré los míos):

Código :

git config --global user.name "carlos"  git config --global user.email "me@carlosandresviteri.com"

Obtención de la clave SSH

GitHub usa una clave ssh para establecer conexión entre nuestro ordenador y el servidor de Git. Podremos generar la clave .ssh con el siguiente comando:

Código :

ssh-keygen

Y la consola nos responderá con lo siguiente, donde podremos configurar el lugar donde se guardará (lo dejaré en la configuración predeterminada):

Código :

Enter file in which to save the key (/home/carlos/.ssh/id_rsa):

Le damos enter, nos pedirá una contraseña -passphrase- la contraseña es opcional, para saltarla le damos doble enter.

Código :

Enter passphrase (empty for no passphrase):  Enter same passphrase again:

Para leer la clave ssh tendremos que teclear (ten en cuenta la ruta donde lo guardaste):

Código :

cat ~/.ssh/id_rsa.pub

Y la consola nos responderá algo como esto:

Código :

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDMpPqnv9XBAnNAU60o+zxoXxrl79LBaqpEgUdBk9zjSslkVqWJpu3VKWU/JC3nToPP7zRv0wDWWFaWdNaeJAT9AWsExrhbLZumKQJE1IONhqO1FBvEOrhT5HLAfN7FII89OM+rAP8ojQonbZqddKZaZ5ik5U7kIz/Z4oG8bKosSw6fqtf5I0Ya7G+egAW9QxjLdFyC6Y2MyftjKZsaugnpr7EHtsM2RoGdZAmUWND3ofE/DltrNh2KF4e3OhuPQUPXtP7uKtRW1orC0QxHfd7jMPOujtE1+dT5mb3itlLD7tnddoyNgzgjN/vKyl7O4igB4hdgD/MUOYqdmjbI73iv carlos@Carlos-PC

Copiamos el contenido y lo pegaremos en SSH Keys en GitHub:

Finalmente le damos clic en Add Key, nos pedirá la contraseña de nuestra cuenta. Si todo nos salió bien GitHub nos mostrará algo como esto:

Creación de un repositorio

Para crear un repositorio deberemos dirigirnos a New Repository , completar los datos que nos pide y darle clic a Create Repository:

Subida de archivos

Para subir archivos desde nuestro ordenador primero tenemos que posicionarnos en la carpeta donde están los archivos que queremos subir, los míos están en una carpeta dentro de la carpeta personal que se llama cristalab-tuto.

Código :

cd ~/cristalab-tuto

Luego tecleamos:

Código :

git init

Nos saldrá algo así:

Código :

Initialized empty Git repository in /home/carlos/cristalab-tuto/.git/

Para añadir archivos, si queremos por ejemplo añadir todos los archivos de la carpeta, tecleamos:

Código :

git add .

Pero si queremos añadir un archivo específico:

Código :

git add nombre-del-archivo.extensión

TODOS los cambios que hagamos requieren un comentario, para ello tecleamos:

Código :

git commit -m 'esto es un comentario'

Para conectarnos al repositorio tecleamos -nótese mi nombre de usuario y el nombre del repositorio-:

Código :

git remote add origin git@github.com:niclick/intro-github-en-ubuntu.git

Si nos sale este error:

Código :

fatal: remote origin already exists

La solución es teclear, y repetir el paso anterior:

Código :

git remote rm origin

Y lo subimos:

Código :

git push -u origin master

Para el README, es necesario crear un archivo llamado README.md y subirlo de la misma manera que los demás.

Y listo a disfrutar de nuestro repositorio.

Eliminar un archivo

Para eliminar un archivo debemos teclear:

Código :

git rm nombre-del-archivo.extensión

Y para que el cambio se refleje en GitHub, deberemos hacer el mismo proceso que el de subida.

Eliminar un Repositorio

En la parte superior al lado del nombre de nuestro repositorio dice 'Admin', le damos clic y entraremos en la Administración del Repositorio, en la parte inferior dice Danger Zone™ le damos clic en 'Delete this Repository' ponemos el nombre del repositorio y lo eliminamos.

Clonar un Repositorio

Para clonar el repositorio podemos hacerlo de dos formas: la forma tradicional de descargar el .zip o la forma fancy mediante la consola.

Descargar el .ZIP

Forma Fancy

Le damos clic en Git Read-Only y copiamos el contenido:

Luego vamos a la consola y tecleamos git clone más lo que copiamos anteriormente:

Código :

git clone git://github.com/niclick/intro-github-en-ubuntu.git

Y tendremos listo nuestro repositorio clonado de forma local.

10,000 en 7 Dias...

atboletin

Una LISTA de suscriptores es una parte
muy importante de tu negocio en Internet.

Te imaginas construir una lista de 10,000
suscriptores en solo 7 días. ES REAL!

Hoy puedes comenzar a construir tu lista
siguiendo este método:
>>>> http://9nl.com/10000en7dias/

Vas a descubrir algunas fuentes de tráfico
para generar prospectos a $0.01 centavo de
dolar!

¿Quieres tener una lista de suscriptores
que te genere dinero cada vez que envías
un email?

Hazlo Ahora. Comienza HOY:
>>>> http://9nl.com/10000en7dias/

Cuando accedas a este sistema de 10,000 en
7 días vas a recibir como BONO un sistema
"ya pre-diseñado" para que comiences a
construir tu lista hoy :)

Si no tienes un AutoResponder para construir
tu Lista o el que tienes es demasiado caro...

Puedes probar 7 días el E-Responder Pro
por solo $9,97 al mes para 500 Suscriptores.
Y solo $4 mas al mes para 10.000 Suscriptores
extra:
>>>> http://9nl.com/e-responder-pro/

Cordialmente,

-Fernando Muñiz

33213 GIJON - Asturias. España

-

Para cancelar la suscripcion en esta lista y no recibir mas mensajes clic aqui
http://www.gvomail.com/unsubscribe.php?k=2f9e780a4b23e2a24f2fd444f6d63f34&fk=e7c4cc03d04e9bda39baa838b3de403b443a402f740e54fe79798f1f24caafccd2d4d9be6d31b83f65c40d75aff95992

jueves, 28 de junio de 2012

Cristalab

Hacer ping a otro servidor con Javascript
Google IO, día 2. Cubrimiento fotográfico en vivo
Banderola con efecto de costura para uso Web en Photoshop
Detección de choque entre elementos con Plugin HitTest en jQuery

Hacer ping a otro servidor con Javascript

Posted: 28 Jun 2012 06:24 AM PDT

En este tutorial express les muestro la manera de hacer ping a otro servidor con Javascript.

En un proyecto que estoy realizando me vi en la necesidad de realizar un chequeo rápido a otro servidor para ver si estaba en línea, es decir, necesitaba hacer un ping a otro server por medio de javascript sin PHP. La siguiente función nos regala esta posibilidad.

Código :

function ping(){     var pingserver = new Image();     pingserver.src = "http://www.cristalab.com/images/header/logo.png";       if (pingserver.height>0) {        alert("Online");     } else {        alert("Offline");     }  }

var pingserver = new Image(); // Creamos un nuevo objeto imagen
pingserver.src = "..." // El source la imagen es alguna imagen del server que queremos revisar.
if (pingserver.height>0) { ... } else { ... } // Condicional para revisar la altura de la imagen, si es menor a cero, entonces no existe, por lo tanto el server está caído, si es mayor, está en linea.

No es posible hacer un ping directamente a un servidor con javascript, pero lo que sí se puede hacer es crear una imagen con el source de alguna imagen dentro del server al que queremos hacerle el ping, revisar su altura y devolver true o false.

Rápido y útil. Espero les sirva para algo. Cualquier duda en mi twitter @kinduff o aquí en los comentarios.

Google IO, día 2. Cubrimiento fotográfico en vivo

Posted: 28 Jun 2012 05:09 AM PDT

Recuerda, que puedes leer los updates de lo que ocurre en tiempo real siguiendo en twitter a @freddier y a @cristalab.

Fotos y updates del Google IO, día 2 (abajo hacia arriba)

Directores de Cirque du Soleil en Google IO 2012

Todos estos juegos corren en Chrome, en HTML5

El holograma 3D de Google App Engine flotando en el aire

Google Compute Engine

Urs Hozle, VP de ingeniería de Google

La estrategia Google Drive en una foto

Google Docs offline (con LOLcats) #io12

Google Docs para iPhone, Windows, Mac, Android, iPad

Google Chrome en TODOS los dispositivos

Google Chrome para iPad

Dos macbooks y cuatro Chromebooks en el escenario

2 billones de usuarios de internet en el mundo, móviles creciendo

Esperando...

Banderola con efecto de costura para uso Web en Photoshop

Posted: 05 Jun 2012 06:07 AM PDT

Repasaremos en Photoshop la creación de un elemento, la banderola, que ya habíamos utilizado anteriormente de forma simple en el diseño de páginas completas, por lo que renovaremos su estilo con un aspecto más estilizado, gracias a un efecto de textura e iluminación y una decoración de costura, realizada de forma simple gracias a la herramienta de texto.

Crearemos la base con rectángulos y la herramienta pluma, añadiéndole estilos de capa para ajustarla, junto con texto, la textura y las formas personalizadas, que completarán el trabajo e identificarán su uso en el sitio Web.

Saludos.

Detección de choque entre elementos con Plugin HitTest en jQuery

Posted: 04 Jun 2012 01:48 AM PDT

En ocasiones requerimos conocer si un objeto "choca" con otro, hitTest es el método conocido para realizar esa tarea, si bien Javascript, no lo incluye, podemos recurrir a averiguar cómo funciona y construir nuestra propia función, podremos usar frameworks o librerías, para agilizar nuestro trabajo. Para no estar copiando y pegando el código, lo ideal es crear un archivo para estas líneas de código e incluirlo rápidamente en nuestro HTML en una sola línea, por lo que al final podríamos tener un plugin.

El plugin

Siguiendo mi propio consejo de averiguar cómo funciona y construirlo se me dio por crear mi propio plugin HitTest para Jquery. Hace unos días requerí de usar este método y busqué en google un plugin que ya había utilizado pero no lo encontré tan rápido, así que me fui a buscarlo entre todas las carpetas que tengo, al encontrarlo y luego usarlo me di cuenta que no reaccionaba al colisionar con unos objetos. La anterior vez que lo empleé funcionaba porque era muy sencillo lo que estaba haciendo. Averiguando su funcionamiento, sólo usé la parte que me servía, pero al final terminé creando un plugin para Jquery, Aquí pueden ver cómo construir uno.

Pueden ver cómo funciona y descargarlo aquí.

Ejemplo

Un uso común de hitTest en páginas web, es el uso de un div que cambie su propiedad a Fixed cuando el borde superior del área de trabajo del navegador choque con este, y después el div parezca detenerse al llegar a una cierta parte de la página.
Además de la función hitTest requerimos de lo siguiente para que funcione:

HTML

Crearemos dos divs, uno que active el hitTest y otro que lo detenga, después de la etiqueta body colocamos el primer div:

Código :

  <!-- Este div desencadena el método hiTest -->  <div id="des"></div>

El segundo, va después del div que queremos mover:

Código :

  <!-- Este otro detiene el div al que le cambiamos la propiedad position -->  <div id="limite"></div>

Definimos cuánto se moverá el div #aMover por medio del div que lo contiene (#contFix), definimos el alto de este último div con CSS.

El código completo de HTML es:

Código :

  <!doctype html>  <html>  <head>     <meta charset="utf-8"/>     <title>Ejemplo de HitTest para Jquery</title>     <link rel="stylesheet" href="css/est.css">     <!-- Jquery -->     <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>     <!-- Plugin HitTest para Jquery -->     <script type="text/javascript" src="../des/jquery.hittest.min.js"></script>     <!-- Acciones -->        <script type="text/javascript" src="js/acc.js"></script>  </head>  <body>     <!-- Este div desencadena el método hiTest -->     <div id="des"></div>     <section id="cont">        <section>        </section>        <aside>           <div id="estatico"></div>           <!-- Div contenedor y que define la distancia que recorrerá el div a mover o a cambiar propiedad position -->           <div id="contFix">              <!-- Div que cambiará de propiedad position -->              <div id="aMover"></div>              <!-- Este otro detiene el div al que le cambiamos la propiedad position -->              <div id="limite"></div>           </div>        </aside>     </section>  </body>  </html>

CSS

Al div #des o desencadenador, le agregamos position fixed de tal forma que siempre se encuentre en esa posición de nuestra área de trabajo sin importar si movemos el scroll, un width al 100% para que abarque el ancho de nuestra ventana, en este caso tiene un borde, pero puede ser sustituido por un height de un 1px. Un top 0 podría ayudar.

Código :

  #des{     position:fixed;     display: block;     border:1px solid #f84642;     width:100%;  }

Definimos cuánto va ha recorrer nuestro div #aMover, en este caso son 450px, no hay que olvidar la propiedad position en relative, debido a que los divs (#aMover y #limite) que contendrá la propiedad absolute.

Código :

  aside #contFix{     height:450px;     background: #ff9138;     position:relative;  }

Colocamos a nuestro div #aMover, la propiedad position en absolute, de tal forma que cuando el div llegue al límite se quede en esa posición al colocarle la propiedad bottom 0, y si el desencadenador no ha tocado el div, éste se quede en la parte superior del div #contFix con un top 0. No incluir top 0 en el CSS de este div, podría causar conflictos con Jquery.

Código :

  #contFix #aMover{     position:absolute;     display: block;     height:250px;     width:100%;     background: rgba(255,243,56,0.5);  }

Para la parte final del css, al div #limite, le colocamos la propiedad position en absolute y lo mandamos hasta la parte inferior del div #contFix por medio de un bottom -1px, de tal forma que este div salga fuera del contendor (#contFix).

Código :

  #contFix #limite{     display: block;     position:absolute;     width:100%;     bottom:-1px;     border:1px solid #f84642;  }

El código completo de CSS es:

Código :

  *{margin:0;}  #des{     position:fixed;     display: block;     border:1px solid #f84642;     width:100%;  }  #cont{     display: block;     max-width:1024px;     margin:0 auto;     height:1500px;     padding:0;  }     #cont section{        display: inline-block;        width:70%;        height:100%;        background:#efeaa0;     }     #cont aside{        display: inline-block;        width:29%;        float:right;        height:100%;        background:#d4972e;     }     aside #estatico, aside #contFix{        display: block;        width:100%;     }     aside #estatico{        height:230px;        background: #ff9138;        margin-bottom:10px;     }     aside #contFix{        height:450px;        background: #ff9138;        position:relative;     }        #contFix #aMover{           position:absolute;           display: block;           height:250px;           width:100%;           background: rgba(255,243,56,0.5);          }        #contFix #limite{           display: block;           position:absolute;           width:100%;           bottom:-1px;           border:1px solid #f84642;        }

JavaScript – Jquery

Para la parte de JavaScript en este ejemplo usamos la función scroll, aunque también se puede usar un Timer para detectar cuando el desencadenador (#des) choque con el contenedor (#contFix). Cuando el desencadenador (#des) se encuentre fuera del contenedor (#contFix), al div #aMover, le colocamos la propiedad position: absolute, top: 0 y "borramos" la propiedad bottom, si no "borramos" esta última propiedad, el navegador podría no usar el top y seguir usando la propiedad bottom.

Si el div #des no hace colisión con el div #contFix, es porque éste se encuentra o arriba del contendor y necesitamos que el div #aMover se encuentre en la parte superior del div #contFix, o ha dejado atrás al contenedor, por lo que éste ya no es visible y no importa si el div #aMover, se encuentra en top 0, por lo que el siguiente código es válido:

Código :

  if($('#des').hittest('#contFix') == false){     //Si el div #des no hace hitTest con #contFix, el div #aMover debe colocarse en la parte superior de #contFix, por lo que debe ser position absolute y top 0, "borrando" también la propiedad bottom.     //Esta condición será valida cuando el #des deje atrás a #contFix, no importará si el div #aMover, se encuentre en la parte superior de #contFix, debido a que estos dos no serán visibles.      $('#aMover').css({'position':'absolute','top':0,'bottom':'','width':'100%'});  }

De no ser verdad la condición anterior, debemos cambiar la propiedad position al div #aMover a fixed, al chocar el desencadenador (#des) con el contenedor (#contFix), por lo que el div #aMover inicia su recorrido, colocamos el div #aMover en top 0, de otra forma este div se movería a la posición real que debería tener si por defecto le pusiéramos fixed.

Código :

  else{     //Cuando el div #des hace hitTest con #contFix, el div #aMover, debe moverse con el div #des, para lo cual cambiamos la propiedad position a Fixed y colocamos top 0.     $('#aMover').css({'position':'fixed','top':0,'width':$('#aMover').width()});  }

La siguiente condición se da cuando el div #aMover choca con el div #limite, deteniendo el div #aMove y colocándolo en parte inferior del div #contFix, por medio de un position absolute y un bottom 0, sin olvidar "borrar" la propiedad top. Se podría decir que esta condición anula la condición anterior.

Código :

  if($('#limite').hittest('#aMover') == true){     //Si el div a #aMover hace hitTest con el div #limite, para que parezca que detenemos el div #aMover, colocamos un position absolute, un bottom 0 y "borramos" top.              $('#aMover').css({'position':'absolute','top':'','bottom':0,'width':'100%'});  }

El código completo de JavaScript es:

Código :

  $('document').ready(function(){     $(window).scroll(function(){        if($('#des').hittest('#contFix') == false){           //Si el div #des no hace hitTest con #contFix, el div #aMover debe colocarse en la parte superior de #contFix, por lo que debe ser position absolute y top 0, "borrando" también la propiedad bottom.           //Esta condición será valida cuando el #des deje atrás a #contFix, no importará si el div #aMover, se encuentre en la parte superior de #contFix, debido a que estos dos no serán visibles.              $('#aMover').css({'position':'absolute','top':0,'bottom':'','width':'100%'});        }else{           //Cuando el div #des hace hitTest con #contFix, el div #aMover, debe moverse con el div #des, para lo cual cambiamos la propiedad position a Fixed y colocamos top 0.             $('#aMover').css({'position':'fixed','top':0,'width':$('#aMover').width()});        }        if($('#limite').hittest('#aMover') == true){           //Si el div a #aMover hace hitTest con el div #limite, para que parezca que detenemos el div #aMover, colocamos un position absolute, un bottom 0 y "borramos" top.                      $('#aMover').css({'position':'absolute','top':'','bottom':0,'width':'100%'});        }     })  })

El ejemplo funcionando.

Notas:

Este plugin tiene dos características importantes, la primera es que detecta cuándo un objeto ha colisionado con otro, así sea solo por 1px, la segunda es que no importa qué elemento se coloque primero, el resultado será igual, true o false.