Cristalab

#22: Instálate una profesión
Corrección de errores de protocolo en Redes Rip
Incorporación de Flexors en 3D Maya
Diseño de layout fluído y Responsive Design con media queries CSS
La nueva guerra de navegadores del 2012 y los prefijos de CSS3
Conceptos de enrutamiento dinámico en Redes

Posted: 23 May 2012 05:43 AM PDT

En estas épocas donde las marcas pagan por tweet, donde apps son vendidas por billones, todos cargan increíbles maquinas en sus bolsillos y donde muchos ven en ellas la oportunidad de algo más. Un humilde recordatorio.

El comic #22 de la serie Cristalab vs. The Web: "Instálate una profesión". Si esta es tu primera vez viendo el comic, mira el comic #21: Hazte millonario con AdSense! y otros anteriores.

¡Tengo un comic! ¡Me harán una película mejor que The Avengers!

Corrección de errores de protocolo en Redes Rip

Posted: 23 May 2012 04:22 AM PDT

En muchas de las topologías a las que nos enfrentemos, deberemos llevar a cabo tareas de corrección de errores y conectividad, que se producirán durante el proceso de configuración o cualquiera de las actualizaciones que deberemos llevar a cabo en la implantación del protocolo Rip, para mantener la red en funcionamiento, por lo que repasaremos los principales comandos usados para testear e identificar cualquier incidencia y corregirlas de la forma más correcta y precisa.

Además de los comandos Ping y Tracert, ya vistos anteriormente, en este videotutorial estudiaremos otros más específicos para comprobar las redes incluidas dentro del protocolo Rip y la versión de funcionamiento, además de chequear la asignación de las direcciones de red y máscaras de subred.

Saludos.

Incorporación de Flexors en 3D Maya

Posted: 23 May 2012 04:14 AM PDT

En este videotutorial empezaremos a ver las diferentes herramientas que nos ofrecen los menús de sistemas de skinning de Maya, empezando por la incorporación de Flexors en asignaciones basadas en Rigid Bind, permitiéndonos ajustar las deformaciones y refinar en los puntos críticos, donde la influencia de los huesos no funcione tan correctamente como deseamos.

Aplicaremos los ajustes sobre un modelo con un esqueleto de huesos simple, asignando el skin rígido y añadiendo los diferentes ajustes, al mismo tiempo que repasamos las opciones de cada uno y comprobamos cómo usar Lattices y Sculpt Deformers en su aplicación.

Saludos.

Diseño de layout fluído y Responsive Design con media queries CSS

Posted: 26 Apr 2012 01:24 AM PDT

Hoy vamos a enfrentar con código la base de una web pensada en Responsive Design estilo Mostly fluid. Para este tutorial te recomiendo leer Responsive Design: Diseño receptivo y adaptivo en la Web.

Es importante definir bien el HTML5 a nivel de contenedores para tener la mayor libertad al momento de manipularlas con "media queries" en el CSS3. Este diseño está basado en 2 secciones principales que manejarán los demás contenedores hijos que se ven de color rojo y azul en nuestro mockup. Además, incluye una etiqueta de metadatos interesante: el "viewport".

Viewport

El viewport es el área visible de nuestro navegador, de tal forma que podemos manipularla como se ve, haciendo que ese área visible sea igual al ancho de dispositivo, esto es súper importante para los dispositivos móviles. Veámoslo en el ejemplo:

Código HTML5:

Código :

  <!doctype html>  <html lang="es">  <head>     <meta charset="utf-8"/>     <meta name="viewport" content="width=device-width"/>     <title>Mayormente fluido</title>     <link rel="stylesheet" href="patron1.css"/>  </head>  <body>     <section>        <h2>fila1 columna1</h2>        <p>trolololol</p>     </section>     <section>        <article class="fila1">           <h2>fila2 columna1</h2>           <p>trolololol</p>        </article>        <article class="fila2">           <h2>fila2 columna2</h2>           <p>trolololol</p>        </article>     </section>  </body>  </html>

Código CSS3:

Código :

  *{margin:0;}  article{     float:left;     width:50%;  }  body{     background:#C3E5F9;     color:white;     font-size:16px;     font-family:Arial;     text-shadow:1px 1px 0 black;  }  section{     background:#12A89D;     margin:10px auto;     overflow:hidden;     padding:10px 0;     text-align:center;     width:1000px;  }  .fila1{     background:#B30F2A;  }  .fila2{     background:#1C4583;  }    @media screen and (max-width:1000px){     section{        width:100%;     }  }    @media screen and (max-width:700px){     article{        width:100%;     }  }

Es aquí en el CSS3 donde ocurre parte de la magia del Responsive Design, pero sin nuestro hermoso HTML5 esto no sería tan fácil. En un principio maquetamos todo de una forma estática, como si no existiera Responsive Design.

De tal manera que nos queda así:

Ahora en las últimas líneas de este CSS3 ocurren cosas nuevas. Nos encontramos con un @media, esto es lo que llamamos media queries.

Media Queries

Las media queries son consultas condicionales al estado del medio (medio es todo lo que pueda estar reproduciendo la web). En este caso, me interesa detectar el ancho del navegador, que obviamente se visualiza por pantalla, de tal forma que usamos @media screen y luego debemos darle la consulta que necesitamos. En este caso, un ancho máximo, quedando:

Código :

 @media screen and (max-width:1000px)

De esta forma podemos modificar estilos para resoluciones menores a 1000px de ancho.

[nota:f366c5057a]Dentro de los media queries se conserva toda la herencia de CSS, así que sólo debemos modificar lo necesario.[/nota:f366c5057a]

Ahora ha ocurrido algo que en nuestro navegador desktop a fullscreen no vemos, pero sí cuando redimensionamos hasta llegar a menos de 1000px de ancho.

Sí, sólo con cambiar el ancho de las etiquetas seccion de un tamaño fijo de 1000px a un tamaño dinámico de 100% hacemos magia. De igual manera hacemos una segunda consulta a los medios para resoluciones aún más pequeñas, aplicando la misma regla de los seccion, pero esta vez para las etiquetas articles, obteniendo como resultado una web hermosa a una sola columna

Y así es como logramos enfrentar el primer patrón de responsive design.

Todo el código de este ejercicio esta en github, puedes clonarlo y experimentar en base al ejemplo inicial

Manda todo tu feedback (preguntas, comentarios etc) a este milo hilo o también en forma de tweet a @LeonidasEsteban.

La nueva guerra de navegadores del 2012 y los prefijos de CSS3

Posted: 25 Apr 2012 05:44 AM PDT

Érase una vez en la web, un campo de batalla

Con la nueva era de HTML5, la web móvil y todas las nuevas tecnologías, mucha gente ha olvidado o simplemente nunca vivió la "Guerra de Navegadores", una época oscura en internet donde todos peleaban contra todos, todos se odiaban entre si, ningun navegador implementaba algo que otro ya lo tenía, y sentía la necesidad de tener su propia versión de dicha característica.

Era como "Game of Thrones", pero en internet.

Ésta página está optimizada para Internet Explorer 5.5 con resoluciones de 800x600

Es esa fecha en la que "Esta página web está diseñada para correr en tu viejo Internet Explorer 5.5 en resoluciones 1024x768 y tu que usas Netscape con 800x600 no me importas" era practicamente ley, y el resto de gente que usaba Netscape u Opera sufría en el olvido.

Señores, esto está ocurriendo otra vez, les presento la nueva guerra de navegadores del 2012 en la era móvil y el pésimo uso de los prefijos de CSS.

Los prefijos de los navegadores en CSS3

Código :

#logo {     -webkit-animation: annoying_blink_effect 0.150s infinite;     -webkit-transform: rotate(-15deg);     -webkit-transition: all 10s linear;  }

Safari, el navegador por defecto del iPhone y iPad, con su motor de rendereado WebKit introdujo muchas caracteristicas que han sido un boom a nivel gráfico para la web, incluyendo a las transiciones, animaciones, transformaciones, y muy pronto Adobe esta implementará los shaders para CSS, que ahora se volvieron parte del estandar de CSS3 - estas nuevas caracteristicas nos han brindado muchas nuevas posibilidades en la web; nuestras apps son mas rapidas, mas bonitas y hasta a veces su interfaz se puede comparar a la de una aplicacion nativa.

Pero esto trajo un nuevo problema, al ser los pioneros, mucha gente empezó a usar estas propiedades sin importarle el resto de navegadores, cada vez vemos menos websites siendo probadas con otros navegadores que usen la última versión de WebKit, y esta resultando en websites muy pobres que solo fueron "Diseñadas para correr en iPhone 4S", olvidando al 3GS o a los Android, ni hablar de los Window Phone, y Opera Mobile... alguien se acuerda de Opera?

Opera en el vacío: "ya nadie me quiere ;__;"

Opera, Microsoft y Mozilla se hartaron, se cansaron que aunque sus navegadores soporten muchas de estas opciones de CSS3, los "diseñadores web" solo estan diseñando, maquetando y programando para WebKit.

Es entonces cuando Opera mandó a los estándares al diablo e implementó los prefijos -webkit- a su navegador en versión "experimental", echando la culpa de todo esto a nosotros, los que trabajan en la web. ¿Y saben qué? Creo que es cierto, muchos de nosotros usan -o, -ms, -moz además de -webkit, y por último muy pocos usan la propiedad SIN los prefijos en su código.

¿Oh, no, y ahora qué podemos hacer?

No mucho, solo rezar que Opera nunca pase esto a su versión estable, esperar a que algún día todos los navegadores decidan dejar de usar prefijos (muy improbable), y aprender a escribir buen CSS.

El estándar indica que uno debe escribirlo su código asi.

Código :

#logo {     animation: annoying_blink_effect 0.150s infinite;     transform: rotate(-15deg);     transition: all 10s linear;  }

Pero esta es la web, los navegadores nunca quieren hacerte la vida fácil, entoncestienes que incluir todos los prefijos de los como se debe, además de la propiedad por defecto.

Código :

#logo {     -o-animation: annoying_blink_effect 0.150s infinite;     -ms-animation: annoying_blink_effect 0.150s infinite;     -moz-animation: annoying_blink_effect 0.150s infinite;     -webkit-animation: annoying_blink_effect 0.150s infinite;     animation: annoying_blink_effect 0.150s infinite;       -o-transform: rotate(-15deg);     -ms-transform: rotate(-15deg);     -moz-transform: rotate(-15deg);     -webkit-transform: rotate(-15deg);     transform: rotate(-15deg);          -o-transition: all 10s linear;     -ms-transition: all 10s linear;     -moz-transition: all 10s linear;     -webkit-transition: all 10s linear;     transition: all 10s linear;  }

Pero los prefijos son horribles, arruinan mi código y los odio

Entonces, haz como los pros, aprende a usar pre-procesadores como Stylus, Less o Sass.

Y si por nada del mundo puedes usar uno de ellos, arruina la velocidad de carga de tu web usando prefix free.

Siempre usen los prefijos, no dejen que las empresas detras de los navegadores nos usen de excusa para hacernos la vida imposible.

Conceptos de enrutamiento dinámico en Redes

Posted: 25 Apr 2012 04:13 AM PDT

Para comenzar a hacer uso de los protocolos de enrutamiento dinámico en Redes y aplicar los comandos que nos permitirán asignarlos a nuestros dispositivos sin errores y con efectividad, es conveniente tener claros conceptos que nos permitirán conocer las capacidades y funcionamiento de elementos que participan en su labor, como la distancia administrativa y los temporizadores.

Aprenderemos las opciones mas importantes que entran en juego a la hora de administrar los destinos y repasaremos cómo la métrica es utilizada para seleccionar la integración de las rutas en las tablas.