Z-Graphics: diciembre 2009

Regala Google Chrome por navidad

"Compartir Google Chrome ahora es muy fácil. Así que si buscas ideas para tus regalos, ¿por qué no envuelves Google Chrome para regalo con nuestros envoltorios artísticos especiales, y regalas una navegación súper rápida? Google Chrome es tan fácil de usar que el encantará hasta a tu abuela."

[+/-]

Este llamativo efecto de nieve se ha hecho muy conocido para la epoca de navidad, pero nunca está de más recordarlo:

Para agregarlo a la plantilla debemos buscar (Ctrl+f) la etiqueta </head> y justo antes de ella pegar:

El script lo puedes descargar desde aqui.
Demo: El efecto está funcioando en este blog.

[+/-]

Un header particular: nubes animadas #2

Como segunda parte de este post he querido mostrar como añadir el efecto para mover cada nube con tan sólo cogerla. La verdad es que no tiene mucha utilidad por si sola, pero logra distraer un poco, y he sabido de visitantes que se ponen a "jugar" con las nubes en Z-Graphics :)

El codigo html que ya teniamos es:

Lo primero que debemos hacer es (si es que no lo hemos hecho) agregar la libreria jQuery a la plantilla (justo antes de </head>):

<script src="https://www.google.com/jsapi"></script>
  <script>
     google.load('jquery', '1.3.1');
  </script>

O tambien podemos usar:

Despues de esto debemos agregar tambien los scripts del efecto:

Los dos archivos anteriores los puedes descargar de aqui: ui.core.js y ui.draggable.js. Puedes usar estas direcciones si no tienes donde alojar los scripts, pero te recomiendo que la cambies.

Despues de agregar las librerias creamos el efecto:

Y añadimos unos cuantos estilos a la clase "movible":

Por ultimo agregamos la clase movible, que es la que tiene el efecto, a las nubes. Para eso reemplazamos el código html que teniamos antes:

Demo	Download .rar

[+/-]

e-referrer: ¿De donde provienen tus visitas?

E-Referrer es una manera sencilla de conocer de donde provienen los visitantes de tu blog o página web.
Para implementarlo sólo debes registrarte e indexar el codigo javascript que nos dan en un elemento del blog.

Puedes ver el ejemplo en la parte baja de la sidebar de este blog (referencias).

[+/-]

Un header particular: nubes animadas #1

Demo	Este particular efecto convierte la cabecera de nuestro blog/pagina web en un atractivo más. Acabo de implementarlo en Z-Graphics y he sabido de algunos visitantes que se ponen a jugar con las nubes :) (aunque en esta parte del tutorial solo explicaré cómo poner la animación).

La libreria que vamos a utilizar para agregar movimiento se llama $fx y es de libre descarga. Lo primero que debemos hacer es bajarla a nuestro computador y subirla a cualquier servidor; una vez hecho esto se le debe añadir a la plantilla:

Buscamos (Ctrl+f) la etiqueta: </head> y justo antes pegamos el siguiente código Javascript:

<script type="text/javascript">
  var ani = {
 var_nube1: {
  type: 'left',
  from: 5,
  to:  screen.availWidth,
  step: 1,
  delay: 50
 },
 var_nube2: {
  type: 'left',
  from: 0,
  to:  screen.availWidth,
  step: 1,
  delay: 100,
  onstart: function(){
   this.style.display = 'block';
  }
 },
 var_nube3: {
  type: 'left',
  from: 600,
  to:  screen.availWidth,
  step: 1,
  delay: 100,
  onstart: function(){
   this.style.display = 'block';
  }
 },
 };

 function startAnimation(){
  $fx('#nube1').fxAdd(ani.var_nube1).fxRun(null,-1);
   $fx('#nube2').fxAdd(ani.var_nube2).fxRun(null,-1);
    $fx('#nube3').fxAdd(ani.var_nube3).fxRun(null,-1);
 }

</script>

Lo que acabamos de hacer es crear las cada una de las variables necesarias para cada nube, es decir definir el tipo de movimiento (de izquierda a derecha: left), desde donde debe iniciarse la animación, hasta donde deberá ir la animación: screen.availWidth que se refiere al ancho de la ventana, y la velocidad con la que se moverá la nube.
Seguido de este código debemos pegar también los estilos:

<style type="text/css">
#nube1{
 position:absolute; 
 top:5%; 
 left:5%; 
 width:125px; 
 height:67px; 
 filter:alpha(opacity=5); 
 -moz-opacity:.5; 
 opacity:.5
 }
#nube2{
 position:absolute; 
 top:10%;

        left:15%; 
 width:125px; 
 height:67px; 
 filter:alpha(opacity=7); 
 -moz-opacity:.7; 
 opacity:.7
 }
#nube3{
 position:absolute; 
 top:20%; 
 right:5%; 
 width:125px; 
 height:67px; 
 filter:alpha(opacity=7); 
 -moz-opacity:.7; 
 opacity:.7
 }
</style>

Para cada capa (#nube1, #nube2 y #nube3) se define un ancho (width), un alto (height) y una posición: top y left. si la animacion fuera de derecha a izquierda la posición no estaría dada por left sino por right. los atributos filter:alpha(opacity=7); -moz-opacity:.7; opacity:.7 se refieren a la opacidad de la capa, se definen tres porque no todos los navegadores usan el mismo.

La animación aparecerá donde ubiquemos las nubes, en este caso deberá ser en la cabecera del blog, pero como las hemos definido con posición absoluta podemos ponerlas justo debajo del <body>:

Una última cosa: para que la animación funcione debemos llamarla, los metodos los podemos encontrar en la documentación de la libreria pero para no entrar en complicaciones la llamaremos desde el body sustituyendo <body> por <body onload="startAnimation();">

Demo	Download .rar

[+/-]

Lanzamiento de Z-Graphics en la www

Desde hace algún tiempo he venido creyendo en Z-Graphics como un empresa, siempre quise utilizar lo poco que he aprendido durante mi experiencia en blogger para prestar servicios y expandir ideas por medio de la web. Hoy en dia esa idea ha evolucionado un poco, me he asociado con algunos amigos y compañeros y hoy es el gran dia: el dia en que lanzaremos www.z-graphics.us. ( 8 - Dic- 09 / 4:00 pm)

He estado un poco ocupado en su diseño y es en gran parte por esa razón que no he vuelto a postear tan seguido como antes, pero sería gratificante recibir opiniones, sugerencias y comentarios en general acerca de su diseño.

Toda ésta nueva experiencia me ha dejado también muchas ideas para explicar y traer al blog, asi que muy pronto seguiré publicando recursos para hacer un poco más llevadero nuestro sendero por blogger.

Para que se hagan una idea de su diseño les dejo una imagen del proceso de diseño en photoshop: