sábado, 6 de septiembre de 2008

Posicionamiento en los buscadores.

Bueno, voy a dejar el script de formatear el texto, y otro que tengo preparado para centrar los contenidos para cuando por fin termine de arreglar el ordenador con el que hago estas pijaditas, y comentar los resultados de aplicar un consejo que leí en el "Manual SEO para novatos" de Antonio Velo".
Mirando las estadísticas de los buscadores en http://www.histats.com/ y
Herramientas para webmasters vi que la gente buscaba mucho "palabras terminadas en bundo". Probé a meter "palabras" en la descripción de mi blog, e introducir terminar, acabar y sinónimos al principio de los posts.
Por arte de magia mis posts aparecen situados entre los 20 primeros cuando la gente busca eso. Tampoco creo que me vaya a hacer famoso, ni es mi intención, pero os puede servir de ayuda el leer los truquillos del manual de seo para iros posicionando si quereis visitas a vuestros blogs.
Ojo, no conviene mentir ni meter palabras famosas a saco, en la descripción, la introducción de los términos populares se debería corresponder siempre al contenido del blog. De lo contrario puedes aparecer en listas de spammers.

domingo, 15 de junio de 2008

Los estilos y temporizadores

Visitando el blog de tirando de blog para ver cositas que se pueden hacer en mi blog me encontré con este script.

Permite que puedas contar la fecha de tu blog, de hecho, "Date.parse(todaystring)" lo que hace es devolverte los milisegundos transcurridos desde la fecha todaystring. Empecé entonces a pensar en los temporizadores y esas cosas recordando que también quiero cambiar los colores y fuentes de algunas partes del blog. Mhh ¿Y si cambiara la frase de bienvenida según el día? Los Lunes son siempre grises, haga el tiempo que haga, los domingos los asocio al rojo por el calendario. También hay frases más brillantes que otras, a una cita de shakespeare le queda mejor una courier o una romana que una helvética. El negro es muy serio para la frase de los ilegales, si pongo una cita de shin-chan debería ser estridente y parpadeante... ¿Se puede hacer algo así? Sip, los estilos a nuestra ayuda.

Los estilos, CSS para los amigos, nos permiten formatear el texto respecto a una serie de parámetros que le asociemos a cada elemento de la página mostrada, aunque el w3c quiere descartarlos para que el XML ocupe su lugar, la comunidad no parece muy dispuesta al cambio, así que supongo que podremos usarlos sin riesgo. Por otro lado, cada software de blog parece tener su propia hohja de estilos y hacer un script para cada uno sería demasiado trabajo para alguien como yo, así que se me ocurrió otra cosa, añadir mi propio estilo en en texto que quiero modificar y así poder actuar sobre el sin interferencias.

En el script anterior, si os fijais coloco dos modificadores a la etiqueta "a" (ancla), "id" que me permite identificarla y "style" donde le especifico que características va a tener el texto mostrado. Vamos a jugar con eso con las variables de fechas y con una cosa que se llama temporizador para hacer efectos raros en nuestos textos. Lo recomendable sería definir una hoja de estilo, pero para nuestro caso es más fácil hacerlo a lo bestia.


Primero vamos a definir en una etiqueta su identificador y sus estilos, usaré la etiqueta p (párrafo) aunque también vale la div (que suelo usar para hacer recuadros flotantes). Recordad que siempre hay que cerrar una etiqueta. Los estilos se separan con punto y coma. Los estilos se definen con nombre:valor siendo el nombre uno de los estilos válidos y su valor el le queramos dar correspondiente a que estilo sea (en el w3c está mas completo pero mas embarullado):
<p id="etiquetadecolores" style="background-color: #00CC00; color: #FF0000; font-weight:bold; font-size: 150%; font-family: 'Times New Roman';font-style: italic;font-variant: small-caps;text-align: center;letter-spacing: 0.5em;word-spacing: 0.5em;">Este es un texto de prueba</p>
Que se vería asin de fonito.

Loren Ipsum y lo que siga con el velóz murciélago hindú o la rauda Iguana papagayo que come Ranas Marcianas en la cresta de una ola de erotismo que nos invade la Zozobra a babor resopla la Ballena Blanca paloma de la paz de espíritu de lucha de clases de Bachillerato era donde te enseñaban unos tobillos Finísimos era lo que se decía de los lenguados se están agotando la paciencia es la madre de la ciencia gaya que es del amor por uno mismo que la otra Vez



!!!MIS OJOS!!! X-C ARRGH, HE CREADO UN MONSTRUOOOO =8-0, DUELEEEEeeee

No se puede dejar una criatura como esa sin control, para eso me he vuelto mico creando la tabla de al lado, si pinchais sobre sus eldad podreis domar ese estilo hasta que deje de haceros llorar los ojos. ¿Como lo hice, pues fácil, lo primero fue hacerse una función de JavaScript a la que poder pedir que cambiara el estilo. Está pensada para llamarla de dos formas, si sólo quieres cambiar una propiedad, la llamas escribiendo la propiedad que quieres cambiar, y a continuación el valor que quieres asignarle (que está dentro de una tabla), si quieres cambiarlo todo, pones en blanco el parámetro quecambiar y luego los indices a las tablas de propiedades.
Livínbride :: Equivalencias en javascript de las propiedades CSS
Si mirais el código de la tabla vereis que estilos he aplicado en cada celda.


<script type='text/javascript'>
CambiaEstilos("etiquetadecolores",0,0)
</script>
Asignaría el valor 1 (blanco) a el color de fondo en la etiqueta con id="etiquetadecolores".
<script type='text/javascript'>
CambiaEstilos('etiquetadecolores','todas',9,12,5,1,3,4,5,12,2)"
</script>
Cambiaría todos los valores, cada parámetro numérico se corresponde en orden con el de las indicados a continuación, su resultado se ve en la tabla aneja según orden de izquierda a derecha.
<script type='text/javascript'>
CambiaEstilos('etiquetadecolores',1,'aleatorio')
</script>
Cambia el color de la fuente al azar.
<script type='text/javascript'>
CambiaEstilos('etiquetadecolores','aleatorio')
</script>
Cambia el estilo de la fuente al azar.


Los valores posibles son:

Color de fondo = 0 , 12 posibilidades
Color de fuente = 1 , 12 posibilidades
Tamaño de fuente = 2 , 12 posibilidades
Estilo de fuente = 3 , 4 posibilidades
Tipo de fuente = 4 , 12 posibilidades
Espacio entre letras = 5 , 12 posibilidades
Espacio enrtre palabras = 6 , 12 posibilidades
Grosor de fuente = 7 , 12 posibilidades
Variante de fuente = 8 , 2 posibilidades


<script type="text/javascript">
function CambiaEstilos(identificador,quecambiar,Pestilo1,Pestilo2,Pestilo3,Pestilo4,Pestilo5,Pestilo6,Pestilo7,Pestilo8,Pestilo9)
{
propiedades=new Array()
propiedades[0]=["backgroundColor","#FFFFFF", "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF", "#000000", "#333333", "#666666", "#999999", "#CCCCCC"];
propiedades[1]=["color","#FFFFFF","#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#00FFFF", "#FF00FF", "#000000", "#333333", "#666666", "#999999", "#CCCCCC"];
propiedades[2]=["fontSize","10%","25%","50%","75%","100%","110%","125%","150%","175%","200%","300%","1000%"];
propiedades[3]=["fontStyle","normal","italic","oblique"];
propiedades[4]=["fontFamily","'times new roman', times, serif","sans-serif","Courier","Comic Sans MS","Verdana","Geneva","'Palatino Linotype'","'Franklin Gothic Medium'","Script","Marlett0","'Lucida Console'","Tahoma"];
propiedades[5]=["letterSpacing","-0.5em","-0.1em","-0.05em","0.1em","0.2em","0.3em","0.4em","0.5em","0.7em","0.9em","1.0em","2.0em"];
propiedades[6]=["wordSpacing","-0.5em","-0.1em","-0.05em","0.1em","0.2em","0.3em","0.4em","0.5em","0.7em","0.9em","1.0em","2.0em"];
propiedades[7]=["fontWeight",100,123,150,200,250,300,400,500,600,700,800,900];
propiedades[8]=["fontVariant","normal","small-caps"];

/* Puede parecer que escribir tantos arrays sea inútil, pero me evita tener que escribir en las llamadas los estilos, sus propiedades y sus valores, además que luego puedo jugar con ellos a mi antojo*/
if(quecambiar == "aleatorio")
{
aleatorio = Math.random() * (propiedades.length - 1)
aleatorio = Math.floor(aleatorio)
aleaprop = Math.random() * (propiedades[aleatorio].length - 1)
aleaprop = Math.floor(aleaprop)
if (aleaprop == 0) {aleaprop = 1}
/* Evaluar estas expresiones suele ser lo más cómodo, no es que lo haya hecho muy finamente, debería haber ido de menos a mas, pero funciona*/
acambiar = eval("document.getElementById(identificador).style." + propiedades[aleatorio][0] + " = propiedades[aleatorio][aleaprop]")
}
else
{
if(quecambiar == "todas")
{
for(var i = 0; i < propiedades.length; i++)
{
pp=i+1
var estilo = eval("Pestilo" + pp)
acambiar = eval("document.getElementById(identificador).style." + propiedades[i][0] + " = propiedades[i][estilo]")
}
}
else
{
if(Pestilo1 == "aleatorio")
{
aleaprop = Math.random() * (propiedades[quecambiar].length - 1)
aleaprop = Math.floor(aleaprop)
if (aleaprop == 0) {aleaprop = 1}
acambiar = eval("document.getElementById(identificador).style." + propiedades[quecambiar][0] + " = propiedades[quecambiar][aleaprop]")
}
else
{
acambiar = eval("document.getElementById(identificador).style." + propiedades[quecambiar][0] + " = propiedades[quecambiar][Pestilo1]")
}
}
}
}
</script>



Otro script que me ha quedado largo.

miércoles, 11 de junio de 2008

Acabo de empezar en la blogsfera...

Y por inexperiencia o vagancia no sé encontrar los gadgets que quiero. En Tirando de Blog encontré un script bastante majo para poner una frase aleatoria, pero claro, a la hora de ponerlo me encontré con un buen lío. Una vez lo puse me encontré con que quería ponerle enlaces, los tipos de letra no me encajaban y no sabía cómo centrar los elementos. El caso es que buceando encontré cómo están hechas las plantillas del blogger y con todo eso ya tenía para hacer lo que quería.

Vayamos por parte, como dijo Jack:
en la ayuda de google encontré esto para hacerte gadgets, no es muy cómodo, aparte de tener que aprender cosas específicas de blogger y trabajar gratis para ellos no necesitaba algo tan complicado. Sólo quería usar el código de tirando de blog un pelín modificado para mí. En el mismo JavaScript quería poner enlaces, frases y los banners de los buscadores, para que fueran apareciendo aleatoriamente en un trozo del blog, y así no llenar la parte de arriba con listas interminables de enlaces.

Modificando un poquitin el código, queda algo asin.
<script type='text/javascript'>

function CambiaEnlace(llamador,tabla,elementos)
/* nótese que he creado una función con tres parámetros, llamador, tabla y elementos*/
{

/* Esta es la tabla en la que defino propiedades de los enlaces que quiero mostrar aleatoriamente.
He creado tablas de dos dimensiones para luego poder escribir cada propiedad por separado , también hay otras formas de hacerlo.*/

var Enlaces = new Array();

/*el primer elemento de la segunda dimensión es el texto que se mostrará en el enlace
El segundo es la dirección a la que quiero ir y el tercero es si se abrirá en una nueva ventana "_blank", o en la misma "" o " _self"*/

Enlaces[0] = ["El bundo a los 40", "http://bundoalos40.blogspot.com/","_blank"];
Enlaces[1] = ["Tirando de BLOG", "http://tirandodeblog.blogspot.com", "_blank"];

/*En esta tabla se definen las propiedades de los banners, hay un elemento mas porque los enlaces que te proporcionan añaden la propiedad title a su código y preferí respetarlo*/
var misBanners = new Array();
misBanners[0] = ["<img alt='directorio de weblogs. bitadir' border='0' src='http://www.bitadir.com/templates/img/banners/bitadir_94x15.gif'/>", "http://www.bitadir.com", "_blank", "directorio de weblogs. bitadir"];
misBanners[1] = ["<img alt='Top Blogs' src='http://www.alianzo.com/images_bloggersnet/alianzo80x15.jpg'/>", "http://www.alianzo.com/net/top-blogs", "_blank", "Top Blogs"];

/* Y en esta tabla defino textos que quiero que aparezcan aleatoriamente, sólo tiene un elemento*/
var misCositas = new Array();
misCositas[0] = ["No hay mucho que contar en una vida normal. Pensamientos y recuerdos la describen."];
misCositas[1] = ["No me gusta el trabajo, nací­ cansado. El trabajo es una gran putada.<br/>Tengo un amigo que no tiene remedio, trabaja todo el día porque es un cerdo.<br/>(Los Ilegales)"];

/* Aquí se generan un número aleatorio la función eval permite que pueda usar el parámetro tabla para elegir la tabla cuya cantidad de elementos estoy midiendo*/
aleatorio = eval("Math.random() * (" + tabla + ".length)")
aleatorio = Math.floor(aleatorio)

/* y aquí se escribe el html, llamador es el id del elemento que estoy modificando y eval me permite de nuevo seleccionar la tabla según el parámetro. document.getElementById(xx).innerHTML básicamente hace lo mismo que document.write, pero en la etiqueta que le digo con llamador y la función getElementById*/
document.getElementById(llamador).innerHTML=eval(tabla + "[" + aleatorio + "][0]");
if (elementos >= 1)
{document.getElementById(llamador).href=eval(tabla + "[" + aleatorio + "][1]");}
if (elementos >= 2)
{document.getElementById(llamador).target=eval(tabla + "[" + aleatorio + "][2]")}
if (elementos >= 3)
{document.getElementById(llamador).title=eval(tabla + "[" + aleatorio + "][3]");}
}
</script>

Caray, si que ha quedado largo. Por cierto, para publicar código está esta página.
Hay otras formas de hacer lo mismo, creándose objetos y asignando propiedades en vez de hacerse una tabla bidimensional. Pero me resulta más cómodo para mis futuras intenciones.
Y ahora a llamar al script.

En un elemento HTML/JavaScript pongo el código de llamada a la función que hemos creado, poniendo parámetros distintos para decirle qué es lo que tiene que hacer.

Si queremos que muestre un texto:

miscosas es el Id del elemento que queremos manipular, lo va a usar getElementById (parámetro llamador). Cositas es el nombre de la tabla donde guardamos los textos que queremos mostrar (parámetro tabla). El numerajo (parámetro elementos) indica la cantidad de elementos de la tabla que vamos a usar, en este caso la tabla sólo tiene uno por indice, la cadena de texto.
<p id="miscosas">pp</p>

<script language="JavaScript">

CambiaEnlace("miscosas","misCositas",1)
</script>

Mostrar un enlace:

Como esta tabla tiene tres elementos lógicamente ponemos 3 en los parámetros, pero fijaos que además he puesto un style en la etiqueta para que se muestre el texto exactamente como yo quiero en vez de cómo lo mopstraría el blogger por defecto.
<a id="mienlace" style="text-align:center;font-size: 90%; color:#f0f0f0" href="http://www.blogger.com/pp">pp</a>

<script language="JavaScript">CambiaEnlace("mienlace","Enlaces",3)
</script>




Imaginaos el banner cómo iría ;)

Y LO MÁS IMPORTANTE PARA EL FINAL:


El script con la función DEBE ir justo después de la etiqueta
<head> para que se pueda llamar desde cualquier parte de la página, si lo colocamos en otro sitio es muy posible que no funcione.
Para colocarlo allí basta con ir al diseño html y pegar el código.

Si quereis ver como queda, id al causante de todo este lío, mi blog principal.

Otro día le añadiré elementos de estilo para poder controlar el tamaño de la fuente, la alineación, el tipo de letra y el color, básicamente es añadir algunos elementos a las tablas y modificar un poco la parte en que se aplican las propiedades. En realidad se puede hacer todo simplemente poniendo <p id="elemento"></p>y getElementById("elemento").innerHTML = "el código HTML de lo que se quiera mostrar entre <p>y </p>", pero separándolo un poco se ve mejor y puedes controlar más fácilmente cada cosa.