AT boletín - INFORMA

Cristalab

2012-11-13T19:22:00.001-08:00

Cristalab

Comando Show en Redes Ethernet
Evento "Create the Web" en Londres
Diseño web para iPhone

Posted: 13 Nov 2012 02:42 AM PST

Revisaremos unas cuantas consideraciones importantes, que debemos tener en cuenta, siempre que trabajemos bajo Redes Ethernet, ya que podrían suponer la diferencia entre una topología aceptable u otra mucho más, desarrollando conceptos como los dominios de colisión y los de Broadcast, junto con información sobre el efecto de la latencia y los problemas de congestión de la red

También estudiaremos varios conceptos de segmentación de redes y su relación con los dominios de colisión, así como los límites de la emisión de mensajes de Broadcast y varios comandos útiles con Show.

Saludos.

Evento "Create the Web" en Londres

Posted: 07 Oct 2012 01:46 PM PDT

El pasado dia 2 de octubre tuvo ocasión el evento "Create The Web" en Londres. Dicho evento forma parte del Tour que Adobe está dando al rededor del mundo para mostrar su compromiso hacia la web adaptando su estrategia a los estándares web y permitiendo a los desarrolladores crear contenidos de calidad con unas nuevas aplicaciones realmente interesantes.

A dicho evento tuve el privilegio de asistir en nombre de Cristalab invitado por Adobe, con lo que tengo que agradecer tanto la invitación como el fantastico trato recibido por la organización.

Las conferencias empezaron con una Keynote de Mike Chambers quien junto a Paul Trani mostraron las nuevas herramientas para crear la web actual. Seguidos de conferencias más teóricas como las de Divya Manian que mostró la evolución de la web a nivel gráfico, y el showcase de Sally Jenkinson mostrando gran parte de las nuevas capacidades creativas de la web. Quedando claro desde un principio el enfoque total y absoluto de Adobe hacia HTML5 para la creación de contenido en la Web.

A nivel de las nuevas aplicaciones presentadas en el evento, Freddie escribió anteriormente un articulo a raiz del mismo evento presentado en San Francisco: Edge Animate, Edge Reflow, Edge Code, Edge Inspect, Edge Webfont son herramientas muy interesantes y una gran noticia para todos los desarrolladores que quieran crear contenidos de calidad adaptándose a los nuevos estándares de la Web actual.

A continuación iré escribiendo diferentes artículos para ir mostrando de forma individual las nuevas aplicaciones y características presentadas. Ya que como digo, vale la pena probarlas y profundizar en ellas.

Diseño web para iPhone

Posted: 28 Jul 2009 05:00 PM PDT

El diseño web en iPhone requiere conocimientos de HTML 5, CSS y Javascript especial para usar todo el poder de Safari Mobile. En este tutorial hablamos de cómo crear sitios web optimizados para iPhone y navegadores Webkit como Android.

Curso online de diseno y desarrollo web para ti, alfonsoSanchezG

2012-11-13T15:31:00.000-08:00

Hola alfonsoSanchezG,

En Cristalab y Mejorando.la creamos la MEJOR plataforma de cursos online que internet ha visto. Videos, sesiones en vivo, preguntas directas a los maestros, codigo compartible entre estudiantes y mucho, mucho mas.

Decidimos lanzarla con el MEJOR curso online que hemos creado. Un curso que te enseñará:
HTML5, CSS3, Javascript, jQuery, Node.js y Python con Django.

Si siempre quisiste aprender las tecnologías de frontend y backend más robustas y modernas, este curso es para ti. ¿Cómo inscribirte? Tan fácil como entrar acá:
http://cristalab.com/online

El curso inicia el 4 de diciembre, asi que inscribete ya. Solo necesitas las bases de HTML y una conexión a internet buena.

Al final del curso recibirás un diploma de certificación, impreso y firmado por los fundadores de Cristalab, Mejorando.la y Maestros del Web en la puerta de tu casa. Vivas, donde, vivas.

(Recuerda darle click al video central en el sitio de inscripción para ver un demo del curso)

No te pierdas (online desde las 19h) a Joaquín Reyes e Impromadrid, protagonistas del nuevo #FriendsOfTalent

2012-11-13T09:44:00.001-08:00

Fundación Telefónica

No te pierdas hoy a Joaquín Reyes e Impromadrid, protagonistas del nuevo #FriendsOfTalent

¡Vuelven los encuentros 'Friends of Talent'! Esta tarde, a las 19 horas, el humorista, dibujante y actor Joaquín Reyes, y la innovadora compañía de teatro Impromadrid compartirán sus experiencias en el Espacio Fundación Telefónica.

Entradas agotadas. Síguelo en directo desde aquí

Información práctica:
Lugar: Auditorio Espacio Fundación Telefónica de Madrid
(planta 2)
Dirección: Edificio Telefónica en Gran Via, 28
(entrada por C/ Fuencarral, 3. Madrid)
Fecha: 13 de noviembre de 2012
Horario: 19:00 h

Más información en: www.espacio.fundaciontelefonica.com
Twitter: @EspacioFTef / hashtag: #FriendsOfTalent

Sigue toda la actualidad de Fundación Telefónica en www.fundacion.telefonica.com

Si no ve correctamente este mensaje pulse aquí

Importante, no responda a este mensaje. Esta dirección electrónica sólo se utiliza para enviar la información desde la página http://www.fundacion.telefonica.com, y no existe un destinatario para su recepción.

Usted recibe esta comunicación porque sus datos se encuentran insertos en el fichero 'Comunicación Web', un fichero automatizado de datos de carácter personal propiedad de Fundación Telefónica, . Este fichero automatizado ha sido correctamente registrado en la Agencia Española de Protección de datos y su finalidad es 'USUARIOS REGISTRADOS PARA EL INTERCAMBIO DE INFORMACIONES Y CONTENIDOS A TRAVES DE LA PAGINA WEB DE FUNDACION TELEFONICA'. Este mensaje puede contener información privilegiada y/o confidencial. Si Ud. no es el destinatario indicado en este mensaje no está autorizado para copiar o entregar este mensaje a ninguna persona. En este caso, deberá destruirlo y se le ruega que avise al destinatario por e-mail.

SI NO DESEA RECIBIR MAS COMUNICACIONES DE FUNDACIÓN TELEFÓNICA PUEDE DARSE DE BAJA PULSANDO AQUÍ

Cristalab

2012-11-12T19:46:00.001-08:00

Cristalab

Icono de scanner en Illustrator (II)
Slider sencillo en jQuery
Como hacer un Social Bar vertical con CSS3
Vector hiperrealista en Illustrator (III)

Icono de scanner en Illustrator (II)

Posted: 12 Nov 2012 08:35 AM PST

Continuamos con la segunda entrega de nuestra miniserie de dos episodios, para comenzar a añadir los detalles adicionales a nuestro icono de un scanner en Illustrator, para dotarle de un aspecto más completo y elegante, utilizando las técnicas de recorte y suavizado aprendidas en el anterior videotutorial, para incorporar nuevas áreas de sombras e iluminación, botones y diferentes adornos.

Incluiremos nuevos detalles para recrear una botonera y un cartel de marca, gracias a uso de las formas y varios efectos.

Trabajaremos con las opciones de desvanecer y fusión, suavizando y redondeando la superficie del material para ofrecer a la ilustración de una imagen más natural, gracias al recorte de áreas con el buscatrazos para obtener diversas luces y sombras.

Saludos.

Slider sencillo en jQuery

Posted: 12 Nov 2012 01:03 AM PST

En este tutorial realizaremos un Slider sencillo en jQuery. Empezaremos con la estructura básica, eventos y animación con Javascript y lo terminaremos con un bonito aspecto en CSS. ¡Así que manos a la obra!

¿Cuándo deberíamos usar un Slider en nuestros formularios?

Fácil, cuando algún valor que nuestro usuario debe ingresar no es del todo claro para él. Por ejemplo, el usuario es consciente que debe ingresar un valor de 1 a 500px para el tamaño de su avatar pero no esta seguro que valor utilizar y como es muy incómodo probar valores en un campo de texto hasta que quede satisfecho con el elegido, debemos proporcionarle una mejor manera de hacerlo. Osea un ¡Slider!

Puedes seguir el paso a paso de este tutorial en vídeo:

Estructura básica HTML y CSS

En un nuevo documento HTML crearemos una nueva capa o DIV con clase SLIDER, la cual será nuestro contenedor principal. Dentro de ella crearemos un par de capas más con clase PROGRESS e INDICATOR respectivamente.

Código :

<div class='slider'>      <div class='progress'></div>      <div class='indicator'></div>  </div>

La primera servirá para mostrar el progreso de nuestro slider y la segunda para controlar dicho progreso.

Ok, Ahora agreguémosle un poco de estructura con CSS. Al contenedor le definimos un ancho y alto, pueden ser los valores que creamos convenientes. Agregamos un borde de un pixel (1px) y color gris. Para visualizar sus límites.
[css:1:144a0af369].slider{
border: 1px solid grey;
height: 60px;
width: 100%;
}[/css:1:144a0af369]
Ahora en la capa progress asignamos su ancho y alto en cien por ciento (100%) para que tome dichos valores de la capa contenedora slider y agregamos un color de fondo.
[css:1:144a0af369].slider > .progress{
background: #14aaf6;
height: 100%;
width: 100%;
}[/css:1:144a0af369]
Para la capa indicator definimos un color de fondo de nuestra elección, un alto de cien por ciento (100%) y un ancho un poco menor también en porcentaje (%).
[css:1:144a0af369].slider > .indicator{
background: darkred;
height: 100%;
width: 10%;
}[/css:1:144a0af369]
Ahora en el navegador podemos ver como "progress" está dentro de "slider" pero "indicator" se encuentra fuera de éste.

Para solucionar esto, debemos utilizar la propiedad position, el valor para slider será relative y en progress e indicator el valor será absolute.
[css:1:144a0af369].slider{
border: 1px solid grey;
height: 60px;
position: relative;
width: 100%;
}

.slider > .progress{
background: #14aaf6;
height: 100%;
position: absolute;
width: 100%;
}

.slider > .indicator{
background: darkred;
height: 100%;
position: absolute;
width: 10%;
}[/css:1:144a0af369]
Con esto hemos sobrepuesto a progress e indicator sin salirnos de la capa slider.

Si deseáramos que nuestro slider estuviera a la mitad de su recorrido, simplemente cambiamos el ancho de progress a un cincuenta por ciento (50%). Pero también debemos hacer que la capa indicator coincida con este cincuenta por ciento (50%). Dándole este valor a la propiedad left podremos obtener el resultado deseado.
[css:1:144a0af369].slider > .progress{
background: #14aaf6;
height: 100%;
position: absolute;
width: 50%;
}

.slider > .indicator{
background: darkred;
height: 100%;
left: 50%;
position: absolute;
width: 10%;
}[/css:1:144a0af369]

Ok, Ahora podemos apreciar como tanto progress e indicator aparentemente se encuentran a la mitad del recorrido del slider.

¿Pero la capa indicator realmente esta en dicha posición?

Para ubicar indicator en la mitad exacta del recorrido debemos darle un margen izquierdo negativo de la mitad de su ancho. En este caso menos cinco porciento (-5%).
[css:1:144a0af369].slider > .indicator{
background: darkred;
height: 100%;
margin-left: -5%;
left: 50%;
position: absolute;
width: 10%;
}[/css:1:144a0af369]
Ya con esto terminamos la estructura básica de nuestro slider.

Animación y eventos con jQuery

En el body, ya que es siempre el mejor lugar para cargar javascript, incluiremos la ultima versión de jQuery y el archivo donde ira la lógica del slider. En mi caso main.js.

Código :

          <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>          <script type="text/javascript" src="js/main.js"></script>

Ahora en la capa con clase slider capturamos el evento mousedown. Luego cuando éste se dispare, almacenaremos en la variable pos las coordenadas X e Y, en este caso serán left y top con respecto al objeto window.

Código :

     $('.slider').on('mousedown', function(e){        var pos    = $(e.currentTarget).offset();     });

Creamos una nueva variable pos-x que será la posición en X donde se produjo el evento menos la posición en X de la capa slider.

Código :

     $('.slider').on('mousedown', function(e){        var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;     });

Ahora simplemente aplicamos esta distancia (posX) como ancho de la capa progress.

Código :

     $('.slider').on('mousedown', function(e){        var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          $('.slider > .progress').css('width', posX+'px');     });

Actualizamos el navegador, y al hacer clic sobre slider vemos como progress se desplaza hasta esa posición. Hacemos lo mismo para la capa indicator pero en la propiedad left:

Código :

     $('.slider').on('mousedown', function(e){        var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          $('.slider > .progress').css('width', posX+'px');        $('.slider > .indicator').css('left', posX+'px');     });

Actualizamos el navegador y al hacer clic sobre slider, las dos capas se desplazan simultáneamente hasta esta posición. Pero tenemos un problema, cuando llegamos a los extremos de slider haciendo clic, se desborda progress e indicator.

Para corregir este comportamiento, simplemente debemos darle unos límites de desplazamiento a slider. Con una condición en la que asignaremos el valor mínimo y máximo en los que es seguro el desplazamiento. En este caso serán cero (0) como valor mínimo y el ancho completo del slider como valor máximo.

Código :

     $('.slider').on('mousedown', function(e){        var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');        }     });

Actualizamos el navegador, y vemos como progress e indicator se desplazan sin salirse de sus límites.

Ahora ordenemos un poco el código, creando una función que llamaremos move-slider y recibe como parámetro un evento. Llamamos la función cuando se dispare el evento mousedown.

Código :

     function moveSlider(e){        e.preventDefault();          var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');        }     }       $('.slider').on('mousedown', function(e){        moveSlider(e);     });

Nos cercioramos que siga funcionando correctamente y continuamos. Luego, dentro de mousedown capturamos el evento mousemove y con este llamamos nuevamente la función move-slider.

Código :

     function moveSlider(e){        e.preventDefault();          var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');        }     }       $('.slider').on('mousedown', function(e){        moveSlider(e);          $(this).on('mousemove', function(e){           moveSlider(e);        });     });

Ahora cuando se produzca el evento mouseup sobre la capa slider, desactivaremos el evento mousemove para que este solo se ejecute mientras tenemos el click sostenido.

Código :

   function moveSlider(e){        e.preventDefault();          var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left;          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');        }     }       $('.slider').on('mousedown', function(e){        moveSlider(e);          $(this).on('mousemove', function(e){           moveSlider(e);        });     }).on('mouseup', function(){        $(this).off('mousemove');     });

Actualizamos el navegador y ahora nuestro slider se desplaza tanto al hacer clic sobre él, como al arrastrar el indicador de posición.

OK, Agreguemos en el body un campo de texto que nos muestre el valor del slider mientras lo movemos.

Código :

            <label>                  Value:                   <input type="text" id="valueSlider" value="0" />              </label>

En la función move-slider crearemos una variable con el nombre value, ella va a ser igual a la cantidad en pixeles (px) donde se produce el evento multiplicado por cien (100) y dividido entre el ancho del total en pixeles (px) de la capa slider.

Código :

   function moveSlider(e){        e.preventDefault();          var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left        ,   value   = posX*100/$(e.currentTarget).outerWidth();          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');        }     }       $('.slider').on('mousedown', function(e){        moveSlider(e);          $(this).on('mousemove', function(e){           moveSlider(e);        });     }).on('mouseup', function(){        $(this).off('mousemove');     });

Ahora agregamos esta variable a la propiedad value del campo de texto que acabamos de crear.

Código :

   function moveSlider(e){        e.preventDefault();          var pos    = $(e.currentTarget).offset()        ,   posX   = e.pageX - pos.left        ,   value   = posX*100/$(e.currentTarget).outerWidth();          if(posX >= 0 && posX <= $(e.currentTarget).outerWidth()){           $('.slider > .progress').css('width', posX+'px');           $('.slider > .indicator').css('left', posX+'px');             $('#valueSlider').val(value);        }     }       $('.slider').on('mousedown', function(e){        moveSlider(e);        $(this).on('mousemove', function(e){           moveSlider(e);        });     }).on('mouseup', function(){        $(this).off('mousemove');     });

Vamos al navegador, y al arrastrar el indicador veremos cómo cambia el valor en el campo de texto.

Si deseamos que el valor máximo fuera 10, multiplicamos por este en la variable value y si quieren valores exactos, pueden utilizar el método Math.Round de JavaScript.

Agregando estilos con CSS

En nuestro archivo HTML, desactivaremos el campo de texto y crearemos dentro de slider una nueva capa con clase empty progress, la cual representará la sección del slider que aún no ha sido recorrida por el indicador.

Código :

        <div class='slider'>              <div class='emptyprogress'></div>              <div class='progress'></div>              <div class='indicator'></div>          </div>            <!--<div class='info'>              <label>                  Value:                   <input type="text" id="valueSlider" value="0" />              </label>          </div> -->

Para el fondo de la capa slider utilizaremos la imagen de una cuadrícula que ya tenemos preparada, esta la desplazaremos -25px tanto en el eje X como en el eje Y y luego eliminaremos el borde.
[css:1:144a0af369].slider{
background: url('../img/grid.png') -25px -25px;
height: 60px;
position: relative;
width: 100%;
}[/css:1:144a0af369]
En la capa progress cambiaremos su altura a un 40% y la desplazamos un 25% desde la parte superior.
[css:1:144a0af369].slider > .progress{
background: #14aaf6;
height: 40%;
top:25%;
position: absolute;
width: 0%;
}[/css:1:144a0af369]
Ahora duplicamos las propiedades de progress para crear empty progress y cambiamos su color de fondo. Puesto que la capa empty progress debe estar siempre visible, cambiamos su ancho a 100%.
[css:1:144a0af369].slider > .emptyprogress{
background: #97d9fb;
height: 40%;
top:25%;
position: absolute;
width: 100%;
}[/css:1:144a0af369]
Ahora en el navegador podemos ver que al desplazar el slider, la capa progress se sobre pone a la capa empty progress. Continuamos con el indicador, Eliminamos el color de fondo y asignamos una imagen, esta no debe repetirse.
[css:1:144a0af369].slider > .indicator{
background: url('../img/pointer.png') no-repeat;
height: 100%;
margin-left: -5%;
left: 50%;
position: absolute;
width: 10%;
}[/css:1:144a0af369]

Cambiamos el ancho actual por el ancho de la imagen que hemos utilizado. En este caso por 60px. En la margen serán 8px para el TOP, automático para la parte derecha e inferior y -30px para el left.

[css:1:144a0af369].slider > .indicator{
background: url('../img/pointer.png') no-repeat;
height: 100%;
margin: 8px auto auto -30px;
left: 0%;
position: absolute;
width:60px;
}[/css:1:144a0af369]
Ahora en el navegador podemos ver mas centrado nuestro indicador. Volviendo a nuestro CSS, en progress y empty progress agregamos un borde solido de 3px y color blanco y una pequeña sombra de 1px y color gris claro para resaltar el borde.
[css:1:144a0af369].slider > .emptyprogress{
background: #97d9fb;
border: 3px solid white;
height: 40%;
top:25%;
position: absolute;
width: 100%;
-webkit-box-shadow: 1px 1px 3px 0px #ccc;
box-shadow: 1px 1px 3px 0px #ccc;
}

.slider > .progress{
background: #14aaf6;
border: 3px solid white;
height: 40%;
top:25%;
position: absolute;
width: 0%;
-webkit-box-shadow: 1px 1px 3px 0px #ccc;
box-shadow: 1px 1px 3px 0px #ccc;
}[/css:1:144a0af369]
Ya terminando, Agregamos unos bordes redondeados de 10px. Y cambiamos el cursor de indicator, progress y empty progress para darle un mejor aspecto.
[css:1:144a0af369].slider{
background: url('../img/grid.png') -25px -25px;
height: 60px;
position: relative;
width: 100%;
}

.slider > .emptyprogress{
background: #97d9fb;
border: 3px solid white;
cursor: pointer;
border-radius: 10px;
height: 40%;
top:25%;
position: absolute;
width: 100%;
-webkit-box-shadow: 1px 1px 3px 0px #ccc;
box-shadow: 1px 1px 3px 0px #ccc;
}

.slider > .progress{
background: #14aaf6;
border: 3px solid white;
cursor: pointer;
border-radius: 10px;
height: 40%;
top:25%;
position: absolute;
width: 0%;
-webkit-box-shadow: 1px 1px 3px 0px #ccc;
box-shadow: 1px 1px 3px 0px #ccc;
}

.slider > .indicator{
background: url('../img/pointer.png') no-repeat;
cursor: move;
height: 100%;
margin: 8px auto auto -30px;
left: 0%;
position: absolute;
width:60px;
}[/css:1:144a0af369]
Con esto, hemos terminado nuestro slider, Recuerda que todo el código que vimos en este video esta disponible en el repositorio de GitHub de ninja code.

Si tienes alguna duda o pregunta, puedes hacerla en los comentarios y no te olvides suscribirte a nuestro canal de Youtube para mas ninja code.

Como hacer un Social Bar vertical con CSS3

Posted: 05 Oct 2012 04:17 AM PDT

Hola, este es mi primer tutorial y quisiera explicarles una sencilla forma de hacer el llamado social bar o social links en CSS3, que es una barra que contiene links sociales como Facebook, twiter, youtube etc, o lo que le quieras poner, ya sea texto o iconos.

Seguro los has visto en algunas páginas, esta en especial es animada y tendrá un hover que hará que gire 360 grados cuando el mouse esté sobre ella.

Este sería el código HTML:

Código :

  <!doctype html>  <head>     <title>ejemplo</title>  </head>  <body>  <div class="menu">  <a href="#"><img src="face.png" width="40" heigth="40"></a>  <a href="#"><img src="twt.png" width="40" heigth="40"></a>  <a href="#"><img src="face.png" width="40" heigth="40"></a>  <a href="#"><img src="twt.png" width="40" heigth="40"></a>  </div>  </body>  </html>

He colocado un simple div al cual lo identifiqué con una clase llamada "menú" el cual, dentro de éste se encuentran cuatro imágenes con un tamaño definido en 40 x 40px.

El código CSS:
[css:1:878b9c6f04]
div.menu {
position:fixed;
background:#88b7d5;
border:1px solid #c2e1f5;
width:57px;
z-index:100;
left:-50px;

-moz-box-shadow: 2px 3px 16px #000000;
-webkit-box-shadow: 2px 3px 16px #000000;
box-shadow: 2px 3px 16px #000000;
border-radius: 0 15px 15px 0;

transition: all 0.4s ease;
-webkit-transition:all 0.4s ease;
[/css:1:878b9c6f04]

Seleccionamos a la clase menú y declaramos su posición, la cual será fixed ya que queremos que la barra nos siga mientras damos scroll con el mouse. Agregamos un color de fondo, le ponemos un borde, y definimos el ancho de 57px. Al left (izquierda) lo correremos a -50px, para que la mayor parte del elemento quede fuera de la pantalla. Declaramos z-index y le ponemos como valor 100 para que esté sobre todas las posiciones.

Como dato, z-index no tendrá efecto si no le has seteado ninguna posición al elemento. Por si te quedan dudas o no has entendido cómo funciona darles un valor a las posiciones, esta es una página donde podrás ver como funcionan en tiempo real (recomendado): posiciones en tiempo real

Volviendo al CSS, le he colocado box shadow para darle sombra:

[css:1:878b9c6f04]
-moz-box-shadow: 2px 3px 16px #000000;
-webkit-box-shadow: 2px 3px 16px #000000;
box-shadow: 2px 3px 16px #000000;
border-radius: 0 15px 15px 0;
[/css:1:878b9c6f04]

También he redondeado con border-radius la parte superior e inferior derecha de la barra. La cantidad de sombra y el tamaño del borde puedes sacarlo si quieres de las páginas css3maker o css3please.

[css:1:878b9c6f04]
transition:all 0.4s ease;
-webkit-transition:all 0.4s ease;
[/css:1:878b9c6f04]

Yo agrego las transiciones antes de seleccionar el hover, que es el que está continuación:

[css:1:878b9c6f04]
.menu:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
left: 0px;
}
[/css:1:878b9c6f04]

El transform con valor rotate(360) es para que de una vuelta completa, y agrego los prefijos para los demás navegadores. El valor de left es de 0px para que quede pegado en todo el extremo de la página.

Ver ejemplo

Si no quieres que gire porque te resulta molesto y sólo quieres que se corra hacia la derecha, dejamos como hover left:0px.

Eso es todo espero que les ayude mucho, si quieren agregar algo comenten y muchas gracias por entrar.

Vector hiperrealista en Illustrator (III)

Posted: 04 Oct 2012 04:12 AM PDT

En este videotutorial de Illustrator comenzamos a trabajar en la zona de los ojos, para añadir más detalles específicos a nuestro retrato, utilizando nuevamente para ello, los degradados suaves a través del uso de la herramienta Malla y varios degradados en las formas, que usaremos como base creándolas con elipses o dibujándolas a mano alzada, para que formen parte de varias zonas de la ceja y las pestañas.

Saludos.

¿Quieres conocer los retos de la empresa en la era digital?

2012-11-12T06:40:00.001-08:00

Fundación Telefónica te invita a

EMPRESA 2020: nuevos modelos de negocio en el mundo digital

El próximo 22 de noviembre, a las 18 horas, comienza el ciclo de conferencias “Empresa 2020, los retos de las organizaciones" en Espación Fundación Telefónica. A lo largo de 5 jornadas, se reflexionará sobre cómo la digitalización afecta a todos los sectores de la actividad económica, creando nuevas relaciones, nuevas oportunidades y llegando incluso a redefinir el modelo de negocio de algunas industrias.

Programa:

- 22 de noviembre: Retos y oportunidades para las empresas en tiempos de redes.

- 22 de enero 2013: Perspectivas ante la Empresa 2020.

- 26 de febrero 2013: Marketing y comunicación.

- 19 de marzo 2013: La nueva era de la banca y las finanzas.

- 24 de abril 2013: La reinvención de los negocios.

Ya puedes inscribirte desde aquí.
(Inscripción gratuita hasta completar aforo)

Información práctica:
Lugar: Espacio Fundación Telefónica de Madrid.
Dirección: Edificio Telefónica en Gran Via, 28
(entrada por C/ Fuencarral, 3. Madrid)
Fecha primera sesión: 22 de noviembre.
Horario: 18.00-20.30h.

Más información en: www.espacio.fundaciontelefonica.com
Twitter: @EspacioFTef / hashtag: #empresa2020

Sigue toda la actualidad de Fundación Telefónica en www.fundacion.telefonica.com

Si no ve correctamente este mensaje pulse aquí

Cristalab

2012-11-11T20:01:00.001-08:00

Cristalab

Transiciones de filtros en After Effects

Posted: 28 Jul 2009 05:00 PM PDT

Aprenderemos a usar transiciones de filtros en Adobe After Effects sobre animaciones complejas, composiciones anidadas y edición gráfica de las animaciones creadas.

Cristalab

2012-11-10T19:26:00.001-08:00

Cristalab

Efectos de sonido en FL Studio
Coloreado de dibujos en Flash
Diseño web para iPhone

Efectos de sonido en FL Studio

Posted: 09 Aug 2009 05:00 PM PDT

Hay muchos tipos de efectos de sonido en FL Studio (antiguo Fruity Loops). En este tutorial veremos los efectos de audio Delay, Reeverb, Flanger, Phaser, Chorus, Compressor, Clipper, Fast Distortion y Vocoder.

Coloreado de dibujos en Flash

Posted: 09 Aug 2009 05:00 PM PDT

En este tutorial de coloreado digital, veremos el proceso de entintado de personajes y dibujos usando Adobe Flash como herramienta.

Diseño web para iPhone

Posted: 28 Jul 2009 05:00 PM PDT

Cristalab

2012-11-09T19:48:00.001-08:00

Cristalab

Explosión de planetas en After Effects
Switches y conexión de consola en Redes
Plantillas de CoffeeScript en Node.js

Explosión de planetas en After Effects

Posted: 09 Nov 2012 06:12 AM PST

En este videotutorial haremos la animación de un planeta en explosión en After Effects, añadiendo un nuevo planeta a nuestra recreación espacial del anterior videotutorial y haciéndolo estallar, gracias a la combinación de diferentes efectos de iluminación, destellos y los sistemas de partículas ofrecidos por el software y que aportaran el toque final a la simulación, incorporando fragmentos y nubes de gas arrojados al espacio, producto del acontecimiento.

Crearemos el planeta con ruido fractal y el efecto CC Sphere rodándolo correctamente gracias a la animación que incorporaremos en los atributos.

Completaremos la escena con la explosión creada, usando resplandores y desenfoques, junto a destellos y efectos de partículas, después de incluir una atmósfera y fracturas, recreadas duplicados y modificando los ajustes correctos.

Saludos.

Switches y conexión de consola en Redes

Posted: 04 Oct 2012 04:07 AM PDT

Estudiaremos las características más importantes de los diferentes modelos de Switches y las diferentes relaciones que mantienen sus atributos, con diversos aspectos de nuestras redes y que deberemos conocer a fondo para determinar qué tipo de dispositivo debemos de usar en una Red o área concreta, gracias a la definición de su capacidad de proceso y de los valores y atributos más adecuados, que lo diferencian del resto.

Aprenderemos las principales configuraciones de forma y modelo, centrándonos en los sistemas fijos, modulares o apilables y los beneficios que aporta cada uno de ellos, como ancho de banda y rendimiento.

Completaremos el episodio repasando varias funcionalidades y aprendiendo cómo se realiza una conexión de consola y cuáles son los parámetros adecuados a configurar en nuestro Host.

Saludos.

Plantillas de CoffeeScript en Node.js

Posted: 25 Sep 2012 03:34 AM PDT

CoffeeScript es sin duda uno de esos lenguajes en los que uno quiere programar, no usa puntos y coma, nada de llaves, los callbacks son sencillos (->) y entre varias cosas un poco más avanzadas de las que seguro un día hablaré.

Programar un servidor de Node.js con CoffeeScript es extremadamente sencillo, nada fuera de lo normal en realidad, la sintaxis es muy sencilla y con pocas líneas de código tienes un servidor funcionando.

Para mí, lo interesante llegó cuando descubrí ECO, para los que hayan programado en Ruby on Rails, éste engine les resultará bastante familiar puesto que es el similar de las extensiones .html.erb en Rails; para los que nunca haya usado Rails, ésto significa que puedes embeber código dentro de HTML, puedes hacer uso de condicionales, variables, ciclos y más.

¿Qué necesito para usar ECO?

Los requerimientos en realidad son muy sencillos.

Un servidor con Node.js
CoffeeScript
Consolidate - Maneja engines en Node.
Eco

A continuación te dejo un vídeotutorial dónde se explica cómo configurar un servidor de Express para poder utilizar Eco.

Si quieres empezar de cero y aprender a configurar el servidor con la sintaxis de CoffeeScript, puedes ver éste otro tutorial:

Cristalab

2012-11-08T20:05:00.001-08:00

Cristalab

Coloreado de dibujos en Flash

Posted: 09 Aug 2009 05:00 PM PDT

En este tutorial de coloreado digital, veremos el proceso de entintado de personajes y dibujos usando Adobe Flash como herramienta.

Efectos de sonido en FL Studio

Posted: 09 Aug 2009 05:00 PM PDT

Webinar de Faceboooook: GRATIS

2012-11-08T14:31:00.000-08:00

Si, ya sé que te enteraste del Webinar
Gratuito de este Sábado - 3PM

"Las 3 Claves Para Promover Tu Negocio en
Facebook En 24 Horas o Menos.... Fácilmente"

Si aun no has conseguido tu enlace único,
haz clic aquí y te enviaré tu Link de Acceso

Si ya lo tienes? Entonces nos vemos ahí...

APRENDERÁS:

* Las 3 Claves Para Posicionar Tu Negocio,
Idea o Servicio en Facebook

* Las Técnicas de Clase Mundial (World Class)
Que Debes Usar en Tu Página de Facebook

* La Fórmula Para Crear Una Lista de Fans
Calificados Que Compren tu Producto o Tu
Servicio

* Cómo Volverte La "Celebridad" en tu Nicho
de Mercado

[ Clic Aquí Para Registrarte De Inmediato ]

Nos vemos el Sábado próximo, ok?

    Sinceramente,

Carlos Gallego - Dedicado a Tu Éxito
1-786-201-3403 - U.S.A

P.D: Nunca, nunca pierdes el tiempo cuando
asistes a mis seminarios, Nunca. Siempre te
llevas algo, Siempre!.

[ Clic Aquí Para Registrarte De Inmediato ]

______________________________________________________
Nota: No te desuscribas ni califiques esto  como Spam o correo no deseado. Si lo haces, jamás  volverás a recibir mis invitaciones ni materiales gratuitos

LatinDesigners Corp, POBOX 772311, Miami, FL 33177, USA

To unsubscribe or change subscriber options visit:
http://www.aweber.com/z/r/?jIzMbMzsTLQs7KwMnOwMnLRGtIxszGyMLBwM

Sigue en directo las historias de Josu Feijoó, Anne-Dauphine Julliand y Sandra Ibarra

2012-11-08T03:05:00.001-08:00

Fundación Telefónica

No te pierdas las historias de Josu Feijoó, Anne-Dauphine Julliand y Sandra Ibarra

Los Congresos 'Lo que de Verdad Importa' te ofrecen en Barcelona un viernes de excepción, con 3 historias únicas: las de Anne-Dauphine Julliand, Josu Feijoo y Sandra Ibarra.

-10:30: Anne-Dauphine Julliand, autora del libro 'Llenaré tus días de vida', donde narra la experiencia de amor de su familia atendiendo a su pequeña hija, con una enfermedad degenerativa.

-12:00: Josu Feijoó, montañero, aventurero e incluso astronauta, fue el primer diabético del mundo en subir las Siete Cumbres.

- 16:00: Sandra Ibarra, fundadora y presidenta de la Fundación Sandra Ibarra de Solidaridad Frente al Cáncer, dedicada a ofrecer becas de investigación y a desarrollar campañas de prevención.

Sigue el encuentro desde las 10 h en directo desde aquí.

Información práctica:

Fecha: 09 de noviembre de 2012.
Horario: 10:00 h

Más información en: lqdvi.fundacion.telefonica.com
Twitter: #LQDVI

Sigue toda la actualidad de Fundación Telefónica en www.fundacion.telefonica.com

Si no ve correctamente este mensaje pulse aquí

Cristalab

2012-11-07T19:09:00.001-08:00

Cristalab

Animación de planetas en After Effects

Posted: 07 Nov 2012 08:02 AM PST

Daremos forma a un entorno espacial en After Effects, aprendiendo a generar elementos estelares, tales como planetas y estrellas, con la única ayuda de varias herramientas y los efectos del programa, al mismo tiempo que estudiamos nuevas formas de generar destellos de lente, personalizados a nuestro gusto gracias a la combinación de varios y animarlos con los atributos de opacidad y resplandor.

Trabajaremos con el Ruido HLS y el efecto de niveles para crear un fondo con múltiples estrellas.

Completaremos nuestro trabajo asignando efectos de resplandor y destellos de lente personalizados, a nuestras creaciones de planetas, conseguidos con el uso del efecto CC Sphere en capas con Ruido Fractal animado.

Saludos.

Retoque fotográfico en Photoshop

Posted: 03 Oct 2012 08:53 AM PDT

En este videotutorial de Photoshop, continuaremos estudiando las técnicas de retoque estético, desde las opciones de ajuste automático de tono y contraste que nos ofrece el programa y que nos darán soporte para corregir rápidamente nuestras tomas, hasta múltiples herramientas para realizar efectos y añadir profundidad de campo, que nos permitirán ajustar la base sobre la que trabajaremos posteriormente y centrarnos en los procesos específicos de nuestra labor y no en otros aspectos incorrectos o pobres, de las fotografías.

Saludos.

Esto Ayudo Amazon a ser Una empresa Multimillonaria!

2012-11-07T15:47:00.000-08:00

atboletin

Existe un modelo de negocio que utilizan
empresas como Amazon, Citibank, Yahoo,
Godaddy y muchas mas… para generar
millones de dólares al año en ingresos.

Y es el mismo modelo de negocio que les
permite generar cientos de miles de
dólares al año a personas comunes como
tu y como yo.

Sino, mira como estos 2 chicos generan mas
de U$ 20.000 dólares al mes desde su casa:

http://fernandomuniz.com/el-negocio-de-los-7-billones-de-dolares/

Ellos alcanzaron un excelente estilo de vida
gracias a este modelo de negocio y hoy están
dispuestos a contarte cuales son las 3 claves
que les permitieron alcanzar estos ingresos.

Mira el video Gratuito aqui:

http://fernandomuniz.com/el-negocio-de-los-7-billones-de-dolares/

También van a compartir contigo las razones
principales de porque muchos fracasan en
internet y como tu puedes evitar que eso
te pase a ti

Si quieres aprender lo nuevo en los negocios
por internet te recomiendo altamente que
veas este video.. me lo agradecerás luego.

http://fernandomuniz.com/el-negocio-de-los-7-billones-de-dolares/

Un abrazo!

-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=e7c4cc03d04e9bda39baa838b3de403bced1d71a199d925287ef82b4f8cb926de213c4b20a4666d5c97fd72dbb73df9e

[Hackarg]:193 Compilación de correos para hackarg@googlegroups.com - 1 mensaje en 1 tema

2012-11-07T11:48:00.001-08:00

Resumen del tema de hoy

Grupo: http://groups.google.com/group/hackarg/topics

Diplomado en Ciencias Forenses con Mencion en Seguridad Informatica [1 actualización]

Diplomado en Ciencias Forenses con Mencion en Seguridad Informatica

INIF PERU <encuentrocriminologia@gmail.com>

http://www.computo-forense.blogspot.com/2012/11/diplomado-en-ciencias-forenses.html

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoGRFQ5inxerweWTd75fZZP_vREXYTSlYZPAzOn7l_Mie9lklxXxp040LgJlIUwnC_KVcaxEcCdXrX1-9bADRoOdKuXUDo3StCQf9OSWgMhpOLIiW1mhEMTPfNS5kjBMm1peV91bC7SFCr/s1600/diplomado.JPG

http://www.facebook.com/sedeforense

Has recibido este mensaje porque estás suscrito al grupo de Google hackarg.
Puedes realizar una publicación por correo electrónico.
Para cancelar la suscripción a este grupo, envía un mensaje vacío.
Para obtener más opciones, visita este grupo.

--
Has recibido este mensaje porque estás suscrito a Grupo "[Hackarg]
Hackers Argentinos" de Grupos de Google.
Si quieres publicar en este grupo, envía un mensaje de correo
electrónico a hackarg@googlegroups.com
Para anular la suscripción a este grupo, envía un mensaje a
hackarg+unsubscribe@googlegroups.com
Para obtener más opciones, visita este grupo en
http://groups.google.com/group/hackarg?hl=es?hl=es.

Administrador General
-= Foton =-

Cristalab

2012-11-06T19:47:00.001-08:00

Cristalab

Icono de scanner en Illustrator
Creación y emisión de partículas en Maya
Analizamos Adobe Edge, el compromiso de Adobe por HTML5

Icono de scanner en Illustrator

Posted: 06 Nov 2012 02:52 AM PST

Empezamos con el primer episodio de una miniserie de dos capítulos, en los que aprenderemos cómo generar un icono de un scanner en Illustrator, usando diferentes herramientas y ajustes de medición para crear la base del diseño y el recorte de formas, junto con efectos de desenfoque para incorporar sombras y suavizar el aspecto de las aristas en varias zonas, obteniendo un modelo más redondeado.

Ajustaremos el entorno, junto con las opciones de medición para facilitar las ediciones en las formas y usaremos recortes, obtenidos de duplicados y el trabajo con el buscatrazos y correctamente editados y desenfocados, para crear sombras arrojadas y añadir más realismo y naturalidad a la escena.

Saludos.

Creación y emisión de partículas en Maya

Posted: 03 Oct 2012 08:51 AM PDT

Continuamos nuestra serie de dinámicas, desde los sistemas de partículas básicas de Maya, empezando por las herramientas de generación directa de éstas, que nos ofrecerán soporte para crear conjuntos individuales y los emisores que trabajarán como punto de nacimiento de múltiples elementos, con velocidad inicial implementada.

Usaremos la herramienta Particle Tool y estudiaremos sus atributos y opciones, para la creación de sistemas estáticos individuales o en grupos aleatorios de un diámetro específico.

Terminaremos revisando varios atributos de control de la forma y repasando varias recomendaciones sobre la asignación del modo de render más adecuado, así como las posibilidades de los emisores, en sus múltiples variantes, punto, volumen o malla.

Saludos.

Analizamos Adobe Edge, el compromiso de Adobe por HTML5

Posted: 24 Sep 2012 07:30 AM PDT

Adobe tuvo hoy el evento Create the Web, donde anunció un compromiso total por HTML5, CSS3 y el nuevo Javascript. Adobe está trabajando en CSS Shaders (animaciones complejas 2D/3D en CSS) y en una suite de herramientas llamada Adobe Edge Tools & Services.

Editores de código, sistemas visuales para generar Responsive Design, fuentes abiertas para la web, suites de animación CSS3/JS y compiladores de código web a apps nativas para móviles. Esta es la respuesta de Adobe y está muy interesante.

Edge Animate

Adobe Edge Animate es un sistema de animación con el nivel de complejidad y detalle de Flash y exportación directa a CSS3. La interfaz está completamente basada en Webkit y hecha en HTML5 (como casi todo de Adobe). Las herramientas vectoriales no son tan poderosas como en Flash, pero la idea es usar Adobe Illustrator u otras herramientas externas para crear los assets que dentro de Edge Animate serán animados.

Adobe Edge Animate precarga jQuery 1.7 además de múltiples librerías de animación de jQuery. Aunque la mayoría de animaciones se hacen a través de propiedades de CSS3, asumo que se usa jQuery como fallback para que sea compatible con navegadores viejos. Esto es un ejemplo del CSS3 que genera Animate:
[css:1:0b155b2a40]-webkit-transform-origin: 50% 50%;
-webkit-transform: translate(318.44999999999993px, 200px) translateZ(0px) rotate(0deg) skewY(0deg) scale(1, 1);[/css:1:0b155b2a40]

Edge Reflow

Esta fue una sorpresa. Adobe Edge Reflow es una herramienta visual para crear sitios web basados en grillas que se autoadapten a cualquier resolución. Sí, una app para hacer Responsive Design o Diseño Adaptable. Una idea interesante, aunque no he podido ver qué tan limpio es el código que genera.

La idea de Edge Reflow no es ser el centro de trabajo de un diseño web, sino el lugar donde testeamos la adaptabilidad de los diseños antes de pasarlo a Dreamweaver, Edge Code, Sublime Text o a lo que sea.

Edge Code y Brackets

Adobe, creo, entendió la caída fuerte de popularidad en Dreamweaver y decidió crear una herramienta con el poder y versatilidad del lider de mercado: Sublime Text 2. Adobe Edge Code está basado en el proyecto open source Brackets y es un muy interesante editor de código. 100% hecho en HTML5/JS, permite editar código en tu disco duro o en "la nube", correr desde un laptop o un iPad y soporta todas las tecnologías web.

Aún le falta mucho para competir contra Sublime (Python, Ruby, Java, plugins...) pero tiene ideas muy interesantes. Si, por ejemplo, estás en un .html que hace una llamada a una función en JS, Edge Code es capaz de encontrar esa función en el .js y mostrartela ahí mismo, en el contexto, editable inmediatamente. Lo mismo aplica a CSS y otros momentos de código distribuido entre archivos. Además tiene una función para conectarse con Chrome y editar en tiempo real, pero por lo menos usando la beta de Chrome en Mac no pude hacerlo correr.

Edge Inspect

Edge Inspect es simple: Es el mismo conocido, amado y poderodo Web Inspector de Chrome, pero con la capacidad de ser multiplataforma y revisar cambios a los elementos de diseño y CSS de un HTML en tablets, teléfonos y desktops. Muy útil y derivado del proyecto Adobe Shadow.

Es en mi experiencia, un poco lento al inicio, pero una herramienta que vale mucho la pena para evitar el F5, CTRL+R y click a refresh típico del desarrollo multiplataforma.

Edge Webfonts y el nuevo Typekit

Otra sorpresa es Adobe entrando al mundo de las fuentes Open Source. Adobe historicamente ha recibido muucho dinero por sus fuentes (Myriad Pro, Helvetica Neue, etc), pero ahora ha decidido crear fuentes gratuitas y abiertas para usarlas con font-face de CSS3. Compitiendo contra proyectos como Google Web Fonts.

También anunciaron las fuentes "Source Sans Pro" para ver texto en pantallas y "Source Code Pro" para editar código. +1 para Adobe

Phonegap Build

Mi anuncio favorito. Adobe Cordova pasa a ser oficialmente Adobe Phonegap Build. Un proyecto que nos permite convertir apps HTML5 en apps nativas para iPhone, iPad, Android y casi cualquier plataforma tanto móvil como desktop. Con Adobe Phonegap están construídas muchas de las apps presentadas hoy. Phonegap Build además es un servicio en la nube para compilar en un sólo click tus apps HTML5 a todas las plataformas. Te generará los .ipa, .apk y .app necesarios para enviarlo a las App Stores. También te enviará screenshots y permitirá probar remotamente en multiples dispositivos

¿Qué tal todos estos anuncios? Adobe ha decidido dar todo por HTML5 y no puedo estar más contento. Tal como dijo @cristalab

Y encima, Adobe Edge & Tools en su versión 1.0 será perpetuamente gratis. Sólo necesitas una cuenta gratis de Adobe Creative Cloud.

Felicidades Adobe, de nuevo por el mejor camino para la web.

Una Invitación Muy Especial Para Ti...

2012-11-06T12:00:00.001-08:00

Hola!

Espero hayas pasado un buen fin de semana.

Acabo de llegar de un entrenamiento muy

Intensivo de 40 horas seguidas con Tony
Robbins en Orlando FL...

Y estoy RE-CARGADO....

Recargado para seguirte ayudando a que
puedas mejorar tu vida a través del
Marketing Online.

Me encontré en ese entrenamiento de Tony
con mi amigo Jose Luis Galvis y me habló
de lo mejor que tiene.

Y le pedí que nos dictará un seminario
gratuito sobre eso.

Aprenderás:

* Las 3 Claves Para Posicionar Tu Negocio,
Idea o Servicio en Facebook

* Las Técnicas de Clase Mundial (World Class)
Que Debes Usar en Tu Página de Facebook

* La Fórmula Para Crear Una Lista de Fans
Calificados Que Compren tu Producto o Tu
Servicio

* Cómo Volverte La "Celebridad" en tu Nicho
de Mercado

Para participar GRATIS de este Entrenamiento
ONLINE solo debes hacer clic y conseguir
Tu Enlace Único desde Aquí

Además, él mostrará cómo otros Emprendedores
Latinomericanos han logrado sus objetivos usando
sus técnicas y casos de éxito.

No te pierdas esto; el contenido es INVALUABLE.

Tu sabes que toda invitación que hago a estos
seminarios, no es tiempo perdido... siempre
te llevas mucho valor para tu vida y negocios.

[Clic Aquí Para Registrarte De Inmediato]

Tu Acceso a mi Entrenamiento Virtual es GRATIS.

Si ya conoces el nivel de mis entrenamientos, entonces

ya sabes que mis eventos agregan siempre VALOR a
otros, SIEMPRE!...

Son Contenido PURO, ÚTIL y 100% REAL.....

El único problema, es que mi sala virtual SÓLO
permite 999 personas...

Así que Regístrate Ahora para no quedarte por fuera.

[Clic Aquí Para Regístrarte De Inmediato]

Nos vemos el Sábado próximo, ok?

    Sinceramente,

Carlos Gallego - Dedicado a Tu Éxito

1-786-201-3403 - U.S.A

LatinDesigners Corp, POBOX 772311, Miami, FL 33177, USA

To unsubscribe or change subscriber options visit:
http://www.aweber.com/z/r/?jIzMbMzsTLQs7KwMnOwMnLRGtIxszMzsDByM

Pequeños cambios, grandes resultados!

2012-11-06T07:52:00.001-08:00

Pequeños cambios, grandes resultados!

Hola, Usuario Web -- Los resultados de tu negocio o profesión siguen la ley de causa y efecto: los malos resultados son efectos que pueden ser revertidos rápidamente si atacamos sus causas principales. Esto se estudia especialmente en la Teoría de Restricciones (en inglés: TOC, por Theory of Constraints)...

No voy a hacer un análisis sobre el tema (que, entre nosotros, es muy interesante y puedes investigarlo en Internet si eres medio apasionado como yo por estos asuntos), pero puedo decirte que -básicamente- la Teoría de Restricciones aconseja identificar y trabajar sobre las causas que más influencia ejercen sobre un resultado dado.

La lógica es clara: un poco de trabajo en esas causas puede generar un gran cambio en el resultado de tu negocio.

Bueno, no quiero quitarte más tiempo...

Necesitas atraer más clientes? fidelizarlos? rentabilizarlos mejor? O realizar algún tipo de marketing en Internet?

Yo puedo ayudarte en persona o por Skype, sigue el link...

www.alzaa.com

Atentamente,

Miguel Angel de Alzaa

miguel@marketineros.com

MDA Creative Marketing - Centenario 2151, Asunción, 1209 Paraguay.

To unsubscribe or change subscriber options visit:
http://www.aweber.com/z/r/?rJzM7CwctKwMnAwMDGyctEa0jGzMzMyczCw=

Impromadrid y Joaquín Reyes en el nuevo encuentro Friends of Talent

2012-11-06T06:22:00.001-08:00

Fundación Telefónica te invita al encuentro con:

Impromadrid y Joaquín Reyes, protagonistas del próximo #FriendsOfTalent

¡Vuelven los encuentros 'Friends of Talent'! El próximo martes 13 de noviembre, a las 19:00 horas, el humorista, dibujante y actor Joaquín Reyes, y la innovadora compañía de teatro Impromadrid compartirán sus experiencias en el Espacio Fundación Telefónica.

Inscríbete desde aquí

Más información en: www.espacio.fundaciontelefonica.com
Twitter: @EspacioFTef Hashtag: #FriendsofTalent

Sigue toda la actualidad de Fundación Telefónica en www.fundacion.telefonica.com

Si no ve correctamente este mensaje pulse aquí

REDAkky: Boletín Informativo Akky Noviembre 2012

2012-11-05T21:38:00.001-08:00

Boletín REDAkky Noviembre 2012

		El nuevo consumidor web y sus características Conoce algunas de las características del consumidor web actual.

		Hazte visible en las redes sociales Las redes sociales son importantes para hacerse notar, sin embargo utilizarlas en nuestro beneficio no siempre es una tarea fácil.

		Publicidad al alcance de sus manos Los dispositivos móviles con acceso a Internet se han convertido en una herramienta útil para el marketing.

		Akky se une al buen fin en línea Akky se une a las increíbles promociones del Buen Fin con ofertas exclusivas

Contenido

	El nuevo consumidor web y sus características
	Hazte visible en las redes sociales
	Publicidad al alcance de sus manos
	Akky se une al buen fin en línea

Akky RED es una publicación mensual. Espera el siguiente envío en

Diciembre 2012

Monterrey: 83875346, Interior de la República:
01 (81) 83875346.
Lada sin costo: 01 800 9255969,
correo electrónico: ayuda@akky.mx.
Av. Eugenio Garza Sada No. 427, Loc 4, 5 y 6, Col. Altavista, Monterrey, N.L. C.P. 64840.

Has recibido este mensaje
por estar inscrito al Boletín Informativo de Akky.
Si deseas dejar de recibir el boletín haz clíc aquí.
Por disposición de PROFECO, se incluye su teléfono de atención al consumidor: 01 800 4688722.
Si no puedes visualizar el boletín por favor haz clíc aquí.

Cristalab

2012-11-05T19:40:00.001-08:00

Cristalab

Direccionamiento MAC y comando Banner en Redes

Posted: 05 Nov 2012 05:24 AM PST

Aprenderemos cómo se utiliza y se procesa el direccionamiento MAC en Redes y cuáles son las tareas que lleva a cabo el Switch para procesarlo, mientras estudiamos la visualización de las tablas que se generan y revisamos nuevos comandos de seguridad y alertas a través de avisos, usando configuraciones sencillas dentro de Packet Tracer.

Repasaremos en qué se basa el direccionamiento de capa 2 y cuales son las direcciones físicas y elementos que intervienen dentro de él, mientras incluimos nuevos comandos de seguridad y otros de avisos, como el útil banner, que nos ayudarán a mantener el control de acceso en nuestros dispositivos.

Saludos.

Monitorizar conexiones de Apache en tiempo real con Bash

Posted: 02 Oct 2012 04:00 AM PDT

Bash (Bourne again shell) es un programa informático cuya función consiste en interpretar órdenes, está basado en la shell de Unix y es el intérprete por defecto de la mayoría de las distribuciones de Linux.

Bash contiene una gran variedad de formas de interpretar los recursos del sistema de modo matemático y renderizar los resultados en un formato fácil de entender. Esto es especialmente útil cuando hay la necesidad de optimizar alguno de los recursos por defecto de Linux, como MySQL, servidor de correo, Apache, ect...

En este ejemplo vamos a mirar y analizar los recursos que están en uso de Apache, la memoria que está siendo utilizada por los procesos actuales de Apache, las posibles conexiones disponibles y el uso general de memoria de la máquina.

Hemos elegido este script para el tutorial porque utilizamos las funciones matématicas internas de Bash para números enteros. Utilizamos llamadas a BC (módulo de cálculos de Bash) para números reales y utilizamos expresiones regulares y manipulación de arrays. Veremos sentencias condicionales, uso de bucles WHILE y uso de funciones.

Código :

  #!/bin/env bash    # Definimos la función  function doStat()  {  # Define variables  # Iniciación de variables que vamos a usar    cnt=0     cpl=0    di1=1    di2=$((1024*1000))    di3=1024    max=0    statusbar=38    tot=0    ty1="Mb"    ty2="Mb"    ty3="Mb"    ty4="Mb"    ty5="Mb"    # Compruebo si estamos en un servidor con cPanel instalado, ya hay ligeras variaciones en el formato de "TOP"  # Aquí vemos una sentencia condicional, siempre empieza por if, hay que observar que despúes del corchete "[" siempre hay que dejar un espacio. Igualmente, hay que dejar un espacio antes del corchete de cierre.    if [ -d /usr/local/cpanel ]; then      cpl=1      di1=100    fi  # Cerramos la sentencia con "fi"  # Comprobar si la memoria encontrada en top contiene el caracter "m" para saber que si los resultados se presentan en Mb o Kb    mck=`top -b -c -n 1|grep -E "apache|httpd"|awk '{print$6}'|grep -c m`    if [ $mck -ne 0 ]; then      di1=1    fi  # Cargamos en la variable fre la memoria disponible    fre=`grep -E "^MemFree:" /proc/meminfo|awk '{print$2}'`  # Cargamos en la variable total la memoria instalada    total=`grep -E "^MemTotal:" /proc/meminfo|awk '{print$2}'`    # Cargamos en mem la memoria usada por Apache. La sacamos de la función top.    mem=`top -b -c -n 1|grep -E "apache|httpd"|grep -v grep | awk '{print$6}'|sed -e 's/[a-zA-Z]//g'`    # Bucle para mirar cada proceso y calcular ( por proceso )  # avg - media  # max - máxima memoria usada  # tot - total de memoria usada      for m2 in $mem    do  # Comprobamos si la memoria es un valor entero o un valor real. Aquí usamos una expresión regular en la condicional.      if [[ $m2 =~ ^[0-9]{1,3}\.[0-9]{1,3}$ ]]; then  #IFS es el valor interno de Bash para el separador de variables internas        OIFS=IFS        IFS='.'        m2=($m2)        IFS=$OIFS  # La parte real del número la guardo en m1        m1=${m2[1]}  # La parte entera la guardo en m2        m2=${m2[0]}  # Miramos el número de caracteres que hay en la parte real. Para hacer las conversiones        m3=${#m1}        m4=10        if [ $m3 -eq 2 ]; then  m4=100; fi        if [ $m3 -eq 3 ]; then  m4=1000; fi  # Convertimos a decimal        m3=$(((m1*1024)/m4))  # Calculamos tamaño del decimal        m2=$(((m2*1024)+m3))      fi  # Fin de la comprobación de números reales      m=$((m2/di1))  # Cargamos en max el proceso que más memoria ocupa      if [ $m -gt $max ]; then        max=$m      fi  # Incrementamos contador y total      cnt=$((cnt+1))      tot=$((tot+m))      avg=$((tot/cnt))    done  # Fin del bucle  mxu=$((tot*1024))    # Comprobamos la media y evitamos la división por cero    if [ $avg -eq 0 ]; then      avg=1    fi    # Obtenemos el número total de los procesos de apache  # escuchando o conectado    cnt=`lsof -i :80|grep -iE "esta|ist|esc"|wc -l`    # Calculamos los procesos disponibles de la máquina    ava=$(((fre/avg)/100))    wst=$(((fre/max)/100))  # Aquí usamos BC. Necesitamos un número real y bash no permite operaciones con estos de forma interna    pct=`echo "scale=2;($fre/$total)*100"|bc`    out=`echo "scale=2;($pct/100)*$statusbar"|bc|awk -F\. '{print$1}'`    # Ajustamos para cPanel si es necesario    if [ $cpl ] && [ "$out" == '' ]; then      out=0    fi    # Calculamos el uso de la memoria y convertimos a Gb si es necesario    if [ $fre -ge $di2 ]; then      ty1="Gb"      fre=`echo "scale=2;$fre/$di2"|bc`    else      if [ $fre -ge $di3 ]; then        fre=`echo "scale=2;$fre/$di3"|bc`      fi    fi    if [ $mxu -ge $di2 ]; then      ty2="Gb"      mxu=`echo "scale=2;$mxu/$di2"|bc`    else      if [ $mxu -ge $di3 ]; then        mxu=`echo "scale=2;$mxu/$di3"|bc`      fi    fi    if [ $total -ge $di2 ]; then      ty3="Gb"      total=`echo "scale=2;$total/$di2"|bc`    fi    if [ $avg -ge $di2 ]; then      ty4="Gb"      avg=`echo "scale=2;$avg/$di2"|bc`    fi    if [ $max -ge $di2 ]; then      ty5="Gb"      max=`echo "scale=2;$max/$di2"|bc`    fi    # Bucle para mostrar una barra de estado    sloop=$statusbar    statusbar=$((statusbar+3))    nline=`seq -s "=" $statusbar|sed 's/[0-9]//g'`    # Mostramos resultados    printf "%s\n" $nline    printf "Apache processes and memory usage.\n"    printf "%s\n" $nline    printf "Total installed memory: %s%s\n" $total $ty3    printf "Availiable memory:      %s%s\n" $fre $ty1    printf "Free percentile:        %s\45\n" $pct    # Mostramos la memoria usada en la barra de estado. Observamos que en el bucle while, los corchetes llevan sus espacios después y antes, como en el if que hemos descrito antes.    printf "Status bar:\n|"    while [ $sloop -ge 1 ]; do      cc="-"      if [ $sloop -ge $out ]; then        cc="+"      fi      printf "%s" $cc      sloop=$((sloop-1))    done    printf "|\n"      printf "%s\n" $nline    printf "Current usage\n"    printf "%s\n" $nline    printf "Current processes: %d\n" $cnt    printf "Average memory:\t   %s%s\n" $avg $ty4    printf "Maximum memory:\t   %s%s\n" $max $ty5    printf "Overall memory:\t   %s%s\n" $mxu $ty2    printf "%s\n" $nline    printf "Projected usage\n"    printf "%s\n" $nline    printf "Concurrent best:  %d more connection(s)\n" $ava    printf "Concurrent worst: %d more connection(s)\n" $wst    printf "%s\n" $nline  }  # Fin de la función  # Ejecutamos la función  doStat

El resultado mostrado quedaría más o menos así:

Código :

========================================  Apache processes and memory usage.  ========================================  Total installed memory: 4.09Gb  Availiable memory:      3.31Gb  Free percentile:        80.00%  Status bar:  |+++++++++-----------------------------|  ========================================  Current usage  ========================================  Current processes: 28  Average memory:    76Mb  Maximum memory:    80Mb  Overall memory:    1.99Gb  ========================================  Projected usage  ========================================  Concurrent best:  446 more connection(s)  Concurrent worst: 424 more connection(s)  ========================================

Espero vuestros comentarios y sugerencias. Si os gusta, seguiremos publicando artículos sobre el uso de Bash

Ya está aquí el Ciclo 'Big Data' (6, 7 y 8 de nov.): inscríbete o síguelo online

2012-11-05T10:22:00.001-08:00

Fundación Telefónica te invita a

'Vivir en un mar de datos': los grandes desafíos del Big Data

Las jornadas 'Vivir en un mar de datos' se celebran en el Espacio Fundación Telefónica los días 6, 7 y 8 de noviembre y cuentan con mesas redondas y talleres de la mano de grandes expertos. Los talleres ya están completos, pero aún quedan plazas libres para asisitir a las conferencias. Ya puedes inscribirte desde aquí.

También puedes seguir el evento en streaming desde aquí.

Información práctica:
Lugar: Espacio Fundación Telefónica de Madrid. Talleres en planta 3 y en MediaLab-Prado.
Dirección: Edificio Telefónica en Gran Via, 28
(entrada por C/ Fuencarral, 3. Madrid)
Fechas: 6,7 y 8 de octubre.
Horario: De 10:00 a 14:00 horas y talleres por la tarde.

Más información en: www.espacio.fundaciontelefonica.com
Twitter: @EspacioFTef

Sigue toda la actualidad de Fundación Telefónica en www.fundacion.telefonica.com

Si no ve correctamente este mensaje pulse aquí

Cristalab

2012-11-04T19:07:00.001-08:00

Cristalab

Efectos de sonido en FL Studio

Posted: 09 Aug 2009 05:00 PM PDT

(Video) La Nueva Super Economia...

2012-11-03T08:33:00.001-07:00

atboletin

¿Te gustaría vivir 100% de los Ingresos
que generas con tu Negocio por Internet?

¿O te gustaría tener un activo que te
genera Ingresos Pasivos 24 horas al
día 365 días al año?

Que te parecería un Sistemas que te
permita automatizar el proceso de
las ventas, la duplicación y el flujo de
Ingresos Pasivos, pero sin perder el
factor humano y contacto directo con
las personas.

Junto con mi socio Pedro Palatnik y
un gran grupo de emprendedores hemos
podido dar forma a "La Nueva Súper
Economía" la cual puedes conocer en
este vídeo.

Yo se que "La Nueva Súper Economía"
esta pensada para todos, pero no todos
están pensando en ella.

Sinceramente me gustaría que pudieras ser
parte de este movimiento sin precedentes,
como uno de los integrantes de nuestro
equipo.

Los próximos días vamos a pre-calificar
a cientos de personas que quieren
entrar a formar parte de este fenómeno.

Por tal motivo es importante que tomes
acción rápido y a tiempo.

Un fuerte abrazo!

-Fernando Muñiz

PD:
Si te gusta "La Nueva Súper Economía"
Asegúrate de hacer clic en el botón
"Me gusta" , ingresar tu nombre y email
para recibir las actualizaciones y déjanos
tus comentarios. ¡Gracias!

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=e7c4cc03d04e9bda39baa838b3de403b2e8007e1e8aa71d09d89b6fb479a9315e213c4b20a4666d5c97fd72dbb73df9e

Cristalab

2012-11-02T19:26:00.001-07:00

Cristalab

Instala Themes y Plugins en Notepad++
Cómo escalar y redimensionar con proporción un Paper SVG de Raphael.js
Edición no destructiva en Photoshop
Coloreado de dibujos en Flash

Instala Themes y Plugins en Notepad++

Posted: 02 Nov 2012 08:36 AM PDT

Notepad++ es un buen editor de código pero si le instalamos los plugins adecuados puede ser aún mejor. En este tutorial te mostraré cómo cambiar el fondo de color mediante un template en XML y qué plugins de Notepad++ debes tener instalados para trabajar lo más cómodo posible.

Antes que nada descarga la ultima versión desde el sitio oficial

Cambiar idioma de Notepad++

Si tu notepad++ está en Inglés y lo quieres en español, puedes cambiar el idioma dirigiéndote a Settings->Preferences en la pestaña "General" veras el recuadro de "Location" donde deberás seleccionar Español y hacer clic en cerrar.

Cambiar color de fondo

Al iniciar el programa se ve un simple editor de fondo blanco y letras oscuras. Eso cansa la vista, así que acá te dejo un Theme para Notepad++ modificado por mí con un fondo oscuro y letras bien definidas

Para activarlo debes pegar el archivo en C:\Archivos de programas\Notepad++\themes y seguir los siguientes pasos:

Ahora a mirar el cambio:

Antes

Después

Plugins recomendados para Notepad++

Bien, ahora vamos a Instalar un par de Plugins para desarrollar mas rápido. Nos dirigimos a Plugins->Plugin Manager->Show plugin Manager y esperamos a que cargue la lista de plugins y vamos a buscar y marcar a "Explorer" y "Zend Coding - Python" que lo verán casi al final de la lista y le dan a Install.

Una vez hecho eso, se instalarán los plugins y pedirá reiniciar Notepad++. Lo cierran y luego lo abren...

Activar los plugins instalados

Explorer

Presionamos Ctrl+Alt+Shift+E y podrán visualizar un explorador de archivos al lado izquierdo de la pantalla... eso nos facilitará mucho la vida y explorar nuestros proyectos directamente desde ahí sin necesidad de una ventana extra del Sistema Operativo.

Zen Coding

Ahora vemos lo que hace el Zend Coding.

Si sabes HTML, esto te gustará. En algún archivo del tipo HTML, ingresa esto .caja y presiona Ctrl+Alt+Enter y mira la magia. Zen Coding completa la estructura de las etiquetas HTML, y eso no es todo, muchos dirán que Sublime Text ya tiene eso... pero que yo sepa en Sublime Text sólo puede usar Zend Coding en archivos de tipo HTML. En cambio con Notepad++ puedes hacerlo en un archivo con cualquier extensión.

También podrías probar esto, y presionar Ctrl+Alt+Enter y ver la magia.

Codigo :

html[lang=es]>(head>title+meta[charset=utf-8]+meta[name=robots content=all])+body

o lo siguiente:

Codigo :

ul>li*4

Pueden ver mas aquí.

Otros trucos de Notepad++

Vieron que en PHP si usas DIV's en los echo no se marcan las etiquetas en comienzo y fin, muchos se ponen a contar DIVS para saber si los cerraron bien o les falta uno. Eso se soluciona facil.

Se dirigen a Configuración->Preferencias luego a la pestaña "Otros Ajustes" y en el Recuadro "Marcar etiquetas coincidentes" marcan las 3 opciones y le dan a Cerrar.

Ahora si revisan en sus PHP's, los divs se marcarán donde comienzan y terminan.

Si no recuerdas cómo escribir algo, presiona Ctrl+Barra espaciadora y te muestra un cuadro con Coincidencias a lo que estas escribiendo.

Espero les sea útil. Saludos...

Cómo escalar y redimensionar con proporción un Paper SVG de Raphael.js

Posted: 29 Oct 2012 02:32 AM PDT

Ayer mismo culminó el curso de HTML5 de mejorando.la impartido por @freddier y @cvander en Madrid. Entre los muchos contenidos que se impartieron, se enseñaron los principios básicos de cómo utilizar la útil librería de Javascript Raphaël de la cual ya se ha comentado anteriormente por acá.

Con esta librería podemos dibujar y manipular elementos vectoriales en el navegador utilizando para ello SVG, con la asombrosa característica de que si se está utilizando Internet Explorer 6+ (que no cuenta con soporte para SVG hasta la versión 9) entonces los gráficos se representarán utilizando VML.

En el curso surgió la duda de cómo lograr escalar un Paper de Raphaël de manera correcta. Aunque existe una solución para lograr esto, a mí en particular me ha dado problemas de no escalar bien los elementos en algunas aplicaciones web. Como lo prometido es deuda y les prometí a los participantes del curso que iba a publicar un pequeño tutorial de cómo lograr esto, aquí cumplo mi promesa.

En realidad no se necesita una función muy compleja para lograr nuestro objetivo, sólo con utilizar el atributo viewBox del SVG se puede lograr de manera sencilla. Este atributo se utiliza para hacer un recorte en los gráficos SVG utilizando para ello unas coordenadas iniciales del recorte y el ancho y el alto del mismo.

Utilizar el atributo viewBox directamente en un SVG

La manera de hacerlo directamente en el código del encabezado del SVG es la siguiente:

Código :

  <svg version="1.1" id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" xml:space="preserve">  ...  ...  ...  </svg>

En este caso, al tener el documento un viewBox con su mismo tamaño, se escalará proporcionalmente cuando se varíen sus dimensiones sin ocultar ninguna parte del gráfico. Esto mismo es lo que vamos a utilizar en el Paper utilizando un método propio de Raphaël: setViewBox.

Asignar el atributo viewBox al SVG usando Raphaël

La forma de utilizar el método setViewBox es la siguiente:

Código :

  Paper.setViewBox(x, y, w, h, fit);

Donde x, y, w, h corresponden respectivamente a las coordenadas x e y de inicio y al ancho y alto del recorte. El parámetro fit determinará si se desea que al gráfico se muestre completamente dentro del borde del recorte (en caso de ser true). Utilizando este método ya nuestro SVG se escalará manteniendo sus proporciones cuando se varíe de tamaño el objeto Paper mediante el método setSize.

Utilización opcional del atributo preserveAspectRatio

También existe un atributo que permite que el gráfico SVG se escale comportándose de manera diferente, nos referimos a preserveAspectRatio. Este atributo puede utilizarse para que el gráfico mantenga sus proporciones o se escale sin mantener su relación de aspecto.

Si este atributo tiene valor none el gráfico no mantendrá su relación de aspecto, los demás valores mantendrán su proporción pero variarán la posición del mismo con respecto al borde definido por el tamaño del SVG. Ponemos algunos ejemplos de valores que puede tomar preserveAspectRatio:

1 - xMidYMin. 2 - xMinYMax. 3 - xMaxYMin

Notar que estos valores están compuestos por la posición que deben ocupar las x y las y del gráfico, los cuales pueden ser Min (Mínimo), Mid (Medio) y Max (Máximo).

Para poder añadir este atributo al SVG debemos acceder al objeto SVGSVGElement directamente, para hacerlo accederemos a la propiedad canvas del Paper.

Código :

  paper.canvas.setAttribute("preserveAspectRatio", "xMaxYMin");

[nota:42e4aa27bb]Cada vez que se llame al método setSize del objeto Paper, el atributo preserveAspectRatio tomará su valor por defecto: xMinYMin meet o xMinYMin dependiendo de si el parámetro fit del método setViewBox se sitúa en true o false respectivamente, por lo tanto cada vez que se llame a dicho método, se debe volver a añadir el atributo preserveAspectRatio en el valor deseado.[/nota:42e4aa27bb]

Ejemplo práctico

El poder variar las dimensiones del Paper a nuestra conveniencia variando el tamaño de todos los elementos dibujados en él, nos será muy útil si se desea implementar Responsive Design utilizando gráficos vectoriales. Vamos a ver un pequeño ejemplo donde se le dará a un Paper de Raphaël las dimensiones de un div contenedor y los gráficos contenidos en el mismo se ajustarán a las dimensiones de dicho div.

Fichero CSS

[css:1:42e4aa27bb]body, html{
height: 100%;
width: 100%;
}

body{
margin: 0;
padding: 0;
}

#raphaelContainer {
height: 100%;
width: 100%;
}[/css:1:42e4aa27bb]

Fichero HTML

Código :

<!DOCTYPE HTML>  <html>  <head>  <meta charset="UTF-8">  <title>Responsive Raphael Example</title>  <link href="styles/styles.css" rel="stylesheet" type="text/css">  <script type="text/javascript" src="scripts/leaves.js"></script>  <script type="text/javascript" src="scripts/raphael-min.js"></script>  <script type="text/javascript">          var drawWidth = 100;     var drawHeight = 100;     var paper;          //---Al estar listo el DOM     window.addEventListener("load", init);          //---Inicizalizar la aplicación     function init(){                //---Crear el canvas de Rapahel        paper = Raphael("raphaelContainer", drawWidth, drawHeight);                //---Aplicar el viewBox (esta línea es la que hace que el gráfico se escale proporcionalmente)        if(Raphael.svg) paper.setViewBox(0, 0, drawWidth, drawHeight, true);                //---Dibujar todos los elementos        paper.add(leaves);                //---Al iniciar variar el tamaño        setSize();             }          //---Cambiar las dimensiones del canvas al máximo tamaño     function setSize(){                //---Dimensiones del container        var width = document.getElementById("raphaelContainer").offsetWidth;        var height = document.getElementById("raphaelContainer").offsetHeight;                paper.setSize(width, height);                //---Esta línea es la que varía la propiedad preserveAspectRatio        //paper.canvas.setAttribute("preserveAspectRatio", "xMedYMin");             }          //---Al variar el tamaño de la ventana     window.addEventListener("resize", setSize);    </script>  </head>    <body>       <div id="raphaelContainer">         </div>    </body>  </html>

Descargar los ficheros usados en el tutorial

Un saludo y ojalá les sirva de ayuda este pequeño tutorial.

Edición no destructiva en Photoshop

Posted: 02 Oct 2012 03:37 AM PDT

Aprenderemos una de las características más interesantes que nos ofrece Photoshop, cuando hablamos de retoque y que nos permitirá aplicar correcciones sobre nuestras imágenes, sin perder la posibilidad de deshacer estados de edición anteriores, además de ofrecernos herramientas para ajustar procesos que ya habíamos completado, sin que afecten a la pérdida de los posteriores que hayamos aplicado, usando para ello el trabajo con las capas de ajuste y los objetos inteligentes en Photoshop.

Saludos.

Coloreado de dibujos en Flash

Posted: 09 Aug 2009 05:00 PM PDT

En este tutorial de coloreado digital, veremos el proceso de entintado de personajes y dibujos usando Adobe Flash como herramienta.

# Marketing para profesionales independientes (2) #

2012-11-02T08:21:00.001-07:00

Usuario Web

Hola! por si no leíste mi mensaje anterior,
te recuerdo que acabo de publicar
Marketing para Profesionales Independientes.
Puedes verlo aquí:

http://www.marketineros.com/cpi01.html

Atte.

Miguel Angel de Alzáa
Director, MDA Creative Marketing

Si no te interesan mis consejos de marketing
para mejorar tu negocio y las novedades sobre
mis publicaciones, por favor date de baja
en el siguiente link:

http://www.aweber.com/z/r/?rJzM7CwctKwMnAwMDGyctEa0jGxMnIycjEw=

Marketineros.com - Centenario 2151, Asunción, 1209 Paraguay.

To unsubscribe or change subscriber options visit:
http://www.aweber.com/z/r/?rJzM7CwctKwMnAwMDGyctEa0jGxMnIycjEw=