Archivo de la categoría: Productos google

Subir archivos de música mp3 y reproducirlos en blogger

En el día de mi regreso trataré uno de los problemas que más controversi ha generado en los comentarios que he podido ir viendo durante estos últimos días, y este ha sido los problemas que he detectado que tenía la gente para subir archivos a blogger siguiendo las explicaciones. Esta explicación nos permitirá subir archivos de nuestro disco duro a la red, y reproducirlos en una entrada de nuestro blog de blogger. El resultado que obtendremos será algo parecido a lo siguiente:

Los pasos que tendremos que hacer serán los siguientes:
1. En primer lugar vamos a nuestro blog de blogger, y procedemos a crear una nueva entrada, escribimos el texto, y a continuación pulsamos en la pestaña “Edición de HTML”, y copiamos el siguiente código donde queramos pegar la canción:

1
2
3
4
5
<object type="application/x-shockwave-flash" data="http://www.oscargp.com/player_mp3_mini.swf" height="20" width="200">
<param name="movie" value="http://www.oscargp.com/player_mp3_mini.swf">
<param name="bgcolor" value="000000">
<param name="FlashVars" value="mp3=http://izpzva.bay.livefilestore.com/tuarchivo.mp3?download">
</object>

2. A continuación, dejamos en una pestaña la entrada que estamos creando, y en otra iremos a Skydrive desde Firefox (desde Internet Explorer no podremos hacer el proceso correctamente), y nos identificaremos con la cuenta en la que usemos en el MSN Messenger o hotmail.

3. Posteriormente, en caso de no tener creada ya una carpeta pública, buscaremos la opción “Crear carpeta”, le daremos el nombre que queramos y sobre todo, en la opción “compartir con” elegiremos la opción “Cualquiera (público)“.

4. Una vez creada, arrastraremos el fichero mp3, wav, midi… que deseemos compartir en el blog, al apartado donde observaremos el texto “Colocar archivos aquí” arrastraremos el archivo que deseemos subir, y a continuación pulsaremos Cargar.

5. Una vez esté cargado haremos clic sobre el archivo que acabamos de subir, y haremos clic en derecho en en la imagen de descarga del fichero, pulsaremos botón derecho y seleccionaremos “Copiar la ruta del enlace”. Si en este momento pegáramos algo en word nos tendría que salir algo similar a:
http://k1uhja.bay.livefilestore.com/y1pBrvbUyGnxLGGyoio1aXPTu8uZ-lIZEdBWxaPLvnsJg97HtLMWzLZgJVGgeOgwfby8RYpoCZGyz9xU83Kkv-wLg/beatles%20-%20yesterday.mp3?download

5. Finalmente, iremos otra vez a blogger y reemplazaremos el vínculo que acabamos de copiar por el texto http://izpzva.bay.livefilestore.com/tuarchivo.mp3?download del código HTML

Además les dejo el siguiente vídeo explicativo:

Presentaciones: Knol y Win-linux

Hoy presento a todos Win-linux, un blog en el que con la colaboración de Roberto, en el que intentaremos mostrar como enfrentamiento las virtudes y desvirtudes de estos dos sistemas operativos. Yo haré artículos defendiendo Windows, y Roberto los escribirá defensando Linux, como subtitulamos el blog “en la variedad está el gusto”, y será el objetivo del mismo, presentar cualidades de ambos sistemas operativos para dar a coonocerlos. Os invito a visitarla.

Imagen de Win-linux

Imagen de Win-linux

Además, hoy también se ha dado una de las presentaciones más esperadas Google Knol, este es un nuevo servicio de Google muy ambicioso que tiene por objetivo competir con la wikipedia, cosa que ahora mismo parece muy complicada.

A diferencia de la wikipedia, ofrecerá la posibilidad de crear más de un contenido de un tema, permitiendo que el autor exprese su opinión y ofreciéndole la posibilidad de obtener beneficios. Puede escribir cualquiera y desde luego personalmente os invito a hacerlo y a contribuir en este proyecto: ahora es el momento.

Captura de Google Knol

Captura de Google Knol

Nubes de etiquetas en blogger I

A diferencia de WordPress, blogger no incorpora ningún tipo de utilidad para crear nubes de etiquetas en blogger. Para hacer esto hay varias maneras, editando nuestro código HTML que considero una manera más elegante y utilizando un servicio externo. Durante este post y el siguiente intentaré comentar todas las posibilidades tal y como intento hacer siempre.


Las nubes de etiquetas, permiten ordenar las etiquetas de nuestro blog con la finalidad de mostrar a los usuarios los diferentes temas de los que trata nuestra web. Para hacernos una idea os voy a mostrar una imagen en la que se aprecia la diferencia. En la imagen de la derecha podéis observar un ejemplo de nube de etiquetas. En ella lo que se hace es asignar un tamaño u otro de letra en función del número de entradas que haya para una entrada concreta ayudando a los buscadores a determinar cuales son los elementos más importantes de nuestra página.

Para la versión elegante desde el propio blogger los pasos serán los siguientes:

0. En caso de que no tengas ya etiquetas en tu blog, ves a la pestaña Diseño, y selecciona Elementos de Página, pulsa Añadir nuevo elemento en la columna de la derecha, y busca “Etiquetas”. Añádelo, guarda y comprueba que ya existe un apartado de etiquetas en tu blog.

1. Ves al panel de tu blog, selecciona la pestaña Diseño, y una vez ahí selecciona la opción “Edición de HTML”. Una vez allí antes de comenzar a hacer nada asegúrate que la opción “Expandir plantillas de artilugios está desactivada” (en principio debería estar desactivada).

Antes de pasar al paso 2 es muy importante que nos hagamos una copia de seguridad de la plantilla. Para ello, pulsaremos “Descargar plantilla completa”, y guardaremos una copia de seguridad para poder reemplarla otra vez en caso de que no salga.

2. Busca en el código el siguiente texto:

1
]]></b:skin>

.

3. A continuación pegaremos el siguiente código fuente justo antes de la etiqueta anterior.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Estilos de la nube de etiquetas
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline
!important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0
3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count
{padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

4. En este código no es necesario realizar cambios ya que es adaptable a cualquier blog. A continuación Procedemos a pegar el siguiente código justo después de la etiqueta que antes hemos buscado (]]></b:skin>) y antes de </head>.

1
2
3
4
5
6
7
8
9
<script type='text/javascript'>
// Variables de usuario de la nube de etiquetas
var lcBlogURL = 'http://TUBLOG.blogspot.com';
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

5. En esta ocasión es muy importante que pongáis el nombre de vuestro blog, y completéis la dirección donde pone TUBLOG. Además, una vez lo probéis después podéis hacer cambios como el tamaño máximo de letra o el mínimo que queráis que tengan las etiquetas, y los colores de estas.

6. Una vez hecho esto vamos al tercer y último paso necesario para tener una nube de etiquetas en nuestro blog es el siguiente. Buscaremos el siguiente texto en nuestro blog:
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>

7. Finalmente, REEMPLAZAMOS la línea seleccionada por el siguiente bloque:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>
 
// No cambiar nada -----------------
 
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
 
var ta=0
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
 
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
tz = labelCount.length-1;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
 
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = lcBlogURL+'/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
 
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
 
<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

8. Una vez hecho esto ya tendremos la nube de etiquetas en nuestro blog, el resultado tendría que ser parecido al que se ha dado en mi directorio en el cual he seguido estos pasos.

En el siguiente post, explicaré como hacerlas usando servicios externos a blogger.

Finalmente, como siempre intento hacer, un vídeo explicativo para que resulte aún más sencillo poner la nube de etiquetas.

Mostrar en nuestra web nuestro pagerank

Seguramente habrán oído ya hablar del pagerank, como una muestra del número páginas que apunta a nuestra web, y como herramienta para medir de alguna manera el prestigio de una página web (esto ha sido puesto en numerosas ocasiones en tela de juicio).

Este índice lo calcula el buscador Google y se ha convertido de alguna manera para muchos webmasters, en una obsesión por conseguir un pagerank lo más elevado posible.

Hoy les mostraré como pueden insertar en su página web un visor del pagerank, con el cual podrán ustedes ver directamente su pagerank, como siempre utilizando servicios externos gratuitos y ya existentes.

1. Elpagerank.com. Página que en dos simples pasos nos da un código HTML para insertar el código en nuestra web. En primer lugar tendremos que insertar el nombre de nuestra web, y posteriormente indicar el modelo que deseamos mostrar en nuestra web. El resultado es bastante bueno y es muy sencillo de usar.

2. mipagerankbar.com. Más sencilla si cabe que la opción anterior. Introducimos nuestra web y seleccionamos el modelo, y nos genera un modelo de pagerank para introducir en nuestra web.

3. mipagerank.com. Ofrece la misma funcionalidad que los casos anteriores con el único “problema” de que solo ofrece un diseño de barra a diferencia de sus competidores.

Finalmente como siempre digo, esto no es más que una muestra de las alternativas que ofrece el mercado para introducir un visor de pagerank en nuestra web, de hecho como siempre digo seguro que las hay más y mejores que las escogidas, y sin ir más lejos recuerdo que miarroba también lo permitía desde su web.

Una vez hecho esto es necesario incorporarlo a nuestro blog o página web. En el caso de una página web únicamente tendremos que colocar el código HTML en la zona del texto donde corresponda.

En el caso de blogger, los pasos serán los siguientes:
1. Iremos a la pestaña Diseño de nuestro blogger.
2. Dentro de la pestaña Elementos de página (nos aparece de entrada), por ejemplo en la barra de la derecha seleccionaremos la opción Añadir elemento.
3. Seleccionaremos la opción HTML / Javascript.
4. Nos aparecerá una ventana con dos campos. En el campo título podemos poner por ejemplo “El pagerank de mi web”, y en el campo de texto tendremos que introducir el código HTML que habremos obtenido de una de las páginas presentadas antes.

Blogger Templates: pagina con multitud de plantillas para blog

A pesar de que luego nunca me acabo decidiendo, hace algunos meses seguía blogandweb con la finalidad de encontrar una buena plantilla. Finalmente he decidido mantener una predefinida hasta que tenga más tiempo para trabajarme una, y seguir añadiendo cosas sobre esta.


Eso sí, me gustaría presentaros a todos la web Btemplates, gracias a los diseños propuestos podréis modificar las plantillas de vuestro blog de manera totalmente personalizada y elegante en muchos casos. Recomiendo la página, porque a pesar de la dificultad para manejarlos se consiguen realmente diseños muy elegantes.

Hay plantillas de blogger para wordpress, y viceversa, realmente un gran trabajo y por eso el artículo. Más adelante, explicaré también como adaptar una de estas plantillas a nuestro blog.

Gifs animados en blogger

Uno de los problemas más habituales leyendo el grupo de ayuda de Blogger, son los gifs animados, que está visto que tienen un comportamiento muy extraño. En el artículo de hoy propondré una solución a este problema, que tal vez sea un poco incómoda hasta que blogger solucione el problema.

Por lo que he podido leer en algunos sitios, muchas veces blogger convierte a jpg los archivos gif, dando como resultado que no se puedan mostrar.

Es posible que algunos gifs que subamos si funcionen adecuadamente. Aquí se puede observar un ejemplo de gif en el que sí funciona correctamente. Como esto se demuestra que la mayoría de veces no funciona, recomiendo encarecidamente utilizar flickr.

1. En primer lugar nos registramos como nuevos usuarios de flickr, y usamos nuestro nombre de usuario y password para acceder al sistema.

2. Pulsamos sobre el vínculo: Subir fotos.

3. Seleccionamos todos los gifs que queramos subir, y cuando hayamos finalizado el proceso pulsamos “Subir fotos”.

4. Seleccionamos el menú superior “Tú”, y escogemos la opción “Tu galería”.

5. A continuación, hacemos clic en la foto que deseamos llevar a nuestro blogger. Posteriormente pulsamos en el icono con la lupa y un signo mas, y nos aparecerá una nueva vista con el gif en movimiento con dos textos HTML. En nuestro caso copiaremos el que pone: 2. Agarrar la dirección URL de la foto:.

6. Iremos a nuestro blog, y pulsaremos el botón de la imagen “Añadir imagen”, como si fuéramos a insertar una imagen normal. Seleccionamos las opciones que deseemos, y como fuente de la caja de texto que pone URL pegamos el texto que acabamos de copiar de flickr.

De esta manera lenta y tortuosa, conseguiremos que nuestros gifs siempre funcionen adecuadamente en nuestra web.

Finalmente, me gustaría comentar sin embargo que los gifs animados salvo en casos muy concretos como simples animaciones, han sido desterrados por varios gurús del diseño web, con lo cual tampoco recomiendo abusar de ellos.

Servicios de estadísticas web

En la línea que comenté hace unos días pero que no he podido hacer por falta de tiempo, a continuación explicaré el funcionamiento de los sistemas de estadísticas web. En primer lugar comenzaré comentando las ventajas que ofrecen los servicios de estadísticas respecto a los contadores web simples y posteriormente comentaré los principales que hay en el mercado y comentaré el uso de alguno y su inserción en nuestra web.

Las ventajas respecto de los contadores simples son muchas:
– Podemos saber con que buscadores y que palabras clave los ususarios llegan a nuestra web.
– Sabemos el número de visitantes distribuidos a lo largo de cada día.
– Podemos conocer los países de origen de nuestras visitas.
– Sabremos la manera en la que promocionar en otras páginas nuestro website.

El único inconveniente es que no podremos mostrar a nuestros visitantes el total de visitas llevamos, si bien incorporar fácilmente de manera independiente al servicio de estadísticas un contador web.

A continuación mostraré cinco ejemplos de servicios de contadores, todos son bastante buenos y estoy seguro que me dejo alguno más de los importantes.
1. Google Analytics. Servicio de Google para llevar las estadísticas de los usuarios. Los datos son exactos y no inserta publicidad ni supone molestía alguna para la página. El único contra, si hay alguno, es el hecho de que las estadísticas de la página no son públicas y no se pueden mostrar a los visitantes de la página. Es el que uso en mi web.

2. Motigo.net. Servicio de estadísticas que surgió del popular nedstat. Tiene la ventaja o el inconveniente (según cual sea nuestro punto de vista), de que los usuarios pueden ver nuestros datos. Este servicio lo usé hace unos años y aquí se puede ver un ejemplo del resultado final.

3. Mi@rroba. Ofrece un sistema muy completo de estadísticas y la interfaz es muy agradable. Este es un ejemplo. Como siempre en miarroba el problema está en la velocidad de su página y en exceso de publicidad que utilizan.

Como siempre digo, esto es solo una muestra no representativa de los servicios de estadísticas que hay en internet. Deben ser pillados con pinzas, ya que los hay muchísimos más y seguro que son mejores.

A continuación les mostraré un ejemplo, sobre como utilizar la interacción de google analytics y blogger.


Crear un enlace con otra pagina desde blogger

Hoy explicaré uno de los conceptos más sencillos pero fundamentales de internet, ya que el fundamento de internet son los enlaces (hipervínculos). Además, lo explicaré para hacerlo en blogger, pensado especialmente para nuevos usuarios. Este concepto me fue pedido en email y en algunos comentarios, así que espero que ayude.

Para hacerlo procedemos a ir a la pantalla de creación de un nuevo mensaje. A continuación haremos lo siguiente.
1. Escribiremos el texto que deseamos quedar.
2. Seleccionamos la palabra con la que deseamos quedar un enlace.

3. Seleccionamos la palabra y pulsamos el botón “link” o “enlace”, de imagen:
4. Escribimos la página a donde queremos ir cuando alguien pulse ahí.
5. Ya tenemos hecho el enlace.

Además, como suele ser habitual, aquí les muestro un vídeo ilustrativo.


Ocultar o eliminar barra de blogger (navbar)

Hoy también les publico un comentario que explica como ocultar o eliminar totalmente la bara que blogger.

Básicamente hay dos alternativas, la primera es mucho más recomendable, ya que no sé hasta que punto es justo y legal eliminar una barra que blogger pone para un servicio gratuito. En mi caso por ejemplo no tengo ningún problema en mostrarla siempre y no creo que sea inconveniente alguno.

Sin embargo, a continuación les mostraré cual es la manera para eliminar totalmente la barra de blogger, o para ocultarla cuando el usuario no pase por encima el ratón.

Para eliminar totalmente la barra de blogger hemos de hacer lo siguiente:
1. Iremos a nuestro blogger y seleccionaremos la pestaña diseño.
2. Dentro de la pestaña Diseño seleccionaremos la opción “Edición de HTML”.
3. Posteriormente buscamos la etiqueta <head>.
4. Copiamos el siguiente código:
<style type='text/css'>
#navbar-iframe{
height: 0px;
visibility: hidden;
display: none;
}
</style>

Para ocultar simplemente la barra de blogger, y que al pasar el ratón por la zona donde está se active y aparezca el procedimiento es el siguiente (muy similar al anterior).
1. Seguimos los dos primeros puntos del proceso anterior.
2. Buscamos el fragmento de código body{.
3. Insertamos el siguiente fragmento de código justamente encima:
#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100,FinishedOpacity=100)
}