Z-Graphics

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.

Gana un dominio.com en agunata

2009-07-28T14:48:00.000-07:00

El 23 de julio se cumplieron dos años desde la creación de agunata.com (originalmente blogger) y para celebrar el aniversario su autor ha decidido regalar un dominio.com gratis por un año. El blog (blogger o wordpress) ganador será elegido mediante Ramdom.org - Puedes ver los requisitos minimos en la entrada original.

Suerte!!, aunque tambien me apunté al concurso :D

Los disparates de algunos famosos

2009-07-28T07:14:00.000-07:00

No siempre se trata de estudiar o de aprender, aveces hay que sacarle esa chispa a la vida y porque no hacerlo de disparates ajenos. Hace poco visitaba el blog de atajar y me he reido mucho al ver algunas alocadas frases, hasta de shakira!!! (mi compatriota!!!)...

	Matthew McConaughey Un hombre debe oler a hombre. Hace 20 años que no uso desodorante
	Jessica Simpson 23 años es viejo, es casi tener 25, que es como estar entre 20 y 30
	Shakira Voy a viajar a Roma, porque es la tierra donde nació nuestro Señor Jesucristo
	Brooke Shields El fumar mata y si te mueres has perdido una parte muy importante de tu vida
	Mariah Carey Siempre que veo la televisión y veo a esos pobres niños hambrientos en todo el mundo, no puedo evitar llorar. Quiero decir, me encantaría ser así de flaquita, pero no con todas esas moscas, y muerte, y esas cosas
	George Bush La mayoría de nuestras importaciones vienen de fuera del país
	Britney Spears Las películas de hoy en día son muy raras, te hacen pensar
	Pamela Anderson No es la contaminación la que esta dañando el ambiente. Son las impurezas que hay en nuestro aire y en nuestra agua las que lo están haciendo
	Ronaldo Perdimos porque no ganamos
	Cristina Aguilera ¿Alguien sabe en donde se hará el festival de Cannes de este año?
	Jennifer Lopez No he cometido ningún delito, lo que hice fue no cumplir la ley

Plantilla Zgraphics: 3d Fantasy

2009-07-24T21:54:00.000-07:00

Hoy he querido compartir mi segunda plantilla para blogger, despues de Green Place he aprendido un poco mas y creo que se ve reflejado en esta plantilla (me refiero al css). Tomé consideraciones para diferentes resoluciones de pantalla, aunque el color no cambio dado que aproveché para mostrar los resultados del tutorial para photoshop "creando un atractivo header".

Podria hablarles de las dos columnas, de los marcadores, etc...pero visualiza el demo y si tienes alguna pregunta u opinion solo dejame un comentario.

Captura general:

Twitter...un poco femenino

2009-07-19T14:49:00.000-07:00

Lo prometido es deuda...hace unas semanas le habia dicho a Graciela que trataría de dibujar algunos iconos de twitter como porrista y aqui estan. No son muchos ni tampoco los mejores pero espero que les gusten :)

Download Zip

Autor

lightview

2009-07-18T21:53:00.000-07:00

Este bonito efecto me lo he encontrado en Theme Forest, y sirve para obtener una vista previa de imagenes cuando pasamos el cursor del mouse sobre una imagen. Mira estos ejemplos:

Si quieres agregar este efecto en tu blog solo sigue los siguientes pasos:

Ve a edición de HTML, busca </head> y justo antes pega el siguiente codigo:

y eso es todo, el efecto ha sido agregado a tu plantilla. Al momento de poner una imagen con vista previa solo debes pegar las imagenes dentro de una capa con el id(nombre unico) "doc_body" con la siguiente estructura:

Y si quieres añadir un enlace seria:

Uno de los ejemplos que estoy usando es:

Motor de busqueda personalizado

2009-07-16T13:44:00.000-07:00

Como podrás darte cuenta en estos dias he empezado a probar algunas utilidades nuevas en blog, en este caso trataré de explicar como crear, personalizar y publicar un motor de busqueda google en función de nuestro blog o pagina web (puedes probar mi sección de busqueda y observar los resultados).

Lo primero será acceder a nuestra cuenta google e ir a la sección de motores de busqueda, ambas cosas puedes hacerlas desde aqui. Luego presionamos clcik sobre el botón crear de busqueda personalizado (Crear motor búsq. person.) y llenamos los siguientes datos:

Nombre del motor de búsqueda: en este campo de texto vamos a poner el nombre que aparecera en la parte de arriba cuando se realice una busqueda. Por ejemplo Busqueda Z-Graphics.

Descripción del motor de búsqueda: aqui debemos poner una frase que describa con que está relacionada la busqueda. Por ejemplo Ciencia climática de científicos climáticos.

Idioma del motor de búsqueda: Idioma en el que aparecen los resultados.

En la siguiente sección del asistente "¿Qué quiere buscar?" tenemos tres opciones:

1- Sólo los sitios que seleccione: si selecciona esta opción la busqueda arrojará datos obtenidos
en sitios que usted especifcique (en el area de texto siguiente:"Seleccione algunos sitios").
2- En toda la web, pero enfatizar los sitios que selecciono: si se escoge esta opción la busqueda arrojara datos obtenidos de toda la red (paginas inscritas a google) pero hará enfacis en las paginas web que usted elija.
3- Toda la web: Los datos arrojados son obtenidos de toda la red.

En la siguiente parte "Seleccione una edición" marcamos la casilla Edición estándar (si es para uso personal).

Por ultimo aceptamos haber leido las Condiciones del servicio y presionamos click en el botón siguiente.
En la segunda parte del asistente presionamos el botón Finalizar y en pocos segundos estaremos en la pagina principal de "mis motores de busqueda", ahi encontraremos los motores creados y las opciones para personalizarlos, configurarlos y añadir a la pagina web o blog (para realizar cualquiera de estas opciones debes presionar click sobre el panel de control que pertenece a tu motor de busqueda).

Accedemos al panel de control y tenemos las siguientes opciones (son muchas mas pero el objetivo de hoy es explicar estas) :

1- modificar la información anteriormente suministrada.
2- Diseño
3- Obtener codigo

Para modificcar los datos simplemente se siguen los pasos anteriores y se guardan los cambios asi que continuemos con el diseño de la pagina de resultados:

En esta seccion se puede personalizar el cuadro de búsqueda y escoger un modelo de 7 opciones:

Personalizar los colores en los resultados de busqueda, puedes usar este selector de color.

Personalizar los resultados de búsqueda alojados por Google

Para agregar el motor de busqueda hay 3 opciones:

1-Alojar el resultado en una página almacenada en Google: quiere decir que aunque la 'cajita' de busqueda esté en nuestra pagina, los resultados se van a mostrar en una ventana aparte (una oagina almacenada por google).
2- Resultados de host en mi sitio web que utilizan un iframe: esta opcion (es la que estoy usando en este blog) permite que la pagina de resultados aparezca en un iframe, es decir que se creará una capa mostrando los resultados de la busqueda. Si escoges esta opcion debes señalar o especificar una pagina web en la que se mostraran los resultados...me explico, cuando realices una busqueda la ventana donde estas te va a redireccionar a esa dirección y va a mostrar los resultados en el lugar donde pegues el codigo de la caja "Código de los resultados de búsqueda". En mi caso esa direccion es la pagina principal del blog.
3- Resultados de host en mi sitio web que utilizan un elemento de búsqueda personalizado: El resultado de esta elecion seria algo muy parecido al buscador ajax de blogger, solo que los datos que arrojará la búsqueda estarán basados en la información que dimos al crear el motor de búsqueda.

Si has elegido la segunda opción puedes:

Añadir los resultados de busqueda a la plantilla: el ancho de la capa que contiene los resultados de busqueda no es menor a 790px por lo que te recomiendo pornerlo en una parte donde disponga de ese espacio para que no afecte la estetica del blog. En mi caso lo he añadido en el top de la pagina (despues de <div id='wrapper'>) pero tambien puedes hacerlo en la parte inferior.

Cerrar la capa que contiene los resultados: La primer vez que probé este motor de busqueda en el blog me di cuenta de lo practico que seria agregar algun metodo para cerrar esa capa y que el visitante siguiera navegando; Probé con este sencillo metodo pero los resultados no fueron tan satisfactorios dado que la capa desaparecia pero el espacio no. Despues de algunos minutos encontré el efecto BlindUp de scriptaculous que me permite cerrar la capa con un efecto de slide hacia arriba. Si usas scriptaculous en tu plantilla lo unico que debes hacer es:

1- en el codigo que nos da google(el de el iframe con los resultados) encontraremos la capa que contiene ese iframe:

Dentro de ella vamos a poner el siguiente link para cerrarla:

<a href='javascript:void(0);' onclick='Effect.BlindUp("cse-search-results", { duration: 1.5 }); return false;'>CERRAR CAPA</a>

o podemos añadir una imagen en lugar de texto:

Eso es todo, tal vez te preguntes porque optar por un motor de búsqueda como este y no el comodo buscador ajax de blogger...yo lo hice por la eficacia en la busqueda, porque me permite agregar anuncios por medio de adsense en su nuevo sistema de Adsense para busqueda.

Yahoo! Media Player

2009-07-14T08:35:00.000-07:00

Hace poco visité un blog llamado Poca Tinta y me llamó la atención su novedoso reproductor de mp3. Indagando un poco llegué a esta pagina donde Yahoo! explica en tan solo tres pasos como añadir el reproductor y las canciones mp3, y como está en ingles tratare de explicarlo bien:

1- Lo primero será buscar (Ctrl+F) </body> y justo antes añadir el script que nos proporcionan:

2- Usando un hosting que acepte audio mp3 (como FileDen o DivShare) subimos cada archivo y lo adjuntamos a la plantilla mediante un enlace:

<a href="http://URL-DEL-ARCHIVO/ejemplo1.mp3">Primer enlace</a>
<a href="http://URL-DEL-ARCHIVO/ejemplo2.mp3">Segundo enlace</a>
<a href="http://URL-DEL-ARCHIVO/ejemplo3.mp3">Tercer enlace</a>

3- Para reproducir cada canción basta con presionar click sobre el enlace que acabamos de añadir.

Puedes probarlo directamente desde Yahoo! Media Player

Listas de reproducción

Algo que no vi en la pagina de Yahoo!, pero si en Poca tinta, fue como crear una lista de reproducción por medio de un arcchivo xml:

Vamos al block de notas y pegamos el siguienmte codigo:

<?xml version="1.0" encoding="UTF-8" ?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<title>Nombre de Lista</title>
<trackList>
<track>
<location>URL_archivo.mp3</location>
<creator>Artista</creator>
<title>Titulo</title>
<image>Url_Imagen</image>
</track>
<track>Para poner mas canciones pegamos aqui el texto en azul</track>
</trackList>
</playlist>

Al momento de guardarlo nos aseguramos de ponerle la extención xml, es decir quedaria algo como nombre.xml y lo subimos al srvidor(por ejemplo FileDen).
Luego de tener la url del archivo xml lo incluimos en el blog de la siguiente forma:

<a href="URL_Nombre.xml" type="application/xspf+xml">Enlace</a>

y eso es todo :)

Photoshop para principiantes: Estilos de capa

2009-07-11T23:10:00.000-07:00

Este es el segundo video de photoshop para principiantes, en el explico los diferentes estilos que podemos añadir a las capas(muy utiles para botones y formas utilizadas en paginas web). Si te gusta deja un comentario, de igual forma si quieres ver un tutorial en especial hazmelo saber.

Enumerando los comentarios en blogger

2009-07-10T19:17:00.000-07:00

Explorando un poco acerca de los comentarios en blogger me encontrado con una entrada de Blogspot blog donde nos explican como añadir un número a cada comentario con la posibilidad de personalizarlo mediante css. No hace falta añadir jQuery o Script.aculo.us, lo unico que debemos hacer es añadir los siguientes codigos a la platilla (recuerda guardar una copia antes de hacer cualquier cambio).

Demo o puedes dejar un comentario y ver el resultado :)

Vamos a Edición de HTML, marcamos la casilla de expandir plantillas de artilugios, buscamos (Ctrl+F) el siguiente codigo y añadimos la parte en rojo:

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

Con eso ya tenemos un número en cada comentario, ahora vamos a posicionarlo y agregarle una imagen de fondo. Para eso buscamos ]]></b:skin> y justo antes añadimos lo siguiente:

.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}
/*since the numbers are actually links, we need to force the color properties*/

.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}

De lo anterior podemos modificar:
La url de la imagen de fondo (la linea en rojo).
El color del número en su estado 'natural' y cuando el mouse esté sobre el (lineas en verde y azul, respectivamente).
Posicionar el numero (lineas en amarillo).
Tipo, tamaño y estilo de letra (lineas en anaranjado).