Z-Graphics

Descarga este video en alta resolución

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

Avisos flotantes condicionados

2009-07-09T22:03:00.000-07:00

Hace unos dias explicaba como poner un letrero flotante con la posibilidad de cerrarse y abrirse con un simple click. Leyendo un poco sobre codigos condicionales en blogger se me ocurrio que tal vez podriamos mostrar un mensaje dependiendo del area del blog en la que nos encontremos. Por ejemplo, si estamos entrando a una etiqueta en especial se mostraria un letrero como este: "Estas entrando a la zona juegos, no olvides calificarme en juegos.com" o algo como "Pareces estar interesado en esta movida, entra al grupo en facebook y participa del foro"...las posibilidades son infinitas y no solo se puede hacer con las etiquetas, sino tambien con la pagina principal, las paginas individuales, segun la dirección de un post o el nombre de una entrada. Esta última nos puede servir cuando algo de lo que se dice ahi haya cambiado, por ejemplo que un script deje de funcionar o alguna actualización que requiera la atención del lector.

Los codigos no son para aprenderselos, pero en esta entrada J.Miur de Vagabundia nos explica paso por paso como funcionan y como podemos hacerlos trabajar juntos.
Los siguientes codigos deben pegarse donde se quiere que aparezcan:

Aviso Flotante solo en la pagina principal

Cualquier texto, imagen o codigo que se ponga entre las siguientes lineas solo se verá en la pagina principal:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
esto se mostrará sólo en el home
</b:if>

O podemos hacer que NO se muestre cuando estemos en la pagina principal cambiando solo una parte de la primera linea:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
esto se mostrará sólo en el home
</b:if>

Aviso Flotante solo en las paginas individuales

Cualquier texto, imagen o codigo que se ponga entre las siguientes lineas solo se verá en una pagina individual, es decir una pagina que solo contenga una entrada:

<b:if cond='data:blog.pageType == "item"'>
esto sólo se mostrará en una entrada individual
</b:if>

Aviso Flotante solo cuando se navegue en una etiqueta

Cualquier texto, imagen o codigo que se ponga entre las siguientes lineas solo se verá cuando estemos navegando por una etiqueta, es decir cuando se listen las entradas con esa etiqueta en comun:

<b:if cond='data:blog.pageName == "NOMBRE_ETIQUETA"'>
esto sólo se mostrará cuando se navegue por la etiqueta NOMBRE_ETIQUETA
</b:if>

o bien:

<b:if cond='data:blog.url == "http://miBlog.blogspot.com/search/label/NOMBRE_ETIQUETA"'>
esto sólo se mostrará cuando se navegue por la etiqueta NOMBRE_ETIQUETA
</b:if>

Aviso Flotante solo cuando se navegue en determinada entrada

Cualquier texto, imagen o codigo que se ponga entre las siguientes lineas solo se verá cuando estemos navegando por una entrada en especial, es decir cuando visitemos la pagina que contiene la entrada que especifiquemos:

<b:if cond='data:blog.url == "http://miBlog.blogspot.com/2009/02/nombre-de-la-entrada.html"'>
Esto solo se mostrará si navegamos por una entrada con esta dirección
</b:if>

o bien:

<b:if cond='data:blog.pageName == "Nombre de la entrada"'>
Esto solo se mostrará si navegamos por una entrada con este nombre
</b:if>

Si queremos agregar mas de un codigo condicional en el blog lo mejor es que los relacionemos, es decir que una condicion se cumpla si y solo si otra no se cumple. El porque de hacer esto puede explicarse como una posible confución con el script para cerrar el letrero y puede observarse si ponemos una condición para las paginas individuales y a la vez una para una entrada en especial (que a su vez tambien es pagina individual). Piensalo con un ejemplo cotidiano...por ejemplo si mañana no voy a trabajar entonces me quedo en casa con mi familia, pero si voy a trabajar no podré pasar el dia con ellos.
Es muy facil si lo piensas de esa manera:

Empezamos creando una condición, en ella decimos que su contenido se debe mostrar en una pagina individual:

<b:if cond='data:blog.pageType == "item"'>
Aqui el contenido
</b:if>

Ahora creamos una condicion dentro de esa condición, la instrucción es que si no estamos en una entrada de nombre script entonces se debe mostrar su contenido:

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.pageName != "script"'>

El contenido a mostrar si no estamos en una entrada de nombre script

</b:if>
</b:if>

Pero ¿que pasa si estamos en esa entrada?, para eso agregamos una especie de "entonces se debe mostrar esto otro" (<b:else/>) :

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.pageName != "script"'>

El contenido a mostrar si no estamos en una entrada de nombre script

<b:else/>

Contenido que se va a mostrar si estamos en una pagina individual y la entrada no se llama script

</b:if>
</b:if>

Todos estos ejemplos puedes verlos en este blog y para probar como se verán los avisos en el tuyo es recomendable poner los codigos dentro de las siguientes lineas (lo que esté dentro solo podrá ser visto por el administrador del blog una vez se haya identificado ante blogger)

<span class="item-control blog-admin">
Aqui el codigo a probar
</span>

PhotoFunia

2009-07-08T22:15:00.000-07:00

Sin nada que hacer en estos dias (nada raro :)) me he encontrado con PhotoFunia, una de esas paginas curiosas que añaden efectos a nuestras fotos. Lo que hace es poner nuestro rostro en situaciones donde somos el centro de atención (y yo que me preguntaba donde estaba lo bueno del asunto...) junto a personajes famosos o circunstacias cotidianas.

Aqui algunos ejemplos:

Photoshop para principiantes: Globo de texto

2009-07-07T20:51:00.000-07:00

Y aqui mi primer video, se trata de algo muy sencillo como lo es poner un globo de texto sobre una imagen. Espero que les guste...el sonido está muy bajo asi que recomiendo usar audifonos y ver en con calidad HD.

Aviso flotante

2009-07-05T20:45:00.000-07:00

Debido a un error de visualización con firefox me di a la busqueda de como poner un cartel flotante que comunicara al visitante lo qu estaba pasando, pero los metodos que probé eran muy largos y poco eficaces. Buscando un poco me encontré con un metodo bastante sencillo utilizando javascript que me permite cerrar una capa y llamarla desde un enlace (abrirla de nuevo).

Para añadirla a la platilla solo debes buscar </head> y justo antes añadir lo siguiente:

donde la palabra en negrita 'capa' es el ID (nombre unico) de la capa que contiene el aviso.
Ahora buscamos <body> y justo despues pegamos:

<div id="capa" class="aviso">

<a href="javascript:void(0);" style=" float:right;" onClick="oculta()">Cerrar</a>

Aqui va el contenido o texto del aviso

</div>

si lo dejas tal como está se verá solo una linea de texto en el top de nuestra plantilla, asi que agregaremos algunos estilos usando la clase de la capa 'aviso':

.aviso {
position:fixed;
top:200px;
left:200px;
width:200px;
height:100px;
background:#000;
color:#fff;
}

La propiedad Fixed deja el cartel estatico asi bajemos la barra de desplazamiento, puedes cambiarla por absolute o relative.

Para cerrar el cartel desde un enlace usamos:

<a href="javascript:void(0);" onclick="oculta()">Oculta el letrero</a>

Y para abrirla:

<a href="javascript:void(0);" onclick="muestra()">Muestra el letrero</a>

Para lo demás solo hay que agregar un poco de imaginación y listo:

Plantilla zColor en photoshop

2009-07-04T20:42:00.000-07:00

El primer paso para hechar a rodar nuestra plantilla blogger es saber a donde queremos llegar y para eso lo mejor es hacer un boceto. No necesariamente algo muy elaborado, puede ser sencillo pero debemos estar seguros del tema, de los colores, del tamaño de cada cosa para no 'improvisar' sobre el codigo.
Tal vez no sea la mejor plantilla para empezar, pero estoy seguro que a alguien le vendrá bien. Mas adelante presentaré un tutorial mostrando como nos puede servir photoshop en el proceso de elaboración de plantillas.

Algunas capturas de la plantilla:

Menú Earth

2009-07-03T19:28:00.000-07:00

Inicio
Descripción
Blog
Descripción
Acerca
Descripción
Entradas
Descripción
Etiquetas
Descripción
Archivos
Descripción

Este es un sencillo menú hecho en photoshop, aprovechando algunos estilos y gradientes. Además me pareció interesante añadir un efecto hover con imagenes relacionadas a los enlaces.

Para añadir el menú vamos a edición de HTML, buscamos ]]></b:skin> y añadimos los siguientes estilos justo antes:

/*Propiedades para el contenedor del menu*/
#menu {
padding:0;
margin:0 0 0 45px;
}
/*Propiedades para el menú como el ancho, alto, el borde, etc*/
#menu ul {
width:579px;
height:129px;
list-style-type:none;
float:left;
border-bottom: 4px solid #43ae2d;
padding:0;
margin:0;
}
/*Se agregan propiedades a cada lista*/
#menu ul li {
width:94px;
height:129px;
display:block;
float:left;
}
/*Configuración para la clase .inicio*/
#menu li.inicio {
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/inicio.jpg) repeat-x;
padding:88px 0 0 0;
margin:0 3px 0 0;
}
#menu li.inicio span {
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.inicio a {
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.inicio a:hover {
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgInicio.png) no-repeat;
padding: 80px 5px 0 5px;
width:100px;
}
/*Configuración para la clase .blog*/
#menu li.blog {
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgListas.jpg) repeat-x;
padding:88px 0 0 0;
margin:0 3px 0 0;
}
#menu li.blog span{
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.blog a{
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.blog a:hover{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgBlog.png) no-repeat;
padding: 80px 15px 0 15px;
width:100px;
}
/*Configuración para la clase .acerca*/
#menu li.acerca {
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgListas.jpg) repeat-x;
padding:88px 0 0 0;
margin:0 3px 0 0;
}
#menu li.acerca span{
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.acerca a{
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.acerca a:hover{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgAcerca.png) no-repeat;
padding: 80px 4px 0 4px;
width:100px;
}
/*Configuración para la clase .entradas*/
#menu li.entradas{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgListas.jpg) repeat-x;
padding:88px 0 0 0;
margin:0 3px 0 0;
}
#menu li.entradas span{
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.entradas a{
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.entradas a:hover{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgEntradas.png) no-repeat center;
padding: 104px 0 0 0px;
width:100px;
}
/*Configuración para la clase .etiquetas*/
#menu li.etiquetas {
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgListas.jpg) repeat-x;
padding:88px 0 0 0;
margin:0 3px 0 0;
}
#menu li.etiquetas span {
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.etiquetas a{
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.etiquetas a:hover{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgEtiquetas.png) no-repeat center;
padding: 110px 4px 0 4px;
width:100px;
}
/*Configuración para la clase .archivos*/
#menu li.archivos{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgListas.jpg) repeat-x;
padding:88px 0 0 0;
}
#menu li.archivos span{
color:#b2b2b4;
font-style:italic;
font-size:13px;
}
#menu li.archivos a{
color:#fff;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
}
#menu li.archivos a:hover{
background:url(http://i403.photobucket.com/albums/pp116/migueljimenez/bgArchivos.png) no-repeat center;
padding: 110px 4px 0 4px;
width:100px;
}

Guardamos los cambios y donde queremos que aparezca el menú (puede ser un gadget de HTML) pegamos lo siguiente:

<div id="menu">
<ul>
<li class="inicio"><center><a href="#">Inicio</a><br><span>Descripción</span></center></li>
<li class="blog"><center><a href="#">Blog</a><br><span>Descripción</span></center></li>
<li class="acerca"><center><a href="#">Acerca</a><br><span>Descripción</span></center></li>
<li class="entradas"><center><a href="#">Entradas</a><br><span>Descripción</span></center></li>
<li class="etiquetas"><center><a href="#">Etiquetas</a><br><span>Descripción</span></center></li>
<li class="archivos"><center><a href="#">Archivos</a><br><span>Descripción</span></center></li>
</ul>
</div>

Solo tienes que modificar los enlaces y el texto de descripción.

Para cambiar alguna imagen solo cambia la url en los estilos del menú.

Iconos para ir arriba

2009-07-02T20:29:00.000-07:00

Ya que se ha vuelto tan popular la imagen multiusos, como la describe Gem@, se me ocurrió hacer algunas imagenes para todos los gustos. Son 31 imagenes sencillas en formato PNG y algunas de ellas con la posibilidad de modificar un poco.

No siendo mas, si te han gustado deja un comentario.

Y aqui algunas imagenes nuevas, con mensajes de Cargohe

Tutorial Flash: Reproductor mp3 desde cero

2009-07-01T08:19:00.000-07:00

Seguramente a muchos de nosostros nos gusta poner algo de musica en el blog o no nos hemos animado buscando ese toque de personalidad que describa lo que queremos mostrar. Por eso en esta entrada quise explicar un poco el procedimiendo para hacer un reproductor mp3 en Adobe flash. Los pasos son sencillos y no se necesita ser un experto para lograrlo, asi que tu mismo podrás adaptarlo al skin, background o imagen que te llame la atención.

Lo primero será crear un nuevo documento de action script 2.0 con el tamaño y color de fondo que le queramos dar.
Antes que nada me gustaria explicar de que consta el reproductor para que entienda bien de que se trata y no te pierdas de nada:

Los cajoncitos punteados que se ven son textos dinamicos, es decir que es un texto donde se mostrará información correspondiente a cada archivo mp3 como el nombre, el tiempo que lleva en reproduccion, el porcentaje de carga (es necesario si lo estamos usando en una pagina web) y el control de volumen.
Tambien cuenta con 6 botones, que podemos decorar como queramos, con las funciones de reproducir, detener, avanzar a la siguiente canción o retroceder y por ultimo aumentar o disminuir el volumen.

Pasos:

1- Nombrar a la primera capa de la linea de tiempo como 'entrono'. Es ahi donde estarán los elementos anteriormente nombrados.

2- Usando la herramienta de texto, cramos un cuadrito (el tamaño determina el espacio donde se mostrará el nombre de la canción), lo seleccionamos y en el panel de propiedades lo definimos como texto dinamico y le ponemos 'ide_txt' como nombre de instancia:

3- Repetimos el paso anterior para los otros datos dinamicos, solo cambia el nombre de instancia:

- Texto para el tiempo de reproducción
Nombre de instancia: time_txt

- Porcentaje de carga
Nombre de instancia: porcentaje_txt

- Control de volumen
Nombre de instancia: vol_txt

4- Teniendo los campos de texto hechos debemos continuar con los botones; Para crear uno llevamos el puntero del mouse al menú Insertar > Nuevo simbolo y en la ventanita que aparece le ponemos un nombre y escogemos la opcion botón.

Al presionar click en aceptar el programa nos situa en un gran espacio en blanco, ahi debemos dibujar lo que se verá en el botón. Tratandose de un botón simple, lo unico que vamos a dibujar será un rectangulo y sobre el el nombre del botón.

Cuando estemos comodos con el resultado regresamos a la escena principal presionando click sobre 'Escena 1', luego abrimos el panel 'Biblioteca'(Ventana > Biblioteca o presiona Ctrl+L) e insertamos el botón que acabamos de crear (Llevandolo desde el panel hasta la escena con click presionado).

5- Con las instrucciones del paso número 4 creamos los 6 botones (play, stop, siguiente, previo, vol + y vol -) y a cada uno se le dota de un nombre de instancia:

- Botón 'play'
Nombre de instancia: play_btn

- Botón 'stop'
Nombre de instancia: stop_btn

- Botón 'siguiente'
Nombre de instancia: sigu_btn

- Botón 'previo'
Nombre de instancia: prev_btn

- Botón 'volumen +'
Nombre de instancia: volMas_btn

- Botón 'volumen -'
Nombre de instancia: volMenos_btn

6- El entorno del reproductor está listo pero aún no funciona por que debemos agregar las acciones al reproductor, asi que creamos una nueva capa llamada codigo.
Presionamos click en el primer fotograma de la linea de tiempo y abrimos el panel Acciones (F9).

Debemos pegar el siguiente codigo en ese panel:[+/-]

//Inicio del archivo de audio
stop();
var i:Number = 1;
//contador del mp3
var v:Number = 40;
//variable para medir el volumen del audio
var mp3s:Number = 3;
//Maximo de mp3 a reproducir
_root.miMp3 = new Sound();
//variable principal mi mp3
_root.miMp3.loadSound("mp3/"+i+".mp3", true);
//hacemos la carga de mp3 segun el valor de i
_root.miMp3.setVolume(v);
//asigna el volumen de reproduccion
_root.miMp3.onSoundComplete = function() {
//cuando termine el mp3, cargamos el siguiente
i++;
if (i>mp3s) {
i = 1;
}
miMp3.loadSound("mp3/"+i+".mp3", true);
_root.vol.gotoAndStop(v)
};
miMp3.onLoad = function(success:Boolean) {
var totalSeconds:Number = this.position/1000;
//vemos el tiempo transcurrido y sacamos los segundos
var minutes:Number = Math.floor(totalSeconds/60);
//lo mismo y sacamos los minutos
var seconds = Math.floor(totalSeconds)%60;
if (seconds<10) seconds = "0" text =" (">=10) {
time_txt.text = (minutes+":"+seconds);
}
};
setInterval(miMp3, "onLoad", 1000);
// lo que viene es para el porcentaje cargado
onEnterFrame = function () {
porcentaje_txt.text = (Math.round((miMp3.getBytesLoaded()/miMp3.getBytesTotal())*100)+"%");
if (Math.round((miMp3.getBytesLoaded()/miMp3.getBytesTotal())*100) == 100) {
porcentaje_txt.text = "streaming completo";
}
};
miMp3.onID3 = function():Void {
ide_txt.text = miMp3.id3.artist+" - "+miMp3.id3.songname;
};
//---------------------------------------
_root.vol_txt.text = "volumen a "+v+"%";
//Volumen inicial -----------------------
//funciones para el boton stop
_root.stop_btn.onPress = function() {
miMp3.stop();
miMp3.setVolume(v);
};
//funciones para el boton play
_root.play_btn.onPress = function() {
miMp3.start();
miMp3.setVolume(v);
};
//funciones para el el boton anterior
_root.prev_btn.onPress = function() {
if (i>1) {
//Condicion que asigna que si es mayor a 1
i = i-1;
//entonces sera igual a i restando 1
miMp3.loadSound("mp3/"+i+".mp3", true);
//cargara el valor de i
miMp3.setVolume(v);
//asigna el valor global del volumen
} else if (i <=3) { //segunda condional que dice que si i es menor o igual a 3
i = 3;
//borre el valor anterior y asigne 3
miMp3.loadSound("mp3/"+i+".mp3", true);
//carga un mp3 con el valor de i
miMp3.setVolume(v);
//asigna el volumen global al archivo
}
/*Creamos una segunda condicion en la misma estructura donde si i no es menor o igual a 3, borre el valor
previo y re asigne a 3; con lo que obliga al programa a cumplir la primer condicion, creando
un bucle infinito en esta ecuacion.*/
};
//funciones para el boton siguiente
_root.sigu_btn.onPress = function() {
if (i<3) i =" i+1;">=3) {
i = 1;
miMp3.loadSound("mp3/"+i+".mp3", true);
miMp3.setVolume(v);
}
/*Hacemos lo mismo que en el boton anterior solo que a la inversa, aqui agregando valores en 1
en lugar de restarlos */
};
//funcion para el boton bajar volumen
_root.volMenos_btn.onPress = function() {
if (v>0) {
//creamos una condicion que dicte que si v es mayor a 0
v = v-5;
//el valor de v, sera v menos 5
miMp3.setVolume(v);
//asigna el volumen de la variable miMp3
_root.vol.gotoAndStop(v);
//lleva la barra de volumen al fotograma que dicte v
//en este caso se correra hasta 40; pues el valor original acertado
_root.vol_txt.text = "volumen a "+v+"%";
}
};
//funciones para el boton subir volumen
_root.volMas_btn.onPress = function() {
if (v<100) v =" v+5;" text = "volumen a " style="color: rgb(153, 204, 0);">//Fin del reproductor

Cuando lo hayas hecho publica el documento y crea una carpeta (en el mismo directorio que el archivo swf) con nombre mp3 y dentro de ella poner las canciones que deseas escuchar. El nombre de cada una de ellas deberá ser un número empezando desde el 1 y el número de archivos debes configurarlo en el anterior codigo buscando estas lineas y cambiando el 3 por el que necesites:

var mp3s:Number = 3;
//Maximo de mp3 a reproducir

//asigna el valor global del volumen
} else if (i <=3) {
//segunda condional que dice que si i es menor o igual a 3
i = 3;

//funciones para el boton siguiente
_root.sigu_btn.onPress = function() {
if (i<3) {
i = i+1;
miMp3.loadSound("mp3/"+i+".mp3", true);
miMp3.setVolume(v);
} else if (i >=3) {

Observación

Seguramente despues de haberlo hecho y probado en tu computador te gustaria subirlo a algun hosting y ponerlo en tu pagina web, para hacerlo te recomiendo cambiar un poco el codigo en la parte que llama la canción; la modificación consiste en que no sea necesaria la carpeta 'mp3' sino que el reproductor busque los archivos mp3 en su mismo directorio.

Codigo [+/-]

//Inicio del archivo de audio
stop();
var i:Number = 1;
//contador del mp3
var v:Number = 40;
//variable para medir el volumen del audio
var mp3s:Number = 3;
//Maximo de mp3 a reproducir
_root.miMp3 = new Sound();
//variable principal mi mp3
_root.miMp3.loadSound(i+".mp3", true);
//hacemos la carga de mp3 segun el valor de i
_root.miMp3.setVolume(v);
//asigna el volumen de reproduccion
_root.miMp3.onSoundComplete = function() {
//cuando termine el mp3, cargamos el siguiente
i++;
if (i>mp3s) {
i = 1;
}
miMp3.loadSound(i+".mp3", true);
_root.vol.gotoAndStop(v)
};
miMp3.onLoad = function(success:Boolean) {
var totalSeconds:Number = this.position/1000;
//vemos el tiempo transcurrido y sacamos los segundos
var minutes:Number = Math.floor(totalSeconds/60);
//lo mismo y sacamos los minutos
var seconds = Math.floor(totalSeconds)%60;
if (seconds<10) seconds = "0" text =" (">=10) {
time_txt.text = (minutes+":"+seconds);
}
};
setInterval(miMp3, "onLoad", 1000);
// lo que viene es para el porcentaje cargado
onEnterFrame = function () {
porcentaje_txt.text = (Math.round((miMp3.getBytesLoaded()/miMp3.getBytesTotal())*100)+"%");
if (Math.round((miMp3.getBytesLoaded()/miMp3.getBytesTotal())*100) == 100) {
porcentaje_txt.text = "streaming completo";
}
};
miMp3.onID3 = function():Void {
ide_txt.text = miMp3.id3.artist+" - "+miMp3.id3.songname;
};
//---------------------------------------
_root.vol_txt.text = "volumen a "+v+"%";
//Volumen inicial -----------------------
//funciones para el boton stop
_root.stop_btn.onPress = function() {
miMp3.stop();
miMp3.setVolume(v);
};
//funciones para el boton play
_root.play_btn.onPress = function() {
miMp3.start();
miMp3.setVolume(v);
};
//funciones para el el boton anterior
_root.prev_btn.onPress = function() {
if (i>1) {
//Condicion que asigna que si es mayor a 1
i = i-1;
//entonces sera igual a i restando 1
miMp3.loadSound(i+".mp3", true);
//cargara el valor de i
miMp3.setVolume(v);
//asigna el valor global del volumen
} else if (i <=3) { //segunda condional que dice que si i es menor o igual a 3
i = 3;
//borre el valor anterior y asigne 3
miMp3.loadSound(i+".mp3", true);
//carga un mp3 con el valor de i
miMp3.setVolume(v);
//asigna el volumen global al archivo
}
/*Creamos una segunda condicion en la misma estructura donde si i no es menor o igual a 3, borre el valor
previo y re asigne a 3; con lo que obliga al programa a cumplir la primer condicion, creando
un bucle infinito en esta ecuacion.*/
};
//funciones para el boton siguiente
_root.sigu_btn.onPress = function() {
if (i<3) i =" i+1;">=3) {
i = 1;
miMp3.loadSound(i+".mp3", true);
miMp3.setVolume(v);
}
/*Hacemos lo mismo que en el boton anterior solo que a la inversa, aqui agregando valores en 1
en lugar de restarlos */
};
//funcion para el boton bajar volumen
_root.volMenos_btn.onPress = function() {
if (v>0) {
//creamos una condicion que dicte que si v es mayor a 0
v = v-5;
//el valor de v, sera v menos 5
miMp3.setVolume(v);
//asigna el volumen de la variable miMp3
_root.vol.gotoAndStop(v);
//lleva la barra de volumen al fotograma que dicte v
//en este caso se correra hasta 40; pues el valor original acertado
_root.vol_txt.text = "volumen a "+v+"%";
}
};
//funciones para el boton subir volumen
_root.volMas_btn.onPress = function() {
if (v<100) v =" v+5;" text = "volumen a " style="color: rgb(153, 204, 0);">//Fin del reproductor

Enlaces de interés

Insertar flash en blogger
Hosting para tus archivos
Sites google

Y aqui mi sencillo reproductor personalizado

(Ejemplo con musica) Sites google

(Ejemplo con musica) FileDEN

Animate y muestrame tu resultado :)

Via VideoTutoriales.us

Recopilación de iconos Twitter

2009-07-01T04:52:00.000-07:00

Una bonita recopilación de iconos traidos de todas partes y para todods los gustos.

Badges, Icons & Buttons…
Enlace

Tweeta Free Twitter Bird Icon Set
Enlace

Twitter-Icon-Set bestehend aus 4 Motiven
Enlace

Free Twitter Icon
Enlace

Cute Tweeters Icon Set
Enlace

Free Twitter Eggs
Enlace

Free Twitter Bird Icon Set
Enlace

2 Awesome Twitter Icons
Enlace

Free Twitter Icons - Happy Birds
Enlace

Faviconera zGraphics

2009-06-29T00:35:00.000-07:00

Desde hace algun tiempo se ha difundido la idea de las faviconeras, de algún modo son eficaces porque nos dan a conocer en diferentes espacios y lugares. Me parece que su eficacia radica en cuan atractiva lusca y cuanto poder de convencimiento tenga.

Despues de todo me ha gustado la idea y con un poco de imaginación pensé en como hacerla, la adelanté bastante...pero despues de todo me enredé con el script, asi que me encontré con Alternativas web de Gustavo Beauregard que muy amablemente se ofrecio a ayudarme. Despues de algunas horas, el ayudandome con el codigo y yo terminando el css, el resultado se dio.

Si quieres agregar tu pagina llena los siguientes datos, descuida no te pediré nada a cambio.

Tambien puedes agregar un comentario con tu opinion.

Mensajes segun la hora

2009-06-28T13:47:00.000-07:00

Demo	Este codigo JavaScript nos permite mostrar toda clase de frases segun la hora establecida en el computador del visitante. Los mensajes a mostrar puedes modificarlos según tus intereses, al igual que las propiedades css.

Este es el script y donde lo pongas aparecerá el mensaje:

si lo dejas asi verás algo como esto en tu plantilla:

Pero podemos acomodar un poco el css para darle un toque de personalidad a la capa #saludo.

#saludo {
width:200px;
background:#69C url(url-fontdo.png) right bottom no-repeat;
color:#FFF;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
padding: 77px 4px 10px 4px;
cursor:pointer;
border: 2px solid #6CC;
-ms-border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

Y el resultado es este:

Nuestra cajita de frases ya está terminada, pero quise añadir un pequeño efecto con scriptaculous visto en vagabundia, asi que encerré el script dentro de la capa #CambiarOpacidad.

y agregué este codigo antes de </head> :

Finalmente puedes ver como funciona aqui.

Estilos y Gradientes web

2009-06-28T09:05:00.000-07:00

Los estilos para photoshop son utilidades que nos permiten aplicar efectos rapidamente a una capa. Hay estilos y gradientes para diferentes objetos, como baneres, botones, texto incluso para anuncios.

Para empezar a usarlos debes copiar y pegar estos archivos en la carpeta de ajustes preestablecidos de Adobe photoshop que se encuentra en esta dirección:

C:\Archivos de programa\Adobe\Adobe Photoshop CS4\Presets\Styles

o en la carpeta de gradientes:

C:\Archivos de programa\Adobe\Adobe Photoshop CS4\Presets\Gradients

Ultimate web 2.0 Gradients | Dezinerfolio.com
Descarga directa

Web Styles | Crazykira-resourses para DeviantART
Descarga directa

72 web 2.0 PS Styles | Creativosonline.com
Descarga directa

Walkaway | KingAoran para DeviantART
Descarga directa

Via Kbytes

Estado online y conversaciones en el blog

2009-06-24T17:52:00.000-07:00

Despues de algunas visitas a este rinconcito te darás cuenta del objetivo de cada entrada, mi proposito es amenizar un poco el ambiente de nuestras paginas y blogs. Algo que me parece de suma importancia es comunicarse con los visitantes, conocerlos hasta donde se pueda y resolver sus dudas.

En este post he querido compartir una manera para que nuestros visitantes vean nuestro estado en linea y aprovechen ese tiempito de la visita para resolver todas sus inquietudes. Por supuesto me refiero a cosas que no se hagan de esperar, por ejemplo usuarios que no dispongan de internet en su casa o dudas de respuesta inmediata. Hago la aclaración porque para el blog son tan importantes los comentarios y las opiniones como los mismos post, de hecho son lo que motivan a escribir.

Dirás: bueno, ellos ven mi estado ¿y eso que?. Aparte del estado en linea, con tan solo hacer click en una imagen o botón se abrirá una ventana de conversación instatanea (privada), algo asi como visitante-autor. Puedes probarlo en la cabecera del blog, aun está en 'version beta' pero ahi se quedará.

Agregarlo al blog o a la pagina web es muy sencillo y no es necesario contar con una cuenta de hotmail, tambien puedes escribirle a esa persona como invitado.
Para que funcione el autor o la persona que lo agregue a su sitio deberá descargar msn plus e instalar un script en su computador. No es algo dañino, o por lo menos me ha funcionado bien y la pagina donde se creo está dispuesta a ofrecer todo tipo de ayuda. Sin ellos no lo hubiera entendido del todo bien.

Sin mas que decir ahi les va:

Requisitos

Si no dispones de msn puedes descargarlo desde aqui.
Si no dispones de msn plus descargalo desde aqui. [No sabes que es msn plus y te da temor?]

Viste a Messenger
¡Cambia completamente el look de Messenger con skins gratuitas y fáciles de instalar!

Siente,Comparte,Ríe
Sonidos personalizados, multiformato y montones de ajustes para Messenger.

Registra y Busca
Mantén un historial organizado de tus conversaciones y contactos: busca en los archivos de registro y cífralos.

Extiende
Descarga Scripts creados por gente como tú para añadir aún más funciones.

Descarga este script e instalalo en tu computador.

Cuando cumplas con las condiciones anteriores puedes:

Windows live nos ofrece tres formas de abrir la conversación:

1- Una ventana de mensajería instantanea incrustada, es decir un iframe. [+]

Recarga este marco para ver la conversacion y presiona click en enviar si no tienes una cuenta de Hotmail.

2- Un botón con tu nombre y un pequño icono que muestra tu estado en messenger. [+]

msgr:backColor="#D7E8EC" msgr:altBackColor="#FFFFFF" msgr:foreColor="#424542" msgr:conversationUrl="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=16fd7cee645f1696@apps.messenger.live.com&mkt=es-xl">

3- Un pequeño icono que cambia de color según tu estado en messenger. [+]

Para escoger la opción que mas te convenga debes visitar esta pagina, marcar la opcion que dice: Permitir que los usuarios de sitios web vean mi estado y me envíen mensajes, y dar clcik en el icono de guardar (que está un poco mas arriba del titulo). Luego visita el enlace de crear HTML que se encuentra al lado izquierdo (si no lo encuentras haz clicl aqui) y ahi puedes elegir la opcion que quieras. Mas abajo encuentras el codigo html, solo debes pegarlo donde quieras que aparezca el enlace a la conversación.

Por si quieres cambiar el icono que ofrece Windows live, el script nos ofrece una gran cantidad de imagenes para evidenciar nuestro estado, solo debes cambiar algunos detalles en el siguiente codigo:

http://wlmstatus.net/status/tu_correo@proveedor.com.png

y para insertarla pues ya sabes, agrega la etiqueta img:

Observa este ejemplo con mi correo:

y asi se verá:

Esa es la imagen por defecto sino lo modificas, puedes cambiar aspecto de la imagen, tamaño e idioma. Para incluir un diseño en especial visita este catalogo con las imagenes disponibles en introduce el numero a continación del '.com' antecedido por un guion, solo observa el ejemplo:

y obtendrás esta imagen

Para configurar el idioma se hace igual que en el anterior procedimiento, solo que esta vez el texto se agrega despues del texto que define la imagen deseada (si es que la has cambiado). Debes agregar las dos primeras letras del idioma deseado:

y este será el resultado

y eso es todo en cuanto al estado online y abrir conversaciones instantaneas. Pero hay algunas opciones adicionales que encontré vagando en internet como agregar un contacto desde un enlace html, Abrir Ventana de Vídeo, Abrir Ventana de Conversación. Lo malo es que solo funcionan en internet explorer debido a que firefox no sabe como interpretar el protocolo msnim, o por lo menos eso fue lo que entendí. En fin, si a alguien le son de ayuda aqui estan:

<a href="msnim:add?contact=tuCorreo@hotmail.com">Agregar Contacto</a>

<a href="msnim:chat?contact=tuCorreo@hotmail.com">Abrir Ventana de Conversación</a>

<a href="msnim:video?contact=tuCorreo@hotmail.com">Abrir Ventana de Vídeo</a>

Si alguien desea visitar la web del autor del script puede hacerlo desde aqui

y eso fue todo, si te ha gustado el post dejame un comentario.

Tutorial photoshop: Creando un atractivo Header

2009-06-23T22:33:00.000-07:00

Antes de crear una pagina web conviene pensar en que se quiere hacer y para que. Muchos diseñadores recomiendan empezar por el papel y recalcan su importancia. Podemos visitar este articulo de Kbites donde nos hablan de los bosquejos en papel dentro del proceso del diseño y de las tecnicas para realizar un buen trabajo. Teniendo en mente y en papel lo que se desea trabajar es bueno, como recomendación personal, representar cada seccion de la pagina, cada espacio y lo mas importante cada color.
En esta ocación he querido compartir un tutorial de dibujo en photoshop; se trata de un header muy llamativo y sencillo, pero con una estructura organizada e ideal para un sitio personal. Para que te armes una idea de que estoy hablando puedes mirar algunas de mis paginas que han pasado por el diseño y la transformacion despues del trabajo con html y css:

Una de las primeras y en la que invertí mucho tiempo, dado que no sabia como crear ese efecto en 3d:

Visualizar a una escala mayor

Esta en especial me gusta mucho y es la continuacion de la anterior (despues de unos cinco intentos). Puedes ver como quedó despues del diseño aqui.

Visualizar a una escala mayor

Este diseño se convirtió en mi primera plantilla, green place, que acabo de postear.

Visualizar a una escala mayor

Una al estilo Dragon interactive. Aqui un intento de demo:

Visualizar a una escala mayor

Bueno basta ya de charlas, hay que empezar¡

1- Lo primero será crear un documento con fondo transparente rgb, con un ancho de 1024px por un alto de 768px, para esto debes ir a archivo>nuevo y configurar las opciones de esta manera:

2- Despues de haber creado el nuevo documento procederemos a pintar el fondo con la herramienta Bote de pintura(presiona la letra G en tu teclado) y configura el color #81aa26.

3- Vamos a dibujar el menu, un elemeto de gran importancia en el header. Tomamos la herramienta pluma (pen tool) la acomodamos en modo Capas de forma y dibujamos una linea gruesa curva en cualquier lugar del documento. No es importante el lugar porque luego lo moveremos al top.

4- Presionamos doble click sobre la capa que acabamos de dibujar(en el panel de capas), con esto se nos abrirá una ventanita para aplicar efectos. En este caso agregaremos una superposición de degradado, modificalo como se muestran los valores:

* lo colores del degradado son #52741a #668b1d #7fa729 #63871d, respectivamente.

5- Ya tenemos el fondo de nuestro menú, ahora agreguemos los enlaces. Para ellos vamos a poner algunos separadores: se trata de dibujar dos lineas juntas, de diferente color, con la herramienta rectangulo. Algo como esto:

El color del primer rectangulo es #759e1f y el del segundo #84aa3b.

muy simple ¿verdad? lo siguiente será desgastar un poco los extremos usando la herramienta borrador con una opacidad del 10%(procura que el diametro de la herramienta supere el ancho de los rectangulos para que el desgaste sea uniforme). Pero antes de hacerlo presionaremos click derecho sobre cada capa (la de los rectangulos que acabamos de dibujar) y seleccionaremos rasterizar capa. cuando lo hayas hecho con las dos, seleccionalas y presiona Ctrl+E para combinarlas en una sola. Ya puedes proceder a desgastar.

si lo hiciste bien deberia parecerse a esto:

6- selecciona esta última capa (click derecho sobre la misma) y presiona Ctrl+J para duplicarla. Hazlo cuantas veces creas necesario para separar tus enlaces:

yo lo he hecho 6 veces, ahh y puedes usar las lineas de guia para alinearlos.[+/-]

Para usar las lineas de guia debes primero hacer que se muestren las reglas, presiona Ctrl+R. Despues lleva el puntero del mouse a la regla superior y justo en el borde inferior verás que cambia el cursor, deja presionado el click izquierdo y arrastra hasta donde quieras la linea.
Si deseas quitar una linea de guia solo arrastrala de nuevo al borde de la regla y sueltala ahi.

7- El siguiente paso será añadir los enlaces entre cada separador usando la herramienta de texto.

Y puedes añadir detalles, en este caso con la herramienta de forma personalizada:

8- ya tenemos el menú aunque tal vez te parezca un poco sencillo, asi que añadiremos un un sutil brillo a la primera capa que dibujamos (la linea curva). Para ello tomamos la herramienta Marco rectangular y:

a- ve hacia el panel de capas, posa el cursor del mouse sobre la capa en cuestion (en este caso posalo sobre la parte gris de la capa ya que es un dibujo con la pen tool) y presiona, sin soltar, la tecla Ctrl. Cuando notes cierto cambio en el icono del cursor presiona click.
Con eso deberias ver algo asi:

b- Ahora debes poner la heramienta Marco rectangular en modo Formar intersección con selección y luego empezar a dibujar un rectangulo desde la parte superior(debes estar seguro que empiezas desde el extremo superior) de la linea curva y descender hasta la altura del centro; ya puedes soltar el click. Si lo se, es un poco complicado de entender pero espero que esta imagen te sea de ayuda:

Y te debe quedar algo parecido a esto:

c- El siguiente paso es colorear de blanco esa zona seleccionada, pero como estamos situados sobre una capa con mascara(con mascara me refiero a la parte gris) debemos primero crear una nueva capa (Mayús + Ctrl + N) y rellenar con la herramienta Bote de pintura.

d- Luego baja la opacidad de la capa al 4%.

Y listo ese brillo ha sido añadido. Sobra decir que eres libre de añadir todos los detalles que desees.

9- El siguiente paso será agregar una sombra bajo el menú para crear una minima impresion de 3d:

a- Nos vamos a posicionar en la ultima capa, es decir la primera que rellenamos, y crearemos una nueva capa sobre ella. Usando la herramienta Marco eliptico vamos a dibujar un ovalo horizontal debajo del menú y lo rellenaremos con #567a1a

b- para dar ese aspecti de sombra vamos a Filtro > Desenfocar > Desenfoque de movimiento y aplicamos la siguiente configuración:

y deberia quedar algo asi:

Que bonito va quedando verdad :)

Me gusta como queda el efecto 3d asi que agregaremos algunos colores mas. Asi que agregaremos una luz y una sombra un poco mas abajo; el procedimiento es el mismo solo varia los valores al momento de aplicar el filtro.

Otra cosa muy importante en el header, aparte del menú, es el logotipo de la pagina o empresa. Y no necesariamente tiene que ser algo muy elaborado, puede tratarse de algunas letras sencillas con colores y trata de impregnarles algun significado para que cobre importancia en tu cultura corporativa.

Ver tamaño completo

y como siempre digo, si te ha gustado el post dejame un comentario.

Plantilla Zgraphics: Green Place

2009-06-21T21:33:00.000-07:00

Como dice el titulo, he hecho mi primera plantilla y quiero compartirla con quien quiera usarla. Puedes mirar estas captura y visitar el demo, seguro te va a gustar :)

No dudes en preguntar si quieres usarla y no puedes modificar algo.

Menús con listas y css

2009-06-19T19:47:00.000-07:00

Buscando no se que cosa en google me he encontrado con esta recopilacion de 120 menús para inspiracion. El menu de navegacion es una de las partes mas importantes no solo porque premite estructurar todos los archivos en función de un menú o de una lista de páginas principales, sino que puede darle personalidad al diseño.

En esta entrada he decidido mostrarles dos de esos menús que me han llamado la atencion, el uno porque sin necesidad de imagenes proporciona un toque de elegancia y el otro porque hace una descripción grafica de lo que podría ser la pagina.

El primero es de la pagina web Studio Imago

Si quieres hacer un menú como este tienes que editar dos partes de tu pagina web, agrega este codigo antes de la etiqueta </head>[+/-]

#menuZ{
padding:0;
width:960px;
margin:0
}
#menuZ ul{
margin:0px;
padding:0px;
list-style-type:none;
text-align:left;
float:left
}
#menuZ ul li{
display:block;
float:left;
text-align:center;
padding:0px;
margin:0px
}
#menuZ ul li a{
color:#7D818A;
text-decoration:none;
text-align:left;
background-color:#383D43;
padding-top:10px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
padding-right:0px;
padding-left:10px;
display:block;
float:left;
outline:none;
border-top:4px solid #fff;
width:127px;
padding-bottom:3px;
margin:0px;
border-bottom:1px solid #7d818a;
}
#menuZ ul li a strong{
font-size:11px;
color:#DEE0DB;
text-transform:uppercase;
display:block;
font-weight:bold;
line-height:10px;
padding-bottom:3px
}
#menuZ ul li a:hover{
color:#7D818A;
background-color:#30353B;
outline:none;
border-top-width:4px;
border-top-style:solid;
border-top-color:#43B9D7;
border-bottom:#6EA9B7 1px solid;
}
#menuZ a:active{
color:#7D818A;
background-color:#30353B;
outline:none;
border-top:#43B9D7 4px solid;
}
#menuZ li.active a{
color:#7D818A;
background-color:#30353B;
outline:none;
border-top:#43B9D7 4px solid;
}

y donde quieras que aparezca tu menú debes poner este codigo:[+/-]

<div id="menuZ">
<ul>
<li class="active"><a href="#home"><strong>Home</strong> Welkom</a></li>
<li class="default"><a href="#blog"><strong>Blog</strong> Webtoestanden</a></li>
<li class="default"><a href="#diensten"><strong>Diensten</strong> Wat we doen</a></li>
<li class="default"><a href="#portfolio"><strong>Portfolio</strong> Onze referenties</a></li>
<li class="default"><a href="#contact"><strong>Contact</strong> Get in touch</a></li>
</ul>
</div>

Debes cambiar las direcciones de los enlaces y las descripciones según tus necesidades.

El segundo menú fue tomado de ryancouser.com.

Si deseas agregar este debes hacer lo mismo que en el anterior, busca y pega el siguiente codigo antes de </head>[+/-]

#navZ{
width:540px;
height:200px;
margin:0;
padding:0;
float:left;
}
#navZ ul{
float:left;
display: inline;
height:200px;
padding: 0;
margin: 0;
list-style: none;
}
#navZ li{
float:left;
display: inline;
height:200px;
margin:0;
padding:0;
}
#navZ ul li a {
float:left;
width:80px;
height:50px;
margin:0;
padding:0 5px;
padding-top:150px;
display:inline;
color:#FFFFFF;
text-decoration: none;
text-align:center;
font-size:8pt;
font-weight:bold;
text-transform:uppercase;
}
#navZ ul li a:hover, #navZ a#here {
background-color:#7ABAC9;
text-decoration:none;
color:#222222;
}
#navZ li a.home{
background-image:url(homeicon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a#here.home, #navZ li a.home:hover{
background-position:0 -200px;
background-repeat: no-repeat;
background-color:#7ABAC9;
text-decoration:none;
color:#222222;
}
#navZ li a.services{
background-image:url(servicesicon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a.blog{
background-image:url(blogicon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a.portfolio{
background-image:url(portfolioicon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a.about{
background-image:url(abouticon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a.contact{
background-image:url(contacticon.jpg);
background-position:top;
background-repeat: no-repeat;
}
#navZ li a#here, #navZ li a:hover{
background-position:0 -200px;
background-repeat: no-repeat;
background-color:#7ABAC9;
text-decoration:none;
color:#222222;
}

y pega este codigo donde queiras que aparezca el menú:[+/-]

<div id="navZ">
<ul>
<li><a href="#" class="home" id="here">Home</a></li>
<li><a href="#services" class="services" >Services</a></li>

<li><a href="#blog" class="blog" >Blog</a></li>
<li><a href="#portfolio" class="portfolio" >Portfolio</a></li>
<li><a href="#about" class="about" >About</a></li>
<li><a href="#contact" class="contact" >Contact</a></li>

</ul>
</div>

Debes cambiar las direcciones de los enlaces y las imagenes si asi lo deseas. Y eso ha sido todo, si te gustó dejame un comentario.

Mini-editor Z-Graphics

2009-06-18T10:59:00.001-07:00

Mini-editor z-graphics

Hace algunos dias agregué un pequeño sistemita para dar formato al texto, gracias a un comentario de Gem@ me he propuesto explicar como funciona mi nuevo mini editor para los comentarios, sino lo conoces puedes mirar mas abajo y dejar un comentario si te ha gustado :)

En realidad es algo sencillo y consta de dos partes importantes: agregar emoticones a los comentarios y poner un sistemita para introducir código a un textarea por medio de un botón. NO OLVIDES hacer una copia de respaldo de tu plantilla antes de hacer cualquier cambio.

Agregando los Emoticones

Basado en esta entrada de ayuda para mi web, los pasos a seguir son los siguientes:

1. Para agregar el javascript buscamos la etiqueta </body> y justo antes pegamos el siguiente codigo:

<b:if cond='data:blog.pageType == "item"'>
<script src='http://agudovk.googlepages.com/Emoticonos.js' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

2. Para que nuestros visitantes se enteren de cómo agregarlos vamos a poner alguna imagen o aviso antes del editor de blogger, lo que Ayuda para mi web nos ofrece es una tabla:

<table width='400px'>
<tr>
<td colspan='10'>Emoticonos en blogger</td>
<td colspan='3'><a href='http://ayudaparamiweb.com'><img src='http://agudovk.googlepages.com/ayudaweb.png' style='border:0;'/></a></td>
</tr>
<tr>
<td><img src='http://agudovk.googlepages.com/com-smile.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-cry.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-tongue.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-lol.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-oops.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-blink.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-neutral.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-secreto.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa1.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-sorpresa2.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-mad.gif'/></td>
<td><img src='http://agudovk.googlepages.com/com-confuso.gif'/></td>
</tr>
<tr>
<td>:)</td>
<td>:'(</td>
<td>:(</td>
<td>:P</td>
<td>:D</td>
<td>:$</td>
<td>;)</td>
<td>:-I</td>
<td>:-X</td>
<td>:o</td>
<td>:O</td>
<td>O</td>
<td>:/</td>
</tr>
</table>

Para agregarla debemos expandir plantillas de artilugios, buscar el siguiente código y pegar la tabla anterior justo antes.

El problema de agregarla es que el script mismo reemplaza el texto por las imágenes correspondientes, así que es aconsejable poner una imagen. De nuevo buscamos el <iframe> y pegamos lo que está en rojo :

Con imagen me refiero a algo como lo que usan Vagabundia y Gem@a blog:

El ID de la imagen te permite agregar propiedades CSS para posicionarla o "embellecerla”.

Para modificar

Para empezar, te recomiendo que descargues el script y lo alojes tu mismo (puedes bajarlo desde aquí). De esa manera podrás modificar el texto con el que aparecerá cada emoticón y cambiar las imágenes por las que te gusten.

Como modificar el script[+/-]

Veamos, no soy muy bueno en esto pero intentaré explicarlo bien.

function emoticonComentario() {
if(!document.getElementById) {return;} // no soportado
bodyText = document.getElementById('comments');
comentario = bodyText.innerHTML;
// :)
comentario = comentario.replace(/:)/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-smile.gif" /> ');
// :'(
comentario = comentario.replace(/;(/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-cry.gif" /> ');
// :(
comentario = comentario.replace(/:(/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-sad.gif" /> ');
// :P
comentario = comentario.replace(/:P/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-tongue.gif" /> ');
// :D
comentario = comentario.replace(/:D/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-lol.gif" /> ');
// xD
comentario = comentario.replace(/xD/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-lol.gif" /> ');
// :$
comentario = comentario.replace(/:$/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-oops.gif" /> ');
// ;)
comentario = comentario.replace(/;)/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-blink.gif" /> ');
// :-I
comentario = comentario.replace(/:-I/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-neutral.gif" /> ');
// :-X
comentario = comentario.replace(/:-X/g,'<img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-secreto.gif" /> ');
// :o
comentario = comentario.replace(/:o/g,' <img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-sorpresa1.gif" /> ');
// :O
comentario = comentario.replace(/:O/g,' <img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-sorpresa2.gif" /> ');
// |O
comentario = comentario.replace(/|O/g,' <img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-mad.gif" /> ');
// :
comentario = comentario.replace(/:\/g,' <img style=”border:none;vertical-align:middle;” src="http://agudovk.googlepages.com/com-confuso.gif" /> ');
bodyText.innerHTML = comentario;
}

El texto en rojo es la dirección de cada imagen, el texto en verde es un comentario (muy útil de hecho) que señala la palabra con la que aparece cada imagen y el texto en morado es ese texto, así que si quieres cambiarlo debes reemplazarlo.

En esta página encontrarás toda una variedad de emoticones por si deseas personalizar un poco.

Armando el mini-editor

Para empezar hay que definir que botones deseas agregar, para así mismo definir el Java Script. El código fuente lo he conseguido después de varios minutos vagando en la red así que si encuentras algún error te agradecería que me lo comentaras (además porque no soy muy bueno en ello :) ).
Vale la pena aclarar que lo que ves cerca al editor de blogger es un iframe (que contiene al mini-editor). He decidido hacerlo así para no causar problemas en la plantilla y facilitar un poco el trabajo.

El mini-editor que estoy usando tiene varias funciones que son:

1-agregar un enlace[+/-]

2-Agregar una imagen[+/-]

3-agregar formato al texto (Negrita, Cursiva y Subrayado)[+/-]

Los he agrupado en dos archivos java script formato texto.js e img.js.
Para agregarlos a la plantilla copia y pega estos códigos antes de </head>

El siguiente paso es, dentro del <body>, crear el formulario y dentro de el poner el textarea:

Teniendo el formulario y las funciones Java Script solo faltan los botones:

Donde el texto en azul son las funciones y el texto en rojo es la etiqueta a añadir, es decir
<etiqueta>< /etiqueta>

En este caso son b (Negrita), u (Subrayado), e i (Cursiva).
Hasta aquí deberían funcionar muy bien los botones e insertar el formato en el textarea, si todo va bien podemos continuar. Algo que me pareció muy practico fue que al dar click en cada emoticón este también inserte su texto, pero para no complicarme mas con funciones javascript busqué y busqué hasta que encontré esto:

<a href="javascript:void(0);" title="texto-alternativo"><img style="propiedades" onClick="document.form1.commenteditor.value+=' TEXTO-A-AGREGAR '" src="url-de-la-imagen" /></a>

Solo tendrías que modificarlo según tus necesidades y reproducirlo debajo del textarea con cada emoticón. Por ultimo se me ocurrió agregar dos botones mas : uno para copiar el código (aunque solo funciona en internet explorer) y otro para borrar lo que haya escrito (Reset).

Para el botón de copiar[+/-]

copia y pega antes de </head>

Y el botón seria:

<a class="highlighttext" href="javascript:HighlightAll('form1.commenteditor')"><img border="0" src="url-de-la-imagen" /></a>

Para el botón de Reset[+/-]

Y hasta aqui va el editor, solo tienes que agregar las propiedades css a tu gusto. O puedes copiar el que estoy usando en este momento (si lo haces no olvides alojar las imágenes y los archivos Js en tu propio servidor, ya que los míos están en uno gratuito).

Como agregar el iframe a blogger

Si lo quieres agregar junto con el editor de blogger, expande plantillas de artilugios, busca el siguiente código y agrega lo que está en rojo:

Agregalo antes o despues, como desees. Y lo puedes posicionar agregando propiedades CSS al ID commenteditor. Estas son las propiedades que yo uso, puedes variar los valores para adaptarlo a tu plantilla:

#commenteditor{
position:relative;
top:-300px;
left:412px;
height:350px !important;
width: 360px !important;
}

Y eso es todo, te podrás dar cuenta que algunas etiquetas HTML no están permitidas en los comentarios de blogger, pero seguro sabrás darle un buen uso.

Una pequeña modificación

Los comentarios 21 y 23 de Manolo y Gem@ me han hecho caer en cuenta que el botón para insertar imagenes por medio de la url resulta poco eficiente, ya que blogger no permite esta etiqueta en los comentarios. La solucion que propone gem@ es que la funcion JavaScript nos muestre el codigo para introducir una imagen, es decir:

Si estas de acuerdo con el cambio solo debes reemplazar el archivo img.js anteriormente nombrado por este. Para verlo en accion Click aqui

Carrusel con Prototype y Scriptaculous

2009-06-16T14:21:00.000-07:00

Requerimientos

Carousel.js necesita de ambas librerías Prototype y Script.aculo.us para su funcionamiento.
Puedes descargarlas desde aqui y aqui o en su lugar usar las que nos ofrece google:

Uso

1.Descargue carousel.js o carousel-min.js

2.Adjunte el script en su pagina, después las librerías Prototype y Script.aculo.us:

HTML y CSS

El minimo de capas que debe tener el cuerpo del carrusel son:

- Carousel-wrapper: Es el contenedor mayor y en el se encuentra el carousel.
- Carousel-content: Esta capa contiene los slides, en ella se pueden incluir el numero de diapositivas que se quiera.
- slide: esta pequeña capa contiene lo que se va a mostrar en cada diapositiva, ya sean imágenes, archivos de flash, html, etc.

#carousel-wrapper {/*se definen las propiedades del contenedor mayor*/
width: 500px;
height: 500px;
overflow: hidden; /*se esconden las barras de scroll*/
}
#carousel-content {
width: 2500px; /*se define el ancho que podrán tener todos los slides juntos, si se exceed el carousel va a formar un "Segundo piso" asi que no importa el valor, cuanto mas ancho mejor.*/
}
#carousel-content .slide {/*define las propiedades de cada diapositiva*/
float: left;
width: 500px;
height: 500px;
}

Esto generará un carrusel de 500px por 500px con un movimiento horizontal. El cambio a movimiento vertical es tan simple como establecer el ancho de #carousel-content por 500px y la altura de una sola diapositiva.
Iniciar Carousel.js

Usted debe inciar su script asi:

new Carousel(wrapper, slides, triggers, {options});

por ejemplo, para el codigo de arriba, el script podria quedar de la siguiente manera:

new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control', 'a.carousel-jumper'));

Disparadores

Hay dos categorías de elementos que desencadenan el movimiento del carrusel: los que provocan directamente un salto a la diapositiva seleccionada (salto a la diapositiva "x"), y los que iniciar una relación saltar (salto a la primera / última / anterior / siguiente diapositiva). La combinación de un disparador de la clase atributos rel y class decididen la conducta del Carrusel.
Por ejemplo, al hacer clic en:

<a href="javascript:" class="carousel-jumper" rel="slide-1">Ir a slide 1</a>

El carrusel irá a la diapositiva que tiene el id "slide-1". Y si:

<a href="javascript:" class="carousel-control" rel="prev">Slide Anterior</a>

El carrusel irá al slide anterior. Las opciones disponibles para el atributo rel son: first, last, prev y next.

Opciones Disponibles

Se dan opciones como el ultimo parámetro en la inicialización del script:{option: value, option: value}

Opciones	Predeterminado	Descripcion
duration	1	La duracion de un salto o movimiento
auto	false	Cuando sea TRUE el carrusel se moverá sin necesidad de disparadores, útil para pases de diapositivas.
frequency	3	Cuando el atributo auto está en modo true, este dicta cuanto tiempo permanecen las diapositivas hasta el próximo movimiento.
visibleSlides	1	A pesar de que múltiples diapositivas se pueden hacer visibles a la vez, por el estilo, este parámetro es necesario en algunas ocasiones.
circular	false	Por opciones predeterminadas, cuando la primera/ultima diapositiva se alcanza, el llamado prev/next no hace nada. Si desea que el efecto continúe, usted debe hacer dos cosas: establecer el parámetro circular en modo true y duplicar la primera diapositiva en el HTML. Es la única manera de dar la impresión de un movimiento continuo.
wheel	true	True o false para deslizar el carrusel utilizando la rueda del ratón.
effect	scroll	Puede elegir entre los efectos scroll y fade. Cuando use el fade, no son necesarios los parámetros circular y el duplicar la primera diapositiva (vea el ejemplo 3 para el efecto fade)
transition	sinoidal	Los dos tipos de transiciones son : sinoidal y spring (vea el ejemplo 2 para aprender mas sobre el efecto spring)
selectedClassName	carousel-selected	Cuando se activa un salto de carrusel con carousel-jumper (salta a la diapositiva especificada), esta clase de CSS, se añadirá al gatillo o botón, lo que le ayudará visualmente a poner en relieve los enlaces.(ver el ejemplo online)
beforeMove	null	Función de usuario que se ejecutará antes de que los saltos se inicien. Por ejemplo: (beforeMove: function () (alert ( "Aquí voy!");))
afterMove	null	Al igual que beforeMove, sólo se le llama después de que el traslado se ha completado

Iconos para tus emoticones

2009-06-10T21:08:00.000-07:00

Este es solo otro post con algunos iconos muy llamativos que os podrian servir para utilizar de mil formas en nuestras paginas web, solo ponle imaginacion y disfrutalos.

Descarga Blacy icons

Descarga Friendly icons

Descarga Manto icons

Descarga Mazes Mini icons

Imagenes aleatorias para 'ir arriba'

2009-06-10T20:26:00.000-07:00

Demo	Acabo de implementar en el blog un sistemita de imagenes aleatorias, visto en macuoren, para ir arriba del blog. es muy sencillo de añadir a nuestra pagina web, solo tienes que añadir los siguientes codigos y si quieres cambia las url de las imagenes.

Este es el codigo para que las imagenes se muestren como aleatorias cada vez que refresques la pagina:

Donde url_imagen_4.png se refiere a la ubicacion de la imagen, el nombre y el formato.

Ahora hay que incluir las imagenes en una capa y darle la posicion, en este caso será en la parte inferior derecha, sin olvidar poner el enlace al que queremos que nos lleve la imagen.

y eso es todo, aunque al momento de agregarlo a la plantilla blogger me ha dado problemas asi que lo soluciones poniendo el contenido del script en un archivo adjunto a la plantilla y me ha funcionado de maravilla(el enlace al archivo adjunto se coloca en el mismo lugar donde está el script).

El autor del post original ha dejado un sodigo fuente con algunas imagenes que el ha diseñado y es el siguiente:

Despues de unos minutos este es mi resultado y aunque son pocas comenta si te ha sido de ayuda o de algo te ha servido:) :

Tal vez te interesen algunos iconos

Menu animado jQuery

2009-06-09T18:01:00.000-07:00

Este es un menu hecho con listas y con un efecto hover muy atractivo y singular. Para hacer uno como este necesitamos adjunatr a nuestra plantilla o pagina web la libreria jQuery y el segmento de javascript que nos genere el efecto animado. Ademas de esto son necesarias las imagenes que nos servirán de fondo en cada enlace. Dado que serian muchas, puesto que hay que tener en cuenta dos imagenes por enlace(una cuando el puntero del mouse no esté sobre el enlace y otra cuando si lo esté), vamos a usar un sprite y un fondo para el menu.

Descarga el archivo javascript jQuery desde aqui

Codigo css

/* Menu Body */
ul#menu {
width:100%;
height:122px;
background:url(http://img10.imageshack.us/img10/3126/68018218.png) repeat-x; /* url del bg */
list-style:none;
margin:0;
padding:0;
padding-top:20px;
}
/* Menu Body */
/* Float LI Elements - horizontal display */
ul#menu li {
float:left;
}

/* Link - common attributes */
ul#menu li a {
background:url(http://img14.imageshack.us/img14/808/spritepmu.png) no-repeat scroll top left; /* url del sprite */
display:block;
height:81px;
position:relative;
}

/* Specify width and background position attributes specifically for the class: "inicio" */
ul#menu li a.inicio {
width:159px;
}

/* Specify width and background position attributes specifically for the class: "mantenimiento" */
ul#menu li a.mantenimiento {
width:157px;
background-position:-159px 0px;
}
/* Specify width and background position attributes specifically for the class: "redes" */
ul#menu li a.redes {
width:157px;
background-position:-316px 0px;
}

/* Specify width and background position attributes specifically for the class: "portfolio" */
ul#menu li a.portafolio {
width:157px;
background-position:-477px 0px;
}
/* Span (on hover) - common attributes */
ul#menu li a span {
background:url(http://img14.imageshack.us/img14/808/spritepmu.png) no-repeat scroll bottom left;/* url del sprite */
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
}

/* Span (on hover) - display pointer */
ul#menu li a span:hover {
cursor:pointer;
}

/* Shift background position on hover for the class: "inicio" */
ul#menu li a.inicio span {
background-position:0px -81px;
}

/* Shift background position on hover for the class: "mantenimiento" */
ul#menu li a.mantenimiento span {
background-position:-159px -81px;
}
/* Shift background position on hover for the class: "redes" */
ul#menu li a.redes span {
background-position:-316px -81px;
}

/* Shift background position on hover for the class: "portfolio" */
ul#menu li a.portafolio span {
background-position:-477px -81px;
}

codigo javascript

<script src="jquery.js" type="text/javascript"></script>


<script type="text/javascript">
$(function() {
// set opacity to nill on page load
$("ul#menu span").css("opacity","0");
// on mouse over
$("ul#menu span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, 'slow');
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, 'slow');
});
});
</script>

Codigo HTML

Enlaces a modificar

http://img10.imageshack.us/img10/3126/68018218.png aloja la imagen bg.png en un servidor y cambia la url

http://img14.imageshack.us/img14/808/spritepmu.png has tu propio sprite, alojalo y cambia la url

Para hacer tu propio sprite sin complicaciones te recomiendo visitar la pagina css sprite generator.

jquery.js- descarga el archivo javascript, alojalo en un servidor y cambia la url

Completo tutorial HTML

2009-05-30T17:45:00.000-07:00

Desde hace mucho tenia la ilusion de crear o por lo menos acomodar en una pagina web un curso de HTML y desde ahora podeis verlo.

Algunas imagenes de la pagina

Visita el post en Taringa!

Generador de texto animado

2009-04-20T07:31:00.000-07:00

Podrás crear unos textos muy divertidos desde esta web muchografico, además de textos permite crear gifs animados, banners, rótulos, reflejos, y muchos otros efectos.

La forma de crearlos es muy sencilla, tan solo tendrás que seleccionar el modelo que más te guste, introducir el texto y hacer click en Generar Texto animado, copiaremos el código generado y lo pegaremos en nuestro blog en el lugar que deseemos, obtendremos resultados como los siguientes.

Cambiar tu plantilla predeterminada

2009-04-17T06:30:00.001-07:00

El cambio o instalación de una nueva plantilla es un poco sencillo, solo pon atencion a los siguientes pasos.(pulsa sobre las imagenes para ver en tamaño completo)

Antes que nada, si tienes widgets o cambios en tu plantilla: ¡respáldalos! Guarda el código de cada uno de ellos en un editor de texto para poder integrarlos después a tu nueva plantilla.
Entra a blogger, introduce tus datos, y presiona click sobre la pestaña diseño.

verás algo como esto:

ahora presiona click sobre edicion de html, y es recomendable no alterar su contenido, hazlo solo si manejas html.
por ultimo, debes pulsar el botón examinar y buscar el archivo xml, que se verá como esto

un (archivo xml se visualiza en windows como esta imagen :)

Hay muchos sitios en internet para descargar plantillas blogger, entre esos estan-

13 excelentes menús con Javascript

2009-04-09T16:59:00.000-07:00

Buscando por ahi me he encontrado una coleccion de menus, muy utiles por cierto, con ese toque sexy que les da el javascript. Just enjoy it!.

Enlace: noupe.com

Cosas importantes sobre Youtube

2009-04-08T22:56:00.000-07:00

Para poder realizar cambios en el codigo que tomamos de youtube, y poner un video en nuestra web, tenemos que primero comprenderlo. Los cambios que youtube efectua sobre el vido, por ejemplo el tamaño, poner un borde, cambiar de color el reproductor, videos relacionados, entro otros, se pueden ver como partes de codigo agregado.

Miremos un ejemplo,

Este es el codigo de Embed mas sencillo posible, solo podemos cambiar el ancho y el alto del video, para esto modificaremos los valores 265 y 320 (en pixeles) a nuestras necesidades.

La parte en rojo equivale al ID del video, asi que podemos sustituirlas y mostrará uno nuestro.

Lo siguiente será aplicarlo a un video y añadir una parte mas para evitar "videos relacionados".

el &rel=0 hace que al terminar el video, este no muestre otros videos relacionados.

algo como esto:

Otros codigos, no tan necesarios, sino para decorar el reproductor son:

&color1=0xe1600f&color2=0xfebd01 Para agregar color.

&border=1 Para agregar un borde.

Auto reproducir un video

Para hacer que el video se reproduzca solo, apenas visitemos la pagina, basta con agregar en la direccion (src="DIRECCION") el atributo:

&autoplay=1

Por ejemplo, este codigo tiene todos los atributos "puestos en el".

y el resulado seria este:

[+/-]

miniaturas de los videos

algo muy importante cuando enlazamos un video de youtube es la imagen que nos dice de que se trata o por lo menos nos da una idea, la miniatura.
Para no repetir el engorroso proceso de preparar una imagen para cada video, podemos utilizar las miniaturas que provee youtube para cada video. Basta con identificar el ID y sustituirlo en esta direccion:

sustituimos la parte en rojo por el ID y el resultado será este:

Google

2009-04-08T21:47:00.000-07:00

Google Classic:

así se buscaba en tiempos pretéritos...

20 cosas que no sabes sobre Google

1- Su nombre es fruto de un error de pronunciación del término gúgol (Googol) que es un 1 seguido de 100 ceros), refiriéndose a la gran cantidad de información que pretendían indexar.

2- Su extrema sencillez se debe a que sus fundadores sabían muy poco HTML y querían que cargara rápido. Luego se dieron cuenta que a la gente le encantaba pulsar “Enter” y que aparecieran resultados de forma inmediata.

3- En sus inicios mucha gente pensaba que la web no estaba totalmente cargada por su simpleza (no era lo habitual en aquellos tiempos). Lo solucionaron añadiendo información sobre el Copyright en el pié de página.

4- El botón “Voy a tener suerte” hace perder millones a Google en publicidad (te lleva directamente a una web). Se mantiene porque sus fundadores aseguran que hace al buscador más agradable.

5- Google tiene registradas direcciones parecidas, por si alguien se equivoca al escribirlas, tipo gogle.com, gooogle.com
Su slogan era Don´t Be Evil (no seas malvado).

6- Durante el 11-S Google se encargo de realizar “cachés” de los principales medios de comunicación (evitando su colapso) y se redirigieron muchas búsquedas hacia las últimas noticias.

7- Google es propietario del dominio 466453.com ( escribe Google en un SMS para saber porqué)
8- En Google usan la regla 20/5 para sus proyectos. Si al menos un 20% de los usuarios necesita una función esta se incluye. Además si como mínimo un 5% la necesita la implementan en preferencias avanzadas.

9- GMail estuvo en periodo de pruebas 2 años y medio. Concluyeron que había 6 tipos de usuario, y en función de eso desarrollaron las opciones de la aplicación.

10- Nadie sabe con exactitud donde están sus datacenters. Este es un mapa no oficial.

11- Antes se llamó BackRub.

12- Google tiene una intranet llamada Moma con documentación técnica e información de sus más de 16.000 empleados.

13- Sus empleados tienen disponible el 20% de su tiempo para pensar en nuevos proyectos.

14- La compañía tiene una regla sobre la comida. Ningún empleado puede estar a más de 100 pies de ella.

15- Para determinados estrenos como “El Señor de los Anillos” o “Transformers” la empresa ha alquilado varios cines exclusivamente para sus empleados y acompañantes.

16- Google también fue beta durante un tiempo.

17- Cobraron un cheque de 100.000$ a nombre de Google Inc…¡cuando aún no existía!

18- Tuvieron que fundarla para poder hacerlo efectivo.

19- GooglePlex es el nombre de sus oficinas.

20- Fue fundada oficialmente el 7 de Septiembre de 1998. ¡Aún no tiene ni 10 años!

Enlace

Triangulo amoroso entre Microsoft, Yahoo! y Google

Enlace

Tutoriales para Photoshop

2009-04-07T19:51:00.000-07:00

Pasiando por la web me he encontrado con un post bastante interesante del blog gloobs
acerca de tutoriales de photoshop, espero los entiendan y les sea de alguna utilidad.

Un poster al más estilo retro. El efecto de las líneas curvas buenísimo. Ver tutorial

Efecto Retro En este caso vamos a partir de una fotografía, conseguir una auténtica viñeta de comic. Ver tutorial.

Efecto Comic Aqui podemos conseguir dar un aspecto vintage a una fotografía moderna. Ver tutorial.

Efecto fotografía antigua Crear de la nada unas fotografías antiguas tipo Polaroid. Ver tutorial.

Efecto Vintage En este tutorial crearemos una carta. Muy útil el detalle de cómo crear los sellos. Ver tutorial.

Airmail En ocasiones tendremos que crear algún poster, aquí un buen ejemplo. Ver tutorial.

Poster Vintage A partir de una fotografía, creamos un poster simulando una Ilustración retro. Ver tutorial.

Retro Ilustración Otro tutorial para hacer un buen poster Vintage. Ver tutorial.

Poster Vintage Un fantástico Wallpaper retro a base de pinceles. Ver tutorial.

Wallpaper retro A partir de una fotografía creamos un cartel vintage. Ver tutorial.

Vintage desde una fotografía No podían faltar tutoriales para crear Pop Art. Ver tutorial.

Efecto Pop Art Otro ejemplo de Pop Art, en esta ocasión simulamos pixels redondos para dar el efecto deseado. Ver tutorial.

Por Art Y por supuesto no podía faltar Andy Warhol, aquí tenemos un buen tutorial para conseguir el efecto. Ver tutorial.

Pop Art El más auténtico estilo retro, muy buen tutorial. Ver tutorial.

Efecto retro Para aquellos que necesitéis utilidades para crear este tipo de efectos, os dejo estos enlaces a otros post. Podréis encontrar pinceles, fondos y artículos relacionados con este tipo de diseños.

Textarea o "Caja de texto"

2009-04-05T06:13:00.000-07:00

El tag <textarea> es muy util para publicar texto o codigo, sin que los nagvegadores lo interpreten o para poner un texto demasiado largo.Para poner un texto dentro de un textarea, debes abrir el tag <textarea> y cuando hallas escrito tu texto, debes cerrarlo </textarea> .

Por ejemplo, supongamos que tengo un texto y quiero ponerlo dentro de una caja de texto. lo que tengo que hacer es abrir el tag, pegar el texto y cerrar.
si lo hacemos correctamente quedaria algo como esto:

pues bien, dado que es un texto no tan corto el textarea se ve, esteticamente, mal. Para eso vamos arecurrir a las propiedades "rows" y "cols" , con eso podrás controlar ancho y alto.

por ejemplo, en el textarea anterior simplemente escribimos <textarea> ahora vamos a agregar lo sigueinte:

<textarea rows"10" cols"30">

y el resultado seria este

Es muy comun que los <textarea> se usen para poner links, y codigos para redes sociales, asi que es muy practico que cuando el texto sea un poco largo se auto seleccione y no halla necesidad de bajar todo el scroll con el mouse. Para esto hay que agregar unas nuevas lineas en el tag:

<textarea rows="2" cols="25" onMouseOver="this.focus()"onFocus="this.select()" input type="text" name="emailaddr" value="your e-mail" size="31" onMouseOver="this.focus()" onFocus="this.select()"> </textarea>

identifiquemos el nuevo contenido:

onMouseOver="this.focus()"onFocus="this.select()" input type="text" name="emailaddr" value="your e-mail" size="31" onMouseOver="this.focus()" onFocus="this.select()"

y este seria el resultado:

Hasta ahora hemos aprendido lo basico en un textarea (o "caja de texto") pero tambien es importante la apariencia. Esta se la podemos otorgar por medio de codigoo css, por ejemplo: cambiar el color del scroll (barra que se desplaza), el fondo, y muchos mas tags propios del css.

aunque en esta entrada no profundizaremos en codigo css, si voy a proporcionar algunos ejemplos simples de modificar segun tu pagina web y tu gusto:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Ver codigo css:
EXPANDIR CONTRAER

textarea.ejemplo-1 {
scrollbar-face-color:#000000;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:orange;
scrollbar-darkshadow-color:darkblue;
scrollbar-shadow-color:gray;
scrollbar-arrow-color:#cccccc;
scrollbar-track-color:#ffffff;
border-bottom:2px dashed #FFFFFF; padding:5px; border:none;
}
textarea.ejemplo-1 {
background: #2E3335 url();
color: #ffffff;
border:5px solid #A4A4A4;
}

Ver codigo css:
EXPANDIR CONTRAER

textarea.ejemplo-2 {
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-3dlight-color:orange;
scrollbar-darkshadow-color:#cccccc;
scrollbar-shadow-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-track-color:#ffffff;
border-bottom:2px dashed #FFFFFF; padding:5px; border:none;
}
textarea.ejemplo-2 {
background: #2E3335 url(http://static-p4.fotolia.com/jpg/00/06/18/33/400_F_6183355_dgEJR3dYA3EVVl2bJrAxB4N2yJWTiIsB.jpg);
color: #ffffff;
border:5px solid #A4A4A4;
}

Ver codigo css:

EXPANDIR CONTRAER

textarea.imagenInicio{
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
border-bottom:2px dashed #FFFFFF; padding:5px; border:none;
}
textarea.imagenFoco {
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
border-bottom:2px dashed #FFFFFF; padding:5px; border:none;
}
textarea.imagenInicio {
background: #2E3335 url();
color: #ffffff;
border:5px solid #A4A4A4;
}
textarea.imagenFoco {
background-image: url(http://css-tricks.com/wp-content/csstricks-uploads/transpBlack90.png);
color: #ffffff;
border:5px solid #2E2E2E;
}

NOTA: Para poder enlazar el codigo css con el textarea en nesesario agregar: "class="ejemplo-1" (en este caso) al tag <textarea>

Recomendacion: Para facilitar el trabajo de editar el codigo del scroll visita

http://www.maketemplate.com/scrollbar/

y para editar los colores del fondo visita http://html-color-codes.info/

Herramientas online para Imagenes

2009-04-04T10:59:00.002-07:00

Si no eres de esas personas que manejan editores de imagenes complicados, pues te recomiendo herramientas online: de facil uso y entendimiento, ademas muy rapidas y con la posibilidad de "pegar" en web (sin necesidad de descargar a tu equipo).

Unos de los mas conocidos son:

Add a shadow to a picture simply in 10 seconds ;)
Enter an url OR select a picture from your computer (gif,jpeg,png) (Max 3 MB)Select the shadow options you need (distance, background..), and generate result.

Visitar
ejemplo:

Picslice creates slices of picture, it can also crop it.
You will be able to get each parts of a picture.You can select the number of horizontal and vertical slices. Crop is useful when you need to adjust picture to your needs. Enter an url OR select picture from your pc (gif,jpeg,png) (Max 3 MB)

Visitar
ejemplo:

Insert text, add comments to picture, canvas, shape very simply in 10 seconds...

You can simply add text on 3 differents modes : over a picture (uploaded from computer or from an Url) over a canvas(which represents a space where you can select a background color), or over a shape (badges, signs....)

Visitar
ejemplo:

Picreflect is an easy web tool that will make a cool reflection of picture.Select the options you need, and load a picture from pc or url (max 3Mb), to get a reflection.

Visitar
ejemplo:

Convert a picture into ASCII TEXT,HTML (New version)
Enter an url OR select a picture from your computer (gif,jpeg,png) (Max 1 MB) To get better picture quality change the Size to a number like 4 , 3 , 2 or 1

Visitar
ejemplo:

Expandir/Contraer partes del blog

2009-04-03T22:08:00.000-07:00