Z-Graphics

visuallightbox : Espectaculares galerias, sin ver código!

2010-04-01T18:49:00.000-07:00

Este software nos permite crear vistosas galerias al estilo de venatanas modales, con variedad de estilos para las miniaturas y para las ventanas mismas.

Descripción del sitio web de Visual LightBox:

Visual Lightbox JS es un programa libre asistente que te ayuda a generar fácilmente galerías de fotos web con una caja de luz: agradable efecto de superposición de estilos, en unos pocos clics sin tener que escribir una sola línea de código.
Solo arrastre sus imagenes en la ventana de Visual Lightbox, presione "publicar" y su propia galeria web con hermosos efectos se abrira en su navegador instantaneamente!
Sin codigos javascript,css,html, Sin edicion de imagenes, solo con un click tendra su galeria lista.

Visual LightBox esta disponible tanto para Prototype como para jQuery, para windows y Mac. Ha sido traducida por voluntarios a 25 idiomas!

Visual LightBox
Demos
Descarga

Visual LightBox puede descargarse de forma gratuita, sin embargo se les agrega una pequeña marca de agua (muy pequeña) en la parte inferior a cada imagen.

La isla Presidencial (Cap 1)

2010-03-10T18:17:00.000-08:00

Feliz Navidad

2009-12-22T21:47:00.000-08:00

Regala Google Chrome por navidad

2009-12-16T21:54:00.000-08:00

"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."

Efecto de nieve en el blog

2009-12-15T10:55:00.000-08:00

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

2009-12-15T10:37:00.000-08:00

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?

2009-12-13T18:34:00.000-08:00

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

2009-12-12T07:38:00.000-08:00

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

2009-12-08T09:16:00.001-08:00

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:

Identificando navegadores

2009-11-07T22:54:00.000-08:00

Es muy común en estos días que cuando por fin hemos terminado de retocar nuestra pagina web o blog, la probemos en varios navegadores para ver como se visualiza en cada uno de ellos. El problema es que a veces los cambios son muy drásticos y seria bueno dar cierto aviso a nuestros visitantes.
La manera mas fácil de solucionarlo es con un script que nos permita identificar el navegador desde el cual se visita nuestra página y dependiendo de ello mostrar un mensaje o imagen. El siguiente script debemos ponerlo en donde queremos que aparezca el mensaje (puede ser cualquier etiqueta HTML como por ejemplo: imágenes y texto).

<script type="text/javascript">

//verifico si es internet explorer

var navegador = navigator.appName;
if (navegador == "Microsoft Internet Explorer"){
document.write('Aqui va lo que aparece en caso de ser Internet Explorer');
}
else{

//Verifico si es google chrome

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome){
document.write('Aqui va lo que aparece en caso de ser Google Chrome');
}else{
//Verifico si es mozilla firefox
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(is_firefox){
document.write('Aqui va lo que aparece en caso de ser Mozilla Firefox');
}
}
}
</script>

Donde el textoen azul representa cualquier mensaje que se nos ocurra, por ejemplo:

Para mandar un un mensaje de alerta, cambiamos el document.write por alert y escribimos un mensaje.
Si queremos mostrar un enlace (para descargar mozilla si es internet explorer, por ejemplo) debemos dejar el document.write y entre comillas '<a href="#tu-enlace>el texto o imagen</a>'.

Demo (Verás un mensaje dependiendo del navegador que estes usando) :

Y aqui dejo algunas imagenes por si resultan de tu agrado:

Plantillas blogger: AllBlogTools

2009-11-06T20:24:00.000-08:00

Demo
Descarga

Demo
Descarga

Demo
Descarga

Demo
Descarga

Plantillas AllBlogTools

FleXcroll: scrollbars personalizadas

2009-09-19T19:16:00.000-07:00

Antes que nada, quiero agradecer a todos por tenerme paciencia...han sido unos dias muy ocupados y lamentablemente no he podido mantener mi querido blog como siempre.

Hace unos dias Xabier me preguntaba como hacer que las scrollbars (las barras de desplazamiento de los navegadores) personalizados tambien se visualizen en mozilla y no solo en internet explorer. Me acordé que hace mucho trabajé con un script qu me lo permitió y he querido compartirlo debido a que los resultados son sorprendentes y que muy bien :)

Primero que todo debemos adjuntar a la plantilla el archivo javascript y el css de FleXcroll:

Despues de adjuntar el script y el css, lo primero será crear la capa (div) a la que le queremos agregar el scroll personalizado. En este ejmplo se llamará "miscroll". Es importante y no se debe olvidar que la capa debe tener como clase la palabra flexcroll.

<div id="miscroll" class="flexcroll">
...el contenido debe ir aqui...
<div>

A esta capa vamos a añadirle algunos estilos:

#miscroll {
width: 200px;
height: 100px;
overflow: auto;
background: #D5EADE;
padding: 10px;
}

Donde la propiedad overflow determina si se aplica o no el scroll, en este caso (auto) las barras solo aparecen si el contenido es mayor a las dimensiones de la capa dadas en width (ancho) y height (alto).

Añadiendo un poco de texto nuestro ejemplo deberá verse asi:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.

Si quieres que tambien aparezca la barra horizontal hay que añadir dentro de miscroll otra capa con un ancho mayor, algo como esto:

#miscrollHorizontal {
width:300px;
}

y el html debe quedar asi:

<div id="miscroll" class="flexcroll">
<div id="miscrollHorizontal">
...el contenido debe ir aqui...
</div>
<div>

nos debe quedar asi:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ultrices facilisis risus. Aenean sollicitudin imperdiet justo. Nam sed nulla sed metus blandit pretium. Morbi odio. Maecenas vestibulum dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nullam in elit. Nam venenatis urna id diam. Quisque porta. Sed ultricies, sem vel gravida mollis, pede lectus vehicula orci, quis sodales mauris velit vitae dui. Sed tincidunt mauris ut libero. Suspendisse potenti. Praesent adipiscing. Sed sem. Ut non justo. Cras pretium nibh scelerisque nibh hendrerit venenatis.
Nullam lobortis, dui nec accumsan molestie, ligula libero porta urna, in tincidunt ante lacus ac diam. Vestibulum erat risus, scelerisque non, mattis sit amet, aliquet convallis, enim. Sed mattis. Phasellus tristique. Nullam metus ipsum, sagittis at, tempor non, consectetuer eget, massa. Curabitur metus lacus, fringilla ac, interdum condimentum, hendrerit non, est. Morbi iaculis. Aenean lacus lectus, lacinia eget, hendrerit id, imperdiet ac, nisl. Praesent metus. Morbi mi elit, lacinia fringilla, luctus ut, tempor at, diam. Nulla arcu nibh, condimentum fringilla, nonummy et, volutpat eget, orci. Suspendisse et dui. Integer eget lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse vitae odio. Sed risus nisl, mattis vitae, imperdiet et, semper nec, tellus. Quisque adipiscing, neque id faucibus fringilla, eros augue ultricies orci, quis tincidunt tortor elit gravida ligula. Suspendisse suscipit sem sit amet ipsum. Etiam elit.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.
Aenean ullamcorper leo a neque. Ut eros risus, ornare sed, luctus sit amet, mollis ut, nisl. Proin dui. Aliquam suscipit. Vestibulum nisl wisi, eleifend at, placerat et, lobortis vitae, dui. Nulla dapibus pretium nulla. In hac habitasse platea dictumst. Cras ultricies nisl eu est. Aliquam ultrices, orci in dapibus facilisis, tortor pede bibendum neque, eget vestibulum lectus wisi vitae orci. Phasellus quis metus. In turpis diam, varius in, pulvinar sit amet, commodo ut, wisi. Donec leo nibh, iaculis in, facilisis non, mollis eget, eros. Morbi sem.
Nunc sed arcu. Phasellus euismod tincidunt eros. Proin ac purus. In dictum ante vitae libero. Proin pede. Pellentesque tellus ipsum, semper quis, dapibus eget, ultricies ac, pede. Aenean tristique tincidunt lorem. Aenean eget eros quis tellus tincidunt condimentum. Aliquam tempor, erat sit amet condimentum sagittis, ante sapien dapibus lectus, in tempor mauris sem non metus. Nam id orci. Nulla dignissim, felis in euismod tempor, neque turpis suscipit urna, id tristique mauris eros et dui.
Aliquam eget felis id elit congue tempus. Maecenas a velit. Sed egestas malesuada sapien. In sapien. Integer sit amet massa vitae justo vulputate viverra. Fusce suscipit, mi a lacinia lobortis, urna enim consectetuer risus, et ultrices ante nulla nec mauris. Integer pulvinar aliquet turpis. Phasellus fermentum diam at mauris. Ut nulla est, rhoncus sed, malesuada eget, rutrum ac, nunc. Curabitur in ante.

El creador, www.hesido.com, nos ofrece una cantidad de ejemplos en esta carpeta comprimida. Para cambiar la imagen de cada barra tendrás que modificar el archivo css llamado flexcrollstyles correspondiente en cada ejemplo.

La batalla de las redes sociales

2009-09-07T18:11:00.000-07:00

A riesgo de parecer un poco pesado con los videos, me parece interesante mostrar este en especial por su contenido: el complicado tema de las redes sociales. Vale la pena reflexionar y pensar si estamos siendo consumidos por alguna en especial, ¿que piensas tú?

Michael Jackson ya tiene su lazo negro en la MTV

2009-09-07T07:15:00.000-07:00

"El anuncio muestra un lazo negro con los calcetines blancos y los zapatos negros tan característicos del Rey del Pop".

Fuente | Creativos Online

Crear un Ribbon

2009-09-01T07:33:00.000-07:00

Una de las mejores formas de promocionar un enlace y hacerlo vistoso es por medio de objetos evidentes al ojo del visitante. Lo especial de los Ribbons es que, por lo menos en mi caso, es lo primero que veo cuando entro a cierta pagina. Puedes ver el ejemplo en la parte superior.

Hay dos formas para hacerlo: la primera es de manera Online,

QuickRibbon te permite escoger entre cuatro tipos de borde, modificar colores, cambiar de fuente y tamaño...El script que generas al terminar de personalizar el enlace debes pegarlo antes de la etiqueta </body> en edicion de HTML.

Y mediante css (este codigo debe pegarse antes de </head>):

#ribbon {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    height: 125px;
    width: 125px;
    background: url(url-imagen de fondo.png) no-repeat;
    text-indent: -999em;
    text-decoration: none;
}

En este caso la imagen flotará al lado derecho por la propiedad right, si queremos que flote al lado contrario será left. tambien podemos cambiar top por bottom y asi quedara al final de todo el contenido.

Como he dicho en casos anteriores, la palabra ribbon al incio del codigo solo hará referencia al enlace con ese nombre unico; La estructura deberia quedar parecida a esta (este codigo debe pegarse antes de </body>):

<a id="ribbon" href="AQUI_TU_ENLACE" title="TITULO">TEXTO DEL RIBBON</a>

Inspiración (Sitios web)

2009-08-30T08:26:00.000-07:00

LeeMunroe

Alex Cohaniuc

Tim Van Damme

Gavin Botica

Komodo Media

Deaxon

Pasti

Design Shard

Texture Lovers

From The Couch

pattern8: coleccion de patrones (fondos)

2009-08-20T07:55:00.000-07:00

En Pattern8 podrás encontrar una gran doleccion de patrones muy llamativos para decorar tu blog, pagina web, diseños en photoshop, etc. Todo depende del uso que le quieras dar. Me parece importante resaltar la forma en que puedes buscar tus fondos: estan organizados por colores y por orden de paginas; con solo presionar click sobre un color obtendrás variedad de patrones con esa tonalidad.

Visita Pattern8.com

Google friend connect : la barra social

2009-08-19T08:41:00.000-07:00

A menudo visitaba algunas paginas y blogs presonales, en ingles la mayoria, y me encontraba con una barra inferior de google con los seguidores, comentarios, actividad reciente, etc. Siempre me dio curiosidad saber como añadirla y hasta llegue a pensar que era un servicio pago; Hace dos dias la volvi a ver, por lo que me di a la tarea de averiguar y por si alguno no la conoce hoy trataré de explicarla:

Puedes ver un demo online en esta pagina.

Lo primero será ingresar a Google friend connect e introducir los datos de nuestra cuenta google. veremos la lista de nuestros blogs al lado izquierdo, presionamos click sobre el que le queremos añadir la barra social.

Escogemos la opcion Barra social y a continuación llenamos los datos y las preferencias, por ejemplo donde aparecerá la barra (arriba o abajo), los comentarios de la barra seran para cada pagina individual o para el blog completo, etc.
Para agregar la barra a la plantilla presionamos sobre el boton "Generar codigo" y seleccionamos y copiamos el contenido de la caja de texto. Vamos a la pestaña Diseño > edicion de html y buscamos <body> y justo despues pegamos el codigo anterior.

Vale la pena aclarar que no debemos añadir el fragmento de codigo del paso 1 (aparece al presionar sobre el boton Generar codigo) porque es igual al que tienen las plantillas de blogger; solo hay que pegar lo de la caja de texto.

Photoshop para principiantes: Maquetacion Nº1

2009-08-14T21:29:00.001-07:00

Continuando con esta serie de videos sencillos, hoy quiero compartir como hacer una pagina web desde photoshop (no diseñarla, solo seleccionar sectores).

Trikie Z-Graphics

2009-08-12T08:29:00.000-07:00

Plantillas Btemplates

2009-08-10T08:26:00.000-07:00

Seguramente todos los bloggeros conocemos uno de los mas grandes sitios con plantillas para blogger: Btemplates. Hace unos dias me pasé por la pagina para observar los nuevos diseños, no ojee mucho, pero vi tres plantillas en especial que me llamaron mucho la atencion y que vale la pena visitar:

Photoplus +

Demo / Descarga

ROCKS MY WORLD

Demo / Descarga

NATURE GIFT

Demo / Descarga

Facebox: ventana modal

2009-08-09T09:26:00.000-07:00

Facebox es una ventana modal (lightwindow) ligera que puede mostrar imagenes, divs (capas) o paginas enteras a traves de ajax. Utiliza la libreria jQuery por lo que si utilizamos Scriptaculous o prototype podria presentarnos problemas con los efectos.
Tiene una apariencia parecida al visualizador de facebook, de ahi su nombre.

Podemos ver algunos ejemplos en funcionamiento en esta pagina.

Para agregar la laightwindow descargamos el zip y alojamos los archivos en nuestro servidor, si no quieres meterte en ese cuento o de verdad no sabes como, puedes usar mis archivos (en caso de cambiar de servidor publicaré una entrada con los nuevos links):

Lista de archivos.

Lo siguiente será adjuntar la hoja de estilos y los archivos js (ambos antes de </head>):

y los archivos los añadimos de la siguiente forma:

Para una imagen :

<a href="listenmusic.jpg" rel="facebox">Girl listening to music</a>

Para una capa (div) esccondida:

<p><a href="#mydiv" rel="facebox">View DIV with id="mydiv" on the page</a></p>

<div id="mydiv" style="display:none">
El contenido de esta capa solo sera visible si presionamos click sobre el enlace anterior, que contiene el id mydiv
</div>

Un archivo html externo (solo si esta en el mismo servidor):

<a href="archivo_externo.htm" rel="facebox">View "External.htm" fetched via Ajax</a>

y para añadir un html externo(como el anterior) dando estilos css:

<a href="arcchivo_externo.htm" rel="facebox[.estilo]">View "External.htm" fetched via Ajax, further styled with ".thickstyle" CSS class</a>

NeoWare Host: Servicio de hosting gratuito

2009-08-06T07:44:00.000-07:00

Cuando andamos en busca de un hosting gratuito son muchas las posibilidades, pero muchos de los servicios que en realidad necesitamos (como php, bases de datos, servicio de mail, etc) son para planes pagos. Me he encontrado con NeoWare Host que nos ofrece:

5 bases de datos
panel vista
300 MB de espacio
10 GB de transferencia mensual
Sistemas de Backup y redundancia
uptime 99%
Fantastico Deluxe con 29 script auto instalables
site builder
hasta 5 dominios DNS y 5 sub dominios
Mail
Pop3
sendmail
PHP 5.2
MySQL
servidores linux

Como puedes ver parece pago o por poco tiempo, pero es gratuito!...entra, descubre los servicios y si te gusta no dudes en crear una cuenta. Puedes dejar tus opiniones acerca del hosting para que todos nos hagamos una idea de como resulta.

Paquete de iconos sobre redes sociales

2009-08-03T08:13:00.000-07:00

Un bonito y variado paquete de KomodoMedia. Contiene 104 imagenes (52 iconos de dos tamaños cada uno) de 16*16 y 32*32.

Enlace
Enlace a pagina de descarga

Tweetboard

2009-07-29T11:29:00.000-07:00

TweetBoard te permite mostrar todos tus tweets ordenados por fecha, por actividad y como si fuera poco viene consigo el formulario de updates para los visitantes que quieran entablar una conversación desde tu sitio.

El diseño es bastante llamativo y se esconde bajo un simple boton siempre presente al lado izquierdo del blog...puedes ver una vista previa en este blog.

Para añadir este bloque de tweets al blog debes crear una cuenta en esta pagina (no mas de 40 segundos) y debes activarla siguiendo el enlace que te llega al correo.

Seguido vamos a Edicion > elementos de pagina > añadir nuevo elemento (HTML/Javascript) y dentro de el pegamos lo siguiente:

guardamos los cambios y al visitar el blog veremos el botón, que se pone de color rojo cuando hay un nuevo update y verde cuando los hemos leido todos.

Cuando añadimos un nuevo update desde, esta herramienta, aparece una dirección si la visualizamos desde twitter, cuando visitemos ese enlace nos va a llevar al index (pagina principal) del blog y se abrirá automaticamente, en el panel, la actualización determinada.