viernes, 27 de julio de 2012

Cristalab

Cristalab

Músculo Spline y Master Control en 3D Maya

Posted: 27 Jul 2012 09:04 AM PDT

Terminaremos de revisar las opciones de creación de músculos en 3D Maya, estudiando sobre los conjuntos adicionales de Rig y las deformaciones que generan, haciendo un repaso por sus propiedades y cómo actúan en asignaciones específicas dentro del Nodo, gracias a las propiedades spline de ajuste de su trayectoria.

Aprenderemos también la unificación de atributos de varios grupos musculares, para lograr editarlos de forma múltiple, sin tener que complicarnos con selecciones complejas

Antes de nada, veremos cómo usar y ajustar las características de los sistemas adicionales Spline y Stretch y cómo nos aportarán más control de influencia sobre las superficies.




Saludos.

Enviar comentario

Manejo de cadenas 2/4 en Python

Posted: 27 Jul 2012 07:49 AM PDT

¿Alguna vez has escrito un programa en Python y tenido problemas con acentos o caracteres específicos de la lengua española? Este es el tema protagónico del siguiente videotutorial, y lo acompañan algunos tips más, es también, la segunda parte del apartado "Manejo de cadenas".

Enviar comentario

Crear un campo 'select' personalizado con CSS3 y jQuery

Posted: 02 Jul 2012 04:46 AM PDT

En múltiples ocasiones nos hemos visto en la necesidad, ya sea por cuestiones estéticas o por cuestiones prácticas, de crear un campo de tipo 'select' personalizado.
Chrome, el gran navegador de Google, ocasionalmente no muestra de forma correcta estos campos, sobretodo si son muy largos. En este tutorial os traigo una manera sencilla y completamente personalizable de crear este tipo de campos utilizando las listas de HTML, CSS3 y jQuery.

El código HTML


Código :

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    <head>     <title>Select con HTML, CSS y jQuery</title>     <meta http-equiv="content-type" content="text/html;charset=utf-8" />     <script type="text/javascript" src="assets/js/jquery.min.js"></script>     <script type="text/javascript" src="assets/js/script.js"></script>     <link href="assets/css/default.css" rel="stylesheet" type="text/css" />  </head>  <body>  <div id="wrapper">  <ul id="tld_r_ul">  <li title=".com">.com</li>  <li title=".net">.net</li>  <li title=".org">.org</li>  <li title=".biz">.biz</li>  <li title=".es">.es</li>  <li title=".co.uk">.co.uk</li>  <li title=".com.ar">.com.ar</li>  <li title=".us">.us</li>  <li title=".eu">.eu</li>  <li title=".xxx">.xxx</li>  </ul>     <form id="domainForm">     <div id="input_box">        <input type="text" name="nombre" id="input_id"/>     </div>         <div class="option">           <div class="tld_static" id="reg"><p id="tld_p_reg">.com</p></div>            <input id="tld_field" type="hidden" name="tld" value=""/>        </div>     <div style="clear:both"></div>     <input type="button" value="Enviar" id="boton"/>      </form>  </div>  </body>  </html>


Paso a explicar las partes importantes por fragmentos. La primera sección a tener en cuenta es:

Código :

  <ul id="tld_r_ul">  <li title=".com">.com</li>  <li title=".net">.net</li>  <li title=".org">.org</li>  <li title=".biz">.biz</li>  <li title=".es">.es</li>  <li title=".co.uk">.co.uk</li>  <li title=".com.ar">.com.ar</li>  <li title=".us">.us</li>  <li title=".eu">.eu</li>  <li title=".xxx">.xxx</li>  </ul>

En este fragmento de HTML definimos la lista que vamos a mostrar en nuestro 'select' personalizado. Como podéis comprobar, es una lista normal con la única característica especial que es el atributo 'title' en cada uno de los elementos de la lista. Seguidamente, la sección del formulario, a la que he añadido unas capas para personalizar un poco más el diseño:

Código :

     <form id="domainForm">     <div id="input_box">        <input type="text" name="nombre" id="input_id"/>     </div>         <div class="option">           <div class="tld_static" id="reg"><p id="tld_p_reg">.com</p></div>            <input id="tld_field" type="hidden" name="tld" value=""/>        </div>     <div style="clear:both"></div>     <input type="button" value="Enviar" id="boton"/>      </form>

Aquí nos centraremos especialmente en la sección:

Código :

       <div class="option">           <div class="tld_static" id="reg"><p id="tld_p_reg">.com</p></div>            <input id="tld_field" type="hidden" name="tld" value=""/>        </div>

Vemos que nuestro 'select' no es más que una div con un texto en el que está escrito el contenido del primer elemento de nuestra lista. Posteriormente, hemos creado un campo tipo 'hidden' donde guardaremos el valor que el visitante seleccione de nuestro formulario.

jQuery


Utilizamos jQuery para este tip por su sencillez de uso. Podemos utilizar cualquier otro framework que nos guste e incluso javascript puro y duro.

Os presento el código y luego los comentamos:

Código :

  jQuery.noConflict();     jQuery(document).ready(function(){     var first=jQuery("#tld_r_ul li:first").attr("title");     jQuery("#tld_field").val(first);          jQuery("#reg").click(function(){        jQuery("#tld_r_ul").css('top','39px');        jQuery("#tld_r_ul").css('left','222px');        jQuery("#tld_r_ul").toggle(200);     });        jQuery("#tld_r_ul li").click(function(){           var tld=jQuery(this).attr("title");           jQuery("#tld_field").val(tld);           jQuery("#tld_p_reg").html(tld);           jQuery("#tld_r_ul").toggle(200);        });        jQuery("#boton").click(function(){           alert(jQuery("#input_id").val()+jQuery("#tld_field").val());        });  })


Estamos usando jQuery.noConflict() porque en nuestra web usamos otras bibliotecas y así evitamos el conflicto que puede suponer usar la variable '$'.

Primera sección importante:

Código :

jQuery(document).ready(function(){ // Esperamos a que el documento esté listo      var first=jQuery("#tld_r_ul li:first").attr("title");     jQuery("#tld_field").val(first);

Como ya sabéis, utilizamos la función ready() de jQuery para que no se empiece a ejecutar el código haste que el DOM no esté terminado de cargar. Las dos líneas siguientes tienen la función de leer el título del primer elemento de nuestra lista y cargar en el campo 'hidden' su valor.

Código :

     jQuery("#reg").click(function(){        jQuery("#tld_r_ul").css('top','39px');        jQuery("#tld_r_ul").css('left','222px');        jQuery("#tld_r_ul").toggle(200);     });

Esta función espera el 'click' sobre nuestro 'select'. Una vez que nuestro visitante pincha sobre él, nuestra lista se coloca en la posición definida por la función css() y muestra la lista con toggle(). Si queréis saber más sobre la función toggle() os dejo el enlace: http://api.jquery.com/toggle/.

En la siguiente sección de código se asignan las propiedades a cada uno de los elementos de la lista:

Código :

        jQuery("#tld_r_ul li").click(function(){ // Cuando haga 'click'           var tld=jQuery(this).attr("title"); // tomamos el valor del atributo title del elemento clickeado           jQuery("#tld_field").val(tld); // asignamos el valor al campo oculto           jQuery("#tld_p_reg").html(tld); // y asignamos el valor al elemento <p>            jQuery("#tld_r_ul").toggle(200); //hacemos desaparecer la lista        });


Para terminar con la sección de jQuery, le doy la función al botón 'envíar'. En este caso únicamente he puesto un 'alert' para mostrar que está recibiendo los valores correctamente:

Código :

      jQuery("#boton").click(function(){           alert(jQuery("#input_id").val()+jQuery("#tld_field").val());        });


CSS3


Para terminar, el estilo. El CSS que os proponemos a continuación no es más que lo que estamos usando en el ejemplo. Respetando algunas reglas importantes, el resto será totalmente de vuestra elección:

Código :

    div#wrapper {     position:relative;     margin:20px auto;     padding:20px;     width:400px;     height:200px;     border:1px solid black;          }  div#input_box {     float:left;     height:32px;     width:200px;     border:1px solid #ccc;     margin-top:5px;     }  input#input_id {     border:0;     height:95%;     width:100%;     }  div.tld_static{     float:left;     width:140px;     height:32px;     margin-top:5px;     font-size:1.7em;     text-indent:10px;     -moz-border-radius-topleft: 0px;     -moz-border-radius-topright: 4px;     -moz-border-radius-bottomright: 4px;     -moz-border-radius-bottomleft: 0px;     -webkit-border-radius: 0px 5px 0px 4px;     border-radius: 0 4px 4px 0;      border:1px #CCC solid;     cursor:pointer;     background: url(../images/select.jpg) right top no-repeat;  }  div.tld_static p{     padding:0;     margin:0;  }  ul#tld_r_ul {     display:none;      background-color: #FFFFFF;      border-bottom: 1px solid #CCC;     border-left: 1px solid #CCC;      font-size: 20px;      height: 150px;      list-style: none outside none;      overflow-x: hidden;      overflow-y: scroll;      position: absolute;      width: 163px;     z-index:10000;       box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5) ;        -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5) ;       padding-left:5px;    }  ul#tld_r_ul li {     display:block;     cursor:pointer;  }  ul#tld_r_ul li:hover {     color:#fff;     background-color:#B03336;  }


Comentemos las líneas más importantes (hemos eliminado algunas líneas superfluas):

Código :

  div.tld_static{     cursor:pointer; //Con esta regla mostramos la 'mano' en lugar de la flecha del ratón     background: url(../images/select.jpg) right top no-repeat; // Esta es la imagen de la flecha típica del 'select' que hemos rediseñado para nuestro formulario.  }    ul#tld_r_ul {     display:none; //nuestra lista estará oculta hasta que se le llame      height: 150px; // Definimos una altura máxima (opción estética)      list-style: none outside none; // Definimos el estilo de la lista a nuestro gusto (hemos quitado los puntos)      overflow-x: hidden; //Ocultamos el scroll horizontal      overflow-y: scroll; //Permitimos el scroll vertical      position: absolute; // Importante, posición absoluta dentro de nuestro wrapper, que tiene posición relativa.      width: 163px; // La anchura puede ser automática. Nosotros la dejamos así por estética     z-index:10000; // Importante, que no vaya a quedar nuestra lista debajo de ninguna capa  }


Si queréis ver funcionando este 'select' podéis hacerlo en: http://blog.idaruma.com/tips/jquery
Para descargar los archivos: select_jquery.zip

Enviar comentario

Comandos de enrutamiento EIGRP en Redes

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.

Enviar comentario
Publicado por en

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)