tag:blogger.com,1999:blog-335711392024-03-16T04:08:33.368-03:00VagabundiaAlgo más y algo menos.JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.comBlogger2831125tag:blogger.com,1999:blog-33571139.post-91636070569758056712013-05-22T00:00:00.000-03:002013-05-22T02:48:32.025-03:00Hogar, dulce hogar<div style="text-align: center;"><img src="http://4.bp.blogspot.com/-K3o8GqzEK7M/UZIIGV_l6DI/AAAAAAAAWTk/I_vaIHUko_8/s00/sinovuelvo_1.jpg" /></div><br />
<div style="text-align: justify;">Voy a sacar las telas de araña, limpiar un poco el piso, correr los cortinados y dejar que entre algo de sol. Es inevitable que todo se llene de polvo cuando uno lo deja estar. Puede ser a propósito, un acto deliberado de <i>stop</i> o ser sólo el resultado de esas cosas que pasan cuando por alguna insondable razón, simplemente se posterga lo que antes había sido un hábito impostergable.<br />
<br />
No es que uno no tenga cosas que decir porque en realidad, eso poco importa, sino que simplemente no se pone a decirlas y el silencio se vuelve una costumbre de la que a veces no se logra salir.<br />
<br />
Si las rutinas son malas, una de las peores es esa: dejarse estar. "Mañana, hoy no tengo ganas"; la fiaca nos invade y nos quedamos quietitos, quietitos, quietitos, esperando no sé qué; esa inspiración que alguna vez soñamos que llegaría de manos de una musa rubia y de piernas largas pero que en realidad, no existe o usa peluca y tiene piernas cortas.<br />
<br />
No, no hay inspiraciones posibles, solo hay laburo. Sentarse y empezar a tipear una palabra cualquiera y dejar que las demás se vayan acomodando como puedan en un orden que jamás es el orden perfecto pero ... es lo que hay. Ni más ni menos.<br />
<br />
¿Y por qué ahora?<br />
<br />
Sólo porque la PC está trabajando tratando de grabar un en un DVD y es aburrido quedarse frente al monitor mirando como la línea avanza lentamente y el "Tiempo restante" en lugar de disminuir, aumenta y aumenta y aumenta porque sabe Dios quién corno inventó esos sistemas contables que sólo estan ahi para confundirnos ya que jamás dicen la verdad. Pasaron 18 minutos y dice que faltan 4 o 3 o 5 o 7; mejor ni lo miro porque es sabido que cuando se los mira tardan más; es la regla número uno de la vida. La leche no hierve si la miramos y se derrama en cuanto apartamos la vista. Las cosas suelen tener vida propia; una vida espantosa, creo yo, porque su único objetivo es arruinarnos la nuestra.<br />
<br />
¿Y esto saldrá publicado? ¡Y qué se yo!, a mi no me lo pregunten; yo sólo escribo para pasar el rato ... <br />
<br />
UFFFF Qué julepe. Saltó la bandeja del DVD y un pitido me dice que tengo que poner el segundo; podría ser más dulce y decírmelo de otro modo pero no, les gusta atormentarnos con esos mensajes obvios ¿No era suficiente un "Ya termine con el primero, por favor inserte el segundo"? Ni siquiera le pido que diga "No se preocupe, no hay apuro, yo espero, disculpe las molestias". Sólo pido que me trate como si yo fuera el dueño y no al revés pero es inútil pedirle peras al olmo. La PC manda y yo obedezco. Las reglas son así.<br />
<br />
En fín, ya me perdí. Bah, estaba perdido desde el principio aunque lo disimulaba ... creo.<br />
<br />
"Proceso completado satisfactoriamente". Bien. ya terminó así que vamos a ver qué salió y si la espera valió la pena.<br />
<br />
Si no vuelvo, es que me fui.</div><br />
<div style="text-align: center;"><img src="http://4.bp.blogspot.com/-85_wiER9q6w/UZIIHKerBRI/AAAAAAAAWTs/EqvOI9WJ9Yc/s00/sinovuelvo_2.jpg" /></div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com112tag:blogger.com,1999:blog-33571139.post-36854374222854865392013-05-19T00:00:00.000-03:002013-05-19T00:00:06.328-03:00Unos cuantos íconos especiales<table class="packiconos" cellspacing="10" cellpadding="0"><tr><td class="ititulo" colspan="2">Pictonic Icons</td></tr>
<tr><td colspan="2" style="text-align:left">Contiene 266 íconos en formato PNG.<br />
<a class="idescarga" rel="nofollow" href="https://pictonic.co/free" target="_blank">descargar</a></td></tr>
<tr><td colspan="2"><img src="http://2.bp.blogspot.com/-e5U23M5U14s/UTzI1VpVeyI/AAAAAAAAWNA/4ZQ4f_7wpjk/s500/PictonicIcons.jpg" /></td></tr>
</table><br />
<br />
<table class="packiconos" cellspacing="10" cellpadding="0"><tr><td class="ititulo" colspan="2">PW Drawn Icon Font</td></tr>
<tr><td colspan="2" style="text-align:left">Contiene un archivo en formato TTF.<br />
<a class="idescarga" rel="nofollow" href="http://www.peax-webdesign.com/goodies/free-icons/icones-gratuites/icon-font.html" target="_blank">descargar</a></td></tr>
<tr><td colspan="2"><img src="http://2.bp.blogspot.com/-cUqtpwkUHnI/UTzJVAhs14I/AAAAAAAAWNQ/gYL-2Z5Z7HQ/s500/PWDrawn.jpg" /></td></td></tr>
</table><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com15tag:blogger.com,1999:blog-33571139.post-2568539547952234512013-05-14T00:00:00.000-03:002013-05-14T05:49:37.441-03:00Notas desde el navegador<div style="text-align: justify;">El artículo de Jose Jesus Perez Aguinaga llamado <a href="https://coderwall.com/p/lhsrcq" target="_blank">One line browser notepad</a> me llamó la atención, no sólo por lo original de la idea sino por el grado de participación y aportes de los lectores, algo que, no suele ser habitual en estos tiempos donde sólo vale la inmediatez y la "practicidad" de las cosas.<br />
<br />
Seguramente, no es algo que maraville ya que es posible que haya decenas de sistemas similares pero, no deja de ser interesante ya que demuestra dos cosas: que siempre se puede darle una vuelta de tuerca más a algo y que vale la pena hacerlo.<br />
<br />
La idea es simple; usar el navegador para tomar notas rápidas sin necesidad de agregar <i>plugins</i> o aplicaciones extras, valiéndose sólo de un <i>bookmarklet</i>, algo que puede ser agregado a los marcadores.<br />
<br />
¿Cómo funcionaría? Basta abrir una ventana o pestaña y escribir lo siguiente en la barra de direcciones:</div><pre>data:text/html, <html contenteditable></pre><div style="text-align: justify;">Haciendo eso, la ventana se convertirá en un editor de textos sencillo donde podremos escribir cualquier cosa. Bastaría guardarla así en los marcadores para no tener que tipear eso cada vez que lo necesitemos.<br />
<br />
De ahí en más, comenzaron a aparecer variaciones de todo tipo:</div><pre>data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />
data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
data:text/html;charset=utf-8, <html contenteditable>
data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false">
data:text/html;charset=utf-8, <title>TextEditor</title><body contenteditable style="font-size:2rem;font-family:monaco;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;" spellcheck="false"><h1>Text Editor</h1><p>Start Here.
data:text/html, <style>html,body{margin: 0; padding: 0;}</style><textarea style="font-size: 1.5em; line-height: 1.5em; background: %23000; color: %23EEE; width: 100%; height: 100%; border: none; outline: none; margin: 0; padding: 90px;" autofocus placeholder="empezar a escribir" />
data:text/html,<pre onkeyup="(function(d,t){d[t]('iframe')[0].contentDocument.body.innerHTML = d[t]('pre')[0].textContent;})(document,'getElementsByTagName')" style="width:100%;height:48%;white-space:pre-wrap;overflow:auto;" contenteditable></pre><iframe style="width:100%;height:48%"></pre><div style="text-align: justify;">Una vez que terminamos de escribir, sólo necesitamos guardar el resultado como haríamos con cualquier página web.<br />
<br />
Incluso hay quien llevó la idea al extremo de crear un <a href="http://ednortonengineeringsociety.blogspot.com.ar/2013/01/cool-trick-with-contenteditable-in-html.html" target="_blank">bookmarklet</a> que guarda cualquier contenido seleccionado.</div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com4tag:blogger.com,1999:blog-33571139.post-11684340919040108372013-04-24T03:57:00.000-03:002013-04-24T15:19:15.729-03:00El futuro y la propiedad @supports<div style="text-align: justify;"><img class="izquierda" src="http://4.bp.blogspot.com/-QLmX2LwzWVM/UM1ve0cdXGI/AAAAAAAAVqY/4aZFdqCJiQE/s150/support.png" />Así como hace más de dos años, se mostraba el uso de una propiedad de CSS3 llamada <a href="http://vagabundia.blogspot.com/2010/07/usar-media-para-detectar-la-resolucion.html" target="_blank">@media</a> que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará y hoy se va generalizado a partir de la intención de muchos desarrolladores de tener diseños adaptables; esta otra, llamada <a rel="nofollow" href="http://dev.w3.org/csswg/css3-conditional/#at-supports" target="_blank">@supports</a>, es probable que pronto se convierta en una de esas cosas imprescindibles.<br />
<br />
Por ahora, su uso práctico es limitado o nulo ya que sólo está soportado por Opera 12 y Firefox 17 e incluso en este último, sólo funciona si se coloca en <b>TRUE</b> el valor <b>layout.css.supports-rule.enable</b> en la configuración del navegador (about:config) pero, se espera que pronto sea algo corriente y Chrome dice que lo implementará a partir de la versión 24.<br />
<br />
¿Para qué serviría esto? Para algo que el CSS aun es incapaz de manejar, detectar el navegador que se está utilizando de tal forma de poder condicionar el uso de determinadas reglas o propiedades.<br />
<br />
La sintaxis sería.</div><pre>@supports una_condición {
/* y aquí las reglas de estilo si la condición se cumple */
}</pre><div style="text-align: justify;">Por ejemplo, supongamos que quiero que una etiqueta tenga una animación que use <a href="http://vagabundia.blogspot.com/2011/12/transiciones-y-animaciones.html" target="_blank">@keyframes</a> sólo si estas son soportadas y, caso contrario que no se vean:</div><pre>#mi_animacion {display:none;} /* por defecto no lo muestro */
@supports (animation-name: un_ejemplo) {
/* y sólo se verá si el navegador soporta animaciones */
@keyframes un_ejemplo {
from {background-color:#000;border: 0px solid #444;}
to {background-color:#F00;border: 15px solid #FF0;}
}
#mi_animacion {
display:block;}
animation: un_ejemplo 1s infinite alternate;
}
}</pre><div style="text-align: justify;">En ese caso, sólo hay una condición pero puede haber varias y combinarse con <b>OR</b> y <b>AND</b>:</div><pre>@supports (animation-name: un_ejemplo) or (-webkit-animation-name: un_ejemplo) {
/* las reglas se aplicarían en cualquiera de los dos casos */
}
@supports (animation-name: un_ejemplo) and (box-shadow: 1px 1px 5px #FFF) {
/* las reglas se aplicarían si ambas propiedades son reconocidas por el navegador */
}</pre><div style="text-align: justify;">O incluso, puede usarse el <b>NOT</b> para hacer lo contrario:</div><pre>@supports not (display: flexbox) {
/* estas reglas se aplicarían si la propeidad no es reconocida por el navegador */
}</pre><div style="text-align: justify;">Si bien la condición debe tener un valor, este puede ser cualquiera y no es necesario que se utilice en las reglas de la condición así que, por ejemplo, esto sería válido (inútil pero válido):</div><pre>@supports (background: red) {
body {background: white;}
}</pre><div style="text-align: justify;">Sí, ya sé, no tiene utilidad pero ... el tiempo pasa volando.</div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com11tag:blogger.com,1999:blog-33571139.post-27008431028849217942013-04-21T16:14:00.000-03:002013-04-21T16:14:16.851-03:00Los comentarios de Google+ en cualquier página <div style="text-align:justify;">Por si a alguien le interesa, esto acaba de ser publicado en <a href="http://googlesystem.blogspot.com.ar/2013/04/add-google-comments-to-any-web-page.html" target="_blank">Google Operating System</a><br />
<br />
Se trata de agregar los comentarios de Google+ a cualquier página de modo independiente.No es algo oficial así que ... prudencia:</div><pre><script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-comments"
data-href="<span style="color:#FF0">url</span>"
data-width="642"
data-first_party_property="BLOGGER"
data-view_type="FILTERED_POSTMOD">
</div></pre><div style="text-align:justify;">donde debe reemplazarse <span style="color:#FF0">url</span> por la dirección de la página.<br />
<br />
En el caso de un <i>blog</i>, esa url es dinámica, varia y en Blogger sería algo así siempre y cuando el <i>script</i> se coloque dentro del <b>includable post</b> de manera similar a como se hace con otros <i>plugins</i> de redes sociales:</div><pre>data-href="'<data:post.url/>'"</pre><div style="text-align:justify;">y, eventualmente, imagino que si se coloca en cualquier otra parte, podría usarse esto:</div><pre>data-href=location.href;</pre><div style="text-align:justify;">El valor 642 de data-width es el ancho y deberán probar qué pasa si se cambia porque yo no pienso hacerlo.<br />
<br />
A diferencia del sistema que propone Blogger, esto no sincroniza los comentarios sino que funcionan de manera independiente, algo similar a lo que se puede hacer con los comentarios de Facebook.</div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com4tag:blogger.com,1999:blog-33571139.post-88030952577940040632013-04-20T00:00:00.000-03:002013-04-20T00:00:04.695-03:00jQuery 2.0: IE8 y cómo resolver problemas<div style="text-align:justify">Hace pocos meses, comentaba sobre <a href="http://vagabundia.blogspot.com/2013/01/actualizacion-de-jquery-y-posibles.html" target="_blank">las actualizaciones de la librería jQuery</a> y de los recaudos que había que tomar si los implementábamos. Ahora, que ya está disponible <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/" target="_blank" rel="nofollow">la versión 2</a>, todo lo dicho en ese momento sigue siendo válido pero, le debemos agregar un punto extra: la nueva librería <b>NO</b> es compatible con las versiones de Internet Explrorer anteriores a la 9.<br />
<br />
Esto, no significa que funcionará mal significa que directamente: NO FUNCIONARÁ en IE8 por ejemplo porque los desarrolladores han dejado de dar soporte a ese navegador, ahorrando, de este modo, decenas de líneas de código.<br />
<br />
¿Qué debemos tener en cuenta si es que utilizamos esta librería?<br />
<br />
Primero que nada, sólo necesitamos una; es muy común ver que se cargan varias versiones porque se copian los códigos tal como se muestran en las páginas de ejemplo sin tener en cuenta que, cualquier cosa que agreguemos o querramos probar, debe pasar por el filtro del sentido común y tratar de entender qué estamos haciendo.<br />
<br />
Por otro lado, si bien es fácil agregar la librería con algo así:</div><br />
<pre><script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/></pre><br />
<div style="text-align:justify">Esto, cargará siempre la última versión con lo cual, ciertas cosas que antes funcionaban, pueden dejar de funcionar.<br />
<br />
La nueva versión ya está disponible en los repositorios de Google así que podemos usarla cambiando el número:</div><br />
<pre><script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' type='text/javascript'/></pre><br />
<div style="text-align:justify">Ahora bien ¿Y que hacemos con IE8? Recuerden que jQuery 2 no funcionará en ese navegador.<br />
<br />
Una alternativa es aprovecharse de los condicionales que inventó Microsoft para lidiar con estas cosas. Hay varios sitios que hablan sobre l tema e incluso el mismo blog de jQuery propone una alternativa pero, es completamente errónea así que, acá está la solución tal como define <a href="http://www.impressivewebs.com/loading-different-jquery-version-ie6-8/" target="_blank">Impresive Webs</a> y que funciona de manera correcta aunque el código parezca un poco absurdo.</div><br />
<pre><!--[if lt IE 9]>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
<![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' type='text/javascript'/>
<!--<![endif]--> </pre><br />
<div style="text-align:justify">Lo que hará eso es cargar la versión 1.9.1. en Internet Explorer 8 o inferior y la versión 2 en cualquier otro navegador.<br />
<br />
Si quieren verificarlo, el código está colocado tal cual en este mismo <i>blog</i>.</div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com7tag:blogger.com,1999:blog-33571139.post-47186185663892673902013-04-18T17:12:00.000-03:002013-04-19T23:27:31.192-03:00Comentarios, Google+, blogs y el final de una era<div style="text-align: justify;">Seguramente, todos han recibido el mail de Blogger anunciando la integración de los comentarios de Google+ en Blogger; algo que permite sincronizar los comentarios entre ambos servicios. Los detalles (<a href="http://buzz.blogger.com/2013/04/bringing-google-comments-to-blogger.html" rel="nofollow" target="_blank">en inglés</a>) y en <a href="http://googleespana.blogspot.com.ar/2013/04/comentarios-de-google-en-blogger.html" rel="nofollow" target="_blank">español</a>.<br />
<br />
Dicen: "<em>Este mensaje se ha enviado a porque nos indicaste que querías recibir avisos sobre las funciones nuevas de Blogger.</em>"<br />
<br />
Pero, si en casi siete años, esta es la primera vez que envían un mail ... uno se pone a pensar ¡pucha!, se ve que este asuntito es algo que REALMENTE les interesa ¿A quién? ¿a mi? no, a Google.</div><br />
<div style="text-align: center;"><img src="http://4.bp.blogspot.com/-N98uMuIiD8s/UXBLfu3lacI/AAAAAAAAWOQ/RD0E5wm5Mn4/s00/comentariosmas1.png" /></div><br />
<div style="text-align: justify;">Para algunos, es un sueño hecho realidad, para otros, entre quienes me incluyo, es la confirmación de eso que uno viene suponiendo hace tiempo: que Blogger terminará siento integrado, absorbido o deglutido por Google+ ya que estamos en tiempos de redes sociales<br />
<br />
Los <i>blogs</i> fueron la explosión de la participación activa pero, al parecer, ahora, cuando ya no nos quedan muchas palabras, le llegó el turno al <i>micro-blogging</i> y a las redes sociales, ese "<em>cruce entre patio andaluz con sus cotilleos y foro romano</em>" o <em>"una fuente de información para poder crear un medio o apoyar uno ya existe</em>".</div><br />
<div style="text-align: center;"><img src="http://2.bp.blogspot.com/-uv-Xl8bl_Iw/UXBLfmJJLyI/AAAAAAAAWOU/gunwUjKqQz0/s00/comentariosmas2.png" /></div><br />
<div style="text-align: justify;">Todo el mundo ama a Google ... hasta que es demasiado grande. Demasiado poder para alguien aunque sea un angelito sin malas intenciones.<br />
<br />
Llegó Google+ y algunos se enamoraron, a otros les resulta indiferente. Si es bueno, si es malo, si es lindo, si es feo, si es mejor o peor que otro servicio carece de importancia. Habrá quien lo use para esto y otro para aquello. Habrá quién lo use mucho y habrá quien lo use menos. Cada cual atenderá su juego como pueda.<br />
<br />
Pero que nadie se olvide que no hay monopolios buenos y monopolios malos. Todos son malos. El gran imperio de la <i>web</i> tiene muchos pretendientes al trono y la verdad, como soy un simple mortal, andar levantando tal o cual bandera para que otro se llene los bolsillos me parece una tremenda estupidez.<br />
<br />
<a rel="nofollow" target="_blank" href="http://es.wikipedia.org/wiki/Distop%C3%ADa">Distopía</a>: <em>utopía perversa donde la realidad transcurre en términos opuestos a los de una sociedad ideal, es decir, en una sociedad opresiva, totalitaria o indeseable. El término fue acuñado como antónimo de utopía y se usa principalmente para hacer referencia a una sociedad ficticia frecuentemente emplazada en el futuro cercano en donde las tendencias sociales se llevan a extremos apocalípticos.</em><br />
<br />
Seguir a alguien no es estar junto a alguien, es ir detrás.<br />
<br />
Creo que la idea de la <i>web</i> es otra: es ir juntos y no en fila india. Creo que la idea de la <i>web</i> es ir para cualquier lado y encontrarse con otros en el camino, sin tratar de venderles nada.</div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com32tag:blogger.com,1999:blog-33571139.post-40056539697961054462013-04-16T00:00:00.000-03:002017-03-25T02:01:10.275-03:00jFontSize: Manejar el tamaño de los textos<div style="text-align: justify;">Hay muchos <span style="font-style: italic;">scripts</span> que hacen lo mismo que <a href="http://www.jfontsize.com/" target="_blank">jFontSize</a> pero este es bastante simple ya que usa la librería jQuery.<br />
<br />
En general, no creo que sea algo demasiado útil ya que hacer zoom es algo que cualquier navegador admite de modo nativo pero, aún así, muchos sitios lo utilizan así que no hay nada de malo en tenerlo como opción. La idea es facilitar la generación de botones que permitan aumentar o disminuir el tamaño de las fuentes de los textos.<br />
<br />
El <span style="font-style: italic;">script</span> es muy pequeño y puede descargarse desde la <span style="font-style: italic;">web</span> del desarrollador aunque lo que ahí nos ofrecen no admiten las opciones que posee el <span style="font-style: italic;">plugin</span> (es raro pero es así) entonces, lo mejor, es descargar el <a href="http://www.jfontsize.com/files/jquery.jfontsize-1.0.demo.zip" rel="nofollow" target="_blank">zip</a> con los scripts y los ejemplos. Allí, en la carpeta JS, veremos el archivo que necesitamos: jquery.jfontsize-1.0.js<br />
<br />
Una vez agregado a nuestro sitio, antes de </head> deberíamos establecer las reglas de estilo de esos botones. En este caso, puse lo siguiente pero, puede ser cualquier otra cosa:</div><pre><style>
.jfontsize-button {
background-color: #EEE;
border-radius: 4px;
box-shadow: 0 0 0.2em #888 inset;
color: #000;
cursor: pointer;
display: inline-block;
font-family: Arial;
font-size: 13px;
font-weight: bold;
margin: 0 1px;
opacity: 0.8;
padding: 0.3em 0;
text-align: center;
text-decoration: none;
width: 2em;
}
.jfontsize-button:hover {
opacity: 1;
}
.jfontsize-disabled, .jfontsize-disabled:hover {
opacity: .5;
pointer-events: none;
}
<style></pre><div style="text-align: justify;">Y de manera genérica, lo ejecutamos de este modo:</div><pre>$(document).ready(function() {
$('#nombreID').jfontsize();
// o bien esto otro si queremos hacer referencia a la clase
$('.nombreCLASE').jfontsize();
})</pre><div style="text-align: justify;">Donde <span style="font-weight: bold;">nombreID</span> o <span style="font-weight: bold;">nombreCLASE</span> deben indicar la etiqueta sobre la que funcionará, teneindo en cuenta que esa etiqueta debe tener una regla de estilo con un tamaño de fuente ya sea específico o heredada de su contenedor. Por ejemplo, si quisiéramos aplicarlo a todas las entradas de este <span style="font-style: italic;">blog</span>, debería usar algo así:</div><pre>$('.post-body').jfontsize();</pre><div style="text-align: justify;">ya que los textos se encuentran en un DIV con esa clase sin embargo, si dentro de esa etiqueta, hay otras que especifican un tamaño, estas no se verán afectadas; veamos un ejemplo concreto:</div><pre><div id="demojfontsize">
<div style="text-align:right;">
<a id="jf1-b1" class="jfontsize-button" href="#">A-</a>
<a id="jf1-b2" class="jfontsize-button" href="#">A</a>
<a id="jf1-b3" class="jfontsize-button" href="#">A+</a>
</div>
... un texto cualquiera ...
<span style="color:#FF0; font-family:cursive; font-size:20px;">otra fuente y otro tamaño</span>
... un texto cualquiera ...
</div></pre><div style="text-align: justify;">si el <span style="font-style: italic;">script</span> lo ejecutamos así:</div><pre>$('#demojfontsize').jfontsize({
btnMinusClasseId: '#jf1-b1',
btnDefaultClasseId: '#jf1-b2',
btnPlusClasseId: '#jf1-b3'
});</pre><br />
<div style="text-align: justify;">Los botones <span style="font-weight: bold;">A-</span> y <span style="font-weight: bold;">A+</span> aumentarán o disminuirán el tamaño del texto y el botón <span style="font-weight: bold;">A</span> central restaurará el tamaño a su valor original pero, nada de eso afectaría el span de color amarillo ya que en la etiqueta, el tamaño del texto es explícito porque se encuentra en un atributo style o está definido en alguna otra regla.<br />
<br />
La cantidad de clicks sobre los botones es infinita así que llegará un momento en que el tamaño sea gigantesco o no se vea nada. Eso es algo que podemos controlar con las opciones:<br />
<br />
<span style="font-weight: bold;">btnMinusMaxHits </span>es un valor (por defecto 10) que establece la cantidad de veces que puede decrementarse el tamaño<br />
<span style="font-weight: bold;">btnPlusMaxHits </span>es un valor (por defecto 10) que establece la cantidad de veces que puede incrementarse el tamaño<br />
<span style="font-weight: bold;">sizeChange </span>es un valor que establece cuanto aumenta o disminuye y por defecto es 1y está expresado en pixeles<br />
<br />
Si el script dijera esto:</div><pre>$('#demojfontsize2').jfontsize({
btnMinusClasseId: '#jf2-b1',
btnDefaultClasseId: '#jf2-b2',
btnPlusClasseId: '#jf2-b3',
btnMinusMaxHits: 5,
btnPlusMaxHits: 5,
sizeChange: 1
});</pre><div style="text-align: justify;">Habría un máximo de cinco <i>clicks</i> disponibles y al llegar a ese límite, el botón se deshabilitaría.</div><br />
<br />
<div style="text-align: justify;">Para usarlo en distintas etiquetas de la misma página, debemos indicar al script, el ID o la clase de los botones que es lo que hacemos con estas opciones:<br />
<br />
<span style="font-weight: bold;">btnMinusClasseId </span>es el ID o clase del botón decrementar<br />
<span style="font-weight: bold;">btnDeafultClasseId </span>es el ID o clase del botón incrementar<br />
<span style="font-weight: bold;">btnPlusClasseId </span>es el ID o clase del botón restaurar</div><br />
<div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com0tag:blogger.com,1999:blog-33571139.post-37950776046658307642013-04-10T00:08:00.000-03:002013-04-10T00:08:27.148-03:00Mejoras en el editor de plantillas de Blogger<div style="text-align:justify">El editor de plantillas de Blogger ahora incluye una serie de modificaciones que parecen interesantes y lo hacen bastante más amigable de lo que era.<br />
<br />
Si entramos en Plantilla y hacemos click en Editar HTML, se nos mostrará el código mucho más organizado, con las líneas numeradas y las palabras claves de CSS, HTML y JavaScript, coloreadas, diferenciando propiedades, valores y etiquetas.</div><br />
<div style="text-align:center"><img src="http://4.bp.blogspot.com/-C1ENbHa2Mkw/UWTWtToMglI/AAAAAAAAWOA/RDnewiIsZso/s00/beditar1.png" /></div><br />
<div style="text-align:justify">Arriba, una serie de botones nos permiten usar opciones extras.<br />
<br />
<b>Ir al widget</b> es un menú desplegable conde se listan los <i>gadgets</i> o <i>widgets</i> que hayamos agregado y basta un <i>click</i> sobre los nombres para posicionarnos en el código que, como siempre, se verá contraído pero podremos desplegar individualmente con el icono que se mostrará a la izquierda.<br />
<br />
<b>Vista previa de la plantilla</b>, la mostrará allí mismo y no en una nueva ventana, Basta hacer <i>clic</i>k otra vez en <b>Editar Plantilla</b> para regresar al código.<br />
<br />
Por último, <b>Plantilla de formato</b> re-ordena el código, agregando indentación de forma automática.<br />
<br />
Como siempre, debemos usar el botón <b>Guardar</b> para que los cambios sean efectivos o bien <b>Revertir cambios</b>.</div><br />
<div class="referenciaExterna"><span>REFERENCIAS:</span><a href="http://buzz.blogger.com/2013/04/improvements-to-blogger-template-html.html" target="_blank">buzz.blogger.com</a></div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com50tag:blogger.com,1999:blog-33571139.post-68655017520797320082013-04-03T00:00:00.000-03:002013-04-03T00:46:27.320-03:00Divagaciones a la hora del naufragio<div style="text-align: justify;">La gente, en su inmensa mayoría, lo único que pretende de internet es pasarla bien; se contenta con leer y mandar mails, con mirar algún video en YouTube; con charlar un rato con alguien que también está interesado en esas otras cosas que conforman la vida ordinaria de todos los días.<br />
<br />
Son muchos los que hoy se olvidan de eso que es tan pero tan pequeñito.<br />
<br />
Los <i>geeks</i> de hoy ya no juegan como antes, ahora, sólo compran juguetes ... juguetes caros.<br />
<br />
Es una pena porque en ese camino, todos hemos perdido un poco; ellos nos desprecian o nos miran con piedad y se nos acercan para dar consejos inaplicables; y nosotros porque ya no tenemos referencias en las cuales apoyarnos para aprender. Si consultamos por un problema de Windows, nos dicen que instalemos Linux; si preguntamos por qué tal cosa no nos funciona en Internet Explorer, se ríen y nos responden que cambiemos de navegador. Usan Twitter porque allí esta la "gente linda"; odian Facebook porque allí sólo hay "gente común"; usan Chrome porque es <i>cool</i>; si se les nombra MySpace, les da úlcera; Microsoft es basura monopólica pero las Mac son geniales; usan WordPress pero sus sitios parecen haberse creado con una máquina de hacer chorizos y no se les cae una idea original ni aunque se los de vuelta y se los sacuda. Critican y encima, nos hablan de técnicas para atraer visitantes en cinco rápidas lecciones.<br />
<br />
Cuando yo era chiquito chiquito chiquito, los <i>geeks</i> no existían. Lo que había entonces eran cerebritos, tragalibros, gente parecida al Profesor Chiflado de Jerry Lewis. No eran los pulcros o los <i>chupamedias</i> de las maestras, eran todo lo contrario; eran los que sabían cosas casi sin proponérselo y lo cierto es que sus vidas no eran sencillas. Eran los que elegíamos para jugar porque no había más remedio, los que jamás eran invitados a una fiesta, los primeros en tener acné y los últimos en besar a una chica.</div><br />
<div style="text-align: center;"><img src="http://3.bp.blogspot.com/-2smSbk-j9lQ/UM2D1wGg8YI/AAAAAAAAVsM/b-0h5HygLsQ/s00/JerryLewis.jpg" /></div><br />
<div style="text-align: justify;">Que nadie crea que hablo de un complot pero, mientras crecían en medio de la humillación, no me cabe duda que iban tejiendo su venganza y esta no tardó en llegar porque un día, el mundo se transformó de la noche a la mañana y la tecnología nos invadió. Entonces ellos se rieron de nosotros que empezamos a tocar botones equivocados, a no saber nada de <i>play</i> y <i>stop</i>, a volvernos locos programando una videocasetera o a comprar una computadora personal que sólo podíamos utilizar para jugar al Tetris y terminaba arrumbada en el fondo de un placard o transformada en un florero exótico.<br />
<br />
Ellos sabían lo que venía y nosotros no. Nosotros soñábamos con los Supersónicos pero a decir verdad, no éramos mucho más que Pedro Picapiedra.<br />
<br />
Eran esos que podían abrir una radio con una moneda, transformarla en un televisor y les sobraban piezas. Hablo de los <i>geeks</i> en serio y no de los que van a hacer cola a la cuatro de la mañana para comprarse un I-Phone. Hablo de los que apenas podían soñar con tener un computador de última generación pero que se manejaban perfectamente con un cacharro atado con alambre porque la diversión estaba en el desafío de la escasez.<br />
<br />
En algún momento y esto no fue hace mucho, las cosas cambiaron. Las palabras dejaron de tener el mismo significado y hoy definimos como <i>geek</i> a ese que escribe sobre navegadores que no usa nadie, sobre sistemas operativos que jamás oímos nombrar, alguien que nos cuenta lo que ve en una publicidad, alguien que cree que sabe porque tiene cosas.<br />
<br />
Los <i>geeks</i> de antes estaban apartados de la gente porque la gente los rechazaba; los <i>geeks</i> de ahora están apartados de la gente porque la subestiman y es así que basta que un servicio se haga popular para que el antiguo dios se transforme en el nuevo demonio.<br />
<br />
Hoy es este, mañana aquel. Modas pasajeras a la velocidad de la luz.<br />
<br />
¿Habrá por ahí alguien que sepa hacia donde va el futuro? ¿Será que el futuro es el regreso a la<i> web</i> contemplativa? Esta era de hiper-comunicación ¿nos comunica?<br />
<br />
Tal vez, hubo un tiempo en que la humanidad era feliz porque estábamos tan lejos los unos de los otros que, cuando nos encontrábamos, siempre había algo que contar y, sobre todo, ganas de escuchar.<br />
<br />
Hoy, hay muchas voces y demasiado silencio.</div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com13tag:blogger.com,1999:blog-33571139.post-28293984830306888852013-03-28T00:00:00.000-03:002017-03-22T01:42:29.309-03:00Entradas con estilos variables segun la etiqueta<div style="text-align: justify;"><img src="http://4.bp.blogspot.com/-wmtN76m0miE/UUywQyIa-CI/AAAAAAAAWNw/W2FeQm1BfTI/s00/label-icon.png" class="izquierda"/>Para establecer estilos diferenciados en cierto tipo de páginas, en Blogger podemos usar <a href="http://vagabundia.blogspot.com/2010/04/blogger-y-el-uso-de-codigos.html" target="_blank">los códigos condicionales</a> ya que todo aquello que se encuentre dentro de esa condición, sólo se ejecutará si esta se cumple. Por ejemplo, si quisiéramos que el color de fondo del <span style="font-style: italic;">blog</span> fuera rojo cuando se muestra una página estática, pondríamos algo así:</div><pre><b:if cond='data:blog.pageType != &:quot;static_page&:quot;'>
<style>
body {background-color:red;}
</style>
</b:if></pre><div style="text-align: justify;">Pero hay cierto tipo de páginas un poco más complejas de diferenciar ya que no hay condiciones exactas. Por ejemplo, las páginas de etiquetas que son de tipo <span style="font-weight: bold;">index</span> al igual que muchos otros tipo de páginas incluyendo el <span style="font-style: italic;">home</span>.<br />
<br />
Una alternativa para reconocer este tipo de páginas es usar los <a href="http://vagabundia.blogspot.com/2007/03/selectores-condicionales-en-css.html" target="_blank">selectores condicionales</a> de CSS que nos permiten detectar el contenido de cualquier atributo que tenga una etiqueta y, de ese modo, definir reglas de estilo especiales para ellas.<br />
<br />
¿Un poco confuso? En realidad es bastante simple. Supongamos que los enlaces de nuestro sitio son de color verde:</div><pre>a {color:green:}</pre><div style="text-align: justify;">y quisiéramos que aquellos tienen el atributo target="_blank" fueran de color amarillo; agregaríamos lo siguiente, con o sin la palabra <b>!important</b>:</div><pre>a[target="_blank"] { {color: yellow !important;}</pre><div style="text-align: justify;">¿Y si quisiéramos algo más genérico como diferenciar el color de los enlaces internos de los enlaces externos? En ese caso podríamos usar el atributo <b>href</b> que es el que contiene la dirección url y un "comodín" (el caracter asterisco) para que la regla se aplique a cualquier enlace que contenga parte de nuestra dirección. En el caso de este <span style="font-style: italic;">blog</span>, podría ser algo así:</div><pre>a[href*="vagabundia.blogspot.com"] { {color: yellow !important;}</pre><div style="text-align: justify;">la sintaxis en general es:</div><pre>[atributo*="dato"]</pre><div style="text-align: justify;">Donde el comodín hace que se aplique a cualquier atributo cuyo contenido contenga el dato total o parcialmente.<br />
<br />
Entonces, para establecer reglas de estilo diferentes en ciertas páginas como las etiquetas, podríamos utilizar este sistema pero debemos tener algo en donde mirar, debe haber alguna etiqueta que tenga algún atributo que podamos leer y actuar en consecuencia.<br />
<br />
Se me ocurre que lo más sencillo es colocarlo en la etiqueta <b>body</b> que normalmente dice esto:</div><pre><body></pre><div style="text-align: justify;">o esto:</div><pre><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></pre>o cualquier cosa similar, no tiene importancia, basta que allí agreguemos un atributo extra como <span style="font-weight: bold;">rel</span> y la url de la página que obtenemos de los datos del mismo Blogger:<br />
<pre><body expr:rel='data:blog.canonicalUrl' .......</pre><div style="text-align: justify;">Hecho eso, nada cambiará así que ahora crearemos las reglas que se nos ocurran ya que sabemos que ese atributo contendrá algo así cuando estemos en una página de etiquetas:</div><pre>rel="http://miblog.com/search/label/<span style="color: #CCCCFF">nombre_etiqueta</span>"</pre><div style="text-align: justify;">Suponiendo que quisiera que las páginas de etiquetas Google de este <span style="font-style: italic;">blog</span> tuvieran un color de fondo rojo, la regla sería:</div><pre>body[rel*="label/Google"] {background: red;}</pre><div style="text-align: justify;">Y si quisiera cambiar el título de los posts:</div><pre>body[rel*="label/Google"] .post-title { ....... <span style="font-style: italic;">acá las propiedades</span> ....... }</pre><div style="text-align: justify;">y el header:</div><pre>body[rel*="label/Google"] #header-wrapper { ....... <span style="font-style: italic;">acá las propiedades</span> ....... }</pre><div style="text-align: justify;">Aplicando <a href="http://vagabundia.blogspot.com/2012/02/jugando-con-after-y-before.html" target="_blank">after y before</a> también podemos agregar "contenido".<br />
<br />
Si pusiera esta regla, cuando se abre una página de etiquetas Google, se vería una imagen a la derecha del header:</div><pre>body[rel*="label/Google"] #header-wrapper {position: relative;}
body[rel*="label/Google"] #header-wrapper:after {
content: url(url_imagen);
position: absolute;
right: 20rpx;
top: 20px;
}</pre><div style="text-align: justify;">En resumen, a partir del primer selector, puedo acceder a cualquier etiqueta, id o clase interna y definir reglas exactas que se apliquen en ciertas condiciones.<br />
<br />
Obviamente, alguien preguntará si podríamos hacer lo mismo para diferenciar los <span style="font-style: italic;">posts</span> según su etiqueta y ahí las cosas se complican porque, hasta donde sé, no hay ningún dato al que podamos acceder para conocer la etiqueta de una entrada hasta que esta es cargada en el includable post lo que significa que cualquier cambio que hagamos podría tardar en verse ya que puede haber otras partes de nuestra página que se mostrarían antes y si estas tardan, primero se mostrará el estilo general y luego el modificado.<br />
<br />
El segundo problema es que allí podemos leer las etiquetas del <i>post</i> pero esto se debe hacer en un bucle y usar JavaScript para agregar el dato extra que necesitamos (el nombre de la etiqueta).<br />
<br />
Entonces, haremos eso, buscaremos:</div><pre><b:includable id='post' var='post'></pre><div style="text-align: justify;">y veremos que la siguiente linea dice algo como esto o similar:</div><pre><div class='post hentry uncustomized-post-template'></pre><div style="text-align: justify;">Debajo, pondremos lo siguiente:</div><pre><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<script type='text/javascript'>
var postetiqueta=&#39;<data:label.name/>&#39;;
</script>
</b:if>
</b:loop>
<!-- con eso, tenemos el nombre de la última etiqueta (si es que el post tiene varias) guardada en una variable -->
<script type='text/javascript'>
// agregamos el atributo rel con el nombre en la etiqueta body
document.body.setAttribute(&#39;rel&#39;,postetiqueta);
</script>
</b:if></pre><div style="text-align: justify;">Y si usamos jQuery podemos reemplazar document.body.setAttribute() por:</div><pre>$(&#39;body&#39;).attr(&#39;rel&#39;,postetiqueta);</pre><div style="text-align: justify;">De acá en más, en las páginas individuales, la etiqueta <b>body</b> tendrá un atributo <b>rel</b> cuyo valor es el nombre de la etiqueta de la entrada así que, con un criterio similar al comentado inicialmente, podemos usar selectores y definir estilos particulares para esas entradas aunque, en este caso, no necesitamos el comodín.<br />
<br />
En este ejemplo algunas de sus reglas son estas:</div><pre><style>
body[rel="rojo"] #header-wrapper {display: none;}
body[rel="rojo"] #sidebar-wrapper {display: none;}
body[rel="rojo"] #main-wrapper {width: 100%;}
body[rel="rojo"] {background: #800;}
body[rel="rojo"] .post-title a { ....... <span style="font-style: italic;">propiedades</span> ....... }
body[rel="rojo"] .post-body { ....... <span style="font-style: italic;">propiedades</span> ....... }
</style></pre><div style="text-align: justify;">Lo mismo ocurre con otra entrada; simplemente, cambian las reglas:</div><pre>body[rel="azul"] {background: #79B;}</pre><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com7tag:blogger.com,1999:blog-33571139.post-76252370401622180362013-03-25T00:00:00.000-03:002013-03-25T00:00:02.503-03:00Servicios para agregar imágenes temporales<div style="text-align: justify;">¿Imágenes falsas? ¿Para qué? Son útiles a la hora de probar cosas, nos evitan tener que subir alguna o re-dimensionarlas y están siempre listas.<br />
<br />
Hay muchos sitios que brindan ese servicio. <a href="http://fakeimg.pl" target="_blank">fakeimg</a> nos permite definir su tamaño (ancho y alto), el color de fondo y del texto así como su contenido. Son todas opciones que se agregan de manera sencilla:</div><pre><img src="http://fakeimg.pl/200/" /> será una imagen cuadrada de 200x200
<img src="http://fakeimg.pl/300x200/" /> será una imagen rectangular de 300x200
<img src="http://fakeimg.pl/300x200/ffff00/" /> será una imagen rectangular de 300x200 con fondo amarillo
<img src="http://fakeimg.pl/300x200/ffff00/000" /> será una imagen rectangular de 300x200 con fondo amarillo y texto en negro
<img src="http://fakeimg.pl/300x200/?text=Hola" /> así establecemos el texto a mostrar
<img src="http://fakeimg.pl/300x200/?text=Hola&font=museo" /> y de este modo podemos indicar una fuente par el texto (lobster, bebas, museo)</pre><div style="text-align: center;"><img src="http://fakeimg.pl/300x200/ffff00/000/?text=Hola&font=museo" /></div><br />
<div style="text-align: justify;">Pero hay más alternativas. Tanto <a href="http://dummyimage.com/" target="_blank">Dummy Image</a> como <a href="http://placehold.it/" target="_blank">placehold</a> son similares en cuanto a opciones:</div><pre><img src="http://placehold.it/300x200" />
<img src="http://dummyimage.com/300x200" /></pre><div style="text-align: center;"><img src="http://placehold.it/300x200"> <img src="http://dummyimage.com/300x200" /></div><br />
<div style="text-align: justify;"><a href="http://placekitten.com/" target="_blank">PlaceKitten</a> excepto que lo que nos mostrará son imágenes de gatos definiendo su ancho y alto:</div><pre><img src="http://placekitten.com/300/200" /></pre><div style="text-align: center;"><img src="http://placekitten.com/300/200" /></div><br />
<div style="text-align: justify;">y para que nadie se queje, <a href="http://placedog.com/" target="_blank">Placedog</a> lo hará mostrando imágenes de perros; si usamos <a href="http://placeape.com/" target="_blank">Placeape</a> serán monos y <a href="http://placebear.com/" target="_blank">Placebear</a> nos dará osos:</div><pre><img src="http://placedog.com/300/200" />
<img src="http://placeape.com/300/200" />
<img src="http://placebear.com/400/200" /></pre><div style="text-align: center;"><img src="http://placedog.com/200/200" /> <img src="http://placeape.com/200/200" /> <img src="http://placebear.com/200/200" /></div><br />
<div style="text-align: justify;">Si no se quieren animales, los hambrientos pueden usar <a href="http://baconmockup.com/" target="_blank">Bacon Mockup</a> y mostrar imágenes de comida.<br />
<br />
Si se quieren calaveras (hay para todos los gustos, se puede usar <a href="http://placeskull.com" target="_blank">PlaceSkull</a>:</div><pre><img src="http://baconmockup.com/300/200" />
<img src="http://placeskull.com/300/200/" /></pre><div style="text-align: center;"><img src="http://baconmockup.com/300/200" /> <img src="http://placeskull.com/300/200/" /></div><br />
<div style="text-align: justify;">Y si nada nos convence, está <a href="http://lorempixel.com/" target="_blank">Lorempixel</a> que genera imágenes aleatorias con opciones diversas:</div><pre><img src="http://lorempixel.com/300/200/" /> es una imagen de 300x200
<img src="http://lorempixel.com/g/300/200" /> es una imagen en tonos de gris
<img src="http://lorempixel.com/300/200/sports" /> muestra una imagen de cierta categoría (abstract, animals, city, food, night, life, fashion, people, nature, sports, technics, transport)</pre><div style="text-align: center;"><img src="http://lorempixel.com/300/200/" /></div><br />
<div style="text-align: justify;">Hay muchas opciones más y el sitio posee una herramienta que nos permite generar el código.</div><br />
<div class="referenciaExterna"><span>REFERENCIAS:</span><a href="http://www.paulund.co.uk/image-placeholder-apis" target="_blank">paulund.co.uk</a></div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com0tag:blogger.com,1999:blog-33571139.post-80380758492708734732013-03-20T15:00:00.000-03:002013-03-20T15:17:17.309-03:00Efecto hover desde distintas direcciones<div style="text-align: justify;">Aunque me ha costado armarlo para que funcionara acá porque hay cosas que no termino de entender bien, la idea de crear efectos <i>hover</i> que muestren contenidos distintos según sea la dirección desde la cual se entra con el cursor, no deja de ser interesante.<br />
<br />
Lo básico es empezar con el HTML que no es otra cosa que un DIV donde incluimos cuatro etiquetas SPAN con los textos y una imagen.</div><pre><div class=multi-hover>
<span>hover desde la derecha</span>
<span>hover desde arriba</span>
<span>hover desde la izquierda</span>
<span>hover desde abajo</span>
<img src="https://lh5.googleusercontent.com/-RAUoNEersrc/UGt18u6HXyI/AAAAAAAACwo/QWa2I1zG7Y0/s400/24_0144.jpg">
</div></pre><div style="text-align: justify;">Si se usa en una entrada de Blogger, habrá que tener en cuenta que todo debe ser escrito en una sola línea para evitar los saltos (etiquetas BR) que se agregan por defecto.<br />
<br />
El resultado sería esto:</div><br />
<style>div.multi-hover {height: 358px;overflow: hidden;position: relative;width: 100%;vertical-align: middle;line-height: 358px;} div.multi-hover img {width: 100%;}
div.multi-hover span {color: #FFF;font-size: 32px;height: 100%;opacity: 0;position: absolute;text-align: center;-moz-transition: all 0.3s linear 0s;-webkit-transition: all 0.3s linear 0s;-o-transition: all 0.3s linear 0s;-ms-transition: all 0.3s linear 0s;transition: all 0.3s linear 0s;width: 100%;} div.multi-hover span:nth-child(1) {background: none repeat scroll 0 0 rgba(216, 38, 38, 0.6);left: 90%;top: 0;} div.multi-hover span:nth-child(2) {background: none repeat scroll 0 0 rgba(127, 216, 38, 0.6);left: 0;top: -80%;} div.multi-hover span:nth-child(3) {background: none repeat scroll 0 0 rgba(38, 216, 216, 0.6);left: -90%;top: 0;} div.multi-hover span:nth-child(4) {background: none repeat scroll 0 0 rgba(127, 38, 216, 0.6);left: 0;top: 80%;} div.multi-hover span:hover {opacity: 1;} div.multi-hover span:nth-child(2n+1):hover {left: 0;} div.multi-hover span:nth-child(2n):hover {top: 0;}</style><div class=multi-hover><span>hover desde la derecha</span><span>hover desde arriba</span><span>hover desde la izquierda</span><span>hover desde abajo</span><img src="https://lh5.googleusercontent.com/-RAUoNEersrc/UGt18u6HXyI/AAAAAAAACwo/QWa2I1zG7Y0/s400/24_0144.jpg"></div><br />
<div style="text-align: justify;">Y el CSS:</div><pre><style>
/* el contenedor y la imagen */
div.multi-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
/* tuve que establecer la altura para que los textos se centraran verticalmente */
height: 358px;
line-height: 358px;
}
div.multi-hover img {width: 100%;}
/* los textos que, por defecto, permanecerán ocultos */
div.multi-hover span {
color: #FFF;
font-size: 32px;
height: 100%;
opacity: 0;
position: absolute;
text-align: center;
transition: all 0.3s linear 0s; /* agregar los prefijos para cada navegador */
width: 100%;
}
/* y esto es lo que generará el efecto */
div.multi-hover span:nth-child(1) { /* desde la derecha */
background: none repeat scroll 0 0 rgba(216, 38, 38, 0.6);
left: 90%;
top: 0;
}
div.multi-hover span:nth-child(2) { /* desde arriba */
background: none repeat scroll 0 0 rgba(127, 216, 38, 0.6);
left: 0;
top: -80%;
}
div.multi-hover span:nth-child(3) { /* desde la izquierda */
background: none repeat scroll 0 0 rgba(38, 216, 216, 0.6);
left: -90%;
top: 0;
}
div.multi-hover span:nth-child(4) { /* desde abajo */
background: none repeat scroll 0 0 rgba(127, 38, 216, 0.6);
left: 0;
top: 80%;
}
/* los hacemos visibles ... */
div.multi-hover span:hover {opacity: 1;}
/* ... moviéndolos horizontalmente ... */
div.multi-hover span:nth-child(2n+1):hover {left: 0;}
/* ... o verticalmente ... */
div.multi-hover span:nth-child(2n):hover {top: 0;}
</style></pre><div style="text-align: justify;">Para probar si los valors que colocamos son correctos, lo que conviene es poner opacity: 1; en la regla div.multi-hover span {} y ver el resultado. En este caso, debería verse algo así:</div><br />
<div style="text-align: center;"><img src="http://1.bp.blogspot.com/-QXOv7rxMO4g/URVSvLCtUNI/AAAAAAAAWF0/WPlDJmT0CSA/s0/multihover.png" /></div><br />
<div style="text-align: justify;">Al dejarlos "visibles", podemos ver como los SPAN se superponen un poco en la imagen que es, justamente, la forma en que serán detectados por el <i>hover.</i> De ese modo, una vez que los hayamos ubicado, tenemos listo el efecto y podemos ocultarlos definitivamente.</div><br />
<div class="referenciaExterna"><span>REFERENCIAS:</span><a href="http://demosthenes.info/blog/639/Hover-Effect-on-Images-From-Different-Directions-Using-Pure-CSS" target="_blank">demosthenes.info</a></div><br />
<div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com12tag:blogger.com,1999:blog-33571139.post-73740492634594536332013-03-17T00:00:00.000-03:002013-03-17T00:00:07.207-03:00Batck, Free and Other icons<br />
<table class="packiconos" cellspacing="10" cellpadding="0"><tr><td class="ititulo" colspan="2">Batch Icons <a class="idescarga" style="display: inline-block;float: right;letter-spacing: 1px;margin: 0;" rel="nofollow" href="http://adamwhitcroft.com/batch/" target="_blank">descargar</a></td></tr>
<tr><td><img src="http://3.bp.blogspot.com/-HI86ZujGGcA/UTzIy4WDkOI/AAAAAAAAWM4/HucNychfo5s/s500/BatchIcons.jpg" /></td></tr>
</table><br />
<br />
<table class="packiconos" cellspacing="10" cellpadding="0"><tr><td class="ititulo" colspan="2">Free Glyphs <a class="idescarga" style="display: inline-block;float: right;letter-spacing: 1px;margin: 0;" rel="nofollow" href="http://dribbble.com/shots/968074-Free-Glyphs" target="_blank">descargar</a></td></tr>
<tr><td><img src="http://2.bp.blogspot.com/-kM_T3-H0nfg/UTzIuFNBP4I/AAAAAAAAWMw/McIqrvrd9PU/s500/FreeGlyphs.jpg" /></td></tr>
</table><br />
<br />
<table class="packiconos" cellspacing="10" cellpadding="0"><tr><td class="ititulo" colspan="2">Other Icons <a class="idescarga" style="display: inline-block;float: right;letter-spacing: 1px;margin: 0;" rel="nofollow" href="http://www.othericons.com/" target="_blank">descargar</a></td></tr>
<tr><td><img src="http://4.bp.blogspot.com/-me08nXowOjA/UTol0SRes9I/AAAAAAAAWMg/YoTy10wgzIk/s500/OtherIcons.jpg" /></td></tr>
</table><br />
<div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com4tag:blogger.com,1999:blog-33571139.post-75565081886955240612013-03-13T00:00:00.000-03:002017-03-25T02:02:06.906-03:00Ultimos comentarios con avatares<div style="text-align: justify;"><img class="izquierda" src="http://1.bp.blogspot.com/-fOOsPTyr90U/UT-H0XwUrJI/AAAAAAAAWNg/uvnK78NC3l8/s00/comentarios.jpg" />Una variante para mostrar los últimos comentarios nos permitiría agregar la imagen con el avatar de cada comentarista.<br />
<br />
Siguiendo el mismo criterio del <span style="font-style: italic;">script</span> que se muestra en <a href="http://vagabundia.blogspot.com/2011/03/ultimos-comentarios-y-json-lo-mismo-de.html" target="_blank">esta entrada</a> y que no no hace otra cosa que leer los feeds utilizando Json, nos encontramos con que Blogger nos envía un dato que identifica al autor: <span style="font-weight: bold;">entry.author</span> y, un dato que es un <i>array</i> que leemos mediante <span style="font-weight: bold;">entry.author[0]</span><br />
<br />
Allí, se guardan cuatro valores:<br />
<br />
<span style="margin-left:50px;">entry.author[0].email.$t no nos sirve para nada ya que siempre dice "noreply@blogger.com"</span><br />
<span style="margin-left:50px;">entry.author[0].name.$t es el nombre del comentarista</span><br />
<span style="margin-left:50px;">entry.author[0].uri.$t es la dirección url del perfil</span><br />
<span style="margin-left:50px;">entry.author[0].gd$image son los datos de la imagen que se estableció en el perfil de Blogger</span><br />
<br />
Esta última tiene un dato que es el importante:<br />
<br />
<span style="margin-left:50px;">entry.author[0].gd$image.src es la dirección url de la imagen agregada al perfil</span><br />
<br />
y otros que no tienen uso práctico:<br />
<br />
<span style="margin-left:50px;">entry.author[0].gd$image.rel</span><br />
<span style="margin-left:50px;">entry.author[0].gd$image.width</span><br />
<span style="margin-left:50px;">entry.author[0].gd$image.height</span><br />
<br />
Esto, quiere decir que podemos acceder a esa imagen y mostrarla siempre que exista aunque hay una serie de detalles a tener en cuenta.<br />
<br />
Primero, el tamaño de la imagen. Lo que allí se guarda es la imagen original que hayamos utilizado y puede tener diversos tamaños (hay algunas enormes) por lo tanto, deberíamos tratar de usar una miniatura y así, agilizar la carga. Si la imagen está alojada en Blogger como la mayoría de ellas, esto se resuelve con cierta facilidad cambiando la url ya que el servicio nos provee de <a href="http://vagabundia.blogspot.com/2009/06/las-miniaturas-de-blogger.html" target="_blank">miniaturas diversas</a>; si la imagen ha sido alojada en otro servidor, no tenemos otro remedio que cargar la original y re-dimensionarla con CSS.<br />
<br />
El segundo problema lo generan los perfiles que no tienen una imagen o estas no son accesibles; en ese caso, también usaremos CSS para colocar una por defecto.<br />
<br />
El <span style="font-style: italic;">script</span> sería algo así y debería estar agregado antes de </head>:</div><pre><script type='text/javascript'>//<![CDATA[
var comsA_cantidad = 10; // definimos la cantidad de comentarios a ser mostrados
var comsA_longitud = 60; // definimos la longitud máxima de esos comentarios
var comsA_dimension = "/s16-c/"; // y establecemos el tamaño de esos avatares (en este caso 16x16)
var comsA_pattern1 = /\/s\d*\//;
var comsA_pattern2 = /\/s\d*-c\//;
function showrecentcomments_avatar(json) {
var entry, comulr, comcontent, comavatar, profile_img, elancho, salida;
// el bucle que leerá los comentarios
for (var i=0; i < comsA_cantidad; i++) {
entry = json.feed.entry[i]; // leo y guardo el dato
if (i==json.feed.entry.length)break; // si no hay suficientes, termino
// busco la dirección URL de comentarios
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
comulr=entry.link[k].href;
break;
}
}
// busco el comentario en si mismo
if ("content" in entry){
comcontent = entry.content.$t;
} else if("summary" in entry) {
comcontent = entry.summary.$t;
} else {
comcontent = "";
}
// lo transformo en texto puro y si es necesario, lo corto para que no supere el largo máximo
var re=/<\S[^>]*>/g;
comcontent=comcontent.replace(re,"");
if (comcontent.length>comsA_longitud) {
comcontent = comcontent.substring(0,comsA_longitud) + " &#133;";
}
// esta es la parte nueva, que define la imagen del avatar a utilizar
var profile_img = entry.author[0].gd$image.src; // la imagen del perfil de Blogger
// hay algunas imágenes alojadas en googleusercontent.com que no tienen el protocolo http asi que se lo agregamos
if (!/^http:/.test(profile_img)) {
profile_img = "http:" + profile_img;
}
// buscamos /sxxx/ o /sxxx-c/ en la url de la imagen que indica su tamaño
elancho = profile_img.match(comsA_pattern1) || profile_img.match(comsA_pattern2);
// y si encontramos eso, lo cambiamos por /s16-c/ que es lo que definí previamente
comavatar = profile_img.replace(elancho, comsA_dimension);
// listo, como ya tengo todos los datos, armo el HTML a mostrar
salida = "<li>";
salida += "<img src='"+comavatar+"' />";
salida += "<span>" + entry.author[0].name.$t + "</span>";
salida += "<a target='_blank' rel='nofollow' href='" + comulr + "'>" + comcontent +"</a>";
salida += "</li>";
// y finalmente, lo escribo
document.write(salida );
}
}
//]]>
</script></pre><div style="text-align: justify;">¿Cómo uso esto? Agrego un elemento HTML donde quiera mostrarlo (la sidebar, por ejemplo) y allí, coloco la lista y la función donde sólo debo establecer la url de mi <span style="font-style: italic;">blog</span>:</div><pre><ul id="ultimosComentariosAvatar">
<script src="http://<span style="color: #FFFF00">nombreblog</span>.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments_avatar"></script>
</ul></pre><div style="text-align: justify;">El resto es cosa de CSS:</div><pre>#ultimosComentariosAvatar { /* este el rectángulo contenedor (la etiqueta UL) */
list-style-type:none;
}
#ultimosComentariosAvatar li { /* cada item de la lista */
/* voy a usar una imagen por defecto como fondo por si el perfil no tiene una */
background: transparent url(http://img2.blogblog.com/img/b16-rounded.gif) no-repeat left 5px;
border-bottom: 1px dotted #234;
font-family: Tahoma;
font-size: 12px;
padding: 5px 0 5px 20px;
position: relative;
}
#ultimosComentariosAvatar li span { /* el nombre del autor */
color: #BCD;
font-weight: bold;
padding-left: 5px;
}
#ultimosComentariosAvatar li:hover {background-color: #171E27;}
/* el contendio es un enlace al comentario en si mismo */
#ultimosComentariosAvatar a, #ultimosComentariosAvatar a:link, #ultimosComentariosAvatar a:visited {
color: #BBB;
display: block;
font-weight: normal;
padding-left: 5px;
}
/* la imagen la posiciono para tapar el fondo por defecto y la fuerzo a dimensionarse */
#ultimosComentariosAvatar li img {
height: 16px;
left: 0;
position: absolute;
top: 5px;
width: 16px;
}</pre><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com20tag:blogger.com,1999:blog-33571139.post-34401694557771330702013-03-11T00:00:00.000-03:002013-03-11T00:00:05.182-03:00blockquote o citas sencillas con CSS3<div style="text-align: justify;">La etiqueta <span style="font-weight: bold;">blockquote</span> es esa que se suele utilizar para mostrar citas textuales y diferenciarlas del resto de los textos de una página y, a veces, se combina con una segunda etiqueta llamada <span style="font-weight: bold;">cite</span> que es una referencia al autor o al origen de dicha cita.<br />
<br />
Ambas, tienen propiedades por defecto en cualquier navegador pero hay cientos de formas de <a href="http://vagabundia.blogspot.com/2007/10/comillas-comillas-comillas.html" target="_blank">personalizarlas</a> agregándoles estilos; esta es una forma muy sencilla de hacerlo, utilizando las ventajas del CSS3.</div><br />
<style>blockquote.purocss {background-color: transparent;border: none;box-shadow: none;color: #888;font-family: Georgia,serif;font-size: 18px;font-style: italic;line-height: 1.3;margin: 20px auto;padding: 0.25em 40px;position: relative;width: 500px;} blockquote.purocss:before {color: #CCC;content: "\201C";display: block;font-size: 80px;left: -5px;position: absolute;top: -15px;} blockquote.purocss cite {color: #CCC;display: block;font-size: 18px;margin-top: 15px;text-align: right;} blockquote.purocss cite:before {content: "\2014 \2009";}</style><blockquote class="purocss">Vestibulum a lectus libero, congue ultricies metus. Curabitur nisi dolor, tristique vel lacinia vitae, mattis sed risus. Morbi dignissim feugiat nulla vel vulputate. Ut scelerisque semper eros, vitae vestibulum nibh bibendum ac. Proin eget imperdiet nulla. Nulla hendrerit augue non sapien vestibulum id feugiat massa adipiscing? Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.<br />
<br />
Vivamus ut nisi ante. Phasellus eget odio vel nulla ullamcorper lobortis quis sed nulla. Fusce varius erat non quam tincidunt blandit. Sed venenatis; purus quis hendrerit iaculis, ipsum ante lobortis est, at suscipit erat mi non ipsum. Nunc dictum congue sapien, laoreet tempus augue pharetra a. Morbi enim risus, placerat eget vulputate ac, venenatis vel mi. In venenatis sodales lectus! Quisque a massa a velit blandit ultrices.<br />
<cite>el nombre del autor</cite></blockquote><br />
<pre><style>
blockquote.purocss {
color: #888;
font-family: Georgia,serif;
font-size: 18px;
font-style: italic;
line-height: 1.3;
margin: 20px auto;
padding: 0.25em 40px;
position: relative;
width: 500px;
}
blockquote.purocss:before {
color: #CCC;
content: "\201C";
display: block;
font-size: 80px;
left: -5px;
position: absolute;
top: -15px;
}
blockquote.purocss cite {
color: #CCC;
display: block;
font-size: 18px;
margin-top: 15px;
text-align: right;
}
blockquote.purocss cite:before {
content: "\2014 \2009";
}
</style>
<blockquote class="purocss">
....... el texto .......
<cite>el nombre del autor</cite>
</blockquote></pre><br />
<div class="referenciaExterna"><span>REFERENCIAS:</span><a href="http://www.webmaster-source.com/2012/04/24/pure-css-blockquote-styling/" target="_blank">webmaster-source.com</a></div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com2tag:blogger.com,1999:blog-33571139.post-77744758210249295562013-03-07T00:00:00.000-03:002013-03-07T01:51:20.276-03:00DuckDuckGo: Un buscador alternativo en el blog<div style="text-align: justify;"><img class="izquierda" src="http://4.bp.blogspot.com/-jvjsgxFkTjo/UNCvHsu7GsI/AAAAAAAAVwA/y6SW0uli9yE/s00/duckduckgo.png" /><a href="https://duckduckgo.com/" target="_blank">DuckDuckGo</a> es un buscador alternativo que se va difundiendo poco a poco y que rescata todo eso que tenía Google y ha abandonado desde que se coronó como rey del mundo: la simplicidad, la rapidez y una política de privacidad que implica no recopilar ni compartir información de los usuarios. Quien no lo use, debería probarlo y darle una oportunidad o tenerlo siempre a mano; algo que es bastante sencillo ya que dispone de extensiones para distintos navegadores.<br />
<br />
Quien quiera, también puede agregarlo a su blog; para eso, basta abrir <a href="https://duckduckgo.com/search_box.html" target="_blank">la página respectiva</a> y completar los datos:</div><br />
<div style="margin-left:50px;text-align: justify;"><span style="font-weight: bold;">width: </span>es el ancho de la caja (por defecto 408 pixeles)<br />
<span style="font-weight: bold;">Duck logo: </span>nos permite ver (On) u ocultar (Off ) el logo<br />
<span style="font-weight: bold;">background color: </span>es el color de fondo donde será agregado<br />
<span style="font-weight: bold;">site search: </span>permite escribir la url del sitio donde se quiere buscar si es que deseamos que lo haga en nuestro blog<br />
<span style="font-weight: bold;">prefill: </span>es el texto visible de la caja<br />
<span style="font-weight: bold;">autofocus: </span>si es On, e cursor se posicionar automáticamente en el buscador apenas se abra la página</div><br />
<div style="text-align: justify;">El resultado de todo eso puede previsualizarse al efectuar los cambios y nos darán un código simple que podemos copiar y pegar en cualquier elemento HTML, en una entrada o en una página estática; por ejemplo:</div><pre><iframe src="http://duckduckgo.com/search.html?width=200&site=http://vagabundia.blogspot.com/&prefill=buscar en DuckDuckGo&bgcolor=171E27" style="overflow:hidden;margin:0;padding:0;width:258px;height:40px;" frameborder="0"></iframe></pre><br />
<center><iframe src="http://duckduckgo.com/search.html?width=200&site=http://vagabundia.blogspot.com/&prefill=buscar en DuckDuckGo&bgcolor=171E27" style="overflow:hidden;margin:0;padding:0;width:258px;height:40px;" frameborder="0"></iframe></center><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com3tag:blogger.com,1999:blog-33571139.post-68088275920994272042013-02-27T00:00:00.000-03:002013-02-27T00:00:05.454-03:00Eventos click y CSS<div style="text-align: justify;">Un evento es eso que ocurre ... cuando hacemos algo. En CSS, el más común es el <b>hover</b>; ponemos el cursor encima de una etiqueta y, automáticamente, se ejecuta el evento<. No es algo controlable, se ejecuta siempre y, que lo usemos o no, es otra historia.
Bueno, en realidad, hay una forma de eludirlo ya que en los navegadores modernos hay una propiedad llamada <b>pointer-events</b> que nos permite deshabilitarlos. Por ejemplo si tuviéramos un enlace al que le adosamos esa propiedad, simplemente, no funcionaría:</div><pre><a href="url_pagina" style="pointer-events: none;"> click acá </a></pre><style>.demosa {border-bottom: 1px dotted #ABC;color: #FFF;cursor: pointer;font-family: Tahoma;font-size: 16px;font-weight: bold;} .demosp {border: 1px solid #444;font-size: 12px;margin: 20px 0;padding: 10px;text-align: justify;} #democlick1 {display: none;} #democlick1:target {display: block;} .democlick2 {display: none;} span:focus ~ .democlick2 {display: block;} .democlick3 {display: none;} :checked ~ .democlick3 {display: block;} input.oculto[type=checkbox] {position: absolute;left: -999em;}</style><div style="text-align: center;"><a href="url_pagina" style="pointer-events: none;"><span class="demosa">click acá</span></a></div><br />
<div style="text-align: justify;">Si bien <b>:hover</b> es el más común, no es el único pero, no existe ninguno que reaccione ante un <i>click</i>. El CSS, por alguna razón, jamás ha tenido algo semejante y ese tipo de acciones sólo pueden hacerse con JavaScript.<br />
<br />
Sin embargo, hay algunas alternativas; ninguna de ellas es perfecta pero, por ahora, no hay muchas más. La mayoría utiliza <b>:target</b> para que funcione, algo que se ve bien en un <a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-mimic-a-click-event-with-css/" target="_blank">demo sencillo</a> pero, en cuanto lo queremos aplicar es poco funcional ya que en una página completa ... se "moverá", cambiando la url:</div><pre><style>
#democlick1 {display: none;}
#democlick1:target {display: block;}
</style>
<a href="#democlick1">demo con target</a>
<div id="democlick1">
....... cualquier contenido .......
</div></pre><div style="text-align: center;"><a href="#democlick1"><span class="demosa">demo con target</span></a></div><div id="democlick1" class="demosp"><p>Morbi ac nunc quis nisi tincidunt mattis eu gravida libero. Cras risus dui, scelerisque non fringilla eu; bibendum nec eros! Sed sed libero sed quam cursus adipiscing id non nisl. Praesent nisl turpis, sollicitudin eget placerat at, malesuada vitae ligula? Aenean est felis, fermentum non condimentum nec, consequat et nisl. Vivamus ultrices ligula at augue pulvinar adipiscing a vitae risus. Vivamus fermentum libero eget mi cursus condimentum vel nec neque? Praesent quis metus.</p></div><br />
<div style="text-align: justify;">Otra alternativa es utilizar <b>:focus</b>; en este caso, al hacer <i>click</i>, se expandirá el contenido oculto.</div><pre><style>
.democlick2 {display: none;}
span:focus ~ .democlick2 {display: block;}
</style>
<span tabindex="0">demo con focus</span>
<div class="democlick2">
....... cualquier contenido .......
</div></pre><div style="text-align: justify;">Tiene dos ventajas con respecto al anterior, por un lado, la página se queda quieta y, podemos aplicarlo a una clase lo que nos permite poner varios sin necesidad de identificarlos pero ... tiene dos desventajas; para volverlo a cerrar, debemos hacer <i>click</i> en cualquier parte "afuera" y además, el contenido oculto debe estar inmediatamente después, sin etiquetas intermedias:</div><br />
<div style="text-align: center;"><span class="demosa" tabindex="0">demo con focus</span><br />
<div class="democlick2 demosp">Morbi ac nunc quis nisi tincidunt mattis eu gravida libero. Cras risus dui, scelerisque non fringilla eu; bibendum nec eros! Sed sed libero sed quam cursus adipiscing id non nisl. Praesent nisl turpis, sollicitudin eget placerat at, malesuada vitae ligula? Aenean est felis, fermentum non condimentum nec, consequat et nisl. Vivamus ultrices ligula at augue pulvinar adipiscing a vitae risus. Vivamus fermentum libero eget mi cursus condimentum vel nec neque? Praesent quis metus.</div></div><br />
<div style="text-align: center;"><span class="demosa" tabindex="0">otro demo con focus</span><br />
<div class="democlick2 demosp">....... otro distinto .......</div></div><br />
<div style="text-align: justify;">El último método es mas sofisticado y requiere más etiquetas pero es el que funciona mejor ya que nos permite generar un efecto <i>toggle</i>, es decir, <i>click</i> y expandir y <i>click</i> contraer. En este caso, se usa <b>:checked</b>:</div><pre><style>
.democlick3 {display: none;}
:checked ~ .democlick3 {display: block;}
input.oculto[type=checkbox] {position: absolute;left: -999em;}
</style>
<label for="toggle-oculto1">demo con checked</label>
<input type="checkbox" id="toggle-oculto1" class="oculto" />
<div class="democlick3">
....... cualquier contenido .......
</div></pre><br />
<div style="text-align: center;"><label for="toggle-oculto1" class="demosa">demo con checked</label></div><input type="checkbox" id="toggle-oculto1" class="oculto" /><div class="democlick3 demosp">Morbi ac nunc quis nisi tincidunt mattis eu gravida libero. Cras risus dui, scelerisque non fringilla eu; bibendum nec eros! Sed sed libero sed quam cursus adipiscing id non nisl. Praesent nisl turpis, sollicitudin eget placerat at, malesuada vitae ligula? Aenean est felis, fermentum non condimentum nec, consequat et nisl. Vivamus ultrices ligula at augue pulvinar adipiscing a vitae risus. Vivamus fermentum libero eget mi cursus condimentum vel nec neque? Praesent quis metus.</div><br />
<div class="referenciaExterna"><span>REFERENCIAS:</span><a href="http://www.vanseodesign.com/css/click-events/" target="_blank">vanseo design</a></div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com8tag:blogger.com,1999:blog-33571139.post-28966570452089544762013-02-24T00:00:00.000-03:002013-02-24T00:00:03.582-03:00Do you know this guy?<script type='text/javascript'>escribir_YTvideo("lD9FAOPBiDk","Do you know this guy?","Un parodia sobre Internet Explorer.");</script><br />
<img src="http://img.youtube.com/vi/lD9FAOPBiDk/0.jpg" style="left:-1000px;position:absolute;" /><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com2tag:blogger.com,1999:blog-33571139.post-52288922623410604852013-02-20T00:00:00.000-03:002013-02-20T00:00:03.441-03:00Usando imágenes alojadas en Google Drive<div style="text-align: justify;">Cuando subimos un archivo a Google Drive que NO puede ser editado; por ejemplo, una imagen, un PDF, un video, etc; usar ese archivo en una web se hace engorroso ya que es difícil encontrar la dirección url o, simplemente, no existe y lo único que podemos hacer es enlazarla para que se vea o se descargue desde el mismo servicio.<br />
<br />
Pero hay una solución; basta copiar la dirección que se nos muestra cuando visualizamos el archivo:</div><pre>https://docs.google.com/file/d/0B2BzKCEbdpQcYVRYcjdkV3o1NHM/edit</pre><div style="text-align: justify;">y tomar nota de ese conjunto de letras y números estrafalarios que suele generar Google para todos sus productos y cambiar la dirección:</div><pre>http://drive.google.com/uc?export=view&id=0B2BzKCEbdpQcYVRYcjdkV3o1NHM</pre><div style="text-align: center;"><img src="http://drive.google.com/uc?export=view&id=0B2BzKCEbdpQcYVRYcjdkV3o1NHM"/></div><br />
<div style="text-align: justify;">Así que, en términos genéricos, debemos cambiar</div><pre>https://docs.google.com/file/d/<span style="color: #FF0;font-weight: bold;">xxxxxxxxxxxxxxxxxxxxxxx</span>/edit</pre><div style="text-align: justify;">con:</div><pre>http://drive.google.com/uc?export=view&id=<span style="color: #FF0;font-weight: bold;">xxxxxxxxxxxxxxxxxxxxxxx</span></pre><div style="text-align: justify;">Por supuesto, esto funcionará sólo si la carpeta y los archivos son públicos, algo que debemos establecer con la opción Compartir.<br />
<br />
Aunque comentan que esto sería válido con cualquier tipo de archivo, me temo que la realidad dice lo contrario; lo que sí puede funcionar es establecer la dirección url de descarga directa; el sistema es similar y este es un ejemplo concreto:</div><br />
<div style="text-align: center;"><a href="http://drive.google.com/uc?export=download&id=0B2BzKCEbdpQcX2g3T1RyN1RZZ00" rel="nofollow"><span style="color: #CCCCFF">http://drive.google.com/uc?export=download&id=</span>0B2BzKCEbdpQcX2g3T1RyN1RZZ00</a></div><br />
<div class="referenciaExterna"><span>REFERENCIAS:</span><a href="http://googlesystem.blogspot.com.ar/2013/02/permalinks-for-google-drive-images.html" target="_blank">Google Operating System</a></div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com15tag:blogger.com,1999:blog-33571139.post-61993412830207721092013-02-17T00:00:00.000-03:002013-02-17T00:00:00.334-03:00Smashing dutchicons y otros<table class="packiconos" cellspacing="10" cellpadding="0"><tr><td class="ititulo" colspan="2">Smashing dutchicons</td></tr>
<tr><td colspan="2" style="text-align:left">Contiene 84 íconos de 30x30 y 60x60, en formato PNG.<br />
<a class="idescarga" rel="nofollow" href="http://www.smashingmagazine.com/2012/11/11/dutch-icon-set-smashing-edition/" target="_blank">descargar</a></td></tr>
<tr><td colspan="2"><img src="http://2.bp.blogspot.com/-7dOD28WXyJ0/UKp8l6lO8wI/AAAAAAAAVbM/jhAzJzfrg8g/s00/06-prev.png" /></td></tr>
</table><br />
<table class="packiconos" cellspacing="10" cellpadding="0"><tr><td class="ititulo" colspan="2">Medialoot Mini</td></tr>
<tr><td><img src="http://2.bp.blogspot.com/-w4bjLnziJCI/UKqG2b6ICZI/AAAAAAAAVf8/ogBSB8-XPhI/s00/05-demo.png"/></td><td style="text-align:left">Contiene 10 íconos de 32x32, en formato PNG.<br />
<a class="idescarga" rel="nofollow" href="http://medialoot.com/item/10-mini-designer-icons-1/" target="_blank">descargar</a></td></tr>
</table><br />
<table class="packiconos" cellspacing="10" cellpadding="0"><tr><td class="ititulo" colspan="2">Free Dark</td></tr>
<tr><td><img src="http://4.bp.blogspot.com/-UgozBXN4VdQ/UKqG2zUccSI/AAAAAAAAVgI/p7r3sqUV77Y/s00/08-demo.png"/></td><td style="text-align:left">Contiene 12 íconos de 48x48, en formato PNG.<br />
<a class="idescarga" rel="nofollow" href="http://wegraphics.net/downloads/free-dark-social-media-icons/" target="_blank">descargar</a></td></tr>
</table><br />
<div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com0tag:blogger.com,1999:blog-33571139.post-59861874721657646622013-02-14T00:00:00.000-03:002017-03-26T02:13:16.223-03:00Stratus: Un plugin de JQuery para SoundCloud<div style="text-align: justify;"><img class="izquierda" src="http://1.bp.blogspot.com/-k1p6jbla3JI/UNNr2-rY8pI/AAAAAAAAVzo/ilSJUHc39zw/s400/stratus.png" /><a href="http://stratus.sc/" target="_blank">Stratus</a> es un <i>plugin</i> que requiere jQuery y nos permite agregar una barra de reproducción que se conecta con una cuenta cualquiera de <a href="https://soundcloud.com/" target="_blank">SoundCloud</a>, con una lista de reproducción, grupos o archivos individuales.<br />
<br />
Se puede incluir fácilmente en cualquier sitio incluso Blogger ya que es un script que podemos colocar en cualquier parte, ya sea la plantilla, una entrada o una página estática:</div><pre><script type="text/javascript" src="http://stratus.sc/stratus.js"></script></pre><div style="text-align: justify;">Al cual debemos configurar indicando la url con la dirección que queremos cargar:</div><pre><script type="text/javascript">
$(document).ready(function(){
$.stratus({links: 'https://soundcloud.com/<span style="color: #FFFF00">nathan-arnone/sets/r-e-m-green</span>'});
});
</script></pre><div style="text-align: justify;">En este ejemplo, es un set (una lista de reproducción) pero podría ser la cuenta de un usuario y reproducir los temas de manear aleatoria de este modo:</div><pre>$stratus({
links: 'http://soundcloud.com/<span style="color: #FFFF00">nombre</span>',
random: true
});</pre><div style="text-align: justify;">Tiene más opciones y todas se agregan del mismo modo:</div><br />
<div style="text-align: left;;"><span style="font-weight: bold;">align </span>indica dónde aparecerá la barra; por defecto es bottom pero puede usarse top si se queire mostrar arriba<br />
<span style="font-weight: bold;">animate </span>es el efecto gráfico, puede ser slide (es el valor por defecto), fade, o false si no se quiere ninguno<br />
<span style="font-weight: bold;">auto_play </span>puede ponerse a true si queremos que comience a reproducirse automa´ticamente<br />
<span style="font-weight: bold;">buying </span>muestra (true) u oculta el botón de comprar<br />
<span style="font-weight: bold;">color </span>define el color de los controles y por defecto es F60<br />
<span style="font-weight: bold;">download </span>muestra (true) u oculta el botón de descargar<br />
<span style="font-weight: bold;">links </span>es la url a reproducir, si se quieren poner temas sueltos, se separan con comas<br />
<span style="font-weight: bold;">offset </span>es la separación dela barra con respecto al borde<br />
<span style="font-weight: bold;">position </span>define la posición, si quedará fija (fixed) que es el valor por defecto o no (scroll)<br />
<span style="font-weight: bold;">random </span>si es true los temas se reproducirán de manera aleatoria<br />
<span style="font-weight: bold;">stats </span>muestra (true) u oculta el botón de estadísticas y detalles<br />
<span style="font-weight: bold;">theme </span>permite establecer un estilo especial indicando la url del archivo CSS<br />
<span style="font-weight: bold;">user </span>muestra (true) u oculta el botón de información<br />
<span style="font-weight: bold;">volume </span>es el volumen y es un valor entre 0 y 100 (por defecto es 50)</div><br />
<br />
<div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com3tag:blogger.com,1999:blog-33571139.post-20768574469942680592013-02-11T00:00:00.000-03:002013-02-11T00:00:03.519-03:00Usar Google Drive para alojar sitios web sencillos<div style="text-align: justify;">Como en Blogger no podemos subir un mísero archivito, en un tiempo, cuando existían las Google Pages, las usábamos a destajo hasta que <i>kaput</i> porque "a los que saben" se les ocurrió crear Google Sites que no era lo mismo aunque ellos creían que si. <br />
<br />
Nos quedamos colocados, mudando archivos de lado a lado, buscando alternativas, las encontramos, cada una con sus bemoles pero, acá seguimos.<br />
<br />
Ahora, resulta que se les ha ocurrido que podemos <a rel="nofollow" href="https://googledrive.com/host/0B716ywBKT84AMXBENXlnYmJISlE/GoogleDriveHosting.html" target="_blank">usar Google Drive para guardar páginas web completas</a> y, la verdad, yo ya no sé si creerles que esto durará pero, de todos modos, por ahora, ahí está la opción que, imagino, deberá usarse prudentemente.<br />
<br />
El procedimiento es sencillo; entramos en <a href="https://drive.google.com/ " target="_blank" rel="nofollow">Google Drive</a> https://drive.google.com/ y creamos una carpeta nueva. Luego, con botón derecho, hacemos <i>click</i> en Compartir | Cambiar y marcamos que sea Publica:</div><br />
<div style="text-align: center;"><img src="http://4.bp.blogspot.com/-Y7MvaowdlOU/URVte10BIEI/AAAAAAAAWHs/9S8xwDJBHKk/s00/gd1.png" /></div><br />
<div style="text-align: center;"><img src="http://4.bp.blogspot.com/-_jFEOVT-iWk/URVtfO7o8vI/AAAAAAAAWH0/i1C0Uzkf6lw/s00/gd2.png" /></div><br />
<div style="text-align: justify;">Ahora, subimos nuestro archivo HTML a esa carpeta, lo editamos y, haciendo <i>click</i> en Vista Previa, copiamos la dirección url que nos muestra que será del tipo:</div><pre>https://googledrive.com/host/xxxxxxxxxxxxx/nombre_archivo.html</pre><div style="text-align: justify;">Eso es todo, con esa dirección, podemos mostrarlo donde se nos ocurra, como en este ejemplo que lo abre en una ventana modal:</div><br />
<div style="text-align: center;"><a class="lightwindow" w="640" h="420" href="https://googledrive.com/host/0B2BzKCEbdpQcR2JpeUU5SkRTSG8/testgd.html"><span style="font-size:16px;">ver testgd.html</span></a></div><br />
<div style="text-align: justify;">En este caso, el HTML no tiene nada especial, solo código normal, scripts internos y CSS pero, podemos ampliar las posibilidades y utilizar archivos externos que también alojamos en la misma carpeta y a los que accedemos desde el HTML, usando las direcciones url relativas.<br />
<br />
Hasta ahí, es una forma sencilla de manejarse aunque no es cómodo que no sea posible crear o editar esos archivos desde el mismo Google Drive salvo que se agreguen aplicaciones externas como <a href="https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj" target="_blank">Drive Notepad</a> que sólo funcionan en Chrome.</div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com19tag:blogger.com,1999:blog-33571139.post-21633287200182718492013-02-05T00:00:00.000-03:002013-02-05T00:00:03.077-03:0025 plugins para crear sliders con jQuery<div style="text-align: justify;">Una selección de <span style="font-style: italic;">plugins</span> que utilizan la librería jQuery para crear galerías de imágenes, <span style="font-style: italic;">sliders</span> y <span style="font-style: italic;">slideshows</span>.<br />
<br />
De todo un poco como en botica.</div><style>#jqsliders img {border: 1px solid #678;margin: 1px 3px;padding: 5px;width: 100px;background-color: #101921;} #jqsliders img:hover {-moz-transform: scale(1.3);-webkit-transform: scale(1.3);-o-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}</style><br />
<br />
<div id="jqsliders" style="text-align: center;"><a href="http://www.minimit.com/works/minimit-gallery-plugin" target="_blank" title="Minimit"><img src="http://3.bp.blogspot.com/-YNxLCUdLdGM/UOXuYp-p78I/AAAAAAAAV7E/sEbmVRfUg3s/s150-c/jqsliders21.jpg" /></a><a href="http://galleria.aino.se/" target="_blank" title="Galleria"><img src="http://1.bp.blogspot.com/--7YbflHCFJA/UOXuZedATyI/AAAAAAAAV7M/_AbdU4e-SYo/s150-c/jqsliders22.jpg" /></a><a href="http://blueimp.github.com/jQuery-Image-Gallery/" target="_blank" title="jQuery Image Gallery"><img src="http://1.bp.blogspot.com/-phFc1BYRam8/UOXuZ7eKOlI/AAAAAAAAV7c/MU-jVgcxhKQ/s150-c/jqsliders23.jpg" /></a><a href="http://ryrych.github.com/rlightbox2/" target="_blank" title="rlightbox"><img src="http://3.bp.blogspot.com/-xNCdcifjNOA/UOXuazEUu1I/AAAAAAAAV7k/NKTG5URCCjs/s150-c/jqsliders24.jpg" /></a><a href="http://tympanus.net/codrops/2012/12/03/stackslider-a-fun-3d-image-slider/" target="_blank" title="StackSlider"><img src="http://2.bp.blogspot.com/-7mqbbtPKCXQ/UOXuiPA2FnI/AAAAAAAAV8I/zkD3C7b6-7I/s150-c/jqsliders27.jpg" /></a><a href="http://www.photoswipe.com/" target="_blank" title="PhotoSwipe"><img src="http://2.bp.blogspot.com/-VyndK2-czRM/UOXuhZRtCnI/AAAAAAAAV78/yK1lN6LxwNY/s150-c/jqsliders26.jpg" /></a><a href="http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/" target="_blank" title="BookBlock"><img src="http://3.bp.blogspot.com/-PjfmAmMLpAM/UOXtkksNitI/AAAAAAAAV4A/LgOboqqmKsk/s150-c/jqsliders05.jpg" /></a><a href="https://github.com/filamentgroup/responsive-carousel/" target="_blank" title="Responsive Carousel"><img src="http://4.bp.blogspot.com/-MwXqkhZA2L8/UOXtiaMrboI/AAAAAAAAV3Q/sP2hny0y7_k/s150-c/jqsliders01.jpg" /></a><a href="http://glisse.victorcoulon.fr/" target="_blank" title="Glisse"><img src="http://2.bp.blogspot.com/-EqnulwnIXg8/UOXtwYxZa_I/AAAAAAAAV48/zm6vNulHdWo/s150-c/jqsliders10.jpg" /></a><a href="https://github.com/p-m-p/jquery-box-slider" target="_blank" title="Adaptor"><img src="http://1.bp.blogspot.com/-o7IVo1_m-JA/UOXtt6jamOI/AAAAAAAAV4M/9MKyqN5vUug/s150-c/jqsliders06.jpg" /></a><a href="http://ryrych.github.com/rcarousel/" target="_blank" title="rcarousel"><img src="http://4.bp.blogspot.com/-b3CX5X_rTLE/UOXtuqrGghI/AAAAAAAAV4Y/8uSjR1DfGqk/s150-c/jqsliders07.jpg" /></a><a href="http://www.iosscripts.com/iosslider/" target="_blank" title="iosSlider"><img src="http://3.bp.blogspot.com/-YfVHV_VOq7o/UOXtiybQoVI/AAAAAAAAV3c/uyo_A566Pfs/s150-c/jqsliders02.jpg" /></a><a href="http://www.egrappler.com/full-screen-responsive-jquery-image-and-content-sliderrslider/" target="_blank" title="RSlider"><img src="http://1.bp.blogspot.com/-5Lt9F-xd5Tw/UOXtjRY4o7I/AAAAAAAAV3o/Ga22nwoj5Rw/s150-c/jqsliders03.jpg" /></a><a href="http://www.frescojs.com/" target="_blank" title="Fresco"><img src="http://4.bp.blogspot.com/-8Sd_oeCZs2Y/UOXtkJd0fII/AAAAAAAAV30/KhMuoI8dVG4/s150-c/jqsliders04.jpg" /></a><a href="http://sequencejs.com/" target="_blank" title="Sequence"><img src="http://2.bp.blogspot.com/-hcUw5uROaww/UOXtvw4TvOI/AAAAAAAAV4w/71ntmSOZlpU/s150-c/jqsliders09.jpg" /></a><a href="http://marktyrrell.com/labs/blueberry/" target="_blank" title="Blueberry"><img src="http://3.bp.blogspot.com/-copch6N6KuQ/UOXt-MZn3II/AAAAAAAAV54/h09f88bgRqs/s150-c/jqsliders15.jpg" /></a><a href="http://muslider.musings.it/" target="_blank" title="µslider"><img src="http://1.bp.blogspot.com/-lTDzPvr3Jhk/UOXt6Xj4yDI/AAAAAAAAV5I/nQt21x-7fqU/s150-c/jqsliders11.jpg" /></a><a href="http://responsive-slides.viljamis.com/" target="_blank" title="ResponsiveSlides"><img src="http://4.bp.blogspot.com/-AkN1s9vd5Lk/UOXt7ESkJ-I/AAAAAAAAV5U/Ru2B7-sdg7U/s150-c/jqsliders12.jpg" /></a><a href="http://bxslider.com/" target="_blank" title="bxSlider"><img src="http://4.bp.blogspot.com/-W1Y0Y1IK2g0/UOXuNj1688I/AAAAAAAAV6c/fNUeVr0olcg/s150-c/jqsliders18.jpg" /></a><a href="http://www.pixedelic.com/plugins/diapo/" target="_blank" title="Diapo"><img src="http://2.bp.blogspot.com/-0YZmWuvk55c/UOXuOODqU-I/AAAAAAAAV6o/T5AQJNr476c/s150-c/jqsliders19.jpg" /></a><a href="http://tympanus.net/codrops/2011/08/16/circular-content-carousel/" target="_blank" title="Circular Content Carousel"><img src="http://2.bp.blogspot.com/-bcjTuoeaAJo/UOXubxN3WVI/AAAAAAAAV7w/r6ue29fKKbA/s150-c/jqsliders25.jpg" /></a><a href="http://flex.madebymufffin.com/" target="_blank" title="FlexSlider"><img src="http://1.bp.blogspot.com/-klCvRNpmCLs/UOXt8oar5KI/AAAAAAAAV5w/MZ4c2_prVGA/s150-c/jqsliders14.jpg" /></a><a href="http://projects.craftedpixelz.co.uk/craftyslide/" target="_blank" title="Craftyslide"><img src="http://2.bp.blogspot.com/--tWHkvf5BK8/UOXuOrxYFQI/AAAAAAAAV60/QkZEZk007Gs/s150-c/jqsliders20.jpg" /></a><a href="http://www.tn3gallery.com/" target="_blank" title="TN3 Gallery"><img src="http://3.bp.blogspot.com/-eCExANmU1os/UOXuMft29nI/AAAAAAAAV6E/eTxszbJxDMw/s150-c/jqsliders16.jpg" /></a><a href="http://www.slidorion.com/" target="_blank" title="Slidorion"><img src="http://2.bp.blogspot.com/--LClq7j4ZrI/UOXuM4Lj90I/AAAAAAAAV6Q/8Skh4XQnfiA/s150-c/jqsliders17.jpg" /></a></div><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com10tag:blogger.com,1999:blog-33571139.post-9795060307027543712013-02-03T00:00:00.000-03:002013-02-03T00:04:15.823-03:00Irish Icons<table class="packiconos" cellspacing="10" cellpadding="0"><tr><td class="ititulo" colspan="2">Irish Icons Pack</td></tr>
<tr><td><img src="http://1.bp.blogspot.com/-FRq2R8084Gk/UKp8bifGZiI/AAAAAAAAVa0/zhKhDLpaQSc/s00/04-demo.png"/></td><td style="text-align:left">Contiene 26 íconos de diferentes tamaños, en formato PNG.<br />
<a class="idescarga" rel="nofollow" href="http://flashripper.net/2008/03/05/ikonki-irish-icons-pack.html" target="_blank">descargar</a></td></tr>
<tr><td colspan="2"><img src="http://3.bp.blogspot.com/-eZL532qulX4/UKp8cVrpCkI/AAAAAAAAVbA/rJwMzqN2aUI/s00/04-prev.jpg" /></td></tr>
</table><div class="blogger-post-footer"><hr /> <a href="http:/vagabundia.blogspot.com">Vagabundia</a></div>JMiurhttp://www.blogger.com/profile/16731144451681787753noreply@blogger.com1