Blogger informa de errores inexistentes

Me apresuro a publicar esto para evitar dolores de cabeza buscando resolver un problema que no existe o mejor dicho, que no causamos nosotros.

Desde el blog Periplos en red me consultan por un mensaje que aparece en el editor de plantillas cuando se trata de usar VISTA PREVIA o GUARDAR la plantilla.

Afirman que no han hecho cambios y el código que me envían se ve correcto. Al probarlo en mi blog de pruebas, el error se repite. Luego de dar vueltas y vueltas me he dado cuenta que el error es de Blogger porque no hace falta que intentemos modificar algo, basta abrir la plantilla e intentar guardarla o previsualizarla para que el mensaje se muestre, aún cuando no hagamos cambios.

No sé cuan extendido está el error ni si afecta sólo a algunas plantillas, en todas las que probé pasa lo mismo. En Blogger Help Group hablan de un error similar cuando se trata de mover elementos: error bX-ji78k6.

Hasta este momento, no hay información de ningún tipo y el problema es muy serio porque significa que, hasta que no lo resuelvan, las plantillas son inaccesibles.

Puff, hay que terminar con esto de una vez. Las propiedades CSS que permiten controlar los textos parecen infinitos pero esta es la última parte.

La propiedad letter-spacing establece la cantidad de espacio adicional entre los caracteres.

sintaxis en HTML
elemento {letter-spacing: valor;}
por ejemplo: p {letter-spacing: -2px;}

sintaxis en JAVASCRIPT
elemento.style.letterSpacing='valor';
por ejemplo: this.style.letterSpacing='-2px';

Los posibles valores son: normal (el valor por defecto) o una medida expresada como cm, mm, in, pt, pc, px, em o ex.

La propiedad word-spacing es similar a la anterior excepto que establece la cantidad de espacio adicional entre palabras.

sintaxis en HTML
elemento {word-spacing: valor;}
por ejemplo: p {word-spacing: 10px;}

sintaxis en JAVASCRIPT
elemento.style.wordSpacing='valor';
por ejemplo: this.style.wordSpacing='10px';

Y los posibles valores admitidos son los mismos: normal (el valor por defecto) o una medida expresada como cm, mm, in, pt, pc, px, em o ex.

Tanto letter-spacing como word-spacing añaden espacio al espacio por defecto de las fuentes que utilizamos por lo tanto, se pueden usar valores positivos (para aumentarlo) como negativos (para disminuirlo):

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

La propiedad line-heigh establece la distancia entre las "líneas bases" de un texto.

sintaxis en HTML
elemento {line-height: valor;}
por ejemplo: p {line-height: 20px;}

sintaxis en JAVASCRIPT
elemento.style.lineHeight='valor';
por ejemplo: this.style.lineHeight='20px';

Los valores posibles son los mismo que para las otras propiedades: cm, mm, in, pt, pc, px, em o ex o un porcentaje.

Esta propiedad, por ejemplo, nos permite centrar verticalmente los textos dentro de un bloque sin distorsionar la fuente ya que no "alarga" los caracteres sino el espacio que ocupan.

En este ejemplo, el DIV (fondo rojo) tiene una altura de 50 pixeles:

Por defecto, el texto no se centra verticalmente:

Ut wisi enim ad minim veniam.

Intentamos utilizar la propiedad vertical-align pero tampoco funciona:

Ut wisi enim ad minim veniam.

Pero, si añadimos la propiedad line-height con un valor igual a la altura del bloque, todo se resuelve:

Ut wisi enim ad minim veniam.

La propiedad white-space se utiliza para indicar si las líneas de texto se "cortan" o no y cómo deben ser mostrados los espacios en blanco .

sintaxis en HTML
elemento {white-space: valor;}
por ejemplo: p {white-space: nowrap;}

sintaxis en JAVASCRIPT
elemento.style.whiteSpace='valor';
por ejemplo: this.style.whiteSpace='nowrap';

Podemos usar tres valores distintos:

normal si el texto excede el espacio del contenedor, las líneas se cortan automáticamente y el texto continúa en otra línea (es el valor por defecto)
nowrap el texto se escribe en una sola línea.
pre se utiliza para preservar los saltos de línea y los espacios extras

Por defecto, los saltos de línea, los espacios extras (más de uno separando palabras) y las tabulaciones no tienen ningún efecto en una página web. Si escribimos:
dos palabras
veremos:
dos palabras
los espacios extras no se tendrán en cuenta.

Si queremos agregar espacios extras, debemos utilizar un código especial (nonbreaking space entity) y escribir   a menos que establezcamos la propiedad white-space como pre.

En Blogger, si escribimos:

un párrafo



otro párrafo

lo veremos ya que, normalmente, está marcada la opción:

Convertir saltos de línea Sí No
Si se ha seleccionado “Sí”, los retornos forzados únicos introducidos en el “Editor de entradas” se sustituirán por códigos únicos <br /> y los retornos forzados dobles se sustituirán por dos códigos ( <br /><br /> ).

Es una facilidad del editor pero no es lo normal. En una página web, debemos usas la etiqueta <br/> para separar una línea de otra. Incluso en Blogger hay que hacerlo cuando trabajamos con la plantilla o con los elementos de la sidebar.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

En Internet Explorer hay una propiedad especial llamada word-wrap que permite establecer la forma en que se manejan los saltos de línea y tiene dos valores posibles: normal y break-word.

sintaxis en HTML
elemento {word-wrap: valor;}
por ejemplo: p {word-wrap: normal;}

sintaxis en JAVASCRIPT
elemento.style.wordWrap='valor';
por ejemplo: this.style.wordWrap='normal';

color establece el color de los textos.

sintaxis en HTML
elemento {color: valor;}
por ejemplo: p {color: #FF0000;}

sintaxis en JAVASCRIPT
elemento.style.color='valor';
por ejemplo: this.style.color='#FF0000';

Los colores pueden ser escritos on diferentes formatos:

EM { color: red; } /* con su numbre */
EM { color: #F00; } /* #RGB */
EM { color: #FF0000; } /* #RRGGBB */
EM { color: rgb(255,0,0); } /* rgb() */

Otra propiedad exclusiva de Internet Explorer es writing-mode que establece la dirección del texto:

sintaxis en HTML
elemento {writing-mode: valor;}
por ejemplo: div {writing-mode: tb-rl;}

sintaxis en JAVASCRIPT
elemento.style.writingMode='valor';
por ejemplo: this.style.writingMode='tb-rl';

Tiene dos valores posibles:

lr-tb es el valor por defecto, el texto se escribe de manera horizontal de izquierda a derecha y de arriba hacia abajo.
tb-rl el texto se escribe de manera vertical, de arriba hacia abajo y de derecha a izquierda.

Este ejemplo sólo es visible en Internet Explorer (Ver/Ocultar) [+]

Ut wisi enim ad minim veniam

Ut wisi enim ad minim veniam

SUMARIO:

Las propiedades CSS (background)

Las propiedades CSS (border)

Las propiedades CSS (margin, padding y outline)

Las propiedades CSS (textos 1ª parte)

Las propiedades CSS (textos 2ª parte)

Acordeones son esos efectos de los que mucho se ha publicado en los últimos tiempos y que muestran y ocultan bloques de una manera similar a lo que puede hacerse con el efecto Toggle o con el script que simula animaciones pero al que se le agrega un detalle distintivo; dado un grupo de elementos ocultos, al hacer click sobre los botones, no se expanden y contraen de manera independiente sino que todo el grupo cambia, es decir, si despliego uno, el que antes estaba expandido se cierra por lo tanto, el espacio que ocupa todo el conjunto no se modifica.

Difícil de contar en palabras, mejor dos ejemplos:

Mirando aquí y allá, se encuentran varios scripts para crearlos utilizando las librerías de prototype y scritpaculous. El más difundido es Accordion v2.0 pero, personalmente, me ha resultado complicado de aplicar y no hay una buena explicación al respecto. Es, seguramente, el más sofisticado porque permite crear acordeones horizontales y meter unos dentro de otros pero no es el único modelo, hay muchos otros; por ejemplo, en Graphics by Greg describen uno paso a paso e incluyen una página con un ejemplo online; lo mismo puede decirse de otros sitios que disponen de efectos similares para diferentes librerías: Phatfusion, Let me have a blog, Solutoire, PortalZine, moo.fx, DezinerFolio, etc.

Algunos son espectaculares, otros sencillo, algunos tienen problemas en ciertos navegadores, otros son complejos de adaptar a Blogger; personalmente, me quedé con la idea que explican en el mismo sitio de scritpaculous pero simplificándola aún más porque el concepto de un acordeón puede reducirse a esto: hago click en un enlace y, antes de mostrarlo, oculto el anterior así que el script a usar debería ser mínimo y todo lo demás lo ´podríamos resolver con CSS.

Primero que nada necesitamos las librerías que, si no estamos usando, descargamos de su sitio oficial, alojamos en un servidor y luego, las cargamos agregando el siguiente código, justo antes de </head>:

<script src="URL/prototype.js" type="text/javascript">
<script src="URL/scriptaculous.js?load=effects" type='text/javascript">

Y debajo de eso, el script específico que controlará el efecto y un poco de estilo a gusto de cada uno:

<script type="text/javascript">

// los valores iniciales
var cual=0;
var ultimoEnlace='enlacepanel1'; // el botón del panel que está desplegado
var ultimoPanel='panel1'; // el panel que está desplegado

function mostrarPanel(enlace,cual) {

if (enlace==ultimoEnlace)return false; // si ya está desplegado, no hacer nada

// ocultar el panel desplegado y cambiar la clase del enlace
Effect.toggle(ultimoPanel,'blind');
document.getElementById(ultimoEnlace).className='panelOculto'

// desplegar el nuevo panel y cambiar la clase del enlace
document.getElementById(enlace).className='panelVisible'
Effect.toggle(cual,'blind');

// guardar el los nuevos datos del panel desplegado
ultimoEnlace=enlace;
ultimoPanel=cual;

}

</script>

<style type="text/css">
#acordeon { /* es todo el bloque */
width: valorpx; /* el ancho */
/* agregamos propiedades varias */
}

.panelOculto { /* es el botón de los elementos ocultos */
display: block;
width: valorpx; /* el mismo ancho que #acordeon */
height: valorpx; /* la altura del botón */
background: valores;  /* una imagen de fondo, un color */
/* propiedades de las fuentes, márgenes, bordes, etc */
}

.panelVisible { /* es el botón del elemento visible */
display: block;
width: valorpx; /* el mismo ancho que #acordeon */
height: valorpx; /* la altura del botón */
background: valores;  /* otra imagen de fondo, otro color */
/* propiedades de las fuentes, márgenes, bordes, etc */
}

#panel1, #panel2, #panel3, #panel4 { /* enumeramos los botones */
width: 100%; /* el ancho que uno quiera */
height: valorpx; /* si queremos que la altura no sea fija, eliminamos esto */
overflow: hidden;
}

.panelContenido { /* lo que hay dentro de cada panel */
margin: 0;
padding: 0;
height: valorpx; /* si queremos que la altura no sea fija, eliminamos esto */
}
</style>

Ahora hay que explicar un poco y ver cómo lo usamos.

Vamos a crear un acordeón con cuatro botones que serán enlaces y que tendrán cualquier diseño o serán imágenes. Al hacer click en ellos se desplegará un sector con cierto contenido y se cerrará el que esté abierto. El primer enlace, por defecto estará abierto. Todos los "botones cerrados" tendrán un diseño gráfico común y el "botón abierto" un diseño gráfico diferente.

En este ejemplo, el primer botón se llamará enlacepanel1 y los demás enlacepanel2, enlacepanel3 y enlacepanel4. Los botones cerrados tendrá una clase CSS llamada y el abierto, una clase llamada panelOcultopanelVisible.

El contenido de cada uno estará dentro de DIVS que se llamarán panel1, panel2, panel3 y panel4 respectivamente y tendrán una clase CSS común llamada panelContenido.

El HTML a utilizar sería este:

<div id="acordeon">

<div><!-- el primer panel -->
<a class="panelVisible" id="enlacepanel1" href="javascript:void(0);" 
onClick="mostrarPanel('enlacepanel1','panel1'); return false;">
EL TEXTO DEL BOTON 1
</a>
<div id="panel1" style="margin: 0;padding: 0 0 5px 0;">
<div class="panelContenido">... el contenido ...</div>
</div>
</div>

<div><!-- el segundo panel -->
<a class="panelOculto" id="enlacepanel2" href="javascript:void(0);"
onClick="mostrarPanel('enlacepanel2','panel2'); return false">
EL TEXTO DEL BOTON 2
</a>
<div id="panel2" style="display:none;margin: 0;padding: 0 0 5px 0;">
<div class="panelContenido">... el contenido ...</div>
</div>
</div>

<!--
los otros paneles tendrán un código similar
sólo cambiaremos los nombres y los contenidos de cada uno
-->

</div>

Por los comentarios y sobre todo, por algunos mails que he recibido, parece que el tema de Evaluar cómo nos indexa Google ha causado algunas decepciones o confusiones.

No creo poder dar explicaciones técnicas al respecto pero, por lo menos intentaré mostrar un resumen de la información disponible y, más que nada, pensar en voz alta a ver si puede sacarse alguna conclusión razonable.

Primero que nada, un problema de simple aritmética. En el post se dice:

Con Indexrank podemos saber cuál es la cantidad de páginas de un sito que han sido indexadas por Google a lo largo del tiempo ... el ranking final varía del 1 (mejor resultado) a 10 (peor resultado) ...

En muchos sentidos, esto es similar al PageRank que simplifica billones de páginas o sitios web y los "divide" en diez partes. Pero, desde la lógica, la distancia o rango entre los extremos de esa división es tan monstruosamente alto que parece irracional que un número entre 1 y 10 signifique algo.

Veamos. Para saber la cantidad de páginas indexadas por Google basta ir al buscador y escribir site:URL sin el prefijo http:// y, eventualmente, sin www. Haciendo esto, en tres sitios que imagino importantes aparecen estos resultados:

site:microsoft.com 31.100.000 de páginas indexadas
site:google.com 17.500.000 de páginas indexadas
site:yahoo.com 295.000.000 de páginas indexadas

Cualquier otro blog conocido que coloque da resultados que varían entre 200 y 4.000 páginas indexadas.

Entre 200/4000 y 295.000.000 la distancia es astronómica. Si Yahoo tuviera un ranking de 1 y nosotros de 10 podríamos aplaudir y hacer una fiesta; sólo nos separarían nueve escalones. El problema es que esos escalones tienen diferentes alturas y algunos son tan altos como el Everest.

Pero eso no es todo. El valor del "ranking" es absurdo. Esta es una captura de pantalla tomada hace unos minutos:

¡Este blog tiene el mismo ranking que Google!.

Alguien está consumiendo lo que no debe.

¿Y entonces para que nos sirve la herramienta? Es una forma de simplificar la búsqueda que podemos hacer desde el mismo Google y comparar promedios con otros sitios y con muestra propia indexación a lo largo del tiempo.

Aquí viene el segundo punto, la cantidad de páginas indexadas parece "baja" comparada con otros sitios ¿por qué?

Los robots que usa Google son llamados Googlebots, lo que hacen es recorrer la web y cuando encuentran una página, la guardan en el índice. En realidad, son computadoras que funcionan como los navegadores, hacen un pedido a un servidor, descargan la página y la guardan. Claro que miles de veces más rápido y de manera discreta, para evitar saturar los servidores ¿Y cómo encuentran esas páginas? Por un lado, porque nosotros les decimos que lo hagan agregando nuestra URL en www.google.com/addurl.html o porque tenemos marcada la opción SI de la Configuración Básica de Blogger:

¿Deseas añadir tu blog a nuestras listas? Sí No

o en Opciones Privacidad de WodPress:

Blog visibility: I would like my blog to be visible to everyone, including search engines (like Google, Sphere, Technorati) and archivers

Imagino que en cualquier otro servicio habrá opciones similares.

Pero, también lo hacen siguiendo los enlaces de cada página, tomando nota de ellos y agregándolos a su lista.

Para mantener ese índice actualizado, Google revisa las páginas y si evalua que sufren cambios constantes, las marca para "visitarlas" más seguido. Esto, en los servicios de blogs carece de importancia porque es el mismo servicio el que envía ese aviso cada vez que publicamos algo. Pero, allí no termina el trabajo.

Los Googlebots guardan el contenido de las páginas como textos y las desmenuzan hasta convertirlas en una lista de palabras ordenadas alfabéticamente lo que permite que encontremos términos específicos cuando buscamos algo. Y, por supuesto, pasa por alto ciertas palabras de uso común (stop words) así como dígitos, caracteres sueltos, dobles espacios, signos de puntuación y para evitar conflictos, convierte todo a minúsculas.

Cuando se habla de páginas indexadas no estamos hablando de enlaces sino de cuántas páginas dispone nuestro blog. En Blogger, siempre que usemos varios sitemaps, es aproximadamente igual a la suma de posts más la cantidad de meses que tengamos online sin importar si usamos blogspot o tenemos un dominio propio:

site:gemablog-.blogspot.com 414 páginas indexadas
site:spamloco.net 806 páginas indexadas

Otros servicios como WordPress tienen una indexación más eficiente porque se pueden crear páginas individuales, las páginas de archivos y las de categorías se indexan una por una, etc, etc.

El resultado final es sustancialmente distinto:

site:zonafirefox.net 3300 páginas indexadas
site:cosassencillas.com 2030 páginas indexadas

En mi caso particular, como conozco los datos, puedo compararlos con exactitud ya que uso ambos servicios.

site:vagabundia.blogspot.com
1530 páginas indexadas - 1.439 entradas - online desde el 30 de agosto del 2006

1250 páginas indexadas - 637 entradas - online desde el 10 de febrero del 2007

¿Se nota la diferencia?

Por último, algunos mitos:

• Google sólo indexa sitios que tengan colocado el código de Google Analytics: FALSO
• Google sólo indexa sitios que usen Google AdWords: FALSO
• Google sólo indexa sitios que usen Google AdSense: FALSO
• Google sólo indexa páginas si se utiliza el atributo nofollow: FALSO
• Google indexa páginas que no están en el sitemap: ES POSIBLE
• Google indexa páginas que no tienen enlaces de otros sitios: CIERTO
• Google indexa páginas visitadas a través de Google Toolbar: CIERTO
• Google indexa mejor los sitios que usan sitemaps: CIERTO

REFERENCIAS:

Google Guide

seomoz.org

Inevitable y algo previsible.

DivX, a sólo un año de su creación, anuncia el cierre de su servicio Stage6 a partir del 28 de febrero ... o sea, ya mismo.

Quienes lo hayan estado utilizando, habrán notado que las funciones de upload están deshabilitadas aunque los videos aún pueden ser vistos o descargados hasta mañana inclusive.

Las explicaciones son pocas pero, básicamente, pueden resumirse en problemas monetarios. La pregunta obvia es ¿los empresarios que lanzan este tipo de sitios no evaluan estas cosas antes? Dicen: "el manejo operativo de Stage6 es muy costoso y requiere una enorme atención y grandes recursos". Chocolate por la noticia, cualquiera, sin conocimientos se los hubiera dicho con sólo razonarlo cinco minutos.

Ahora, los usuarios se desayunarán con la noticia y como siempre, los consumidores serán consumidos.

Los textos y los párrafos tienen demasiadas propiedades como par ser listadas todas juntas así que aquí va un segundo grupo.

La propiedad text-align establece la alineación y sólo se aplica a elementos de bloque (P, DIV, Hx, etc.) y es similar al atributo ALIGN de las etiquetas.

sintaxis en HTML
elemento {text-align: valor;}
por ejemplo: p {text-align: center;}

sintaxis en JAVASCRIPT
elemento.style.textAlign='valor';
por ejemplo: this.style.textAlign='center';

Los posibles valores son: left (el valor por defecto), right, center y justify.

En Internet Explorer hay algunas propiedades exclusivas que afectan el alineamiento:

text-justify permite definir el tipo de alineamiento cuando lo definimos como justificado:
elemento {text-justify : valor;}
elemento.style.textJustify='valor';

Los posibles valores son auto (es el valor por defecto), distribute, distribute-all-lines, distribute-center-last, inter-cluster, inter-ideograph, inter-word, kashida, newspaper.

En este ejemplo, al pasar el mouse encima del párrafo se cambiará el tipo de justificación de auto a distribute-all-lines pero sólo será visible en Internet Explorer (Ver/Ocultar) [+]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

text-align-last establece el alineamiento de la última línea de un párrafo:
elemento {text-align-last : valor;}
elemento.style.textAlignLast(n)='valor';

Los posibles valores son auto (es el valor por defecto), center, justify, left o right.

En este ejemplo, al pasar el mouse encima del párrafo se cambiará el tipo de justificación de auto a distribute-all-lines pero sólo será visible en Internet Explorer (Ver/Ocultar) [+]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

La propiedad text-decoration establece la "decoración" de un texto.

sintaxis en HTML
elemento {text-decoration: valor;}
por ejemplo: p {text-decoration: underline;}

sintaxis en JAVASCRIPT
elemento.style.textDecoration='valor';
por ejemplo: this.style.textDecoration='underline';

Los valores admitidos son:

none es el valor por defecto de los textos normales
underline subraya un texto y es el valor por defecto de los textos que tengan el atributo HREF
overline subraya el texto pero "sobre" la palabra
line-through tacha un texto con una línea y es el valor por defecto de las etiquetas STRIKE, y DEL
blink hace que el texto parpadee pero no está implementada en Internet Explorer ni en Opera

la propiedad underline la propiedad overline
la propiedad line-through la propiedad blink

En Internet Explorer pueden usarse propiedades específicas para cada uno de ellos, estableciendo el valor true o false:

this.style.textDecorationNone='true | false';
this.style.textDecorationUnderline='true | false';
this.style.textDecorationOverline='true | false';
this.style.textDecorationLineThrough='true | false';
this.style.textDecorationBlink='true | false';

Además, Internet Explorer tiene una propiedad exclusiva que determina si en un texto subrayado, esa línea se muestra arriba o abajo de los caracteres:
elemento {text-underline-position : valor;}
elemento.style.textUnderlinePosition='valor';

Los posibles valores son auto (es el valor por defecto), above, below o auto-pos.

Este es un ejemplo sólo visible en Internet Explorer (Ver/Ocultar) [+]

Un texto horizontal con la propiedad text-decoration:underline normal Lorem ipsum dolor sit amet.	El mismo texto agregando la propiedad text-underline-position:above Lorem ipsum dolor sit amet.
Un texto vertical con la propiedad text-decoration:underline normal Lorem ipsum consectetuer adipiscing	El mismo texto agregando la propiedad text-underline-position:above Lorem ipsum consectetuer adipiscing

La propiedad text-indent establece la sangría de la primera línea de un texto dentro de un elemento.

sintaxis en HTML
elemento {text-indent: valor;}
por ejemplo: p {text-indent: 50px;}

sintaxis en JAVASCRIPT
elemento.style.textIndent='valor';
por ejemplo: this.style.textIndent='50px';

Los valores que podemos utilizar son similares a los que usamos para los márgenes: cm, mm, in, pt, pc, px, em o ex o un porcentaje.

STYLE="text-indent:0px;"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

STYLE="text-indent:30px;"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

STYLE="text-indent:100px;"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

La propiedad text-transform establece la forma en que se verá un texto.

sintaxis en HTML
elemento {text-transform: valor;}
por ejemplo: p {text-transform: uppercase;}

sintaxis en JAVASCRIPT
elemento.style.textTransform='valor';
por ejemplo: this.style.textTransform='uppercase';

none que el valor por defecto
capitalize la primera letra de cada palabra se transforma en mayúscula
uppercase todas los caracteres se transforman en mayúsculas
lowercase todas los caracteres se transforman en minúsculas

La propiedad text-shadow crea una sombra en el texto pero, si bien está admitida por la W3C, sólo está implementado en los navegadores Safari.

Otra propiedades exclusiva de Internet Explorer es text-overflow establece la forma en que se verá un texto si este sobrepasa el bloque que lo contiene:
elemento {text-overflow : valor;}
elemento.style.textOverflow='valor';

Los posibles valores son clip que simplemente corta el texto (es el valor por defecto) o ellipsis que muestra los caracteres ... al final del texto para indicar que este continúa. Ver/Ocultar ejemplo [+]

STYLE ="text-overflow: ellipsis; overflow: visible"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

STYLE ="text-overflow: clip; overflow: hidden"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

STYLE ="text-overflow: ellipsis; overflow: hidden"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

SUMARIO:

Las propiedades CSS (background)

Las propiedades CSS (border)

Las propiedades CSS (margin, padding y outline)

Las propiedades CSS (textos 1ª parte)

Con Link Diagnosis podemos verificar online los enlaces a nuestro sitio. Sólo debemos ingresar la URL y esperar aunque, para ver los datos completos, deberemos instalar una extensión para Firefox que nos mostrará una serie de datos adicionales tales como el PageRank de cada enlace, verificar si contienen el atributo no-follow, listar los más populares, exportar todo en formato CSV, etc.

Paciencia ... tarda bastante.

REFERENCIAS:

MicroZulo

“¿Por qué son malas las palabras? ¿Les pegan a las otras? ¿Son malas porque son de mala calidad? ¿Tienen actitudes reñidas con la moral?”

En su momento, busqué este "discurso" y no encontré el video, ahora, ya está en YouTube y no tiene desperdicio. Para quien no lo conozca, se trata de la ponencia del escritor, dibujante y humorista rosarino en el III Congreso Internacional de la Lengua Española, llevado a cabo en noviembre de 2004 en Rosario, provincia de Santa Fe, Argentina.

“La humanidad es palabra, desde el Génesis y Aristóteles, palabra articulada, y ésa es la base de nuestra civilización” (Juan Luis Cebrián)

¿Qué cosas pueden hacerse con los videos de YouTube ... aparte de mirarlos?

• Descargarlos a nuestra PC en formato FLV con KeepVid, VideoDownloader, VideoDL o GooTube.
• Descargarlos ya convertidos en algún otro formato (avi, mov, mp4) con vixy.net (gracias, Nico)
• Extraer y descarar el audio en formato MP3 con vixy.net o flvix
• Insertar metadata adicional con FLV Meta Data Injector
• Reproducir videos FLV en Windows con FLV Player o Riva
• Utilizar sólo una parte, cortándolo con FLV Parser
• Convertir los archivos FLV en otros formatos en nuestra PC usando Simplified Universal Player Encoder & Renderer o Riva FLV Encoder
• Crear o editar archivos FLV sin tener Adobe Premiere, Final Cut Pro o Macromedia Flash utilizando Windows Movie Maker y los diferentes conversores de formato.
• Leer 10 Interesting Things You Can Do with YouTube or Google Videos en Digital Inpiration

Con Indexrank podemos saber cuál es la cantidad de páginas de un sito que han sido indexadas por Google a lo largo del tiempo. Ingresamos las direcciones URL y esperamos el resultado.

El ranking final varía del 1 (mejor resultado) a 10 (peor resultado) y se calcula usando una opción especial de Google que permite mostrar contenido indexado por fechas.

Si bien ese valor final no tiene ningún significado para nosotros los blips ya que es más o menos lo mismo 100 que 10000; nos puede servir para analizar si nuestro sitio está siendo indexado correctamente.

Hay estadísticas para todos los gustos. En Google Blogoscoped aparece la lista de las búsquedas más usuales que intentan encontrar respuesta a una pregunta que todos hemos hecho alguna vez: Perdí tal cosa ¿qué puedo hacer?

¿Quién no ha borrado algo que no debía? Confieso que en un rapto de estupidez, eliminé completamente la carpeta Mis Documentos ... COMPLETAMENTE significa que ni siquiera estaba en la Papelera. Sí, soy atolondrado ... el resto de los calificativos no me atrevo a escribirlos.

Vergüenzas aparte, la lista "I lost all my" me reconforta.

¿Qué es lo que perdemos habitualmente y le pedimos a Google que nos ayude a encontrarlo?

• todos los archivos
• los feeds de Google Homepage
• las estadisticas del sitio
• todo la música que almacenaba en la PC
• los mails de Yahoo o la lista de contactos

Las siguientes en la lista son un poco menos técnicos:

• dinero
• la carrera
• la fe, el corazón, el apetito
• todo el trabajo realizado
• la virginidad

En la mayoría de los casos, la pérdida es irreversible pero, siempre hay buena gente que, en lugar de buscar algo, ha encontrado algo y pregunta qué puede hacer para devolverlo ¿Y que han encontrado? ¿Qué resultados son los más repetidos con "I found":

• un pato
• alguien llamado Elmer
• un pajarito
• el paraiso
• un maní
• Diós
• basura
• tú

La etiqueta BASE es uno de esos códigos HTML que nunca tenemos en cuenta. Suena demasiado complicado y su definición parece oscura:

<base target="content" />

Establece el destino por defecto de los enlaces de una página web, fundamentalmente, cuando se utilizan frames.

Por otro lado, sabemos que agregando el atributo target="_blank" a cualquier enlace, se fuerza a que este se abra en una nueva ventana o en una nueva pestaña:

<a href="direccion_URL" target="_blank"> ENLACE </a>

Si quisiéramos que TODOS los enlaces de una página se abrieran en una nueva ventana pero no queremos agregar el atributo a cada uno de ellos, podemos establecer el valor de BASE para que lo haga.

Inmediatamente después de <head>, agregamos:

<base target="_blank" />

Mucha prudencia, esto afecta a TODOS los enlaces, incluyendo aquellos que utilizan JavaScript así que, su uso es bastante limitado.

Las propiedades que nos permiten personalizar los textos de una página web son muchas, algunas las usamos habitualmente pero hay otras que son bastante desconocidas.

Para empezar, hay una propiedad genérica que ayuda a definir varias propiedades de manera simultánea. La propiedad font es una forma reducida de establecer font-style, font-variant, font-weight, font-size, line-height y font-family.

sintaxis en HTML
elemento {font: valores;}
por ejemplo: div {font: italic small-caps bold 12pt serif;}

sintaxis en JAVASCRIPT
elemento.style.font='valores';
por ejemplo: this.style.font='italic small-caps bold 12pt serif';

Donde cada valor se separa del otro mediante un espacio.

Por defecto, su valor es: normal normal normal medium normal "Times New Roman" y es una propiedad que se "hereda", es decir, si un elemento contiene a otro, el contenido tendrá las mismas propiedades que el contenedor.

Veamos una por una.

La propiedad font-family establece el nombre de la fuente de los textos.

sintaxis en HTML
elemento {font-family: valor;}
por ejemplo: div {font-familiy: arial, sans-serif;}

sintaxis en JAVASCRIPT
elemento.style.fontFamily='valor';
por ejemplo: this.style.fontFamily='arial, sans-serif';

Una "familia" es un grupo de fuentes de características similares. Cada "miembro" de la familia puede ser cursiva, negrita, condensada, etc. Las familias de fuentes pueden ser agrupadas en categorías: con o sin serif, con o sin caracteres espaciados proporcionalmente, etc.

Cualquier nombre de una fuente válida es aceptado; por ejemplo:
Times, Helvetica, Zapf-Chancery, Western, Courier

También pueden usarse nombres genéricos:
serif, sans-serif, cursive, fantasy o monospace

El valor puede ser también una lista separada por comas y para evitar confusiones, los nombres que tienen varias palabras se deben escribir entre comillas. Las listas se utilizan porque no podemos saber cuáles son las fuentes instaladas en el navegador de quien va a mirar la página y por eso, establecemos alternativas; si se encuentra la primera, se mostrará esa, sino, la segunda y así sucesivamente siendo lo más prudente, terminar con un nombre genérico.

La propiedad font-size establece el tamaño de la fuente de texto.

sintaxis en HTML
elemento {font-size: valor;}
por ejemplo: div {font-size: 12px;}

sintaxis en JAVASCRIPT
elemento.style.fontSize='valor';
por ejemplo: this.style.fontSize='12px';

Los valores que podemos utilizar son muy variados; pueden ser: xx-small, x-small, small, medium, large, x-large, xx-large. También se puede utilizar smaller o larger para indicar una fuente de un tamaño inmediatamente menor o inmediatamente mayor.

Lo más común es utilizar unidades fijas o proporcionales: cm, mm, in, pt, pc, px, em o ex o un porcentaje.

La propiedad font-style establece el estilo de la fuente.

sintaxis en HTML
elemento {font-style: valor;}
por ejemplo: div {font-style: italic;}

sintaxis en JAVASCRIPT
elemento.style.fontStyle='valor';
por ejemplo: this.style.fontStyle='italic';

Los valores posibles son: normal, italic u oblique.

La itálica es la versión cursiva del tipo normal. La oblicua es una versión inclinada del tipo normal y comúnmente se usa con las sans-serif.

La propiedad font-variant establece si la fuente se muestra en modo mayúsculas pequeñas. Es decir, todos los caracteres se convierten en mayúsculas pero el tamaño es menor que el tamaño de la fuente normal.

sintaxis en HTML
elemento {font-variant: valor;}
por ejemplo: div {font-variant: small-caps;}

sintaxis en JAVASCRIPT
elemento.style.fontVariant='valor';
por ejemplo: this.style.fontVariant='small-caps';

Los valores posibles son: normal o small-caps.

La propiedad font-weight establece el grosor de las fuentes.

sintaxis en HTML
elemento {font-weight: valor;}
por ejemplo: div {font-weight: 900;}

sintaxis en JAVASCRIPT
elemento.style.fontWeight='valor';
por ejemplo: this.style.fontWeight='900';

Los valores posibles son: normal , lighter, bold y bolder. También pueden usarse algunos valores numéricos: 100, 200, 300, 400, 500, 600, 700, 800 y 900 donde 400 equivale a normal y 700 a bold.

Las variaciones dependen del tipo de fuente y muchas veces es difícil notar las diferencias.

Las dos propiedades que faltan son bastante desconocidas.

La propiedad font-size-adjust también establece el tamaño de la fuente; en realidad, el tamaño y la legibilidad de una fuente depende menos del valor dado a font-size que de la proporción entre su ancho y su alto. Esa relación (tamaño de la fuente dividido por la altura de la letra x), es llamada x-height. Cuanto más grande sea ese valor menos legible será la fuente si se trata de fuentes pequeñas.

sintaxis en HTML
elemento {font-size-adjust: valor;}
por ejemplo: div {font-size-adjust: 0.8;}

sintaxis en JAVASCRIPT
elemento.style.fontSizeAdjust='valor';
por ejemplo: this.style.fontSizeAdjust='0.8';

Los valores posibles son: none o un número que especifica esa relación.

Esta imagen muestra varias tipografías en un mismo tamaño de fuente (11pt. a 72 ppi), junto con sus valores de relación

Esta otra imagen muesta el resultado de font-size-adjust

La propiedad font-stretch permite condensar o estrechar una fuente; selecciona un tipo normal, condensado o expandido de una familia de fuentes.

sintaxis en HTML
elemento {font-stretch: valor;}
por ejemplo: div {font-stretch: ultra-expanded;}

sintaxis en JAVASCRIPT
elemento.style.fontStretch='valor';
por ejemplo: this.style.fontStretch='ultra-expanded';

Los valores posibles son: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded o ultra-expanded donde ultra-condensed es más estrecho y ultra-expanded es el más ancho.

También pueden usarse las palabras clave wider o narrower. wider modifica el valor al siguiente más expandido mientras que narrower lo hace al siguiente más condensado.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

MÁS INFORMACIÓN:

Las fuentes de los textos en Blogger

CSS y los textos (Parte 1)

SUMARIO:

Las propiedades CSS (background)

Las propiedades CSS (border)

Las propiedades CSS (margin, padding y outline)

PdfMeNot.com es un sitio que ofrece una serie de herramientas para insertar archivos PDF en una página web. He estado jugueteando con las diferentes opciones y ha resultado sencillo y bastante rápido.

Desde la página inicia, podemos elegir entre ingresar la URL de un archivo que esté en la web o subir algún archivo desde nuestra PC. Pasados unos segundos, los convierte en un archivo SWF y nos lo muestra. Además, nos da dos códigos, un enlace directo al visor y un script que podemos insertar en nuestro blog.

Aquí hay dos ejemplos:

Este es un archivo en formato PDF alojado en un sitio web y este es el enlace generado que nos permite acceder al archivo convertido

Este es otro PDF subido desde mi PC y convertido online

Hay varias herramientas disponibles:

PdfMeNot Bookmarklet se agrega el enlace a los marcadores o favoritos. Cuando estamos en una página con vínculos a archivos PDF, simplemente hacemos click en ese marcador y todos los enlaces serán convertidos automáticamente.

PdfMeNot 0.1.2 es una extensión para Firefox que reconoce los enlaces a PDFs y los convierte en segundo plano, agregando un ícono junto ca da uno de ellos para que podamos abrirlos en otra pestaña.

También podemos crear enlaces directos a archivos PDF agregando el servicio a la URL. Por ejemplo, si el documento está en:
http://test.com/document.pdf
escribimos:
http://pdfmenot.com/view/http://test.com/document.pdf

En Blogger, podemos convertir automáticamente cualquier PDF que enlacemos, agregando un script en el encabezando de nuestra plantilla:

<script type="text/javascript" src="http://pdfmenot.com/convert.js"></script>

O incrustar archivos PDFs individuales con este otro script:

<script type="text/javascript" src="http://pdfmenot.com/embed/?
  url=http://archivo.pdf&width=600&height=450"></script>

En Google siempre están preocupados por "limpiar" sus bases de datos para eliminar enlaces falsos o redundantes y así, mejorar la calidad de los resultados que nos muestran. Ahora, han "inventado" una meta-etiqueta que apunta a depurar el buscador de imágenes y que, de alguna manera, contesta a quienes me preguntaban cómo evitar la indexación de las imágenes de sus blogs.

Si no queremos que las imágenes incluidas en nuestro sitio aparezcan en el buscador, debemos agregar lo siguiente en el head de la plantilla, junto con las otras etiquetas META:

<meta name="robots" content="noimageindex" />

o bien:

<meta name="googlebot" content="noimageindex" />

Hay que aclarar que si otro sitio tiene un enlace directo a nuestra imagen, la etiqueta será inútil y que, en ese caso, si usamos Blogger, no podremos impedirlo.

La solución es parcial pero es mejor que nada. En todo caso, la pregunta que queda flotando es ¿por qué quiero evitar que las imágenes aparezcan en el buscador?

REFERENCIAS:

Webmaster Help Center

Blogger Buzz, es el sitio oficial de Blogger. Siempre es un poco exagerado, cada dos por tres dicen:

We are excited to announce that Blogger ...

y ahí nos informan de alguna tontera que se les ha ocurrido y que generalmente, o no funciona o hace que algo que antes funcionaba, deje de funcionar.

En uno de sus últimos mismo artículo hablan de un número de actualizaciones realizadas durante febrero:

• Nuevos idiomas: Kannada, Malayo, Tamil, Telugu e Hindi.
• Los posts con más de 200 comentarios se ven muestran paginados.
• Textual: Layouts blogs now have a “Layouts” tab instead of “Template.” ¿? ¿cambiaron el nombre de la solapa?
• Mejoras en la traducción al idioma persa.
• Soporte para edición en los navegadores Safari 3.
• Soporte para formato internacional en la selección de fechas.

Bueno, también dicen que se ha acelerado el tiempo de carga del editor de posts y que se ha soluciona el error en el cálculo incorrecto de etiquetas.

Maravilloso.

En Known Issues donde se muestran y pueden reportarse problemas, la lista es ... larga:

• El ajuste de imágenes en el header sólo funciona si la imagen es nueva, si ya estaba, hay que volver a subirla.
• El botón para verificar ortografía (Check Spelling) no funciona.
• Un blog marcado como privado y con contenido adulto puede ser inaccesible aún para sus autores.
• El boton "Crear un enlace" (backlinks) está perdido ... ¿se habrá ido a pasear con el lapicito?
• La vista previa en la opción Fuentes y Colores puede mostrar los posts y la sidebar encimados.
• Algunos mails notificando la inclusión de comentarios no son enviados.
• ... siguen
• ... y siguen

Algunos otros errores son inexplicables, aparecen y desaparecen ... ya van ... no sé, perdí la cuenta.

Ni ellos se libran de sus propios maleficios.

Aunque no sirve de mucho, si queremos tener algo más de información, Blogger dispone de una página especial: Blogger Error Codes (Database of messages for Blogger error codes) ... patética, pero existe.

Un poco más útil es consultar Blogger Help Group pero siempre conviene usar el sentido común porque las respuestas pueden ser bien intencionadas pero a veces, son erróneas.