2010
No me despierten
sólo estoy durmiendo ...
... hasta el lunes ... como mínimo ...
Please don't wake me, no
don't shake me
leave me where I am
I'm only sleeping ...
don't shake me
leave me where I am
I'm only sleeping ...
0
Gracias por acompañarme en este año. ¡Los espero en el próximo!
Y llega un nuevo año...
Hazte una promesa pequeñita que hará grande tu vida:
vivir este día...
Piensa que este día es único,
que las oportunidades de esta fecha,
esta luz,
este lugar,
esta hora,
no volverás a tenerlas nunca más.
Porque cuando el día termine,
tu oportunidad será distinta,
será otra la luz,
otra la fecha,
otra la hora,
otro el momento.
Las palabras que no digas ahora...
tendrán luego otro tono,
tal vez otra intención...
Se ajará la caricia que no das.
¿Cuánto hace que no escuchas las voces de tu propio corazón?
Hazlo hoy.
En este día.
Porque este día no volverá a repetirse.
Y si lo pierdes, lo habrás perdido para siempre.
(Poldy Bird)
Gracias por acompañarme en este año. ¡Los espero en el próximo!
0
Y ya llega el fin de otro año
Y la tierra habrá completado su giro alrededor del sol una vez más.
Y pensaremos en los deseos que no se han hecho realidad
en los buenos propósitos que no hemos cumplido
en eso que dejamos atrás para no recuperar nunca
en lo que fuimos
en los ausentes
en los que se han ido
en quienes nos abandonaron.
Y se brindará con lágrimas fingiendo sonrisas.
Y la tierra habrá completado su giro alrededor del sol ... su millonésimo giro imperturbable.
Y pensaremos en lo que hemos aprendido
en lo que cambiamos
en lo que mejoramos
en que esta vez, las utopías se harán realidad
en todo lo que queda por delante
en quienes están al lado
en quienes se quedaron.
Y se brindará con sonrisas hasta las lágrimas.
Y eso es un año viejo y eso es un año nuevo ...
una mezcla de ayeres y mañanas
un inestable equilibrio entre lo que ya no podemos cambiar y eso que tenemos la obligación de cambiar.
Ojala, esta vez, sea cierto y si no, bueno ... sólo será otro año más.
Y pensaremos en los deseos que no se han hecho realidad
en los buenos propósitos que no hemos cumplido
en eso que dejamos atrás para no recuperar nunca
en lo que fuimos
en los ausentes
en los que se han ido
en quienes nos abandonaron.
Y se brindará con lágrimas fingiendo sonrisas.
Y la tierra habrá completado su giro alrededor del sol ... su millonésimo giro imperturbable.
Y pensaremos en lo que hemos aprendido
en lo que cambiamos
en lo que mejoramos
en que esta vez, las utopías se harán realidad
en todo lo que queda por delante
en quienes están al lado
en quienes se quedaron.
Y se brindará con sonrisas hasta las lágrimas.
Y eso es un año viejo y eso es un año nuevo ...
una mezcla de ayeres y mañanas
un inestable equilibrio entre lo que ya no podemos cambiar y eso que tenemos la obligación de cambiar.
Ojala, esta vez, sea cierto y si no, bueno ... sólo será otro año más.
Que tengan un muy feliz comienzo de año
0
¡Feliz 2.010!
Cuando termina un año tenemos en nuestra mente un cúmulo de acontecimientos que nos fueron sucediendo a lo largo de esos 365 días.
¿Quién no tuvo preocupaciones o derramó lágrimas? pero también hubo momentos donde una palabra o una mirada nos hicieron olvidar lo desagradable.
Son esos momentos desagradables los que hay que guardar en la caja del olvido y dejar paso a la ilusión, ojalá que este año que comienza tengáis cada día un motivo para sonreír.
Ojalá, que ese sueño que se repite aún estando despiertos se haga realidad.¡ Feliz 2.010 !
0
Una forma sencilla de mostrar backlinks
Esta es una forma muy simple de mostrar los backlinks, es decir, quién nos enlaza (enlaces de retroceso) en Blogger (más información sobre Blogger y los vínculos de retroceso 1 | 2).
Lo que debemos hacer es agregar un elemento Feed en la sidebar o donde querramos mostrarlo y allí, escribir la siguiente dirección:
http://search.blogger.com/blogsearch?q=link:miblog.blogspot.com
Cambiando el texto de miblog por el de nuestro sitio.
Eso es todo, una vez guardado, el diseño se adaptara de manera automática.
Lo que debemos hacer es agregar un elemento Feed en la sidebar o donde querramos mostrarlo y allí, escribir la siguiente dirección:
http://search.blogger.com/blogsearch?q=link:miblog.blogspot.com
Cambiando el texto de miblog por el de nuestro sitio.
Eso es todo, una vez guardado, el diseño se adaptara de manera automática.
REFERENCIAS:Blogtecnia
0
Antes de incluir este efecto, deberemos pensar si nuestra sidebar tiene la suficiente anchura para permitir que el nuevo diseño se muestre como esperamos, no quedará bien en una sidebar demasiado estrecha.
[1] En primer lugar hemos de añadir el gadget de Etiquetas de Blogger, si aún no lo tenemos incluido en el blog.
[2] Ahora no tenemos más ir a Edición HTML y que añadir un poco de código CSS antes de la etiqueta ]]></b:skin> de nuestra plantilla:
Notas:
Visto en: Chica Blogger
[1] Añadimos el gadget de etiquetas si no lo hemos hecho antes.
[2] En Edición HTML marcamos la opción de expandir las plantillas de artilugios y localizamos la primera línea del gadget de Etiquetas:
Algo más abajo y dentro del mismo código del gadget, encontraremos una línea de código como esta:
Sustituimos esa línea por este código:
Por supuesto que la palabra que añadamos puede ser la que mejor se adapte a nuestras necesidades y deberemos colocarla en el código en sustitución de "entradas".
Ha de incluirse tal como en el código, es decir, dos veces en plural y una en singular.
Visto en: El Balcón de Jaime
Dos recursos más para el gadget de Etiquetas
Dividir el gadget de Etiquetas en columnas
Antes de incluir este efecto, deberemos pensar si nuestra sidebar tiene la suficiente anchura para permitir que el nuevo diseño se muestre como esperamos, no quedará bien en una sidebar demasiado estrecha.
[1] En primer lugar hemos de añadir el gadget de Etiquetas de Blogger, si aún no lo tenemos incluido en el blog.
[2] Ahora no tenemos más ir a Edición HTML y que añadir un poco de código CSS antes de la etiqueta ]]></b:skin> de nuestra plantilla:
#Label1 ul li{
float: left;
width: 45%;
}
Notas:
Dependiendo del ancho del lugar o ancho disponible de donde esté colocado el gadget, las etiquetas se mostrarán en dos o tres columnas, ya que el ancho de cada columna está determinado en porcentajes (width: 45%;).
Si cambiamos el width por un valor menor y dependiendo siempre del ancho disponible, conseguiremos más columnas.
Si tienes más de un gadget de Etiquetas añadido en el blog, dependerá de la id del gadget al que quieras incluir el efecto, el cambiar en el código CSS el Label1 por Label2 o la id del gadget concreto.
Si cambiamos el width por un valor menor y dependiendo siempre del ancho disponible, conseguiremos más columnas.
Si tienes más de un gadget de Etiquetas añadido en el blog, dependerá de la id del gadget al que quieras incluir el efecto, el cambiar en el código CSS el Label1 por Label2 o la id del gadget concreto.
Visto en: Chica Blogger
Colocar una palabra concreta al lado de la numeración de etiquetas
[1] Añadimos el gadget de etiquetas si no lo hemos hecho antes.
[2] En Edición HTML marcamos la opción de expandir las plantillas de artilugios y localizamos la primera línea del gadget de Etiquetas:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
Algo más abajo y dentro del mismo código del gadget, encontraremos una línea de código como esta:
(<data:label.count/>)
Sustituimos esa línea por este código:
(<b:if cond='data:showFreqNumbers == 0'>
entradas
<b:else/>
<b:if cond='data:label.count == 1'>
1 entrada
<b:else/>
<data:label.count/> entradas
</b:if>
</b:if>)
Por supuesto que la palabra que añadamos puede ser la que mejor se adapte a nuestras necesidades y deberemos colocarla en el código en sustitución de "entradas".
Ha de incluirse tal como en el código, es decir, dos veces en plural y una en singular.
Visto en: El Balcón de Jaime
0
Panel horizontal deslizante con JQuery
Horizontal Panel Sliding es un script para JQuery muy interesante que generara un panel con enlaces que podemos desplegar y contraer con un efecto de animación.
Primero, vamos a agregar la librería antes de </head>:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>
Y como requiere un plugin extra llamado jQuery Easing, lo descargamos y lo alojamos en un servidor externo:
<script type='text/javascript' src='URL_jquery.easing.1.3.js' />o lo agregamos copiando y pegando su contenido:
<script type='text/javascript'>
//<![CDATA[
... aquí pegamos el contenido del archivo ...
//]]>
</script>
y luego, el script del panel:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("a#controlbtn").click(function(e) {
e.preventDefault();
var slidepx=$("div#linkblock").width() + 10;
if ( !$("div#maincontent").is(':animated') ) {
if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) {
$(this).removeClass('close').html('Ocultar');
margin = "+=" + slidepx;
} else {
$(this).addClass('close').html('Mostrar');
margin = "-=" + slidepx;
}
$("div#maincontent").animate({
marginLeft: margin
}, {
duration: 'slow',
easing: 'easeOutQuint'
});
}
});
});
//]]>
</script>
El CSS es lo que nos permitirá personalizarlo:
<style type='text/css'>
div#wrap { /* es el rectángulo conteendor */
margin: 0 auto;
overflow: hidden; /* esta propeidad es importante */
position: relative;
width: 100%;
}
#controlbtn { /* el área superior con Mostrar/Ocultar */
-moz-border-radius-bottomright: 20px;
-moz-border-radius-topright: 20px;
background-color: #345;
padding: 2px 10px;
}
a#controlbtn { /* el texto del enlace Mostrar/Ocultar */
color: #DEF;
display: inline-block;
padding-left: 25px;
text-decoration: none;
}
a#controlbtn.open { /* la imagen para Mostrar */
background: transparent url(URL_imagen_MENOS) no-repeat left center;
}
a#controlbtn.close { /* la imagen para Ocultar */
background: transparent url(URL_imagen_MAS) no-repeat left center;
}
div#maincontent { /* el rectángulo inferior */
margin-left: 145px;
position: relative;
}
div#linkblock { /* el rectángulo izquierdo con los enlaces */
border-right: 1px solid #345;
float: left;
margin-left: -145px; /* el valor negativo del margen de div#maincontent */
width: 125px; /* el ancho contmplando cierto margen */
}
h4 { /* el título */
clear: none;
color: #667788;
font-family: Century Gothic;
font-size: 22px;
font-weight: normal;
letter-spacing: -1px;
line-height: 1.5;
margin: 0;
}
#yourlist { /* la lista con las referencias */
list-style: none;
margin: 0;
padding: 0;
}
#yourlist li { /* cada item de la lista */
margin: 0 0 2px 0;
padding: 3px 0 3px 10px;
position: relative;
}
#yourlist li a { /* cada item es un enlace */
color: #ABC;
font-family: Tahoma;
font-size: 17px;
}
#yourlist li a:hover { /* efecto hover */
color: #BCD;
}
#maincontent p { /* el contenido del rectángulo derecho */
color: #999;
font-family: Arial
font-size: 12px;
}
</style>
0
¿DIVS? Nada misterioso, sólo es un rectángulo
¿Cómo funcionan los DIVs? ¿Qué son?
Pués, nada más simple; los DIVs son rectángulos que, por defecto, no tienen ninguna propiedad; es lo que suele llamarse una etiqueta contenedora es decir, un lugar donde podemos agregar cosas. En realidad, cuando digo que no tiene propiedades, me refiero a propiedades extras ya que estas etiquetas tienen algunas características especiales, se "separan" de lo que está arriba y de lo que está debajo de ellas (por eso las llamamos etiquetas de bloque) y tienen un ancho que es igual al ancho total y una altura que depende de su contenido.
Este dato es importante ¿qué es el ancho total? El ancho básico es el de la pantalla del monitor, el BODY de nuestro sitio pero, como podemos poner una etiqueta dentro de otra, el ancho de cada rectángulo depende del ancho del rectángulo que lo contiene.
Si escribimos esto:
Pués, nada más simple; los DIVs son rectángulos que, por defecto, no tienen ninguna propiedad; es lo que suele llamarse una etiqueta contenedora es decir, un lugar donde podemos agregar cosas. En realidad, cuando digo que no tiene propiedades, me refiero a propiedades extras ya que estas etiquetas tienen algunas características especiales, se "separan" de lo que está arriba y de lo que está debajo de ellas (por eso las llamamos etiquetas de bloque) y tienen un ancho que es igual al ancho total y una altura que depende de su contenido.
Este dato es importante ¿qué es el ancho total? El ancho básico es el de la pantalla del monitor, el BODY de nuestro sitio pero, como podemos poner una etiqueta dentro de otra, el ancho de cada rectángulo depende del ancho del rectángulo que lo contiene.
Si escribimos esto:
<div>
<div>
<div>
<div>
<div> ....... el contenido ....... </div>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.
No veremos nada distinto a si escribimos esto:
<div> ....... el contenido ....... </div>
Ya que los rectángulos (los DIVs) no tienen propiedades y los tamaños no están definidos así que podemos tener cientos y cientos entrelazados sin que eso cambie absolutamente nada.
Ahora, vamos a darles propiedades. Lo podemos hacer de manera directa, poniendo en cada uno ellos el atributo style:
Ahora, vamos a darles propiedades. Lo podemos hacer de manera directa, poniendo en cada uno ellos el atributo style:
<div style="....... las propiedades .......">
agregándoles una clase con el atributo class (cosa que es útil cuando tenemos varios elementos con las mismas características y queremos repetirlos):
<div class="miClase">
o dándoles un nombre único con el atributo id si se trata de bloques exclusivos:
<div id="miElemento">
Por ejemplo:
<div style="width:600px;">
<div style="width:550px;">
<div style="width:500px;">
<div style="width:450px;">
<div style="width:400px;"> ....... el contenido ....... </div>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.
En este ejemplo, no veremos demasiada diferencia salvo que el texto ocupa más líneas porque se encuentra en un DIV más angosto. Pongamosle un color de fondo diferente a cada uno de ellos para verlos mejor:
<div style="background-color:#888;width:600px;">
<div style="background-color:#666;width:550px;">
<div style="background-color:#444;width:500px;">
<div style="background-color:#222;width:450px;">
<div style="background-color:#000;width:400px;"> ....... el contenido ....... </div>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.
Y padding para separarlos entre si (lo que aumentará sus anchos); en todos ellos, agregaremos padding:10px;:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.
Y centraremos los rectángulos agregando margin:0 auto; en todos ellos:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.
Como se ve, el DIV interior está centrado igual que los otros pero su contenido no, el contenido se centra con text-align:center; sin importar si ese contenido es un texto o una imagen:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tincidunt, lacus eu ultrices faucibus, nulla augue tempus turpis, eu ullamcorper leo urna vel nibh.
Salvo casos especiales, las propiedades del contenido, se heredan es decir si el DIV externo dice que la fuente de texto es de 20 pixeles (font-size:20px;) el DIV interior mostrará una fuente de 20 pixeles a menos que alguno de los DIVs intermedios diga lo contrario. En resumen, las propiedades del DIV interior (el que en este caso contiene un texto) dependerán de las propiedades del primer DIV que las defina, mirando siempre desde adentro hacia afuera.
Una plantilla funciona de esa manera, hay muchos DIVs con nombres únicos o clases, metidos unos dentro de los otros y entender este funcionameinto es esencial cuando nos encontramos con un problema.
Una plantilla funciona de esa manera, hay muchos DIVs con nombres únicos o clases, metidos unos dentro de los otros y entender este funcionameinto es esencial cuando nos encontramos con un problema.
0
Live curious
Si estás vivo, respiras,
si respiras, hablas,
si hablas, preguntas,
si preguntas, piensas,
si piensas, buscas,
si buscas, experimentas,
si experimentas, aprendes,
si aprendes, creces,
si creces, deseas,
si deseas, encuentras,
si encuentras, dudas,
si dudas, haces preguntas,
si preguntas, entiendes,
si entiendes, sabes,
si sabes, quieres saber más.
Y si quieres saber más, es que estás vivo ...
si respiras, hablas,
si hablas, preguntas,
si preguntas, piensas,
si piensas, buscas,
si buscas, experimentas,
si experimentas, aprendes,
si aprendes, creces,
si creces, deseas,
si deseas, encuentras,
si encuentras, dudas,
si dudas, haces preguntas,
si preguntas, entiendes,
si entiendes, sabes,
si sabes, quieres saber más.
Y si quieres saber más, es que estás vivo ...
REFERENCIAS:Manejara en Twitter
0
Un ejemplo del resultado.
Imagen transparente de fondo
La propiedad opacity añade opacidad a cualquier contenido, sin embargo esa opacidad al ser añadida al contenido también se añade a las imágenes y el texto.
Conseguimos solucionar ese problema y en mi opinión es la solución más acertada, pero hay quien prefiere una solución más rápida que viene a ser lo mismo que decir más práctica.
Esa solución es añadir una imagen trasparente de fondo de la misma forma que añadiríamos un fondo cualquiera: background-image:url(url de la imagen de fondo);Un ejemplo del resultado.
Si no sabemos crear una imagen transparente en Utilidades para Webmasters nos ofrecen un buen recurso se trata de Trasluscent una paleta de colores transparentes que podemos usar libremente por el precio de un enlace a la página del autor y las explicaciones para crear colores transparentes con Adobe Photoshop si optamos por crearlos nosotros mismos.
0
WolfgangsVault: Conciertos online
Me ha gusta el sitio WolfgangsVault sugerido por arturogoga. Es fácil de usar y basta registrarse para acceder a una inmensa cantidad de coniertos en vivo, que podemos escuchar de manera gratuita y sin necesidad de instalar nada.
Podemos buscar en la lista completa o bien por intérprete, dejar comentarios, crear listas, etc. Impresiona la cantidad y variedad que hay disponible.
Se ejecutan en una página tipo pop-up donde se incluye un reproductor con todos los temas.
Se ejecutan en una página tipo pop-up donde se incluye un reproductor con todos los temas.
Algunos de ellos es posible descargarlos aunque, en la mayoría de los casos, esa descarga debe pagarase; sin embargo, algunos pocos son gratuitos. Por el contrario, todos pueden ser insertados en una página web aunque sólo un tema a la vez, copiando el código que nos proveen.
0
Oh Oh Oh Feliz Navidad!!!
$f dF ,
.,,,... :$L ;$ ,dP
,!!!!!!!',cd$$$$$c, q 4$f,$$,z$"
,!!!!!!!',c$$$$$$$$$$$$c `$o`$$kuC3$$ .zf
,!!!!!!!',c$$$$$$???"""??$c R$beeF?$$$$$"
;!!!!!!! c$$$$$$",eed$$F"?t' "$$$$bd$$$"
;!!!!!!!.d$$$$$F j"j$3$bf""?b?c, '$$$$$$P"
!!!!!!: $$$$$$P J,f d$$bccbdc`$c .$k<?????>'$b
!!!!!!!> $$$$F".$$".,J$??P}"""' ?$$c. d$$$$$dd$$$$$>
`!!!!! ?L e$$ $$$$$P'zee`"$$$$boc"$$, R$$$$$$$$$$$$
'!!! z$$$$$c,"$P'J$$F'zdbeereee$$$$$eu "??$$$$PF"
Mn !! d$$$$$$$$ee z$P",d$$$$$$c?$$$$$$$$C '!!!::::!!!>
MMM ,cec, '^$$$$$$$$$c,",e$$C?$$$$$$bc?$$$$$$$k !!!!!!!!!!!!
MMM'.$$$$$$$, ?$$$$$$$$P$$$$$$$bc?T$$$$$$d$$$$$$$ . -.`!!!!!!!
nMM d$$$$$$$F $$P???",e4$$$$$$$$bcc?$$$$$$$$$$$$ "h..!!!!!!!!!
n. "$$$$$$$' ::,"??e,.-.?$$$$$$$$$$$$$$$$$$$$F.,"m.`!!!!!!!'
M":!:`""""" :!!!!!!;;."?o._"? ?$$$??$$$"$$F"$P<$$$b"?.`!!!!
: !!!!!; <!!!!!!!!!!: .,,." .zeElu. : ?eb o$$$$$$c"?c'`
'`'!!'.ud !!````'!''``zd$$$$$`d$$$CuuJ" !: 4$$$$$$$$$$c"$c
." !'`z$$$":!!!~`..:!!! d$$$$$$$`$$$$FCCJ" !!!: ?$$$$$$$$$h`$L
$$"z$$$$$":!!! :!!!!!'4$$$$$$$$`$$$$$" "" !!!!!:`$$$$$$$$$$ "
?o$$$$$$F !!!!!!!!!!! 4$$$$$$$$;?$P": JL h.`!!!!; $$$$P?",.u-
$$$$$$$$'!!!!!!!!!!!!:'R$$$$$$$E.:! $.$$c3$h.`!!! .l==7Cuec` )
$$$$$$$$ !!!!!!!!!!!!!; ?$$$$P"<!!! ?$`$$$$h. Rk`$$$$$$r?
$$$$$$$$L`!!!!!!!!!!!!!!! .:::!!!''` $$$$$$ $c"??"7u+? !
$$$$$$$$$ !!!!!!!!!!!'` :!!''` '"" .'?b",.;d$ !!!:
$$$$$$$$$b `!!!'''`.. '''` ...:::!!!!!! $$$.?$b'!!!>
$$$$$$$$$$$bcccd$$$$$$$$ ..:::!!!!!!!!!!!!!!!! 3$$b ?$c`!!!
$$$$$$$$$$$$$$$$$$$$$$$f .::!!!!!!!!!!!!!!!!!!!!!!!!! d$$$$`$$b !!!
$$$$$$$$$$$"3$$$$$$$$$":!!!!!!!!!!!!!!!!!!!!!!!!!!!!! $$$$$,$$$k !!!
$$$$$$$$$P,d$$$$$$$$F !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 3$$$$$ $$$i`!!! 3>
$$$$$$F$Fz$$$$$$$$$$ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! d$$$$$h`$$$,!!! $&
$$$$$FJFx$$$$$$$$$$ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!';$$$$$$$ 9$$$.'.$$$L
$$$$$ F.$$$$$$$$F.r !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! $$$$$$$F ?$$$e$$$$F
$$$$F .$$$$$$$$"d$$bu,,.```''!!!!!!!!!!!!!!!!'''''`,d$$$$$$$F.! ?$$$$$$F
$$$$F d$$$$$$$$ $$$$$$$$$$$bc,,,,,,,,,,,,,,,,ccd$$$$$$$$$$$$ !!! ?$$$$"
"$$$e$$$$$$$$&'$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ !!> $P"
`"?$$$$$$$$$e`?$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ !!'
`?$$$$$$$$$$e `""?????$$$$$$$$$$$$$$$$$$$$$$$????""..:!!'
"?$$$$$$$$k`!!!!!!;;;;;;::,,,...... ,,,,,;;!!!!!!!!!!
""???"" !!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!:
!!!!!!!!!!!!!!!!!!!' !!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!.> `!!!!!!!!!'''!!!!'
:; !!!!!!!!!!!!!!!!> .``''`.,cc,,.```.
!!!!!!!!!!!!!!!!!~` d$$$$$$$$$$$$$$$$$>
c.`'''''!!!!!:.. $$$$$$$$$$$$$$$$$$
$$$$$eeeeeeeuuuee$ $$$$$$$$$$$$$$$$$"
$$$$$$$$$$$$$$$$$$ """"...........
?$$$$$$$$$$$$$$$P" '!!!!!!!!!!!!!!
.."""""""""".: !!!!!!!!!!!!!
:!!!!!!!!!!!!!! `!!!!!!!!!!!'
!!!!!!!!!!!!!!' !!!!!!!!!!!'::
:!!!!!!!!!!!!! !!!!!!!!!!:!!:.
!!!!!!!!!!'!!! . `!!!!!!!!!!!!`...
`!!!!!!!! -'`` !!!!!!!!!!!!!!!!!!!!!;:
!!!!!!!!!i!!!: `'''''```'''''''''''''
!!!!!!!!!!!!!!!.
```'!!!!!!!'``::..
`!!!!!!!!!!!'
`````
REFERENCIAS:arkworld.com
0
En cada letra dejo escondido un deseo
Feliz Navidad 2.009
En cada letra dejo escondido un deseo
para que se cumplan todos vuestros sueños.¡¡ FELIZ NAVIDAD !!
0
Generador de tablas
A veces es necesario mostrar un contenido de forma ordenada y las tablas son una buena solución, crearlas no es nada complicado pero con este generador de w3schools.com la tarea resulta mucho más sencilla.
Para crear una tabla eliminaremos parte del código del panel de la izquierda que no vamos a utilizar hasta dejar lo siguiente
Seguir leyendo [+/-]
0
Cuando uno es muchos y muchos son uno
Click para ver la galería de imágenes.
6800 millones de personas y una sola voz contra el cambio climático ...
REFERENCIAS:Hopenhagen.org
0
Mostrar las imágenes de Twitpic en nuestro blog
Con Twitpic es fácil publicar imágenes en Twitter pero, pese a ser uno de los servicios más utilizados, no dispone de badges que permitan mostrar el contenido en un sitio externo aunque, aparentemente, en algún tiempo existieron y aún están allí, tal como lo muestra todoTwitter.
Como no me gustan los gadgets prediseñados, me quedo con el segundo método que implica agregar el script y es muy simple ya que lo podemos poner en un elemento HTML, directamente en la plantilla o incluso en una entrada individual.
Sólo debemos escribir un código como este:
Sólo debemos escribir un código como este:
<div id="miTwitpic">
<script src="http://twitpic.com/badge/v1.jsx?username=miNombre&count=5&size=thumb&colorbg=000000&colorborder=444444&colorfont=AAAAAA&colorlink=556677&title=miTitulo" type="text/javascript">
</script>
</div>
Allí, hay una serie de parámetros que debemos configurar:
username=miNombre allí debemos colocar nuestro nombre de usuario
count=valor es la cantidad de imágenes a ser msotradas
size=thumb define el tamaño de esas imágenes, puede ser mini, thumb o large
colorbg=rrggbb el color de fondo (por defecto es FFFFFF)
colorborder=rrggbb el color del borde (por defecto es EEEEEE)
colorfont=rrggbb el color de los textos
colorlink=rrggbb el color de los enlaces (por defecto es el de nuestra plantilla)
title=miTitulo el título a mostrar
Colocando el script dentro de un DIV, podemos nos da una posibilidad extra, ignorar los bordes del diseño original y armarla a gusto con CSS; en este caso:
username=miNombre allí debemos colocar nuestro nombre de usuario
count=valor es la cantidad de imágenes a ser msotradas
size=thumb define el tamaño de esas imágenes, puede ser mini, thumb o large
colorbg=rrggbb el color de fondo (por defecto es FFFFFF)
colorborder=rrggbb el color del borde (por defecto es EEEEEE)
colorfont=rrggbb el color de los textos
colorlink=rrggbb el color de los enlaces (por defecto es el de nuestra plantilla)
title=miTitulo el título a mostrar
Colocando el script dentro de un DIV, podemos nos da una posibilidad extra, ignorar los bordes del diseño original y armarla a gusto con CSS; en este caso:
#miTwitpic {
-moz-border-radius: 10px;
background-color: #222;
border: 2px solid #444;
margin: 0 auto;
padding: 10px;
width: 200px;
}Y eso es todo, guardamos y ya tenemos el gadget funcionando.
0
Agregando URL cortas en Blogger
Las URLs cortas se pusieron de moda con Twitter pero existen desde mucho antes que las descubriéramos o que tuviérmos que utilizarlas para que 140 caracteres no fueran demasiado escasos.
¿Qué son estas cosas? Pués, imaginen que una dirección como esta:
http://vagabundia.blogspot.com/2009/12/googl-enviar-los-posts-twitter-usando.html
tiene más de 80 caracteres y eso, dependiendo del servicio que usemos, pude ser reducido.
Por ejemplo, utilizando gaigalas la convertimos en esto: http://goo.gl/1ntC
con bit.ly en esto http://bit.ly/5frSqH
y con tinyurl http://tinyurl.com/yd7blja
Las tres, son la misma dirección codificada de manera diferente así que todas ellas, abren la misma página:
¿Qué son estas cosas? Pués, imaginen que una dirección como esta:
http://vagabundia.blogspot.com/2009/12/googl-enviar-los-posts-twitter-usando.html
tiene más de 80 caracteres y eso, dependiendo del servicio que usemos, pude ser reducido.
Por ejemplo, utilizando gaigalas la convertimos en esto: http://goo.gl/1ntC
con bit.ly en esto http://bit.ly/5frSqH
y con tinyurl http://tinyurl.com/yd7blja
Las tres, son la misma dirección codificada de manera diferente así que todas ellas, abren la misma página:
¿Sirve esto?
Es importante decir que no todos los servicios sirven y no porque la página se abra mal sino por la forma en que nos redirigen; es decir, todos esos servicios, lo que hacen es decodificar esa URL y enviarnos al sitio original pero, para que los buscadores "entiendan" esa dirección e indexen la página real y no la codificada, esos servicios deben hacerlo utilizando algo llamado redirección 301 y, aparentemente, no todos lo hacen (más información).
Es importante decir que no todos los servicios sirven y no porque la página se abra mal sino por la forma en que nos redirigen; es decir, todos esos servicios, lo que hacen es decodificar esa URL y enviarnos al sitio original pero, para que los buscadores "entiendan" esa dirección e indexen la página real y no la codificada, esos servicios deben hacerlo utilizando algo llamado redirección 301 y, aparentemente, no todos lo hacen (más información).
Es por eso que algunos afirman que el acortar URLs "debilita" la efectividad de los hipervinculos y hay muchas críticas a su uso pero, pese a todo, siguen existiendo y desde el lanzamiento de goo.gl, el servicio de acortameinto de URLs de Google), la cosa se ha vuelto, quizás, un poco más accesible ya que, imagino que ellos harán las cosas bien y las redirecciones serán correctas.
Al principio, este servicio sólo estaba disponible para usar en Chorme o con la Google Toolbar pero, en pocos días, ya han aparecido sitios como el de Alexandre Gaigalas, un bookmarklet y hasta una extensión para Firefox como goo.gl lite.
Con el tiempo, es evidente que esto se extenderá; los códigos están a la vista así que es fácil manipularlos. Tan fácil que podríamos agregar la opción al mismo Blogger, sólo con un par de líneas y de este modo, crear una URL corta para cada entrada de nuestro sitio.
Para eso, necesitamos agregar la función correspondiente antes de </head>:
Al principio, este servicio sólo estaba disponible para usar en Chorme o con la Google Toolbar pero, en pocos días, ya han aparecido sitios como el de Alexandre Gaigalas, un bookmarklet y hasta una extensión para Firefox como goo.gl lite.
Con el tiempo, es evidente que esto se extenderá; los códigos están a la vista así que es fácil manipularlos. Tan fácil que podríamos agregar la opción al mismo Blogger, sólo con un par de líneas y de este modo, crear una URL corta para cada entrada de nuestro sitio.
Para eso, necesitamos agregar la función correspondiente antes de </head>:
<script type='text/javascript'>
//<![CDATA[
window.googl_callback=function(response) {
if(response.error_message) {
document.getElementById("urlCORTA").innerHTML = ""; // es un error asi que no mostramos nada
} else {
respuesta = response.short_url;
salida = "shortURL: <a rel='nofollow' href='" + respuesta + "' target='_blank'>" + respuesta + "</a>";
document.getElementById("urlCORTA").innerHTML = salida;
}
}
//]]>
</script>
La función le solicitará a goo.gle que cree una URL corta para la página actual y esta, se mostrará en una etiqueta con un cierto formato y cuyo ID será urlCORTA; en este caso, será un texto:
shortURL: xxxxxxxxxxxx
que a la vez, será un enlace a abrir en otra ventana (target='_blank') y no indexable (rel='nofollow') para no repetirlo.
Faltaría entonces, agregar esa etiqueta y allí hay muchas variantes; puede estar debajo de los títulos de cada post (como en el ejemplo de este blog); debajo de ellos, en el footer, etc.
Sea como sea, podemos agregarla de este modo, condicionándola para que sólo se muestre en las páginas individuales:
shortURL: xxxxxxxxxxxx
que a la vez, será un enlace a abrir en otra ventana (target='_blank') y no indexable (rel='nofollow') para no repetirlo.
Faltaría entonces, agregar esa etiqueta y allí hay muchas variantes; puede estar debajo de los títulos de cada post (como en el ejemplo de este blog); debajo de ellos, en el footer, etc.
Sea como sea, podemos agregarla de este modo, condicionándola para que sólo se muestre en las páginas individuales:
<b:if cond='data:blog.pageType == "item"'>
<span id='urlCORTA'/>
<script expr:src='"http://ggl-shortener.appspot.com/?url=" + data:blog.url + "&jsonp=googl_callback"' type='text/javascript'/>
</b:if>
Y eso es todo. Llegado el caso, si queremos darle alguna clase de estilo, lo agregamos tambien antes de </head>:
<style type='text/css'>
#urlCORTA { /* el bloque donde se mostrará */ }
#urlCORTA a { /* el enlace en si mismo */ }
#urlCORTA a:hover { /* efecto hover sobre el enlace */ }
</style>
0
Si marcamos la primera casilla nos permite traducir las palabras en inglés al colocar el cursor encima de ellas.
Barra de Googe para Firefox
J.Miur nos hablaba hace unas semanas de la barra de Google haciendo hincapié en el excesivo espacio que ocupa el traductor.
Yo la estaba utilizando pero al actualizarla me instalé la barra de Google para Firefox, lo que más me ha gustado es el traductor que añade en sus herramientas, nos permite traducir palabras individuales colocando el puntero del ratón sobre una palabra en inglés y realizar traducciones instantáneas de forma automática en sitios web completos en más de 40 idiomas todo esto con la función de detección automática de idioma y lo que es mejor ocupa un espacio mínimo en la parte superior de la página.
Para configurar el traductor accedemos al icono de la herramienta 
y seguidamente Opciones.
y seguidamente Opciones.En Opciones marcamos la casilla Botones y allí escogemos aquellas herramientas que se añadirán a nuestra barra, marcaremos la casilla traducir y guardaremos los cambios.
Una vez realizado ese paso marcamos en Herramientas, la casilla Traducir se verá marcada con la opción de desplegar.
Si marcamos la primera casilla nos permite traducir las palabras en inglés al colocar el cursor encima de ellas.
La segunda casilla que es la que veo más interesante nos mostrará la barra de traducción cuando accedemos a páginas en cualquier otro idioma que no sea español.
0
¿Cómo anda su memoria?
Averigue su edad contestando unas cuantas preguntas.
Fácil Rápido Indoloro
Este test es el resultado del trabajo realizado por el Profesor Ulises Bienteveo de la Universidad Autónoma de Calingasta, Texas, USA.
Registrado por su autor. Copyright 2009. Copyleft 2010. Copylates 2011. Patente en trámite.
Todos los derechos en el reservado.
Todos los derechos en el reservado.
0
Me ha encantado este pack que consta de ocho brushes de zapatos muy femeninos y festivos, el archivo es en formato png. y el tamaño 400x400.
Brushes zapatos festivos
Me ha encantado este pack que consta de ocho brushes de zapatos muy femeninos y festivos, el archivo es en formato png. y el tamaño 400x400.
0
Iconos, iconos, iconos
| iPhone by bigkobe | Contiene 9 íconos de 128×128 256x256 y 512x512 en formato PNG.descargar |
 |
| Antique | |
 | Contiene 7 íconos en formato PNG.descargar |
| Journal by ShrunkenJedi | Contiene 6 íconos de 512×512, en formato PNG.descargar |
 |
| EcoType by SneakyTomato | |
 | Contiene 32 íconos de 512×512, en formato PNG.descargar |
| Starbucks by benedik | |
| Contiene 4 íconos de 512×512, en formato PNG.descargar | |
 | |
0
Menú desplegable con CSS
Este es el modelo de un menú desplegable que sólo requiere CSS y fue publicado por aex.net. Allí, podemos descargar los archivos necesarios para reproducir el demo online.
Con muy pocas modificaciones, podemos adaptarlo a cualquier página; por ejemplo, en este caso, le he quitado la parte de las transparencias para que sea más visible:
Con muy pocas modificaciones, podemos adaptarlo a cualquier página; por ejemplo, en este caso, le he quitado la parte de las transparencias para que sea más visible:
Como en la mayoría de los casos, hay dos partes; el HTML es muy simple y se basa en una serie de listas donde, los items con la clase drop son desplegables:
<ul class="menu">
<!-- este es un item simple -->
<li><a href="URL_enlace">ITEM SIMPLE</a></li>
<!-- así, construimos un item desplegable -->
<li class="drop">
<a href="#">ITEM DESPLEGABLE</a>
<!-- este es el ícono que puede ser cualquiera -->
<span class="toggle"> </span>
<!-- el submenú que se despliega -->
<ul>
<li><a href="URL_enlace1">TEXTO ENLACE 1</a></li>
<li><a href="URL_enlace2">TEXTO ENLACE 2</a></li>
<li><a href="URL_enlace3">TEXTO ENLACE 3</a></li>
</ul>
</li>
</ul>
EL CSS tampoco es complicado aunque es un poco engorroso y es la clave de todo:
ul.menu { /* es la lista principal */
background-color: #A9A9A9;
float: left;
list-style-type: none;
margin: 0;
padding: 0 20px;
}
ul.menu li { /* cada item de la lista principal */
border: 2px solid #A9A9A9;
display: block;
float: left;
height: 30px;
margin: 0;
padding: 0;
position: relative;
}
ul.menu li:hover { /* efecto hover sobre los items de la lista principal */
-moz-border-radius: 4px;
background-color: #000;
border:2px solid #A9A9A9;
}
ul.menu li a { /* cada item de la lista principal es un enlace */
color: #FFF;
display: block;
float: left;
font-weight: bold;
line-height: 18px;
padding: 6px 15px 5px;
text-decoration: none;
}
/* el ícono para desplegar el menú */
ul.menu li a span {
font-weight: normal;
padding-left: 3px;
}
ul.menu li.drop a {
padding-right: 7px;
}
ul.menu li.drop:hover li {
border: none;
}
ul.menu li.drop span.toggle {
background: transparent url(URL_toggle.png) no-repeat scroll 0 -20px;
display: block;
float: left;
height: 26px;
margin: 0 5px;
padding: 0;
width: 20px;
}
/* los efectos al pasar el ratón que desplegarán el submenú */
ul.menu li.drop:hover {
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
ul.menu li.drop:hover ul {
display: block;
padding: 0 0 10px 0;
z-index: 1;
}
ul.menu li ul { /* la lista con el submenú */
background-color: #555;
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 30px;
width: 100%;
}
ul.menu li ul li { /* cada item del submenú */
border: none;
float: none;
height: auto;
margin: 0;
padding: 0;
}
ul.menu li ul li a { /* cada item del submenú es un enlace */
background-color: transparent;
color: #DDD !important;
display: block;
float: none;
font-size: 13px;
font-weight: normal;
height: auto;
margin: 0;
padding: 5px 15px;
}
/* efectos sobre los items del submenú */
ul.menu li:hover ul {
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border: none;
background-color: #555;
}
ul.menu li:hover ul * {
-moz-border-radius: 0;
background-color: transparent;
}
ul.menu li ul li:hover {
background-color: #000;
}
0
Fondo animado con jQuery
No sé si recordarán aquella guía básica sobre Google Wave al final de la entrada comentaba que me había gustado la página de mantenimiento y que estaba creada con jQuery.
El efecto recuerda aquél otro de Background JQuery pero en mi opinión resulta mucho más llamativo y atractivo.
Para hacerlo busqué información y llegué a Webmove hay más sitios que hablan del sistema utilizado así que tomando una idea de aquí otra de más allá, alguna imagen prestada y otras que hice con el Paint el resultado es lo que veremos más adelante.
Para que el fondo animado funcione necesitamos jquery.easing.1.3.js es necesario descargarlo y alojarlo en nuestro servidor (nuestro servidor es aquel que utilizamos para subir archivos que no es posible subir a Blogger)
Una vez tenemos el archivo alojado copiamos la url y nos dirigimos a plantilla Edición de HTML justo antes de </head> allí añadimos lo siguiente:
<script src='url-de-tu-archivo-jquery.easing.1.3.js' type='text/javascript'/>
0
Añadir una dirección de correo adicional
A veces, suele aparecer un mensaje en nuestra cuenta de GMail diciendo algo asi:
"Hey, this is important: we don't have a password recovery email address or phone number for your account. If you lose your access, we may not be able to help you."
Tanto en inglés como en español nos están informando que no tenemos una cuenta de mail alternativa asociada con nuestra cuenta principal y nos sugieren que la agreguemos.
¿Deberíamos hacerlo? ¿Por qué? Creo que sí, que es una buena idea ya que eso nos permitirá, en caso de no poder acceder con nuestra cuenta principal, hacerlo con esa o solicitar que se nos restablezca una contraseña perdida, por ejemplo.
Lo mejor, entonces, es ir directamente a las opciones de nuestra cuenta de Google y allí, en Dirección de correo electrónico principal hay un enlace que dice Editar donde veremos un campo a llenar: Añade una dirección de correo electrónico adicional.
Colocamos esa otra dirección y nos enviarán un mail a esa cuenta para confirmarla. Eso es todo. Si entramos otra vez, la veremos agregada.
En principio, esas cuentas asociadas pueden ser tantas como se nos ocurra y todas ellas pueden ser eliminadas o modificadas en cualquier momento.
"Hey, this is important: we don't have a password recovery email address or phone number for your account. If you lose your access, we may not be able to help you."
Tanto en inglés como en español nos están informando que no tenemos una cuenta de mail alternativa asociada con nuestra cuenta principal y nos sugieren que la agreguemos.
¿Deberíamos hacerlo? ¿Por qué? Creo que sí, que es una buena idea ya que eso nos permitirá, en caso de no poder acceder con nuestra cuenta principal, hacerlo con esa o solicitar que se nos restablezca una contraseña perdida, por ejemplo.
Lo mejor, entonces, es ir directamente a las opciones de nuestra cuenta de Google y allí, en Dirección de correo electrónico principal hay un enlace que dice Editar donde veremos un campo a llenar: Añade una dirección de correo electrónico adicional.
Colocamos esa otra dirección y nos enviarán un mail a esa cuenta para confirmarla. Eso es todo. Si entramos otra vez, la veremos agregada.
En principio, esas cuentas asociadas pueden ser tantas como se nos ocurra y todas ellas pueden ser eliminadas o modificadas en cualquier momento.
REFERENCIAS:The Real Blogger Status
0
Notas:
Script original de: Schillmania
Nieve que se acumula al final de la página
En una entrada anterior habíamos visto como conseguir un efecto de nieve en el blog mediante el uso de la etiqueta "marquee" y poco después veíamos como incluir el efecto nieve usando un script.
En esta ocasión vamos a ver de nuevo como incluir nieve en el blog mediante el uso de un script. El script irá incluido directamente en la plantilla y lo he "marcado" para que, una vez pasadas las fiestas, sea fácil su localización para retirarlo.
Este script consigue un efecto muy lindo, ya que los copos que van cayendo quedan acumulados al final de la página y mientras unos caen, los del pie de la página se van deshaciendo poco a poco...
Además si movemos el ratón por la pagina, los copos cambian de dirección como movidos por un ligero viento.
Antes de decidir si vais a usarlo o no, podéis ver una demostración online en un blog donde también e incluido el script para copiar.
Lo único que hemos de hacer para conseguir el efecto nieve, es copiar el script y colocarlo en el código de nuestra plantilla antes de </head>
<!-- Comienzo del script para nieve --><script type="text/javascript">
//<![CDATA[
/*
DHTML Snowstorm! OO-style Jascript-based Snow effect
----------------------------------------------------
Version 1.4.20091115 (Previous rev: v1.3.20081215)
Code by Scott Schiller - http://schillmania.com
----------------------------------------------------
Initializes after body onload() by default (via addEventHandler() call at bottom.)
To customize properties, edit below or override configuration after this script
has run (but before body.onload), eg. snowStorm.snowStick = false;
*/
var snowStorm = null;
function SnowStorm() {
// --- PROPERTIES ---
this.flakesMax = 150; // Limit total amount of snow made (falling + sticking)
this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use)
this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
this.targetElement = null; // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
this.followMouse = true; // Snow will change movement with the user's mouse
this.snowColor = '#fff'; // Don't eat (or use?) yellow snow.
this.snowCharacter = '•'; // • = bullet, · is square on some systems etc.
this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect.
this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling
this.usePositionFixed = false; // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported
// --- less-used bits ---
this.flakeLeftOffset = 0; // amount to subtract from edges of container
this.flakeRightOffset = 0; // amount to subtract from edges of container
this.flakeWidth = 8; // max pixel width for snow element
this.flakeHeight = 8; // max pixel height for snow element
this.vMaxX = 5; // Maximum X velocity range for snow
this.vMaxY = 4; // Maximum Y velocity range
this.zIndex = 0; // CSS stacking order applied to each snowflake
// --- End of user section ---
// jslint global declarations
/*global window, document, navigator, clearInterval, setInterval */
var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.addEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.attachEvent('on'+evtName,evtHandler);
});
var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.removeEventListener(evtName,evtHandler,false);
}:function(o,evtName,evtHandler) {
return o.detachEvent('on'+evtName,evtHandler);
});
function rnd(n,min) {
if (isNaN(min)) {
min = 0;
}
return (Math.random()*n)+min;
}
function plusMinus(n) {
return (parseInt(rnd(2),10)==1?n*-1:n);
}
var s = this;
var storm = this;
this.timers = [];
this.flakes = [];
this.disabled = false;
this.active = false;
var isIE = navigator.userAgent.match(/msie/i);
var isIE6 = navigator.userAgent.match(/msie 6/i);
var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
var isWin9X = navigator.appVersion.match(/windows 98/i);
var isiPhone = navigator.userAgent.match(/iphone/i);
var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
var screenX = null;
var screenX2 = null;
var screenY = null;
var scrollY = null;
var vRndX = null;
var vRndY = null;
var windOffset = 1;
var windMultiplier = 2;
var flakeTypes = 6;
var fixedForEverything = false;
var opacitySupported = (function(){
try {
document.createElement('div').style.opacity = '0.5';
} catch (e) {
return false;
}
return true;
})();
var docFrag = document.createDocumentFragment();
if (s.flakeLeftOffset === null) {
s.flakeLeftOffset = 0;
}
if (s.flakeRightOffset === null) {
s.flakeRightOffset = 0;
}
this.meltFrameCount = 20;
this.meltFrames = [];
for (var i=0; i<this.meltFrameCount; i++) {
this.meltFrames.push(1-(i/this.meltFrameCount));
}
this.randomizeWind = function() {
vRndX = plusMinus(rnd(s.vMaxX,0.2));
vRndY = rnd(s.vMaxY,0.2);
if (this.flakes) {
for (var i=0; i<this.flakes.length; i++) {
if (this.flakes[i].active) {
this.flakes[i].setVelocities();
}
}
}
};
this.scrollHandler = function() {
// "attach" snowflakes to bottom of window if no absolute bottom value was given
scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
if (isNaN(scrollY)) {
scrollY = 0; // Netscape 6 scroll fix
}
if (!fixedForEverything && !s.flakeBottom && s.flakes) {
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active === 0) {
s.flakes[i].stick();
}
}
}
};
this.resizeHandler = function() {
if (window.innerWidth || window.innerHeight) {
screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
} else {
screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
}
screenX2 = parseInt(screenX/2,10);
};
this.resizeHandlerAlt = function() {
screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
screenX2 = parseInt(screenX/2,10);
};
this.freeze = function() {
// pause animation
if (!s.disabled) {
s.disabled = 1;
} else {
return false;
}
for (var i=s.timers.length; i--;) {
clearInterval(s.timers[i]);
}
};
this.resume = function() {
if (s.disabled) {
s.disabled = 0;
} else {
return false;
}
s.timerInit();
};
this.toggleSnow = function() {
if (!s.flakes.length) {
// first run
s.start();
} else {
s.active = !s.active;
if (s.active) {
s.show();
s.resume();
} else {
s.stop();
s.freeze();
}
}
};
this.stop = function() {
this.freeze();
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'none';
}
removeEvent(window,'scroll',s.scrollHandler);
removeEvent(window,'resize',s.resizeHandler);
if (!isOldIE) {
removeEvent(window,'blur',s.freeze);
removeEvent(window,'focus',s.resume);
}
};
this.show = function() {
for (var i=this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'block';
}
};
this.SnowFlake = function(parent,type,x,y) {
var s = this;
var storm = parent;
this.type = type;
this.x = x||parseInt(rnd(screenX-20),10);
this.y = (!isNaN(y)?y:-rnd(screenY)-12);
this.vX = null;
this.vY = null;
this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
this.vAmp = this.vAmpTypes[this.type];
this.melting = false;
this.meltFrameCount = storm.meltFrameCount;
this.meltFrames = storm.meltFrames;
this.meltFrame = 0;
this.twinkleFrame = 0;
this.active = 1;
this.fontSize = (10+(this.type/5)*10);
this.o = document.createElement('div');
this.o.innerHTML = storm.snowCharacter;
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything?'fixed':'absolute');
this.o.style.width = storm.flakeWidth+'px';
this.o.style.height = storm.flakeHeight+'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
docFrag.appendChild(this.o);
this.refresh = function() {
if (isNaN(s.x) || isNaN(s.y)) {
// safety check
return false;
}
s.o.style.left = s.x+'px';
s.o.style.top = s.y+'px';
};
this.stick = function() {
if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {
s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
} else if (storm.flakeBottom) {
s.o.style.top = storm.flakeBottom+'px';
} else {
s.o.style.display = 'none';
s.o.style.top = 'auto';
s.o.style.bottom = '0px';
s.o.style.position = 'fixed';
s.o.style.display = 'block';
}
};
this.vCheck = function() {
if (s.vX>=0 && s.vX<0.2) {
s.vX = 0.2;
} else if (s.vX<0 && s.vX>-0.2) {
s.vX = -0.2;
}
if (s.vY>=0 && s.vY<0.2) {
s.vY = 0.2;
}
};
this.move = function() {
var vX = s.vX*windOffset;
s.x += vX;
s.y += (s.vY*s.vAmp);
if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
s.x = 0;
} else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {
s.x = screenX-storm.flakeWidth-1; // flakeWidth;
}
s.refresh();
var yDiff = screenY+scrollY-s.y;
if (yDiff<storm.flakeHeight) {
s.active = 0;
if (storm.snowStick) {
s.stick();
} else {
s.recycle();
}
} else {
if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
// ~1/1000 chance of melting mid-air, with each frame
s.melting = true;
s.melt();
// only incrementally melt one frame
// s.melting = false;
}
if (storm.useTwinkleEffect) {
if (!s.twinkleFrame) {
if (Math.random()>0.9) {
s.twinkleFrame = parseInt(Math.random()*20,10);
}
} else {
s.twinkleFrame--;
s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
}
}
}
};
this.animate = function() {
// main animation loop
// move, check status, die etc.
s.move();
};
this.setVelocities = function() {
s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
};
this.setOpacity = function(o,opacity) {
if (!opacitySupported) {
return false;
}
o.style.opacity = opacity;
};
this.melt = function() {
if (!storm.useMeltEffect || !s.melting) {
s.recycle();
} else {
if (s.meltFrame < s.meltFrameCount) {
s.meltFrame++;
s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
} else {
s.recycle();
}
}
};
this.recycle = function() {
s.o.style.display = 'none';
s.o.style.position = (fixedForEverything?'fixed':'absolute');
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.meltFrame = 0;
s.melting = false;
s.setOpacity(s.o,1);
s.o.style.padding = '0px';
s.o.style.margin = '0px';
s.o.style.fontSize = s.fontSize+'px';
s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
s.o.style.textAlign = 'center';
s.o.style.verticalAlign = 'baseline';
s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
s.refresh();
s.o.style.display = 'block';
s.active = 1;
};
this.recycle(); // set up x/y coords etc.
this.refresh();
};
this.snow = function() {
var active = 0;
var used = 0;
var waiting = 0;
var flake = null;
for (var i=s.flakes.length; i--;) {
if (s.flakes[i].active == 1) {
s.flakes[i].move();
active++;
} else if (s.flakes[i].active === 0) {
used++;
} else {
waiting++;
}
if (s.flakes[i].melting) {
s.flakes[i].melt();
}
}
if (active<s.flakesMaxActive) {
flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
if (flake.active === 0) {
flake.melting = true;
}
}
};
this.mouseMove = function(e) {
if (!s.followMouse) {
return true;
}
var x = parseInt(e.clientX,10);
if (x<screenX2) {
windOffset = -windMultiplier+(x/screenX2*windMultiplier);
} else {
x -= screenX2;
windOffset = (x/screenX2)*windMultiplier;
}
};
this.createSnow = function(limit,allowInactive) {
for (var i=0; i<limit; i++) {
s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
if (allowInactive || i>s.flakesMaxActive) {
s.flakes[s.flakes.length-1].active = -1;
}
}
storm.targetElement.appendChild(docFrag);
};
this.timerInit = function() {
s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
};
this.init = function() {
s.randomizeWind();
s.createSnow(s.flakesMax); // create initial batch
addEvent(window,'resize',s.resizeHandler);
addEvent(window,'scroll',s.scrollHandler);
if (!isOldIE) {
addEvent(window,'blur',s.freeze);
addEvent(window,'focus',s.resume);
}
s.resizeHandler();
s.scrollHandler();
if (s.followMouse) {
addEvent(document,'mousemove',s.mouseMove);
}
s.animationInterval = Math.max(20,s.animationInterval);
s.timerInit();
};
var didInit = false;
this.start = function(bFromOnLoad) {
if (!didInit) {
didInit = true;
} else if (bFromOnLoad) {
// already loaded and running
return true;
}
if (typeof s.targetElement == 'string') {
var targetID = s.targetElement;
s.targetElement = document.getElementById(targetID);
if (!s.targetElement) {
throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
}
}
if (!s.targetElement) {
s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
}
if (s.targetElement != document.documentElement && s.targetElement != document.body) {
s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
}
s.resizeHandler(); // get bounding box elements
s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
fixedForEverything = s.usePositionFixed;
if (screenX && screenY && !s.disabled) {
s.init();
s.active = true;
}
};
function doStart() {
s.start(true);
}
if (document.addEventListener) {
// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
document.addEventListener('DOMContentLoaded',doStart,false);
window.addEventListener('load',doStart,false);
} else {
addEvent(window,'load',doStart);
}
}
snowStorm = new SnowStorm();
//]]>
</script><!-- Fin del script para nieve -->
Notas:
[1] He respetado los créditos al autor original: Schillmania, pienso que no sería pedir demasiado hicieseis lo mismo todos y no borraseis esa parte en el script...
[2] Una cosa a tener en cuenta, es que el efecto nieve también será visible en la parte de Diseño de nuestro blog, esto es normal y además he comprobado que no da ningún problema, aunque si en algún caso eso sucediese bastaría retirar el script.
[3] Para retirar el script una vez no queramos usarlo, nos fijaremos en las anotaciones que he puesto al comienzo y al final y que he destacado en color rojo en el código y borramos todo desde la primera anotación a la última, ambas incluidas.
[4] Hay algunos cambios que podemos hacer, aunque yo personalmente lo dejaría como est... cabe destacar que podemos aumentar la cantidad de copos de nieve en esta línea del script:
this.flakesMax = 150;
[2] Una cosa a tener en cuenta, es que el efecto nieve también será visible en la parte de Diseño de nuestro blog, esto es normal y además he comprobado que no da ningún problema, aunque si en algún caso eso sucediese bastaría retirar el script.
[3] Para retirar el script una vez no queramos usarlo, nos fijaremos en las anotaciones que he puesto al comienzo y al final y que he destacado en color rojo en el código y borramos todo desde la primera anotación a la última, ambas incluidas.
[4] Hay algunos cambios que podemos hacer, aunque yo personalmente lo dejaría como est... cabe destacar que podemos aumentar la cantidad de copos de nieve en esta línea del script:
this.flakesMax = 150;
Script original de: Schillmania
Suscribirse a:
Entradas (Atom)