Los cambios en GMail parecen haber llegado a estas tierras, con todos sus beneficios y nuevas funciones pero con alguna sorpresa desagradable para los que usamos scripts de Greasemonkey:
Las posibilidades son dos, OCULTAR, solo ocultará la advertencia; el otro enlace los dirá que la extensión Better Gmail puede interferir y, si hay problemas, convendría que actualizáramos a la versión Better Gmail 2.
Lamentablemente, otros scripts no tienen solución y dejan de funcionar; algo similar a lo que ocurrió recientemente con los scripts que funcionaban con YouTube.
En este mundo de la internet es fácil creer que Google es todo lo que existe pero, no es así. Está bien, tal vez, el resto de los buscadores tengan un porcentaje menor en los resultados que nos interesan pero ... existen.
En algún momento, gracias a que algunos le buscaron la vuelta, pudimos agregar un sitemap en Google y con eso, mejorar nuestra posición. Incluso logramos saltearnos restricciones y limitaciones propias del mismo Blogger ¿Será posible avanzar un poco más? Por ejemplo, ¿será posible agregar un sitemap en Yahoo?
La respuesta es sí y el procedimiento es muy similar al que usamos en Google.
Primero que nada, tenemos que tener una cuenta de Yahoo. Si no la tenemos, nos registramos gratuitamente y listo; luego, ingresamos a Yahoo! Search y allí hacemos click en Submit Your Site for Free.
En esa nueva página hay dos acciones que podemos realizar; la primera, Submit a Website or Webpage, agregará nuestro sitio al buscador lo que nos garantizará ser indexados. La segunda, Submit Site Feed es la más interesante, enviar un sitemap:
Enter the full URL of the site feed you would like to submit:
Please include the http:// prefix (for example, http://www.yahoo.com).
Podemos utilizar diferentes formatos para indicar la URL del sitemap pero, en Blogger sólo tenemos dos alternativas y cualquiera de ellas es válida:
http://nombreBlog.blogspot.com/rss.xml
o bien:
http://nombreBlog.blogspot.com/atom.xml
Luego, hacemos click en el botón Authentication que nos abrirá una ventana donde deberemos determinar el método de autentificación y, nuevamente, sólo hay una alternativa posible, agregar una etiqueta META, algo que por suerte, Yahoo comenzó a implementar este año. Así que, copiamos la etiqueta que será algo similar a esto:
<META content='123456789abcdef' name='y_key'/>
Y la pegamos justo después de </TITLE> recordando que la etiqueta META no tiene una etiqueta de cierre así que, para que Blogger la acepte, debemos agregarle la barra de cierre final.
Una vez que lo hacemos, guardamos la plantilla y click en el botón Ready to Authenticate. Nuestro sitio aparecerá como pendiente de autentificación y ahora, sólo restará esperar.
¿Y qué pasa con otros buscadores?
MSN no posee un procedimiento ni una dirección donde enviar sitemaps, se habla que tal vez, lo tenga en un futuro pero, por ahora, es imposible sin embargo, hay una solución alternativa, enviar el sitemap a moreover.com que parece tener un acuerdo con MSN por la cual actua como intermediario. Sea o no sea cierto, hacerlo es sencillo y no nos hará daño; basta completar la siguiente dirección con la URL de nuestro sitio, copiarla y pegarla en la barra de direcciones del navegador:
La respuesta, será una página de aceptación donde podemos ver algunas de las otras herramientas de este buscador, un poco olvidado.
Como se ve, si el buscador posee un sistema de sitemaps y no encontramos una dirección que nos facilite su ingreso, podemos agregar el nuesto a cualquiera de ellos siguiendo siempre el mismo tipos de código:
Gracias a la información de ls, ahora también podemos agregar un sitemap en MSN, ingresando en MSN Webmasters Tools. Necesitamos tener una Windows Live ID y si no, nos registramos gratuitamente.
En la página, agregamos la URL de nuestro sitio y la URL de los feeds, como en todos los otros casos:
Web address: http://nombreBlog.blogspot.com Sitemap address: http://nombreBlog.blogspot.com/rss.xml
Y establecemos como método de verificación, agregar un etiqueta META que colocamos en la plantilla junto con las otras. Por último, click en SUBMIT y todo listo.
De allí en adelante, podemos cambiar ese sitemap simplemente enviándolo directamente:
Son muchas las veces que me han preguntado si era posible crear un sistema de etiquetas más flexibles en Blogger y, por lo general, se refieren a tener la posibilidad de tener categorías y subcategorías. La respuesta siempre fue NO, eso no puede hacerse porque Blogger no lo contempla y no nos da la posibilidad de acceder a los datos de manera sencilla y rápida.
Pensando un poco en el tema, se me ha ocurrido hacer un experimento y después de algunas idas y vueltas, creé un blog de pruebas para ver si era posible jugar un poco con las etiquetas. El resultado no es nada maravilloso pero, tal vez, sirva como un primer boceto para seguir investigando.
Leyendo el código de un elemento Label, vemos que Blogger hace un bucle por las etiquetas y lee tres datos: data:label.name es el texto de cada una, data:label.url es la dirección URL y data:label.count es la cantidad de posts en cada etiqueta. De esos datos, el único que realmente importa es el nombre así que ¿por que no guardarlos en un array de JavaScript para después manipularlos? Para simplificar un poco, un array es, una lista con un subíndice; por ejemplo imagen[0], imagen[1], imagen[2], etc.
Imaginé lo siguiente: el blog posee una cantidad de etiquetas comunes pero, algunas de ellas, se agrupan de alguna manera y contienen dos partes, la categoría a la que pertenecen y la subgcategoría, separadas ambas por un carácter especial, un carácter que, normalmente no usaría, por ejemplo, el guión bajo (_). De esta manera, ese blog de pruebas en particular tiene una serie de posts clasificados así:
Africa
America_Brasil
America_Canada
Asia_India
Asia_Indonesia
Asia_Japón
Europa_España
Europa_Francia
Europa_Portugal
Oceanía
Los continentes, serían las categorías principales y los paises las subcategorias. Para complicarlo un poco más, dos de esos continentes no tienen subcategorias. Hasta aquí, no hay problema, puedo ver todos los posts de cualquiera de ellas; un enlace a http://nombre/labels/Europa_Francia me mostrará los posts de esa categoría pero, lo que quiero es mostrarlos agrupados por continente y luego listar sólo esos.
En la sidebar hay tres elementos con etiquetas:
Etiquetas con Secciones sólo muestra las categorías (los continentes); haciendo click en cada una de ellas, se despliega para mostrar los enlaces a las subcategorías (los países).
Etiquetas sin Secciones sólo muestra las etiquetas que no tiene subcategorías.
Etiquetas Normales es el elemento standard de Blogger y no tiene uso.
Reproducir el ejemplo es sencillo; como no hay restricciones en cuanto a su cantidad, creamos tres elementos Labels desde Elementos de la página de la plantilla y les ponemos nombres para diferenciarlos. Luego, en la Edición HTML de la plantilla, desplegamos los artilugios y buscamos esos elementos que dirán algo así:
Usaremos un elemento Label para mostrar las categorías desplegables, otro para las categorías simples y el tercero, será el común que sólo dejaremos para comparar resultados. En los dos primeros, eliminaremos todo lo indicado en rojo y allí colocaremos los códigos correspondientes.
<script type='text/javascript'>
// definición de las variables utilizadas
var elBlog ="<data:blog.homepageUrl/>"; // la URL del blog
var listaEtiquetas = new Array(); // el array que contendrá las etiquetas
var listaEtiquetasNum=0; // contador auxiliar
var laSeccion = ""; // guarda los nombres de las categorías
var elEnlace =""; // el enlace a cada subcategoría// usamos los datos de Blogger para recopilar todas las etiquetas del blog
<b:loop values='data:labels' var='label'>
// leemos el nombre de cada una de las etiquetas
var elNombre = "<data:label.name/>";
// lo guardamos en el array
listaEtiquetas[listaEtiquetasNum] = elNombre;
listaEtiquetasNum ++; // incrementamos el contador
</b:loop>
// función auxiliar para expandir y contraer las secciones
function linkLista(cual) {
var idListaUL = document.getElementById(cual);
if(idListaUL.style.display == 'none') {
idListaUL.style.display = 'block';
}else{
idListaUL.style.display = 'none';
}
return false;
}
</script>
<!-- el script está dividido en dos partes para agregarlo en la plantilla sin errores -->
<script type='text/javascript'>
//<![CDATA[
// leemos todas las etiquetas y las separamos en dos partes for (var i = 0; i < listaEtiquetas.length; i++) {
var cual=listaEtiquetas[i]; // leemos la etiqueta completa
var auxiliar = cual.split("_"); // la separamos en dos
listaEtiquetas[i]=new Array(1); // ampliamos el array
listaEtiquetas[i][0] = auxiliar[0]; // guardamos el nombre de la categoría
listaEtiquetas[i][1] = auxiliar[1]; // guardamos el nombre de la subcategoría
}
// leemos el array generado y escribimos el documento HTML
for (var i = 0; i < listaEtiquetas.length; i++) {
var leerSeccion = listaEtiquetas[i][0]; // el nombre de la categoría
var leerItem = listaEtiquetas[i][1]; // el nombre de la subcategoría// si no hay una sucbategoría, leerItem no tendrá un valor y lo salteamos
if (leerItem!=undefined) {
// sólo mostramos categorías y subcategorías
if (laSeccion != leerSeccion) {
// si todavía no lo hicimos, creamos el enlace de la categoría desplegable
document.write("</ul>"); // por las dudas, cerramos cualquier lista abierta
laSeccion = leerSeccion; // el nombre de la categoría (el continente)// creamos un enlace con una clase CSS llamada listadoSECCION// que servirá para desplegar y contraer la categoría
document.write("<a class=\"listadoSECCION\" title=\"Expandir/Contraer la sección\" href=\"javascript:void(0);\" onclick=\"return linkLista('" + laSeccion + "');\">" + laSeccion + "</a>");
// iniciamos el bloque oculto con la lista de subcategorías// a las que le establecemos una clase CSS llamada listadoBloqueITEMS
document.write("<ul class=\"listadoBloqueITEMS\" id=\"" + laSeccion + "\" style=\"display:none;\">");
}
// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + laSeccion + "_" + leerItem
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<li class=\"listadoITEM\"><a href=\"" + elEnlace + "\">" + leerItem + "</a></li<");
}
}
//]]>
</script>
<ul class='listadoBloqueITEMS'>
<script type='text/javascript'>
//<![CDATA[
// leemos el array generado y escribimos el documento HTML
for (var i = 0; i < listaEtiquetas.length; i++) {
var leerSeccion = listaEtiquetas[i][0]; // el nombre de la categoría
var leerItem = listaEtiquetas[i][1]; // el nombre de la subcategoría // si no hay una subcategoría, leerItem no tendrá un valor y lo mostramos
if (leerItem==undefined) {
laSeccion = leerSeccion; // el nombre de la categoría// determinamos la URL de cada enlace
elEnlace = elBlog + "search/label/" + laSeccion
// escribimos cada item de la lista con una clase CSS llamada listadoITEM
document.write("<li class=\"listadoITEM\"><a href=\"" + elEnlace + "\">" + laSeccion + "</a></li>");
}
}
//]]>
</script>
</ul>
Ambos scripts están armados de manera muy sencilla y sólo usan instrucciones elementales para que puedan comprenderse y documentados hasta donde es posible.
Lo único que faltaría es establecer las propiedades de las clases CSS que serán personales pero, pueden resumirse de esta forma:
<style type="text/css">
/* los pseudo-botones para desplegar las subcategorías*/
a.listadoSECCION, a.listadoSECCION:visited, a.listadoSECCION:link {
background-color: beige;
border: 2px ridge Brown;
color: DarkRed;
display: block;
[... otras propiedades ...]
}
a.listadoSECCION:hover {
text-decoration: none;
[... propiedades para el efecto mouseover...]
}
/* el bloque oculto con la lista de subcategorías */
ul.listadoBloqueITEMS {
list-style-position:inside;
[... propiedades varias ...]
}
/* cada item de las subcategorías */
li.listadoITEM {
[... propiedades varias ...]
}
/* cada item es un enlace */
li.listadoITEM a, li.listadoITEM a:visited, li.listadoITEM a:link {
text-decoration:none;
[... propiedades varias ...]
}
li.listadoITEM a:hover {
[... propiedades para el efecto mouseover...]
}
</style>
En verdad, como sólo se trata de una vaga idea, espero que alguien le saque provecho o plantee alguna alternativa más razonable.
No tengo un iPhone (ni voy a tenerlo) pero, para sacarme la curiosidad, bastó instalar iPhone Emulator; una extensión experimental para Firefox.
Bueno, no es "exactamente" lo mismo pero, por lo menos se le parece un poco. Puede navegarse sin problemas pero carece de la posibilidad de hacer scroll a menos que el sitio esté codificado específicamente para verse en ese tipo de telefonía móvil. Tampoco tiene sonido pero dispone de botones para avanzar retroceder.
(Click en la imagen para ver una captura de pantalla)
Una vez instalada, la ejecutamos desde Herramientas Launch iPhone Emulator y se abrirá en otra ventana.
Una vez que lo hemos visto un rato, podemos desinstalarla y seguir con nuestra vida.
Mucho se habla del futuro Internet Explorer 8 y de sus mejoras pero, el mismo Microsoft reconoce que, en realidad, estas ampliaciones en la interpretación de las propiedades CSS no serán demasiadas.
Aunque se trata de un documento preliminar, en msdn nos muestran cuáles son las propiedades soportadas por las diferentes versiones y nos anticipan las escasas novedades.
IE 6.0
IE 7.0
IE 8.0
@charset
Si
Si
Si
@import
Si
Si
Si
@media
Si
Si
Si
@page
Si
Si
Si
@font-face
Si
Si
Si
@namespace
No
No
No
.value
Parcial
Si
Si
#value
Si
Si
Si
E
Si
Si
Si
*
No
Si
Si
ns|E
No
No
No
[att=val]
No
Si
Si
[att]
No
Si
Si
[att|=val]
No
Si
Si
[att~=val]
No
Si
Si
[ns|attr]
No
Si
Si
[att^=val]
No
Si
Si
[att*=val]
No
Si
Si
[att$=val]
No
Si
Si
E+F
No
Si
Si
E>F
No
Si
Si
EF
Si
Si
Si
E~F
No
Si
Si
:active
No
Parcial
Si
:after
No
No
Si
:before
No
No
Si
:first-child
No
Si
Si
:focus
No
No
Si
:hover
No
No
Si
:lang(C)
No
No
Si
:link
Si
Si
Si
:visited
Si
Si
Si
:root
No
No
No
:nth-child()
No
No
No
:nth-last-child()
No
No
No
:nth-of-type()
No
No
No
:nth-last-of-type()
No
No
No
:last-child
No
No
No
:first-of-type
No
No
No
:last-of-type
No
No
No
:only-child
No
No
No
:only-of-type
No
No
No
:empty
No
No
No
:target
No
No
No
:not(X)
No
No
No
:enabled
No
No
No
:disabled
No
No
No
:checked
No
No
No
:indeterminate
No
No
No
:default
No
No
No
:valid
No
No
No
:invalid
No
No
No
:in-range
No
No
No
:out-of-range
No
No
No
:required
No
No
No
:optional
No
No
No
:read-only
No
No
No
:read-write
No
No
No
:first-letter
Si
Si
Si
:first-line
Si
Si
Si
::before
No
No
No
::after
No
No
No
::first-letter
No
No
No
::first-line
No
No
No
::selection
No
No
No
::value
No
No
No
::choices
No
No
No
::repeat-item
No
No
No
::repeat-index
No
No
No
!important
Parcial
Si
Si
list-style
Si
Si
Si
list-style-image
Si
Si
Si
list-style-position
Si
Si
Si
list-style-type
No
Parcial
Si
color
Si
Si
Si
background
Si
Si
Si
background-attachment
Parcial
Si
Si
background-color
Si
Si
Si
background-image
Si
Si
Si
background-position
Parcial
Parcial
Si
background-repeat
Si
Si
Si
color-profile
No
No
No
rendering-intent
No
No
No
background
No
No
No
background-clip
No
No
No
background-origin
No
No
No
background-break
No
No
No
background-size
No
No
No
border
Si
Si
Si
border-bottom
Si
Si
Si
border-bottom-color
Si
Si
Si
border-bottom-style
Si
Si
Si
border-bottom-width
Si
Si
Si
border-collapse
Parcial
Parcial
Si
border-color
Si
Si
Si
border-left
Si
Si
Si
border-left-color
Si
Si
Si
border-left-style
Si
Si
Si
border-left-width
Si
Si
Si
border-right
Si
Si
Si
border-right-color
Si
Si
Si
border-right-style
Si
Si
Si
border-right-width
Si
Si
Si
border-spacing
No
No
Si
border-style
Parcial
Parcial
Si
border-top
Si
Si
Si
border-top-color
Si
Si
Si
border-top-style
Si
Si
Si
border-top-width
Si
Si
Si
border-width
Si
Si
Si
caption-side
No
No
Si
clear
Si
Si
Si
empty-cells
No
Parcial
Si
float
Si
Si
Si
margin
Si
Si
Si
margin-bottom
Si
Si
Si
margin-left
Si
Si
Si
margin-right
Si
Si
Si
margin-top
Si
Si
Si
padding
Si
Si
Si
padding-bottom
Si
Si
Si
padding-left
Si
Si
Si
padding-right
Si
Si
Si
padding-top
Si
Si
Si
table-layout
Si
Si
Si
border-break
No
No
No
border-image
No
No
No
border-radius
No
No
No
box-shadow
No
No
No
direction
Si
Si
Si
font
Si
Si
Si
font-family
Si
Si
Si
font-size
Si
Si
Si
font-style
Si
Si
Si
font-variant
Si
Si
Si
font-weight
Parcial
Parcial
Si
letter-spacing
Si
Si
Si
line-height
Si
Si
Si
text-align
Si
Si
Si
text-decoration
Si
Si
Si
text-indent
Si
Si
Si
text-transform
Si
Si
Si
unicode-bidi
Si
Si
Si
vertical-align
Si
Si
Si
white-space
Parcial
Parcial
Si
word-spacing
Parcial
Parcial
Si
font-effect
No
No
No
font-emphasize
No
No
No
font-size-adjust
No
No
No
font-smooth
No
No
No
font-stretch
No
No
No
hanging-punctuation
No
No
No
punctuation-trim
No
No
No
ruby-align
Si
Si
Si
ruby-overhang
Si
Si
Si
ruby-position
Si
Si
Si
ruby-span
No
No
No
text-align-last
Parcial
Parcial
Parcial
text-emphasis
No
No
No
text-justify
Si
Si
Si
text-outline
No
No
No
text-overflow
Parcial
Parcial
Parcial
text-shadow
No
No
No
text-wrap
No
No
No
word-break
Parcial
Parcial
Parcial
word-wrap
Si
Si
Si
writing-mode
Si
Si
Si
content
No
No
Si
counter-increment
No
No
Si
counter-reset
No
No
Si
quotes
No
No
Si
bottom
Parcial
Parcial
Si
clip
Si
Si
Si
display
Parcial
Parcial
Si
height
Si
Si
Si
left
Parcial
Parcial
Si
max-height
No
Si
Si
max-width
No
Si
Si
min-height
No
Si
Si
min-width
No
Si
Si
overflow
Parcial
Si
Si
position
Parcial
Si
Si
right
Parcial
Parcial
Si
top
Parcial
Parcial
Si
visibility
Si
Si
Si
width
Si
Si
Si
z-index
Parcial
Parcial
Si
overflow-x
Parcial
Si
Si
overflow-y
Parcial
Si
Si
orphans
No
No
Si
page-break-after
Si
Si
Si
page-break-before
Si
Si
Si
page-break-inside
No
No
Si
widows
No
No
Si
fit
No
No
No
fit-position
No
No
No
image-orientation
No
No
No
page
No
No
No
size
No
No
No
cursor
Si
Si
Si
outline
No
No
Si
outline-color
No
No
Si
outline-style
No
No
Si
outline-width
No
No
Si
appearance
No
No
No
box-sizing
No
No
Si
icon
No
No
No
nav-down
No
No
No
nav-index
No
No
No
nav-left
No
No
No
nav-right
No
No
No
nav-up
No
No
No
outline-offset
No
No
No
outline-radius
No
No
No
resize
No
No
No
column-break-after
No
No
No
column-break-before
No
No
No
column-break-inside
No
No
No
column-count
No
No
No
column-gap
No
No
No
column-rule
No
No
No
columns
No
No
No
Y pensando en las propiedades del futuro CSS3, las que se refieren al manejo del lenguaje, no serán implementadas: voice-volume, voice-balance, speak, pause, pause-after, pause-before, rest, rest-before, rest-after, cue, cue-after, cue-before, mark, mark-before, mark-after, voice-family, voice-rate, voice-pitch, voice-pitch-range, voice-stress, voice-duration, phonemes.
Tampoco las nuevas propiedades para el manejo multimedia: width, height, device-width, device-height, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid.
Ni se permitirá el uso de los siguientes valores: angle, time, frequency, counter(), attr(), calc(), color rgba(r,g,b,a), color hsl(h,s,l), color (hsla(h,s,l,a).
Como se ve, son pocas las diferencias así que, lamentablemente, hasta que todos se pongan de acuerdo, tendremos que seguir sufriendo.
¿Cuál era la dirección URL de esa imagen que usé una vez? Ni siquiera me acuerdo del post donde la había puesto. Recuerdo que una vez escribí algo sobre cierto tema, había enlaces a ciertas páginas pero no las encuentro ¿Suena conocido? es que cualquier blog puede volverse una maraña inmanejable de datos a los que los visitantes sólo acceden por casualidad o con mucha paciencia y a los que nosotros mismos nos resulta complicado desenredar.
Desde hace un par de días, Blogger ha habilitado el buscador interno en la Edición de Entradas para todos los lenguajes.
Sólo colocamos el dato que queremos buscar y click. Nos mostrará la lista de posts donde se encuentra ese texto.
Nacido en el tercer mundo. Un santo varón. Buenos Aires. Los elefantes. Las golondrinas de Plaza de Mayo. Me chupo el dedo.
El tiempo es veloz. ¿No ves que ya no somos chiquitos? Despedida de la infancia. Todo es efímero. Juguetes perdidos. Dime quién me lo robó. Aprendizaje.
Soy un hippie. Rutas argentinas. Sobredosis de TV. Raros peinados nuevos. Más de cien mentiras. Delirium tremens.
Ciudad de pobres corazones. El karma de vivir al sur. Mundo de quimeras. Oh Dios, ¿Qué puedo hacer?
Cuando era más joven. Los mayores del mundo. Botas locas. Rejas electrificadas. Cerca de la revolución. Contra todos los males de este mundo. La casa desaparecida. Tumbas de la gloria. Vencedores vencidos. Carguen, apunten, fuego. Estás frito angelito. A lo mejor aún te acuerdas.
Ah, te vi entre las luces. Muchacha. Amor se llama el juego. Juego de seducción. Mi genio amor. Prométeme que nunca me dirás adiós. Pequeñas delicias de la vida conyugal. Toda la vida tiene música hoy. Es hora de levantare, querido (dormiste bien?).
Resumiendo.
Mi sueño de hoy. La sed verdadera. La búsqueda de la estrella. Todos juntos. ¡Ah! Basta de pensar.
La respuesta es sí y el procedimiento es muy similar al que usamos en Google.
