REFERENCIAS:amazon.com
Sobre IDs y bloques ocultos |
Cuando insertamos un bloque con cierto contenido, utilizamos una etiqueta. Dependiendo de cómo lo hacemos o el uso que le daremos, estará en una etiqueta DIV, P, UL, IMG, TABLE, etc. Sin importar cuál sea, a los efectos prácticos, esa etiqueta no es otra cosa que un rectángulo donde adentro "hay algo" que puede ser cualquier cosa, incluyendo otras etiquetas.
Esos rectángulos pueden ser controlados de manera individual si les colocamos un nombre único, es decir si los identificamos con precisión y para eso, usamos un parámetro llamado ID. Por ejemplo:
Esos rectángulos pueden ser controlados de manera individual si les colocamos un nombre único, es decir si los identificamos con precisión y para eso, usamos un parámetro llamado ID. Por ejemplo:
<div id="pepito"> ....... </div>
<img id="unaImagen" src="laImagen" />
<p id="TEXTO1234"> ....... </p>
El nombre que le ponemos no importa, puede ser cualquiera y contener letras, números o guiones pero no espacios en blanco. Puede estar en mayúsculas, minúsculas o ambas cosas aunque debemos recordar que JavaScript es sensible a eso así que cuando usamos esos nombres en un código, hay que usar el mismo criterio ya que id="TEXTO1234" e id="texto1234" no serán el mismo.
Los IDs deben ser únicos, es decir, no debe haber dos iguales en una misma página porque si luego los queremos manipular, el navegador no sabrá a cuál nos referimos.
Es gracias a esos IDs que podemos usar JavaScript para cambiar dinámicamente (cuando la pagina ya se ha cargado) las propiedades de esos bloques; por ejemplo, mostrarlos u ocultarlos a voluntad.
Usando CSS es sencillo ocultar el contenido de algo, basta colocarle la propiedad display: none:
Los IDs deben ser únicos, es decir, no debe haber dos iguales en una misma página porque si luego los queremos manipular, el navegador no sabrá a cuál nos referimos.
Es gracias a esos IDs que podemos usar JavaScript para cambiar dinámicamente (cuando la pagina ya se ha cargado) las propiedades de esos bloques; por ejemplo, mostrarlos u ocultarlos a voluntad.
Usando CSS es sencillo ocultar el contenido de algo, basta colocarle la propiedad display: none:
<div style="display: none;"> ... este es el contenido ... </div>
Esa propiedad es común a todas las etiquetas así que, podemos ocultar cualquier parte de una página web pero ¿para qué sirve ocultar algo? Muchos creen que ocultar algo utilizando este método alivia la carga de una página pero, eso no es cierto. Justamente, el que eso no sea cierto es lo que nos permite hacer el proceso inverso, es decir, mostrarlo, sin necesidad de recargar nada y por lo tanto, el efecto es casi instantáneo por una sencilla razón, ya está allí desde el inicio, ya se cargó junto con el resto, no lo vemos pero está ACÁ ABAJO.
ACÁ ESTOY
Para hacerlo visible, usamos la propiedad contraria que es display:block y que es la propiedad por defecto de la mayoria de las etiquetas así que:
<div style="display: block;"> ... este es el contenido ... </div>
y:
<div> ... este es el contenido ... </div>serán visibles y:
<div style="display: none;"> ... este es el contenido ... </div>
será invisible.
Pero ¿cómo hacemos para permutar entre ambos estados? ¿cómo hacemos para que algo oculto se muestre y algo visible se oculte? Para eso usamos JavaScript, dándole una instrucción que cambie el estilo CSS de algún elemento al que le hemos dado un nombre. En general, sería así:
nombreID.style.propiedad = 'valor';
Para que no tengamos problemas a la hora de indicarle al navegador cuál es la etiqueta que vamos a modificar, en lugar de usar nombreID, usamos una función interna:
getElementById('nombreID').propiedad = 'valor';
o bien:
document.getElementById('nombreID').propiedad = 'valor';
La forma de identificar la propiedad suele ser similar a la propiedad CSS aunque hay variaciones. En este caso serán:
getElementById('nombreID').style.display = 'block';
getElementById('nombreID').style.display = 'none';
¿Cómo aplicamos esto? Para que funcione siempre, sin importar el navegador, lo mejor es utilizar enlaces. En estos enlaces, basta agregar un parámetro más, un evento. El más común sería onclick:
Pero ¿cómo hacemos para permutar entre ambos estados? ¿cómo hacemos para que algo oculto se muestre y algo visible se oculte? Para eso usamos JavaScript, dándole una instrucción que cambie el estilo CSS de algún elemento al que le hemos dado un nombre. En general, sería así:
nombreID.style.propiedad = 'valor';
Para que no tengamos problemas a la hora de indicarle al navegador cuál es la etiqueta que vamos a modificar, en lugar de usar nombreID, usamos una función interna:
getElementById('nombreID').propiedad = 'valor';
o bien:
document.getElementById('nombreID').propiedad = 'valor';
La forma de identificar la propiedad suele ser similar a la propiedad CSS aunque hay variaciones. En este caso serán:
getElementById('nombreID').style.display = 'block';
getElementById('nombreID').style.display = 'none';
¿Cómo aplicamos esto? Para que funcione siempre, sin importar el navegador, lo mejor es utilizar enlaces. En estos enlaces, basta agregar un parámetro más, un evento. El más común sería onclick:
<a href="javascript:void(0);" onclick="getElementById('ejemplo').style.display='block';">TEXTO O IMAGEN</a>
<div id="ejemplo" style="display:none;'> ....... </div>En ese ejemplo, haciendo click sobre el TEXTO O IMAGEN, el bloque oculto llamado ejemplo, se mostraría.
¿Y cómo lo ocultamos otra vez? Una forma sería agregarle otro enlace dentro del elemento oculto que lo cierre:
¿Y cómo lo ocultamos otra vez? Una forma sería agregarle otro enlace dentro del elemento oculto que lo cierre:
<a href="javascript:void(0);" onclick="getElementById('ejemplo').style.display='block';">TEXTO O IMAGEN</a>
<div id="ejemplo" style="display:none;'>
.......
<a href="javascript:void(0);" onclick="getElementById('ejemplo').style.display='none';">CERRAR</a>
</div>ACÁ ESTOY
CERRAR
CERRAR
Funciona pero podemos hacerlo mejor y simplificarlo. Por ejemplo, es muy común usar una función que agregamos antes de </head> y que nos permite permutar entre dos estados. A esto, suele llamarsele efecto toggle:
<script type='text/javascript'>
//<![CDATA[
function toggle(cual) {
var elElemento=document.getElementById(cual);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}
//]]>
</script>
¿Que hace eso? Cuando lo ejecutamos, enviamos el nombre de un ID y la función verifica el estado. Si está visible, lo oculta y si está oculto lo muestra. Un ejemplo de MOSTRAR/OCULTAR
ACÁ ESTOY
Lo usamos de manera similar, con un enlace y el evento onclick:
<a href="javascript:void(0);" onclick="toggle('ejemplo');">TEXTO O IMAGEN</a>
<div id="ejemplo" style="display:none;'> ....... </div>Para que ese efecto estuviera completo, faltaría algo, hacer que el texto del enlace cambie de tal modo que un usuario supiera que basta hacer click otra vez en el mismo para cambiar de un estado a otro.
Hay muchos métodos para eso pero, aqui va otro script más que podemos agregar antes de </head>:
Hay muchos métodos para eso pero, aqui va otro script más que podemos agregar antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function toggleEnlace(accion, cual) {
if (accion == "mostrar") {
document.getElementById("miContenido"+cual).style.display = "block";
document.getElementById("miEnlace"+cual).href="javascript:toggleEnlace('ocultar',"+cual+")";
document.getElementById("miEnlace"+cual).innerHTML = "CONTRAER";
}
if (accion == "ocultar") {
document.getElementById("miContenido"+cual).style.display = "none";
document.getElementById("miEnlace"+cual).href="javascript:toggleEnlace('mostrar',"+cual+")";
document.getElementById("miEnlace"+cual).innerHTML = "EXPANDIR";
}
}
//]]>
</script>
Y lo usamos de esta manera:
<a id="miEnlace1" href="javascript:toggleEnlace('mostrar', 1)">EXPANDIR</a>
<div id="miContenido1" style="display:none;"> ... CONTENIDO OCULTO 1 ... </div>
<a id="miEnlace2" href="javascript:toggleEnlace('mostrar', 2)">EXPANDIR</a>
<div id="miContenido2" style="display:none;"> ... CONTENIDO OCULTO 2 ... </div>
EJEMPLO 1 EXPANDIR | EJEMPLO 2 EXPANDIR | EJEMPLO 3 EXPANDIR
EL EJEMPLO 1
EL EJEMPLO 2
EL EJEMPLO 3
Ocultando códigos mientras los probamos |
Cuando quiero probar cosas, suelo aplicarlas en un blog auxiliar que tiene una copia del blog original y que sirve para ser destruido sin mayores inconvenientes pero, a veces, eso no es suficiente porque no es una copia exacta; ciertos datos no pueden ser reproducidos; no tiene los mismos posts, ni los mismos comentarios, ni el mismo feed. Son muchas las diferencias y esas diferencias hacen que algunas pruebas deban hacerse directamente en el original.
Obviamente, allí hay que hacerlas con mucho más cuidado, recordando cada paso dado para poder volver atrás y restaurar los códigos si algo anda mal. Es riesgoso pero además, puede ser molesto porque tal vez, por alguna razón, no queremos que esa pruebas sean visibles, queremos mantenerlas ocultas a los visitantes hasta tanto decidir si las aplicaremos o no.
Eso último, puede ser resuelto si aplicamos el mismo criterio que se aplicaba para acceder al panel de Blogger directamente desde el blog.
Sea cual sea el código que queremos probar, basta colocarlo entre estas etiquetas:
Obviamente, allí hay que hacerlas con mucho más cuidado, recordando cada paso dado para poder volver atrás y restaurar los códigos si algo anda mal. Es riesgoso pero además, puede ser molesto porque tal vez, por alguna razón, no queremos que esa pruebas sean visibles, queremos mantenerlas ocultas a los visitantes hasta tanto decidir si las aplicaremos o no.
Eso último, puede ser resuelto si aplicamos el mismo criterio que se aplicaba para acceder al panel de Blogger directamente desde el blog.
Sea cual sea el código que queremos probar, basta colocarlo entre estas etiquetas:
<span class="item-control blog-admin">
... aquí ponemos nuestro código ...
</span>De esa manera, si estamos logueados con nuestra cuenta de Blogger podremos verlo pero permanecerá oculto para cualquier otro que no tenga permisos de administrador.
No es nada del otro mundo pero puede sernos útil en determinadas condiciones y funciona bien, si no fuera así, estarían viendo una imagen agregada con este método.
No es nada del otro mundo pero puede sernos útil en determinadas condiciones y funciona bien, si no fuera así, estarían viendo una imagen agregada con este método.
Dígale goodbye a IE6 y siga adelante |
Humor e ironía. Así califica SpamLoco la campaña para salvar a Internet Explorer 6, una broma del día de los inocentes que solicitaba agregar firmas para peticionar que la antigualla se expandiera a todas las plataformas.
Parece extraño que aún se continue utilizando un navegador tan obsoleto, sería lo mismo que tener un auto que funcione con carbón o con leña porque la tecnología es un viento arrollador y en este caso, aún más.
Las cifras que muestra un comentario, tomadas de StatCounter son alarmantes:
Parece extraño que aún se continue utilizando un navegador tan obsoleto, sería lo mismo que tener un auto que funcione con carbón o con leña porque la tecnología es un viento arrollador y en este caso, aún más.
Las cifras que muestra un comentario, tomadas de StatCounter son alarmantes:
Actualizar el navegador que utilicemos, sea el que sea, debería ser una prioridad para cualquier usuario pero, aún más, para quienes desarrollan sitios web y no hablo de los grandes, hablo de cada uno de nosotros. Nadie que administre un blog debería preocuparse por IE6 y sus problemas; el hecho de que muchos visitantes lo sigan utilizando no es excusa; estamos hablando de desterrar definitivamente el uso de un programa que ya se ha jubilado, que ya tiene versiones nuevas desde hace años y que esas nuevas versiones lo han mejorado muchísimo.
No veo a nadie preocupado si cierta página se ve mal en Mosaic ni esté interesado en saber por que las pirámides de Egipto no tienen aire acondicionado.
Mientras no preocupemos por IE6, seguirá existiendo. Es hora que descanse en paz. Démosle las gracias por los servicios prestados y sigamos adelante.
No veo a nadie preocupado si cierta página se ve mal en Mosaic ni esté interesado en saber por que las pirámides de Egipto no tienen aire acondicionado.
Mientras no preocupemos por IE6, seguirá existiendo. Es hora que descanse en paz. Démosle las gracias por los servicios prestados y sigamos adelante.
Sobre mudanzas, archivos y otras cuestiones |
¿Época de mudanzas forzosas? Aprovechemos la crisis para poner orden ... algo de orden, aunque sea un poquito.Nos hemos acostumbrado a depender demasiado de los servicios externos porque creimos que vivíamos en un mundo estable, pero todo es efímero y la web es mucho más dinámica de lo que podamos soñar. Hay quienes creen que Google es internet pero hace apenas unos años, Google no existía y Yahoo reinaba sobre nosotros los mortales; si vamos para atrás, otros reyes duraron menos que un suspiro y esto, que nos parece permanente y que ha existido siempre, no es más que un pequeño destello. Entendamos primero eso para que nuestra estadía sea lo menos volatil posible.
Un blog, el nuestro, tiene dos partes, muy distintas entre si. Una es todo aquello que lo mantiene online, la otra, su contenido, es decir, las entradas y los comentarios, eso que va variando con el tiempo, apilándose, desactualizándose, transformándose muchas veces en irrelevante. La primer parte es sustancial porque de ella depende la segunda y ahora, cuando se cierran puertas como tantas otras veces, es necesario buscar soluciones más permanentes.
Sólo hay dos alternativas: o Blogger provee la solución creando las condiciones para ese alojamiento o debemos acostumbrarnos a no depender de servicios externos, minimizándolos al máximo.
La primera sería la obvia y la que resolvería todos los problemas de raiz. Nadie habla de un Blogger al estilo Rapidshare, hablamos de un lugar de espacio limitado, casi ridículamente limitado comparado con el que provee Google para sus otros servicios.
Ellos han respondido a estas peticiones de manera lacónica y terminante: "no estamos pensando en algo así, hay otros servicios externos que lo permiten, usen esos". Que no estan pensando es obvio y que hay otros servicios es cierto, del mismo modo, podría preguntárseles para qué crearon Google Sites existiendo Blogger y por qué en Google Sites pueden alojarse archivos y en Blogger no. Seguramente, tendrán alguna excusa-explicación para eso pero no debe ser demasiado clara para nosotros, los pobres mortales. Los designios de Google-Dios son inexcrutables y sus verdades hay que tomarla así, como un acto de fe.
De todas maneras, así como antes se intentó una campaña para presionar un poco utilizando la WishList, ahora le sumamos otra más que utiliza Twitter y que es una idea de TwittBoy y BanakaBanaka!!:
Aunque no creo que haya campaña posible que pueda torcerles el brazo ya que, simplemente, son sordociegomudos, de todos modos, la presión sirve, aunque más no sea para molestarlos y sacarnos la bronca de encima. Nada se pierde así que: a presionar se ha dicho.
Como no podemos esperar hasta que Blogger decida escuchar: debemos hacer algo YA MISMO.
Nuestra plantilla es eso que hace que el blog sea un blog, requiere de códigos que lo hacen funcionar y de algunos datos que deben buscarse y cargarse. El código lo guarda Blogger y para que todos esos otros datos permanezcan más o menos accesibles siempre, deberíamos hacer lo mismo, guardarlos en Blogger.
¿Archivos con scripts? Fuera. Hay que agregarlos a la plantilla sí o sí. Esa tiene que ser la meta ¿Por qué? Porque nos evitará suplicios y porque ascelerará sustancialmente, el tiempo de carga del sitio ¿Hay excepciones? Sí. Todas las llamadas frameworks, librerías de usos múltiples que podemos cargar sin necesidad de alojar archivos mediante las API de Google. Para el resto, no hay motivo para usar archivos externos y menos aún, archivos externos que no alojamos nosotros mismos en alguna cuenta particular porque estaremos dependiendo de dos cosas, del servicio que las aloja y de la buena voluntad de quien las ha guardado allí.
¿Todos los scripts pueden agregarse a la plantilla? En principio, sí. Puede ser que algunos sean conflictivos y que debamos hacer algún pequeño cambio, eso habrá que verlo caso por caso y justamente, tenerlos en la plantilla nos permitirá hacerlo con más facilidad.
¿Archivos con hojas de estilo? Fuera. Van en la plantilla sin dudarlo, no hay ningún motivo para usar archivos CSS externos, ningún beneficio. Serán lentos de cargar, consumiran el ancho de banda del servicio que empleemos y cada vez que se nos ocurra cambiar un detalle, habrá que rehacerlos y volverlos a subir.
¿Las imágenes de la plantilla? Todas en Blogger y eventualmente en Picasa. El resultado será un aumento significativo en el tiempo de carga.
Scripts, hojas de estilo e imágenes son la base de cualquier plantilla; sólo hay tres tipos de archivos que suele haber en algunas plantillas y con los que no tenemos más alternativa que usar un alojamiento externo: archivos ICO, GIFs animados y SWFs. En esos casos, las opciones son múltiples y sólo enumero las que utilizo:
Nuestra plantilla es eso que hace que el blog sea un blog, requiere de códigos que lo hacen funcionar y de algunos datos que deben buscarse y cargarse. El código lo guarda Blogger y para que todos esos otros datos permanezcan más o menos accesibles siempre, deberíamos hacer lo mismo, guardarlos en Blogger.
¿Archivos con scripts? Fuera. Hay que agregarlos a la plantilla sí o sí. Esa tiene que ser la meta ¿Por qué? Porque nos evitará suplicios y porque ascelerará sustancialmente, el tiempo de carga del sitio ¿Hay excepciones? Sí. Todas las llamadas frameworks, librerías de usos múltiples que podemos cargar sin necesidad de alojar archivos mediante las API de Google. Para el resto, no hay motivo para usar archivos externos y menos aún, archivos externos que no alojamos nosotros mismos en alguna cuenta particular porque estaremos dependiendo de dos cosas, del servicio que las aloja y de la buena voluntad de quien las ha guardado allí.
¿Todos los scripts pueden agregarse a la plantilla? En principio, sí. Puede ser que algunos sean conflictivos y que debamos hacer algún pequeño cambio, eso habrá que verlo caso por caso y justamente, tenerlos en la plantilla nos permitirá hacerlo con más facilidad.
¿Archivos con hojas de estilo? Fuera. Van en la plantilla sin dudarlo, no hay ningún motivo para usar archivos CSS externos, ningún beneficio. Serán lentos de cargar, consumiran el ancho de banda del servicio que empleemos y cada vez que se nos ocurra cambiar un detalle, habrá que rehacerlos y volverlos a subir.
¿Las imágenes de la plantilla? Todas en Blogger y eventualmente en Picasa. El resultado será un aumento significativo en el tiempo de carga.
Scripts, hojas de estilo e imágenes son la base de cualquier plantilla; sólo hay tres tipos de archivos que suele haber en algunas plantillas y con los que no tenemos más alternativa que usar un alojamiento externo: archivos ICO, GIFs animados y SWFs. En esos casos, las opciones son múltiples y sólo enumero las que utilizo:
- Fileden permite alojar casi cualquier tipo de archivo. Tiene 1GB de espacio disponible para una cuenta gratuita y un ancho de banda mensual de 5GB lo que es más que suficiente si no nos abusamos.
- ImageShack permite alojar imágenes pero tambien SWFs y videos con alguna limitación en el tamaño. Para utilizarlo, hay que abrir una cuenta gratuita.
- DivShare ofrece 5GB de espacio aunque no admite el enlace directo de los archivos; sin embargo, es una excelente opción para MP3s ya que se pueden insertar de forma individual o crear listas de reproducción. También admite videos, imágenes y documentos varios para los que provee slideshows y visores que pueden ser insertados en una página web.
- Yahoo Geocities es otro sitio que permite crear páginas webs y que admite el alojamiento de archivos. Hay que ser prudente con su uso ya que el ancho de banda disponible es escaso pero puede servir para ciertos formatos de archivo que no son aceptados por otros servicios.
- Google Sites: El "coso" de Google que no se sabe muy bien para qué fue creado pero que está allí con 100MB de espacio disponible y la posibilidad de alojar algunos formatos de archivos.
Probablemente, existan muchos otros; de hecho, existen muchos otros y la decisión de usar este o aquel es algo personal. Sólo recomendaria tratar de verificar esos servicios, saber si son proyectos que ya llevan tiempo funcionando o son emprendimientos nuevos. Leer que dicen otros usuarios es fundamental. Hay que ser cuidadosos porque no todo lo que reluce es oro.
Tweetbacks y Re-Tweets en Blogger |
En BloggingTips explican una forma bastante simple de añadir Tweetbacks y Re-Tweets en las entradas de Blogger.
Un Re-Tweet es un tweet repetido y un tweetback es similar a un trackback (parece una explicación absurda pero no se me ocurre nada mejor). En fin, son los enlaces que recibe cierta entrada en el mismo Twitter. Con el tiempo, estos se estan volviendo "importantes" y hasta hay quien ha realizado un ranking de ellos y ha creado un sitio especializado.
Más allá de si esto sirve, nos gusta o sólo es otro contador de esos que se usan para alegrarse o amargarse, en WordPress hay plugins que los manejan y para usarlos en Blogger debemos editar la plantilla.
Hay dos modelos, el primero, es un script de Danzarrella que lista todos los tweets que hacen referencia a una entrada y que incluye el avatar del autor y el texto en si mismo.
Vamos a la Edición HTML de la plantilla, expandimos los artilugios y buscamos el lugar donde queremos que se muestre. Por ejemplo, entre la entrada y los comentarios:
Un Re-Tweet es un tweet repetido y un tweetback es similar a un trackback (parece una explicación absurda pero no se me ocurre nada mejor). En fin, son los enlaces que recibe cierta entrada en el mismo Twitter. Con el tiempo, estos se estan volviendo "importantes" y hasta hay quien ha realizado un ranking de ellos y ha creado un sitio especializado.
Más allá de si esto sirve, nos gusta o sólo es otro contador de esos que se usan para alegrarse o amargarse, en WordPress hay plugins que los manejan y para usarlos en Blogger debemos editar la plantilla.
Hay dos modelos, el primero, es un script de Danzarrella que lista todos los tweets que hacen referencia a una entrada y que incluye el avatar del autor y el texto en si mismo.
Vamos a la Edición HTML de la plantilla, expandimos los artilugios y buscamos el lugar donde queremos que se muestre. Por ejemplo, entre la entrada y los comentarios:
<b:includable id='comments' var='post'/>
<script src='http://danzarrella.com/tb.js'//>
<div class='comments' id='comments'>El resultado será una lista o bien un texto si no se encuentra ninguno:
Esto, sólo se verá en las páginas individuales y a mi entender retarda bastante la carga del blog. También puede agregarse el script directamente en la plantilla o alojarlo en un servidor propio.
La segunda alternativa la provee un servicio llamado tweetmeme que permite agregar un botón donde se muestra la cantidad de tweets recibidos y a su vez, permite crear uno.
Para agregarlo, buscamos el lugar donde queremos que se vea (supongamos que es el mismo que el otro, entre las entradas y los comentarios) y allí agregamos lo siguiente:
La segunda alternativa la provee un servicio llamado tweetmeme que permite agregar un botón donde se muestra la cantidad de tweets recibidos y a su vez, permite crear uno.
Para agregarlo, buscamos el lugar donde queremos que se vea (supongamos que es el mismo que el otro, entre las entradas y los comentarios) y allí agregamos lo siguiente:
<script type='text/javascript'>tweetmeme_url = '<data:post.url/>';</script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
Por lo que vi, los resultados difieren del otro pero, todo puede ser.
Moraleja: no me convenció ninguno pero, esa es sólo una opinión personal.
A primera vista |
