| Pro-Cartoons | |
 | Contiene 6 íconos de 128x128, en formato PNG. descargar |
 | |
| Grassy | |
 | Contiene 48 íconos de 32x32, 48x48, 64x64, 128x128 y 256x256, en formato PNG. descargar |
 | |
Blogger deja de soportar navegadores antigüos |
Hace apenas unas horas, Blogger ha anunciado que a partir del primero de agosto, dejará de soporte a las versiones más viejas de los navegadores.
Esto es algo que afectará particularmente a quienes aún utilizan Internet Explorer 7 pero, incluye a Firefox 3.5 y Safari 3. No hay información respecto a Opera y offcourse, no hacen ninguna mención a Chrome.
De este modo, la empresa de Google se pone a tono con lo que ya viene haciendo con otros servicios como GMail y Google Docs.
La información agrega que, cada vez que salga una nueva versión de cualquier navegador, de manera automática, dejará de darse soporte a la versión más antigua:
"Each time a new version is released, we’ll begin supporting the update and stop supporting the third-oldest version."
Así que, quien esté en esas condiciones, que comience a pensar en instalar una nueva versión o tendrá serios problemas para acceder al escritorio Blogger.
Esto es algo que afectará particularmente a quienes aún utilizan Internet Explorer 7 pero, incluye a Firefox 3.5 y Safari 3. No hay información respecto a Opera y offcourse, no hacen ninguna mención a Chrome.
De este modo, la empresa de Google se pone a tono con lo que ya viene haciendo con otros servicios como GMail y Google Docs.
La información agrega que, cada vez que salga una nueva versión de cualquier navegador, de manera automática, dejará de darse soporte a la versión más antigua:
"Each time a new version is released, we’ll begin supporting the update and stop supporting the third-oldest version."
Así que, quien esté en esas condiciones, que comience a pensar en instalar una nueva versión o tendrá serios problemas para acceder al escritorio Blogger.
Mostrar y ocultar gadgets con efectos |
Sigo con la idea de mostrar y ocultar gadgets agregados a la sidebar de Blogger y ahora, le quiero poner alguna variante que produzca alguna clase de efecto. Ya se sabe que si usamos librerías de alguna clase, estas animaciones son cosas que suelen estar previstas pero, uno quiere eludir eso y en lo posible, hacerlo a mano porque de ese modo, es fácilmente aplicable a cualquier tipo de sitio y en el camino de re-inventar la rueda, algo se va aprendiendo.
Voy a usar el mismo esquema de la entrada anterior para crear ese efecto usando transiciones así que, desde ya, ese efecto no será visible en Internet Explorer pero, el sistema seguirá funcionando perfectamente así que no hay motivo para no intentarlo.
Lo que hacen las transiciones es animar el cambio de una propiedad; es decir, si algo es de color rojo y cambia a color azul, ese cambio no será instantáneo sino que durará cierto tiempo creándose estados intermedios y el color virará desde un rojo a un azul produciendo un efecto de animación. El problema a resolver en este caso es que si permutamos entre display:none y display:block no hay estados intermedios; algo se ve o no se ve y no hay otra posibilidad. Necesitamos usar alguna otra propiedad que podamos variar poco a poco y la única que sirve para eso es height. Esto sería sencillo si funcionaran los porcentajes pero, no es así, hay que saber la altura exacta y expresarla en pixeles.
Cualquier etiqueta de bloque a la que le ponemos la propiedad overflow:hidden y establecemos el valor de height, no se mostrará "completa" si su contenido supera ese valor:
Voy a usar el mismo esquema de la entrada anterior para crear ese efecto usando transiciones así que, desde ya, ese efecto no será visible en Internet Explorer pero, el sistema seguirá funcionando perfectamente así que no hay motivo para no intentarlo.
Lo que hacen las transiciones es animar el cambio de una propiedad; es decir, si algo es de color rojo y cambia a color azul, ese cambio no será instantáneo sino que durará cierto tiempo creándose estados intermedios y el color virará desde un rojo a un azul produciendo un efecto de animación. El problema a resolver en este caso es que si permutamos entre display:none y display:block no hay estados intermedios; algo se ve o no se ve y no hay otra posibilidad. Necesitamos usar alguna otra propiedad que podamos variar poco a poco y la única que sirve para eso es height. Esto sería sencillo si funcionaran los porcentajes pero, no es así, hay que saber la altura exacta y expresarla en pixeles.
Cualquier etiqueta de bloque a la que le ponemos la propiedad overflow:hidden y establecemos el valor de height, no se mostrará "completa" si su contenido supera ese valor:
Vivamus adipiscing luctus leo! Integer non elit quam. Donec nisi enim, feugiat id dapibus at, dictum vitae metus? Mauris nisi lorem, porta ut tincidunt ac, semper non lectus. Sed libero ligula; luctus id rutrum sit amet, interdum sit amet odio. Vestibulum varius ligula ac erat tempus commodo.
Vivamus adipiscing luctus leo! Integer non elit quam. Donec nisi enim, feugiat id dapibus at, dictum vitae metus? Mauris nisi lorem, porta ut tincidunt ac, semper non lectus. Sed libero ligula; luctus id rutrum sit amet, interdum sit amet odio. Vestibulum varius ligula ac erat tempus commodo.
Vivamus adipiscing luctus leo! Integer non elit quam. Donec nisi enim, feugiat id dapibus at, dictum vitae metus? Mauris nisi lorem, porta ut tincidunt ac, semper non lectus. Sed libero ligula; luctus id rutrum sit amet, interdum sit amet odio. Vestibulum varius ligula ac erat tempus commodo.
Pero ¿cuál es el valor de height de una etiqueta? Si es una en particular y la medimos, perfecto pero, si luego cambia, habrá que cambiar todo así que hay que buscar alternativas.
Hay un dato que nos da JavaScript: el alto de cualquier elemento visible. Ese dato se lee con clientHeight pero, el elemento debe estar visible y si está visible se arruina el efecto así que lo que se me ocurre es cargarlo fuera de la ventana del navegador, guardar su altura y luego moverlo a su lugar pero dándole una altura de cero con lo cual, quedará oculto.
¿Complicado? Hay más. A esto le sumamos otro problema. Hay gadgets que varían de tamaño cuando interactuamos con ellos. Por ejemplo, el de Archivos que se expande y contrae mostrando más o menos resultados, Si no contemplamos eso, hay partes que quedarán ocultas así que, de alguna manera, hay que detectar esos cambios, permitirlos y volver a re-calcular la altura.
Todo eso, hay que dejárselo al script para que lo que nosotros debamos modificar en la plantilla sea lo mínimo posible.
Voy a hacer lo mismo que hice antes, voy a agregarle una clase a la etiqueta H2 del título y unac clase al DIV inferior de cualquier gadget:
Hay un dato que nos da JavaScript: el alto de cualquier elemento visible. Ese dato se lee con clientHeight pero, el elemento debe estar visible y si está visible se arruina el efecto así que lo que se me ocurre es cargarlo fuera de la ventana del navegador, guardar su altura y luego moverlo a su lugar pero dándole una altura de cero con lo cual, quedará oculto.
¿Complicado? Hay más. A esto le sumamos otro problema. Hay gadgets que varían de tamaño cuando interactuamos con ellos. Por ejemplo, el de Archivos que se expande y contrae mostrando más o menos resultados, Si no contemplamos eso, hay partes que quedarán ocultas así que, de alguna manera, hay que detectar esos cambios, permitirlos y volver a re-calcular la altura.
Todo eso, hay que dejárselo al script para que lo que nosotros debamos modificar en la plantilla sea lo mínimo posible.
Voy a hacer lo mismo que hice antes, voy a agregarle una clase a la etiqueta H2 del título y unac clase al DIV inferior de cualquier gadget:
<h2 class='expcon'><data:title/></h2> <div class='widget-temp'> .............. </div>
Ahora, voy a poner el CSS básico donde es importante establecer el ancho que es el ancho libre de nuestra sidebar:
<style>
h2.expcon {cursor: pointer;}
.widget-con {
height: 0px;
width: 250px;
overflow: hidden;
-moz-transition: height 1s;
-webkit-transition: height 1s;
-o-transition: height 1s;
transition: height 1s;
}
.widget-temp {
position:absolute;
left: -5000px;
width: 250px;
}
</style>Uso dos clases, widget-temp es la original, la del gadget sacado de la pantalla; cuando se calcula y se guarda la altura, se "vuelve" a su lugar cambiándole la clase por widget-con.
<script type='text/javascript'>
//<![CDATA[
// agrega un ID a la etiqueta si se usa Internet Explorer: http://www.codingforums.com/archive/index.php/t-125144.html
var IEelem={};
function IEaddID(fn,uniqueID) {
return function(event) {return fn.call(IEelem[uniqueID],event);}
}
// esta es la función que agregará el evento onclick
function agregarEVENTOtogglewidget() {
// creo una lista con todas las etiquetas H2
var el = document.getElementsByTagName("h2");
// leo la lista una por una
for (var i=0; i<el.length; i++) {
var c = el[i].className; // guardo el contenido del atributo class expcon
// si es una etiqueta H2 con la clase que definí, le agrego un evento que ejecute una función a la que llamo togglewidget
if (c=="expcon") {
if (el[i].addEventListener) {
// Firefox, Chrome, Opera, IE9
el[i].addEventListener("click", togglewidget, false);
} else if (el[i].attachEvent) {
// Internet Explore 8
var uniqueID = el[i].uniqueID;IEelem[uniqueID] = el[i];
el[i].attachEvent("onclick",IEaddID(togglewidget,uniqueID));
}
// busco la etiqueta DIV
var obj = el[i].nextElementSibling || el[i].nextSibling;
obj.altura = obj.clientHeight; // guardo su altura
obj.className = "widget-con"; // le cambio la clase
obj.style.height = "0px"; // la oculto
// y agrego otro evento a ese DIV de tal forma de poder recalcular su altura cuando cambie
if (obj.addEventListener) {
obj.addEventListener("click", recalcular, false);
} else if (el[i].attachEvent) {
var uniqueID = obj.uniqueID;IEelem[uniqueID] = obj;
obj.attachEvent("onclick",IEaddID(recalcular,uniqueID));
}
}
}
}
// esta es la función que permuta el contenido
function togglewidget() {
// hice click en la etiqueta H2 pero, debo ocultar la etiqueta DIV que es la siguiente; así que a busco:
var obj = this.nextElementSibling || this.nextSibling;
if(obj.style.height=="0px") {
// esta oculta así que la muestro
obj.style.height = obj.altura + "px";
} else {
// esta visible así que la oculto
obj.style.height = "0px";
}
}
// esta es la función que recalcula la altura
function recalcular() {
// se pone al 100% para permitir que se expanda verticalmente
this.style.height = "100%";
// se ejecuta una demora para que se efectivice ese cambio
// cambiar 200 por un número mayor si el contenido es "pesado"
var _this = this;
setTimeout(function() {
// y se guarda la nueva altura
_this.altura = _this.clientHeight;
_this.style.height = _this.altura + "px";
}, 200);
}
// una vez que la página web se carga, ejecuto la función
onload=function() { agregarEVENTOtogglewidget(); }
//]]>
</script>
Mostrar y ocultar gadgets de la sidebar de Blogger |
Una pregunta que se repite es ¿cómo hago para que los gadgets de la sidebar del blog, puedan expandirse y contrarerse y de tal modo ganar espacio?
No es algo facil de responder, no porque sea difícil de hacer sino porque hay cientos de variantes; con y sin librerías, con y sin efectos y todas ellas requieren scripts de alguna clase y modificar o adaptar algo de nuestra plantilla; eso es inevitable; si alguien pretende implementar algo similar, deberá hacerlo con cuidado y tratando de entender lo que hace, aunque sea, minimamente.
En Blogger, todos los widgets o gadgets o cómo se los quiera llamar, tienen la misma estructura básica:
No es algo facil de responder, no porque sea difícil de hacer sino porque hay cientos de variantes; con y sin librerías, con y sin efectos y todas ellas requieren scripts de alguna clase y modificar o adaptar algo de nuestra plantilla; eso es inevitable; si alguien pretende implementar algo similar, deberá hacerlo con cuidado y tratando de entender lo que hace, aunque sea, minimamente.
En Blogger, todos los widgets o gadgets o cómo se los quiera llamar, tienen la misma estructura básica:
<b:widget id='ALGO' locked='false' title='Indice' type='TIPO'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> ....... </div> </b:includable> </b:widget>
En ese esquema, H2 es el título y el DIV que está debajo cuya clase es widget-content contiene todo lo demas, sea lo que sea.
Algunos widgets tienen un DIV distinto, con varias clases o con un ID pero para esto, esos detalles carecen de importancia:
Algunos widgets tienen un DIV distinto, con varias clases o con un ID pero para esto, esos detalles carecen de importancia:
<div expr:class='&Mquot;widget-content " + data:display + "-label-widget-content"'> <div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'> <div class='widget-content popular-posts'>
La forma básica de crear un sistema que permita permutar entre algo oculto y algo visible es usar un enlace que ejecute una función de tipo toggle; se lee la propiedad display de cierto elemento; si es none (esta oculto) se cambia por block (visible) y si es block se cambia por none. Esto podemos hacerlo con un script sencillo o usar librerías como Scritpaculous o jQuery.
El script sería algo así:
El script sería algo así:
<script type='text/javascript'>
//<![CDATA[
function SINO(cual) {
var elElemento=document.getElementById(cual);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}
//]]>
</script>Y en el gadget, deberíamos agregar los atributos y eventos:
<h2 onclick='SINO("permutar")'><data:title/></h2> <div class='widget-content' id='permutar' style='display:none;'> ....... </div>
Se le adosa el evento onclick a la etiqueta H2 (o se agrega un enlace común) y se oculta el DIV que requiere que sea identificado con un ID único; si son varios, cada uno deberá tener un ID diferente.
Pero, JavaScript permite que hagamos lo mismo de modo más automático, para eso están addEventListener y attachEvent que son la forma de agregar esos eventos (onclick por ejemplo) en ciertas etiquetas, sin tener que escribir eso atributos ni agregar IDs. Para eso, siempre necesitamos modificar la plantilla porque, de alguna manera debemos indicarle cuáles son las que queremos manipular. Pero, como queremos que sea algo mucho más genérico, en lugar de usar IDs, usamos clases.
Entonces, en cualquier widget de Blogger:
Pero, JavaScript permite que hagamos lo mismo de modo más automático, para eso están addEventListener y attachEvent que son la forma de agregar esos eventos (onclick por ejemplo) en ciertas etiquetas, sin tener que escribir eso atributos ni agregar IDs. Para eso, siempre necesitamos modificar la plantilla porque, de alguna manera debemos indicarle cuáles son las que queremos manipular. Pero, como queremos que sea algo mucho más genérico, en lugar de usar IDs, usamos clases.
Entonces, en cualquier widget de Blogger:
<h2 class='expcon'><data:title/></h2> <div class='widget-con'> .............. </div>
Agregamos la clase expcon a la etiqueta H2 y cambiamos la clase widget-content del DIV por una nueva llamada widget-con.
Si no se quiere hacer esto y se quieren mantener las etiquetas existente (por las dudas) podemos agregar un DIV de este modo:
Si no se quiere hacer esto y se quieren mantener las etiquetas existente (por las dudas) podemos agregar un DIV de este modo:
<h2 class='expcon'><data:title/></h2> <div class='widget-con'> <div class='widget-content'> .............. </div> </div>
Y ahora, las funciones del script antes de </head>:
<script type='text/javascript'> //<![CDATA[ // agrega un ID a la etiqueta si se usa Internet Explorer // http://www.codingforums.com/archive/index.php/t-125144.html var IEelem={}; function IEaddID(fn,uniqueID) { return function(event) {return fn.call(IEelem[uniqueID],event);} } // esta es la función que agregará el evento onclick function agregarEVENTO() { // creo una lista con todas las etiquetas H2 var el = document.getElementsByTagName("h2"); // leo la lista una por una for (var i=0; i<el.length; i++) { var c = el[i].className; // leo el contenido del atributo class // si es una etiqueta H2 con la clase que definí (expcon) // le agrego un evento que ejecute una función a la que llamo togglewidget if (c=="expcon") { if (el[i].addEventListener) { // Firefox, Chrome, Opera, IE9 el[i].addEventListener("click", togglewidget, false); } else if (el[i].attachEvent) { // Internet Explore 8 var uniqueID = el[i].uniqueID;IEelem[uniqueID] = el[i]; el[i].attachEvent("onclick",IEaddID(togglewidget,uniqueID)); } } } } // y esta es la función que permuta el contenido function togglewidget() { // hice click en la etiqueta H2 pero, debo ocultar la etiqueta DIV que es la siguiente; así que la busco var obj = this.nextElementSibling || this.nextSibling; // y le invierto la clase if(obj.className=="widget-con") { // esta oculta así que la muestro obj.className = "widget-exp"; } else { // esta visible así que la oculto obj.className = "widget-con"; } } // una vez que la página web se carga, ejecuto la función onload=function() { agregarEVENTO(); } //]]> </script>
Algo de CSS me permite definir las reglas para esas clases nuevas:
<style>
h2.expcon { cursor: pointer; }
.widget-exp { display: block; }
.widget-con { display: none; }
</style>De este modo, cada vez que agregue un widget que quiera ocultar y desplegar, sólo deberé cambiar esas dos clases del código que agrega Blogger.
Es verdad que en lugar de cambiar la clase podría cambiar la propiedad display pero, perfiero que quede así ya que esto, me permitirá agregar efectos ... otro dia.
Es verdad que en lugar de cambiar la clase podría cambiar la propiedad display pero, perfiero que quede así ya que esto, me permitirá agregar efectos ... otro dia.
Seguimos alineando verticalmente |
Alinear cosas verticalmente siempre es complicado y es algo que se vuelve más engorroso cuando tenemos varios elementos que queremos colocar uno al lado del otro agregándoles la propiedad float pero, como tienen diferente altura se mostrarán alineados en su parte superior:
Alinear algo verticalmente no es tan sencillo como debería serlo. No hay una solución universal, todo depende de cada caso ¿Es un texto, corto? ¿Son imágenes de distinta altura? ¿Son elementos combinados?
Editar plantillas en el nuevo diseño de Blogger |
Seguramente, muchos hablarán sobre el nuevo diseño de Blogger que ya está disponible para todos los usuarios si se ingresa a través de Blogger Draft. Habrá a quién le gusta y a quien no le gusta; poco importa ya que nadie nos ha preguntado nada al respecto y si bien, por ahora seguimos teniendo la opción de no usarlo y continuar con el "tradicional", es posible que en algún momento el cambio sea completo y no habrá otro remedio que soportarlo.
En lo personal, me resulta muy incómodo; todo está "lejos" y lo que más me interesa está escondido allá en el fondo del barril; me refiero a la edición de plantillas.
Hacer ese largo viaje hasta allí es molesto así que primero que nada, uno puede agregarlo a los marcadores para evitarse el trabajo; la URL es siempre del mismo tipo y sólo cambia el numerito que identifica a cada blog:
http://draft.blogger.com/blogger.g?blogID=0000000#template
Pero, eso solo no basta. Para llegar al editor hay que ir hasta abajo de todo, salteándose las plantillas de nuevo estilo que se nos cruzan en el camino como vendedores callejeros y luego, hacer click en el enlace correspondiente que nos despliega una cosita chiquitita donde apenas entran unas cuantas líneas ... desde ya, todo esto, merece mi caluroso aplauso a los desarrolladores que esta vez se han superado; uno creía que no podían hacerlo peor pero ¡lo han logrado!!!
En fin, algo hay que hacer y entonces es cuando aparece Stylish que no es otra cosa que una extensión para Firefox y Chrome que nos permite personalizar las páginas web a nuestro gusto, utilizando sólo CSS.
Una vez instalado, lo veremos en la barra de estado o donde lo hayamos colocado. Ahora, podemos hacer dos cosas, o creamos un estilo para personalizar esa parte en todos nuestros blogs o creamos uno solo para un blog determinado; es indistinto ya que los estilos personales se activan y desactivan con un simple click sin tener que recargar las páginas.
En lo personal, me resulta muy incómodo; todo está "lejos" y lo que más me interesa está escondido allá en el fondo del barril; me refiero a la edición de plantillas.
Hacer ese largo viaje hasta allí es molesto así que primero que nada, uno puede agregarlo a los marcadores para evitarse el trabajo; la URL es siempre del mismo tipo y sólo cambia el numerito que identifica a cada blog:
http://draft.blogger.com/blogger.g?blogID=0000000#template
Pero, eso solo no basta. Para llegar al editor hay que ir hasta abajo de todo, salteándose las plantillas de nuevo estilo que se nos cruzan en el camino como vendedores callejeros y luego, hacer click en el enlace correspondiente que nos despliega una cosita chiquitita donde apenas entran unas cuantas líneas ... desde ya, todo esto, merece mi caluroso aplauso a los desarrolladores que esta vez se han superado; uno creía que no podían hacerlo peor pero ¡lo han logrado!!!
En fin, algo hay que hacer y entonces es cuando aparece Stylish que no es otra cosa que una extensión para Firefox y Chrome que nos permite personalizar las páginas web a nuestro gusto, utilizando sólo CSS.Una vez instalado, lo veremos en la barra de estado o donde lo hayamos colocado. Ahora, podemos hacer dos cosas, o creamos un estilo para personalizar esa parte en todos nuestros blogs o creamos uno solo para un blog determinado; es indistinto ya que los estilos personales se activan y desactivan con un simple click sin tener que recargar las páginas.
Entonces, vamos a crear un estilo nuevo. Si lo queremos usar sólo en un blog, lo sencillo es abrir la página de Blogger Draft donde está el editor de plantillas de ese blog y luego, click en el ícono de Stylish y seleccionar Escribir nuevo estilo | Para esta URL. En ese caso, nos abrirá una ventana donde ya veremos escrito algo así:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("http://draft.blogger.com/blogger.g?blogID=0000000#template") {
}Si lo que queremos hacer es crear un estilo general para todos los blogs, elegimos Escribir nuevo estilo | Estilo en blanco y allí escribimos:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("http://draft.blogger.com/blogger.g?blogID=*#template") {
}
En cualquiera de los dos casos, debajo, escribimos esto:
div.GC5D1NMFJB {display:none;}
div.GC5D1NMEJB {display:none;}
div.GC5D1NMHIB {display:none;}
div.GC5D1NMEP {display:none;}
div.GC5D1NMMIB {display:block !important;}
div.GC5D1NMOIB textarea {
font-family: Arial !important;
font-size: 12px !important;
height:600px;
}Le damos un nombre, guardamos y listo.
Esto es lo que se personaliza que no son otra cosa que algunos DIVs de la página de Blogger que, eventualmente, como se trata de un sitio en proceso de desarrollo, pueden cambiar.
Todo estilo agregado es fácilmente editable e incluso se pueden desactivar temporalmente, tanto desde el ícono de la extensión como desde el menú Herramientas del navegador.
Esto es lo que se personaliza que no son otra cosa que algunos DIVs de la página de Blogger que, eventualmente, como se trata de un sitio en proceso de desarrollo, pueden cambiar.
Todo estilo agregado es fácilmente editable e incluso se pueden desactivar temporalmente, tanto desde el ícono de la extensión como desde el menú Herramientas del navegador.
Hand Drawn Web Icon Set |
