Posición de nuestra web o blog en Google

Hoy os voy a enseñar a utilizar un programa que nos ofrece la posibilidad de conocer la posición que tiene nuestro sitio web o blog en Google.

Este programa es gratuito y se llama Free Monitor for Google.

Una vez instalado el programa, lo abrimos y nos encontramos con la siguiente pantalla:

Lo primero que tendremos que hacer será añadir el sitio web que queremos consultar. Para ello, haremos clic en el botón con el signo más de color verde (Add URL) que aparece en la barra de herramientas del programa.
En la ventana que aparece escribiremos la dirección URL de la web y pulsaremos el botón OK.

A continuación, tendremos que escribir las palabras clave por las que queremos conocer la posición que ocupa nuestra página en el buscador Google. Para ello, haremos clic en el botón Edit Keywords que aparece justo a la derecha del botón pulsado anteriormente para agregar el sitio web.
En la ventana que nos aparece escribiremos la palabra y pulsaremos el botón Add para agregarla a la lista. Este paso lo repetiremos con cada una de las palabras clave.

Una vez que hayamos agregado todas las palabras pulsaremos el botón OK para volver a la pantalla principal del programa.

Ya solo nos falta pulsar el botón Search, que aparece al final de la barra de herramientas, para conocer la posición que ocupa nuestra web respecto a las palabras clave que hemos escrito en el paso anterior.

Como podemos ver en la pantalla de resultados nos muestra la posición que ocupa nuestra web con cada una de las palabras clave.

Si volvemos a repetir esta búsqueda unos días después podremos comprobar si nuestra web ha bajado o subido de posición.

Crear marquesina - Etiqueta MARQUEE

Para crear una marquesina (contenido de una web o blog que se desplaza en una dirección) tenemos la etiqueta MARQUEE y cuya configuración os enseñaré en esta entrada.

Como cualquier etiqueta HTML, la forma de aplicarla al texto o imágenes del blog o página web es la siguiente:

Efectos de transición entre páginas web

Para crear efectos de transición entre las páginas de nuestro sitio web debemos agregar la siguiente metaetiqueta en la cabecera de la página web, es decir, entre las etiquetas HEAD.

Para crear un efecto de entrada, añadiremos la metaetiqueta:

<meta http-equiv="Page-Enter" content="revealTrans(Duration=2, Transition=23)">

Si por el contrario queremos crear un efecto de salida, añadiremos la siguiente metaetiqueta:

<meta http-equiv="Page-Exit" content="revealTrans(Duration=2, Transition=23)">

Esta metaetiqueta podemos personalizarla indicando la duración en segundos del efecto (Duration) y la transición correspondiente (Transition).

A continuación os pongo la lista de efectos que podéis indicar en la propiedad Transition.

0 - Cuadro de fuera a dentro.
1 - Cuadro de dentro a fuera.
2 - Círculo de fuera a dentro.
3 - Círculo de dentro a fuera.
4 - Cortina de abajo a arriba.
5 - Cortina de arriba a abajo.
6 - Cortina de izquierda a derecha.
7 - Cortina de derecha a izquierda.
8 - Cortinillas de izquierda a derecha.
9 - Cortinillas de arriba a abajo.
10 - Cuadrados que crecen de derecha a izquierda.
11 - Cuadrados que crecen de arriba a abajo.
12 - Puntos aleatorios.
13 - Doble cortina de lados al centro.
14 - Doble cortina del centro a los lados.
15 - Doble cortina de arriba y abajo al centro.
16 - Doble cortina del centro a arriba y abajo.
17 - Cortina diagonal de arriba derecha a abajo izquierda.
18 - Cortina diagonal de abajo derecha a arriba izquierda.
19 - Cortina diagonal de arriba izquierda a abajo derecha.
20 - Cortina diagonal de abajo derecha a arriba izquierda.
21 - Líneas horizontales aleatorias.
22 - Líneas verticales aleatorias.
23 - Aleatorio (se generan aleatoriamente todos los efectos anteriores).

Podéis ver el resultado final de estos efectos haciendo clic en este enlace.

Personalizar barras de desplazamiento del blog

Hoy veremos cómo personalizar las barras de desplazamiento de nuestro blog de Blogger.

Esto podríamos realizarlo mediante la modificación del código pero, en esta ocasión, en vez de explicaros para qué sirve cada línea de código vamos a acceder a la página iconico.com donde tenéis un aspecto más visual de los cambios que váis a realizar en vuestras barras de desplazamiento.

Como podemos en dicha página, tenemos una aplicación para ir directamente seleccionando los colores que queramos y, una vez elegidos, nos generará el código necesario para copiarlo directamente a nuestro blog.

El código debemos pegarlo en la definición del CSS de la plantilla, pero he realizado varias pruebas y hay que hacer alguna modificación al código generado para que funcione con el blog de Blogger.

Para que lo podáis ver con un ejemplo, vamos a suponer que el código que nos genera esta página es el siguiente:

<style>
body {
scrollbar-base-color: #bbccaa;
scrollbar-arrow-color: #99bb55;
scrollbar-face-color: #446666;
scrollbar-track-color: #99bb55;
}
</style>

Solo nos vamos a quedar con este código:

scrollbar-base-color: #bbccaa;
scrollbar-arrow-color: #99bb55;
scrollbar-face-color: #446666;
scrollbar-track-color: #99bb55;

Una vez copiado, accedemos a la ficha Diseño -> Edición de HTML y buscamos, en la definición del CSS de nuestra plantilla, el siguiente código:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
}

Como siempre digo, el código de una plantilla a otra puede variar. Una vez hayamos encontrado el código anterior, justo donde acaba después de la llave de cierre añadimos lo siguiente junto con la parte de código con la que nos habíamos quedado de la página iconico.com

html {
scrollbar-base-color: #bbccaa;
scrollbar-arrow-color: #99bb55;
scrollbar-face-color: #446666;
scrollbar-track-color: #99bb55;
}

Completados todos estos pasos, solo debemos guardar los cambios y visualizar el resultado.

Deshabilitar la selección de texto en página web o blog

Para deshabilitar la selección de texto en nuestra página web o blog, tendremos que incluir el siguiente script entre las etiquetas body del código HTML de la página web o blog.

<script language='JavaScript1.2'>
function disabletext(e){
return false
}
function reEnable(){
return true
}
//if the browser is IE4+
document.onselectstart=new Function ("return false")
//if the browser is NS6
if (window.sidebar){
document.onmousedown=disabletext
document.onclick=reEnable
}
</script>

Una vez pegado este código, guardamos los cambios y comprobamos que si intentamos seleccionar cualquier texto de la web o blog, veremos que no aparece nada seleccionado.

ACTUALIZACIÓN 15 AGOSTO 2010

Descarga el código explicado en esta entrada del blog.

Deshabilitar menú contextual en página web o blog

Para deshabilitar el menú contextual del ratón en una página web o blog, necesitaremos incluir la propiedad oncontextmenu en la etiqueta body.

Para ello, tendremos que acceder al código HTML de nuestra web o blog y, en la etiqueta body, introducir el siguiente código:

oncontextmenu="return false"

por lo que esta etiqueta podría quedar de la siguiente forma:

<body oncontextmenu="return false">

Con esto, cuando hagamos clic con el botón derecho sobre la web que contiene este código, no aparecerá el menú contextual.

También podríamos combinar con este código el citado, días anteriores en este blog, para deshabilitar el uso del teclado en la web.

Deshabilitar el teclado en página web o blog

Para deshabilitar el uso del teclado en una página web o blog, necesitaremos incluir la propiedad onkeydown en la etiqueta body.

Para ello, tendremos que acceder al código HTML de nuestra web o blog y, en la etiqueta body, introducir el siguiente código:

onkeydown="return false"

por lo que esta etiqueta podría quedar de la siguiente forma:

<body onkeydown="return false">

Con esto, aunque pulsemos cualquier tecla al visitar la página web o blog, veremos que no escribe ni ocurre nada.

Contadores web con histats.com

En esta nueva entrada veremos cómo crear un contador web con la página histats.com.

Nube de palabras con Wordle

Hoy os voy a explicar cómo realizar una nube de palabras con Wordle, una de las páginas que ofrecen esta posibilidad. Este tipo de imágenes se suelen utilizar bien para diseño gráfico o incluso en diseño web por ejemplo para crear alguna página de entrada.

Lo primero que tendremos que hacer, como es normal, será acceder a la página Wordle.net

Redireccionar una página web

Un redireccionamiento consiste en conectar al usuario a otra página web cuando escribe una determinada dirección web.
Cabe destacar que cuando me refiero a página web puede ser también blog, space, etc...

Cambiar icono de blogger

Hace tiempo os escribí una entrada para cambiar el icono que aparece en la barra de direcciones de nuestra página web, lo que popularmente se llama favicon.

A algunos se os habrá ocurrido si esto es posible realizarlo en un blog de Blogger. La respuesta es sí y en este nuevo post de El Blog de la Informática 10 os voy a explicar cómo se hace.

Cambiar el color de la celda cuando pase el puntero

Esta nueva entrada del blog está dedicada al diseño web. En esta ocasión veremos cómo realizar el cambio de la celda de una tabla cuando pasemos el puntero del ratón por encima de ella.
Este dato es importante a la hora de querer realizar un menú sencillo en una página web.

Cambio dinámico del fondo de una página web

En esta entrada veremos cómo hacer para que el usuario pueda cambiar el fondo de nuestra página web.

Si visitamos la página principal de MSN (la página ya no tiene esta opción), comprobamos en la parte superior a la derecha que existen unos cuantos colores.

Establecer como página de inicio

En muchas ocasiones visitamos páginas web que tienen un enlace para poder establecerla directamente como página de inicio, es decir, que si pulsamos ese enlace, que puede estar como imagen o texto, cada vez que abramos nuestro navegador, se abrirá directamente esa página.

Cambiar cursor en página web

Alguna vez habréis visitado alguna página web y habéis visto que el cursor en vez de adoptar la imagen de flecha adopta otro tipo de imagen.

Generador de logos y botones

Esta nueva entrada del blog está dedicada a la creación de logos y botones por medio de unos pasos muy sencillos sin necesidad de tener programas ni conocimientos de diseño gráfico.

Icono en página web

Alguna vez navegando por internet hemos visto que en la barra de dirección aparece un icono personalizado.

Para realizar esto tenemos que incluir el siguiente código entre las etiquetas <HEAD> y </HEAD> de las páginas HTML.