• Un editor de texto plano. Si eres un desafortunado usuario de Windows, te sirve el Bloc de Notas. Ten cuidado si usas un procesador de textos, como el Word, ya que da formato y no queremos eso. Si usas GNU/Linux, tienes un montón para elegir: vim, emacs, Joe, Kate, etc.
• Un navegador (o varios) que funcione bien y respete los estándares. El Mozilla Firefox, por ejemplo. Es multiplataforma, libre, y lo puedes bajar desde la web del proyecto Mozilla.
• Un navegador que funcione mal, tenga todo el mundo, y pase de los estándares: Ya-Sabes-Cuál³.

³Su nombre está escrito en la Lengua Negra, que no pronunciaré aquí.

Además de eso, es muy recomendable que tengas a mano el editor de texto y un navegador para ir probando los ejemplos que vayan saliendo. Es la única forma de aprender.

Esta obra está bajo licencia Reconocimiento-NoComercial-CompartirIgual 2.5 España de Creative Commons.

Introducción

XHTML significa eXtensible HyperText Markup Language y es la versión modernizada del tradicional HTML⁴. Si ya conoces HTML, al final del manual hay un apéndice para que sea más fácil la migración a XHTML.

⁴Lenguaje utilizado para crear páginas web.

XHTML es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas, sino lo que significan. Por ejemplo, si tenemos el título de nuestra página, en lugar de decir “Lo quiero grande en letras rojas”, le indicamos al navegador que “Este es el título principal de la página. Haz algo para que destaque”. Y ese “algo” lo dejamos a decisión del navegador.

¿Y eso de CSS?

CSS son las siglas de Cascading Style Sheets y son un regalo del cielo. Si el documento XHTML está bien estructurado, podemos cambiar totalmente su apariencia sin tocar una sola línea de código en el archivo .html. Esto nos permite separar el contenido del aspecto, y es de gran importancia.

Si quieres ver un ejemplo de cómo con el mismo código XHTML y distintos archivos CSS se pueden conseguir resultados totalmente diferentes, a la vez que espectaculares, échale un vistazo al CSS Zen Garden y al Proyecto Camaleón.

¿Cómo funciona el XHTML?

XHTML es un lenguaje basado en etiquetas (tags). Una etiqueta tiene la siguiente forma:

<etiqueta>Algo aquí dentro</etiqueta>

Volviendo al ejemplo anterior de nuestro título: la etiqueta para poner el título principal en la página es <h1>. Entonces nos quedaría:

<h1>What is the Matrix?</h1>

Como ves, <h1> marca el inicio de la etiqueta, mientras que </h1> se encarga de cerrarla. Hay etiquetas que funcionan con una sola parte, y son así:

<etiqueta />

Observa el espacio en blanco que hay entre el nombre de la etiqueta y la barra /. Es muy importante para que los navegadores antiguos no se vuelvan locos.

Hay etiquetas que pueden modificarse con atributos. Ahora mismo no hace falta entender qué hacen, ya los veremos más adelante. Sólo quédate con cómo van escritos:

<etiqueta atributo="valor">

Por último, queda comentar un par de reglas que siguen las etiquetas: siempre en minúsculas y los atributos entre comillas⁷.

⁷Esto es un diferencia respecto al HTML, ya que podíamos poner atributos sin comillas y no importaba si escribíamos en mayúsculas o minúsculas.

¿Pero para hacer webs no se usa el FrontPage?

Sí. También puedes freír huevos con aceite para el coche.

Mi amigo que es diseñador usa Dreamweaver

El Macromedia Dreamweaver es un editor WYSIWYG⁸ muy extendido e idolatrado por infinidad de diseñadores. El problema es que nos permite hacer webs sin tocar nada de código.

⁸What You See Is What You Get (en castellano, “lo que ves es lo que obtienes”).

Sí, eso es un problema. Genera código basura y no tenemos control sobre lo que hacemos. Así que antes de usar Dreamweaver o algo similar, tenemos que aprender a hacer las webs nosotros solitos. Que quede claro que es mi opinión y no Ley Divina. . .

Introducción

Por: benko

¿Qué es el XHTML?

XHTML significa eXtensible HyperText Markup Language y es la versión modernizada del tradicional HTML⁴. Si ya conoces HTML, al final del manual hay un apéndice para que sea más fácil la migración a XHTML.

⁴Lenguaje utilizado para crear páginas web.

XHTML es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas, sino lo que significan. Por ejemplo, si tenemos el título de nuestra página, en lugar de decir “Lo quiero grande en letras rojas”, le indicamos al navegador que “Este es el título principal de la página. Haz algo para que destaque”. Y ese “algo” lo dejamos a decisión del navegador.

¿Y eso de CSS?

CSS son las siglas de Cascading Style Sheets y son un regalo del cielo. Si el documento XHTML está bien estructurado, podemos cambiar totalmente su apariencia sin tocar una sola línea de código en el archivo .html. Esto nos permite separar el contenido del aspecto, y es de gran importancia.

Si quieres ver un ejemplo de cómo con el mismo código XHTML y distintos archivos CSS se pueden conseguir resultados totalmente diferentes, a la vez que espectaculares, échale un vistazo al CSS Zen Garden y al Proyecto Camaleón.

¿Cómo funciona el XHTML?

XHTML es un lenguaje basado en etiquetas (tags). Una etiqueta tiene la siguiente forma:

<etiqueta>Algo aquí dentro</etiqueta>

Volviendo al ejemplo anterior de nuestro título: la etiqueta para poner el título principal en la página es <h1>. Entonces nos quedaría:

<h1>What is the Matrix?</h1>

Como ves, <h1> marca el inicio de la etiqueta, mientras que </h1> se encarga de cerrarla. Hay etiquetas que funcionan con una sola parte, y son así:

<etiqueta />

Observa el espacio en blanco que hay entre el nombre de la etiqueta y la barra /. Es muy importante para que los navegadores antiguos no se vuelvan locos.

Hay etiquetas que pueden modificarse con atributos. Ahora mismo no hace falta entender qué hacen, ya los veremos más adelante. Sólo quédate con cómo van escritos:

<etiqueta atributo="valor">

Por último, queda comentar un par de reglas que siguen las etiquetas: siempre en minúsculas y los atributos entre comillas⁷.

⁷Esto es un diferencia respecto al HTML, ya que podíamos poner atributos sin comillas y no importaba si escribíamos en mayúsculas o minúsculas.

¿Pero para hacer webs no se usa el FrontPage?

Sí. También puedes freír huevos con aceite para el coche.

Mi amigo que es diseñador usa Dreamweaver

El Macromedia Dreamweaver es un editor WYSIWYG⁸ muy extendido e idolatrado por infinidad de diseñadores. El problema es que nos permite hacer webs sin tocar nada de código.

⁸What You See Is What You Get (en castellano, “lo que ves es lo que obtienes”).

Sí, eso es un problema. Genera código basura y no tenemos control sobre lo que hacemos. Así que antes de usar Dreamweaver o algo similar, tenemos que aprender a hacer las webs nosotros solitos.

Parte 1: XHTML

La ciencia es aquello que entendemos lo su?ciente como para explicárselo a un ordenador. El arte es todo lo demás.
Prólogo de A=B Donald Knuth, cientí?co de la computación

Este capítulo es tremendamente aburrido, pero muy importante. No es muy largo, así que presta atención. Ahora aprenderemos a formar el esqueleto de nuestros archivos para poder usarlo más adelante a modo de plantilla.

La codi?cación

La primera línea que debemos tener en un documento XHTMl es la que marca la codi?cación. ¿Qué es esto? Simplemente formato en el que se guardan los caracteres en el archivo. La codi?cación estándar es la Unicode (utf-8) y soporta caracteres de todas las lenguas: occidentales, griegos, chinos, árabes, japoneses, coreanos… )

Existen multitud de codi?caciones, en su mayoría Criaturas del Mal. Deberías usar siempre la Unicode. ¿La razón? Échale un vistazo a este apéndice.

Asegúrate de que el editor de textos que uses te guarda el archivo en formato Unicode (normalmente es una opción a elegir en el cuadro de diálogo de Guardar como).

Al grano, hay que escribir esto:

No somos masocas, así que no nos lo tenemos que aprender de memoria. Simplemente copia y pega.

<?xml version="1.0" encoding="UTF-8" ?>

Esa etiqueta es de XML, por eso tiene esa forma tan “rarita”. No volveremos a usar ese tipo de etiquetas en nuestro documento. La línea anterior tiene que aparecer al principio de todo el documento, antes que ninguna otra. Lo que pasa es que da problemas si trabajamos con PHP3. Si usas PHP, la etiqueta que marca el inicio del script puede ser <?, así que los navegadores se hacen un lío. ¿La solución? Podemos omitir esa línea del principio y declarar la codi?cación dentro de la sección head (ahora veremos qué es eso). Si elegimos esto último, la línea a incluir dentro del head sería:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Escoge la opción que quieras, pero sólo una. Por cierto, por motivos de espacio, la línea aparece cortada. No importa, porque el navegador interpreta los saltos de línea como si fueran espacios en blanco. En realidad podríamos escribir todo el archivo XHTML en una sola línea. O cada palabra en una línea diferente.

Y por cierto, muchos espacios en blanco seguidos se interpretan como si sólo hubiera uno.

El DOCTYPE

Lo siguiente que toca es indicar el DOCTYPE. Se encarga de decirle al navegador qué demonios contiene el archivo que está abriendo. Nosotros usaremos la especi?cación XHTML 1.0 Strict, que es esta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Después del DOCTYPE tenemos a la cabecera y al cuerpo encerrado entre las etiquetas <html> y </html>.

El elemento raíz (HTML)

El resto de nuestro documento tiene que ir dentro de la etiqueta <html>. Pero en esa etiqueta debemos indicar una serie de cosas, como que nuestro documento es XHTML y qué lengua estamos usando. Si escribimos en castellano, nos quedaría así:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

Las letras es son el código de la lengua castellana. Podéis ver algunos otros códigos en la siguiente tabla.

Los trekkies pueden escribir en su lengua con el código x-klingon. ¡Exigimos quenya ya!

La cabecera (HEAD)

La cabecera contiene información que no forma parte del contenido de la página en sí, como el título, vínculos a hojas de estilos CSS, información para robots de búsqueda, scripts, etc. Por ahora nos quedaremos sólo con el título de la página. La cabecera va encerrada entre <head> y </head>, mientras que para el título usamos la etiqueta <title>. El título de la web aparece en la barra de título de la ventana del navegador, es el nombre por defecto que aparece si añadimos a favoritos la página, etc. Quedaría así:

<head>
	<title>Título de la web</title>
</head>

El sangrado no es obligatorio, pero sí que viene muy bien para aclararnos con el código

El cuerpo (BODY)

Por último, nos encontramos con el cuerpo, encerrado entre <body> y </body>, y que contiene toda la “chicha”. Quedaría tal que así:

<body>
Aquí va el cuerpo de la web
</body>

La plantilla

Recopilando todo, nos quedaría algo como esto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Título de la web</title>
</head>
<body>
	Aquí va el contenido
</body>
</html>

Y está pidiendo a gritos que guardes una copia en un archivito llamado plantilla.html para usos posteriores.

Etiquetas básicas

Ahora que conocemos la estructura de un documento XHTML, aprenderemos las etiquetas básicas que nos permitan empezar a crear el contenido de nuestra página web: párrafos, saltos de línea, títulos, etc.

Párrafos

Los párrafos sirven para estructurar el contenido. En la web funcionan igual que en el Mundo Real™: contienen una o más frases relacionadas entre sí. Para crear un párrafo, metemos texto entre las etiquetas <p> y </p>. Un ejemplo:

<p>
Hola, me llamo Luke Skywalker y soy piloto
de una X-Wing en el Rogue Squadron. También
soy un Jedi del Lado Luminoso de la Fuerza.
Mis maestros han sido Yoda y Obi-Wan Kenobi.
</p>

Da igual insertar un salto de línea entre la etiqueta y el contenido, ya que será interpretado como un espacio en blanco.

Si pruebas ese ejemplo, te dará scuenta de que todo forma un párrafo y que el navegador pasa de los saltos de línea. Esto es correcto. Podrías haber puesto todo el párrafo en la misma línea y obtendrías el mismo resultado.

Saltos de línea

Hay veces que necesitamos forzar un salto de línea dentro de un párrafo. Para ello, usamos la etiqueta <br/>,así:

<p>
DarkChestofWonders<br/>
Seentroughttheeyes<br/>
Oftheonewithpureheart<br/>
Once,solongago.
</p>

Dark Chest of Wonders, de Nightwish, en el álbum Once.

Aunque estéticamente podamos obtener elmismo resultado mediante párrafos (con <p>) que saltos de línea de forma indiscriminada, hay que tener en cuenta que usar <br/> para separar párrafos es algo malvado, propio de una mente retorcida.

Los títulos (headings)

Los títulos nos sirven para agrupar información. Imaginemos la sección de enlaces de nuestra página. El título principal podría ser Mis links favoritos. Luego tendríamos los links clasificados por secciones, cada una de ellas bajo un subtítulo diferente: Blogs, Descargas yVideojuegos. Incluso podríamos tener subcategorías dentro de una misma sección, como por ejemplo RPG’s, Aventuras Gráficas yArcades.

Para conseguir esto, tenemos las etiquetas <hx> y </hx>,donde x es un número del 1 al 6. <h1> corresponde al título más importante y sólo debería haber uno por página. Veamos todo lo anterior en un ejemplo:

<h1>Mislinksfavoritos</h1>
<h2>Blogs</h2>
<!--blablabla-->
<h2>Videojuegos</h2>
<h3>RPG's</h3>
<!--blablabla-->
<h3>Arcades</h3>
<!--blablabla-->

Si ves el código anterior en un navegador, aparecerán los títulos más importantes de mayor tamaño que los menos importantes (pero el tamaño de cada título siempre puede cambiarse con CSS).

Citas

Existen tres etiquetas para poder escribir citas: <blockquote>, <q> y <cite>. Mientras que <blockquote> y <q> se usan para escribir la cita en sí (las frases), <cite> se emplea para marcar el origen (persona, libro, canción o lo que sea).

Entonces, ¿en qué se diferencian <blockquote> y <q>? Pues que <blockquote> está hecha para contener citas largas. Es decir, que dentro de un <blockquote> tendremos que poner párrafos. <q> funciona al revés, puesto que está pensada para escribir citas cortas. <q> va dentro de párrafos. La razón técnica es que <blockquote> es un elemento de bloque (block), mientras que <q> es inline, y un inline no puede estar “aislado”.

Todo lo anterior puede resultar confuso, así que ahora toca un ejemplo clarificador:

<p>Aquí os dejo un fragmento de la canción
 <cite>Die for Rock 'n' Roll</cite>, de Dover:</p>

<blockquote>
 	<p>
 	Everybody danced (while)<br/>
 	I was lying on the floor<br/>
 	I was ready to die<br/>
 	for Rock 'n' Roll<br/>
 	</p>
/blockquote>

<p>Mi parte preferida es cuando dice lo de
<q>I was ready to die[...]</q>.</p>

Separadores horizontales

Los separadores horizontales (horizontal rules) han caído en desuso, ya que podemos conseguir bordes delimitadores muy cucos mediante estilos CSS. Pero como el saber no ocupa lugar, nos quedaremos con la etiqueta <hr />:

<h2>Los videojuegos</h2>
<p>Bla bla bla...</p>
<hr/>
<h2>Música</h2>
<p>Bla bla bla...</p>

Comentarios

Los comentarios son notitas que ponemos en el código fuente de una página, pero que no se muestran en pantalla. Para el navegador, son invisibles. Son útiles para indicar qué hacen ciertas partes del código. Para insertar un comentario, lo escribimos entre <!– y –>. Ten en cuenta que el comentario tiene que estar en una sola línea.

<!-- Esto es un comentario -->

Enlaces

Hablar es fácil. Enséñame el código.

Lista de correo del kernel de Linux Linus Torvalds, ingeniero de software

Ya sabemos las etiquetas necesarias para escribir texto. Ahora toca aprender a usar una de las características más importantes de la web: los enlaces (o links). Se implementan con la etiqueta <a>.

Enlace a una página externa

Si queremos enlazar a una página o archivo que está en otro servidor (normalmente webs que no son nuestras), usamos <a> de esta forma:

<a href=“http://www.algo.com” title=“Descripción”>Texto del enlace</a>

El atributo href contiene la URL a la que queremos enlazar. Es muy importante que no se nos olvide el protocolo¹ (en este caso http://) o no funcionará.

1. http:// es el protocolo para la web, ftp:// para los FTP, etc.

En title escribimos una descripción de la página que enlazamos. Al igual que con <acronym> y <abbr>, en la mayoría de navegadores este título aparecerá al pasar el ratón por encima del link. No hay que confundir el título con el texto del enlace. Son completamente independientes.

Imagina que quieres enlazar a Barrapunto²:

2. Blog colectivo geek, similar a Slashdot. Ya no es lo que era, pero sigue usando Debian.

<a href=“http://www.barrapunto.com” title=“La información que te interesa”>Barrapunto</a>

Enlace a una página local

Para enlazar a una página que esté en nuestro servidor, necesitamos saber la ruta (path) desde donde estemos hasta la ubicación del archivo.

Si el origen (página donde está el link) está en el mismo directorio que el destino (página a la que apunta el link), entonces sólo tenemos que escribir su nombre:

<a href=“profile.html” title=“Información sobre mí”>Ficha personal</a>

Si el destino estuviera en un subdirectorio, utilizaríamos una barra / para indicar el camino³:

3. ¡Atención usuarios del Maligno! En Windows se utilizan las barras invertidas \ para separar los directorios. En el resto del universo, se utilizan las barras normales.

<a href=“galeria/color.html” title=“Galería color”>Ver dibujos a color</a>

Si el destino estuviera un directorio por encima, pondríamos dos puntitos y una barra ../ de esta manera:

<a href=“../index.html” title=“Página principal”>Volver al inicio</a>

Enlace a una dirección de e-mail

Podemos crear un enlace que, al pulsar sobre él, se abra automáticamente una ventana del cliente de correo que tenga el usuario⁴ para que escriba un mensaje a esa dirección.

4. Normalmente el infame Outlook. Usa Thunderbird, que es mejor y libre.

Para ello, sólo tenemos que usar mailto: en el atributo href, seguido de una dirección de correo electrónico:

<a href=“mailto:leia@alianza.net” title=“E-mail de la Princesa Leia”>Leia</a>

Anclas

Las anclas nos permiten enlazar a una posición concreta de la página, en plan teletransporte. Funcionan así:

Primero creamos el ancla en el sitio al que queremos enlazar después. Para esto, usamos el atributo id (podemos ponerlo prácticamente en cualquier etiqueta). Por ejemplo, así:

<h3 id=“comentarios”>Lista de comentarios</h3>

Ahora creamos un link que nos transporte a ese ancla. Ponemos en href la ID de antes precedida de una almohadilla #:

<a href=“#comentarios” title=“Lista de comentarios”>Leer comentarios</a>

También podemos enlazar a un ancla que esté en otra página:

<a href=“post005.html#comentarios” title=“Lista de comentarios “>Comentarios del post no 5</a>

¡Así de fácil! Hay otro modo de crear anclas, y es usando el atributo name de una etiqueta a sin atributo href y sin texto para el enlace; pero esta manera es obsoleta. De todos modos, revisando códigos de otras páginas te las puedes encontrar, así que no está de más conocer cómo se hace. Tienen este aspecto (y ojo, ¡son invisibles!):

<a name=“comentarios” />

Y ya está todo lo que hay que saber sobre anclas. Son útiles para páginas muy largas, como las FAQ’s⁵: tienen un índice de preguntas que enlazan al ancla de la respuesta correspondiente. Así, si hacemos clic en la pregunta número 3, nos enlazará a ese punto concreto de la página. Normalmente las respuestas tienen otro enlace que nos devuelve a un ancla situada en el índice de preguntas, para facilitar la navegación.

5. FAQ significa Frequently Asked Questions y es una recopilación de las preguntas más frecuentes sobre un tema, contestadas. Está muy mal no leerse las FAQ’s y luego preguntar sobre cosas que ya están respondidas, así que ya sabes qué hacer si no quieres que Matrix te castigue.

Listas

All you base are belong to us.

Zero Wing, video juego arcade.

Ahora veremos cómo implementar listas en nuestras páginas. Las hay de tres tipos: ordenadas, sin ordenar, y de definición. Venga, que esto es muy facilito.

Listas ordenadas

Las listas ordenadas muestran sus elementos numerados. Se crean con la etiqueta <ol>:

<p>Mis escritores favoritos (en orden de preferencia):</p>

<ol>

<li>R. A. Salvatore</li>

<li>George R R Martin</li>

<li>Isabel Allende</li>

</ol>

Hay que tener en cuenta que con CSS podemos cambiar el número por el que queremos empezar a contar, así como el tipo de numeración (números arábigos, romanos, letras del abecedario, mayúsculas).

Listas sin ordenar

Las listas sin ordenar marcan cada elemento con una viñeta, de modo que no se sigue una numeración. Se crean con la etiqueta <ul>.

<p>El helado perfecto (¡ñam!): </p>

<ul>

<li>1 bola de helado de chocolate </li>

<li>1 bola de helado de lim&oacute;n </li>

<li>Trocitos de pi&ntilde;a y melocot&oacute;n en alm&iacute;bar </li>

<li>Sirope de chocolate</li>

</ul>

Al igual que con las listas ordenadas, podemos modificar su apariencia con CSS y elegir el tipo de viñetas que queremos¹. Por cierto, prueba el helado, está riquísimo².

¹Es más, podemos sustituir las viñetas por imágenes.

²También puedes añadir guindas y nata.

Listas de definición

Las listas de definición se diferencian de las anteriores en que cada ítem está compuesto por un par de elementos: un término y su definición. Se usan estas etiquetas: <dl> para crear la lista, <dt> para cáda término y <dd> para las definiciones.

<p>Significado de algunos smileys : </p>

<dl>

<dt>:)</dt>

<dd>Sonrisa</dd>

<dt>xD</dt>

<dd>Carcajada</dd>

<dt>:P</dt>

<dd>Sacar la lengua</dd>

</dl>

Y sí, también se puede cambiar el aspecto y bla, bla, bla. Comentar que las palabras término y definición no sólo se refieren a una palabra y a su significado. También podemos usar una lista de definición para crear un perfil (por ejemplo), relacionando los pares Nombre-Leia, Ciudad-Coruscant y Profesión-Senadora.

Listas anidadas

No, las listas anidadas no son un nuevo tipo de lista, sólo una combinación de las anteriores. Anidar significa meter una lista dentro de otra. Por ejemplo:

<p>Algunos libros de Salvatore :</p>

<ul>

<li>I Trilogía de El Elfo Oscuro

<ol>

<li>La Morada</li>

<li>El Exilio</li>

<li>El Refugio</li>

</ol>

</li>

<li>Trilogía de El Valle del Viento Helado

<ol>

<li>La Piedra de Cristal</li>

<li>Ríos de Plata</li>

<li>La Gema del Halfling</li>

</ol>

</li>

</ul>

No es difícil, sólo debemos tener cuidado cerrando la etiqueta que toque. ¿Cómo lo sabemos? Fácil: primero se cierran las interiores, y después las de fuera. Es por esto, que cuando insertamos una lista dentro de un ítem de otra lista (esto es, primero <li> y después <ol>, después debemos cerrar primero la lista, y luego el ítem de la lista “exterior”. Un buen sangrado como el del ejemplo ayuda mucho.

Imágenes

Nada en la vida existe para que lo temamos,simplemente para que lo entendamos.

Marie Curie, científica

Las imágenes son un elemento importante a la hora de hacer más atractiva una web, o de aportar más información. No obstante, hay que saber cuándo utilizarlas y no abusar de ellas.

Podemos usar tres formatos de imagen: GIF, JPEG y PNG. El JPEG es el más adecuado para imágenes con muchos colores, como fotografías, y que no tengan grandes áreas de colores planos. Las imágenes GIF sólo pueden almacenar hasta 256 colores diferentes, pero uno de estos colores puede ser transparente. El formato PNG es el estándar y podemos elegir varias profundidades de paleta (número de colores). Además, les podemos añadir un canal alpha para crear efectos con transparencias de diferente opacidad. Pero Ya-Sabéis-Cuál navegador en su versión 6 y anteriores no implementa correctamente los PNG, así que hay que llevar cuidado.

Insertar una imagen

Para poner una imagen, hacemos uso de la etiqueta <img> con unos cuantos atributos:

<img src=”image.gif” width=”ancho” height=”alto” alt=”descripción” />

Con src establecemos qué imagen queremos mostrar. Al igual que con los links, hay que tener en cuenta la ruta hacia la imagen. Por motivos de organización, normalmente tendremos las imágenes en un subdirectorio (o varios) llamado images, así que escribiríamos src=”images/algo.gif”.

Los atributos width y height nos permiten establecer el ancho y el alto de la imagen. Podemos indicar un valor absoluto en píxeles o uno relativo en tanto por ciento. Por ejemplo, width=”200″ mostraría la imagen con 200 píxeles de ancho, mientras que width=”100 %” hace que la imagen ocupe toda la pantalla de ancho. Estos dos atributos no son obligatorios, pero sí es conveniente que indiquemos las dimensiones en píxeles reales, ya que ahorramos tiempo al navegador a la hora de maquetar la página.

El atributo alt contiene una descripción de la imagen, que veremos cuando no se haya podido cargar por cualquier motivo. La mayoría de navegadores también muestran esta descripción al pasar el ratón por encima de la imagen. Este atributo es obligatorio, por cuestiones de acesibilidad: hay personas que deshabilitan las imágenes para ahorrar tiempo; otras, usan navegadores de texto como Lynx; y otras, sencillamente son ciegas.

Una cita muy común entre desarrolladores web suele ser: “El visitante más importante de tu web es ciego y se llama Google”.

Como ejemplo, así podríamos insertar la imagen de un banner:

<img src=“images/banner.gif” width =“200″ height =“40″ alt=“BenKo?s Art” />

Imágenes como links

También podemos hacer que una imagen sea a su vez un enlace a una página. Los navegadores suelen mostrarla con un reborde para indicarnos que se trata de un link, pero lo podemos cambiar con CSS.

Para poner una imagen como un link, la introducimos dentro de la etiqueta <a>:

<a href=“http://art.ladybenko.net” title =“Mi portafolio”>

<img src=“images/banner.gif” width =“200″ height=“40″ alt=“BenKo?s Art” />

</a>

Hay una técnica muy popular a la hora de implementar galerías de imágenes que consiste en usar thumbnails. ¿Qué es esto? Una thumbnail es una imagen más pequeña que la original, de modo que al hacer clic sobre ella, cargamos la imagen a tamaño completo.

Entonces, algunos que reciben Iluminación Divina hacen:

<a href =“matrix.jpg” title =“Wallpaper”>

<img src=“matrix.jpg” width=“100″ height=“50″ alt=“Wallpaper de Trinity” />

</a>

Eso está mal. Si nuestro wallpaper de Trinity ocupa 100KB (o más), tendremos esos 100KB ¡como thumbnail! Es decir, justo lo que queremos evitar. El escalar una imagen con width y height no hace que pese menos. Tenemos que coger un programa de dibujo, escalar la imagen, y guardar esta copia más pequeña (de 5KB, por ejemplo):

Firefox no es tan bueno.

<a href=“matrix.jpg” title=“Wallpaper”>

<img src=“matrix_thumb.jpg” width=“100″ height=“50″ alt=“Wallpaper de Trinity” />

</a>

Sobre el uso y abuso de imágenes

Dicen que una imagen vale más que mil palabras. Cierto, pero muchas imágenes, o pocas mal puestas, pueden llegar a desesperar.

¿Te resulta esto familiar? Entras a una web con un fondo de color chillón, letras verde fosforito, una cantidad obscena de GIF’s animados, marquesinas, applets de Java, etc. ¿Cuánto tardas en cerrar la página? Yo menos de un segundo, es ya un acto reflejo.

Es por esto que debemos limitar los GIF’s animados, así como evitar el uso indiscriminado de imágenes. Recuerda: sólo hay que poner las imágenes necesarias. Además, te ahorrarás una pasta en ancho de banda de tu servidor.

Tablas

¡¡¡Bienvenido a mi pesadilla!!!

Warcraft 2: Beyond the Dark Portal

Grom Hellscream, héroe orco

Las tablas son el mecanismo que nos proporciona XHTML para presentar información tabulada, como horarios o los resultados de la quiniela. Son un poco engorrosas de utilizar, pero a veces son necesarias, así que ¡allá vamos!

Una tabla básica

Las principales etiquetas que disponemos para crear una tabla son estas:

• <table> : crea la tabla
• <caption> : pone título a la tabla
• <tr>: crea una fila
• <td>: crea una celda
• <th>: crea una celda de encabezamiento

Se entiende mejor con un ejemplo. Es muy conveniente utilizar bien los sangrados, ya que hay que tener mucho cuidado al cerrar las etiquetas <tr>, <td> y <th>. Aquí tenemos una tabla de 2×2:

<table>

<caption>Videojuegos</caption>

<tr>

<th>Título</th>

<th>Género</th>

</tr>

<tr>

<td>Sonic</td>

<td>Plataformas</td>

</tr>

</table>

Daría como resultado algo parecido a esto:

El método es siempre el mismo. Por cada fila que queramos, abrimos una etiqueta <tr> e insertamos allí las celdas que correspondan. Dentro de cada celda podemos meter prácticamente cualquier cosa, pero debemos tener siempre en mente que el objetivo de las tablas es tabular información.

Atributos de table

La etiqueta <table> dispone de una serie de atributos¹ que nos permiten modificar su borde y los márgenes de las celdas.

Para cambiar el tamaño del borde de la tabla, usamos border con un valor en píxeles. Si no indicamos nada, los navegadores suelen tomar como valor por defecto 1 ó 0. Si no queremos ningún borde, debemos utilizar border=”0″.

Si lo que queremos es cambiar la distancia entre una celda y otra, empleamos el atributo cellspacing con un valor en píxeles. Y para modificar la distancia del contenido de la celda a los bordes de esta, usamos cellpadding². La diferencia entre cellspacing y cellpadding puede confundir al principio, así que lo mejor es verlo con un ejemplo³, modificando la tabla anterior (pruébalo):

¹ Los viejos atributos que en HTML 4 nos permitían establecer dimensiones y colores han sido sustituidos por CSS.
² Aunque, en mi opinión, es mejor usar CSS para esto.
³ Los valores est án muy exagerados para que se note la diferencia.

<table border=“1″ cellpadding=“10″

cellspacing=“30″>

<caption>Videojuegos</caption>

<tr>

<th>Título</th>

<th>Género</th>

</tr>

<tr>

<td>Sonic</td>

<td>Plataformas</td>

</tr>

</table>

Expandir filas y columnas

Muchas veces necesitamos que una celda ocupe más de un espacio. Pongamos como ejemplo nuestra socorrida tabla de videojuegos. ¿Qué pasa si en vez de un género por cada juego, queremos meter dos? Podemos hacer que la celda de género ocupe dos columnas. Así:

<table>

<caption>Videojuegos</caption>

<tr>

<th>Título</th>

<th colspan =“2″>Género</th>

</tr>

<tr>

<td>Sim City </td>

<td>Simulación </td>

<td>Estrategia </td>

</tr >

</table>

Como ves, para expandir una celda por varias columnas hemos utilizado el atributo colspan. Podemos hacer lo mismo con las filas, mediante rowspan. Vamos a hacer la misma tabla de antes, pero girada 90 grados:

<table>

<tr>

<th>Título</th>

<td>Sim City</td>

</tr>

<tr>

<th rowspan =“2″>Géneros</th>

<td>Simulación</td>

</tr>

<tr>

<td>Estrategia</td>

</tr>

</table>

¿Que es un rollo esto de las tablas? Pues sí, pero no le des mucha importancia. La mayoría de editores de código (X)HTML, como el Quanta o el Homesite+, traen asistentes para crear tablas de forma rápida y sencilla.

¿Tablas para layouts? ¡Insensato!

A día de hoy, la mayoría de las páginas web están maquetadas usando tablas con border=”0″. Antes de la llegada del CSS, era totalmente imposible crear texto a columnas y, en definitiva, maquetas un sitio web⁴. Afortunadamente, CSS implementa capas, con lo que se puede configurar totalmente la apariencia y la colocación de cada elemento de la página mediante la hoja de estilos, quedando el código XHTML muy simple y sencillo.

¿Entonces por qué la gente sigue usando tablas? Porque muchos piensan que eso de las capas es algo muy complicado. ¡Mentira y gorda! Lo que pasa es que nadie nace enseñado, y aprender algo nuevo siempre da un poco de pereza. En la parte de CSS de este tutorial aprenderemos a crear varios tipos de diseño populares para así tumbar el mito de que las capas son difíciles.

⁴ Bueno, se podía apañar algo utilizando frames, pero era peor el remedio que la enfermedad.

Y dándole la vuelta a la tortilla… ¿Por qué no usar tablas? Pues porque las tablas no se han creado para maquetar y el WWW Consortium lo desaconseja. Además, en navegadores no visuales (de texto, para ciegos, o cualquier dispositivo que no sea un monitor) el resultado es totalmente imprevisible. ¿Quieres otra razón de peso? Las tablas dan más trabajo. El código queda más enrevesado, y si queremos renovar el diseño de nuestra página, hemos de cambiar prácticamente todo el código. Sin embargo, si hubiéramos usado un layout por capas, sólo tendríamos que modificar el archivo CSS. ¿Más razones? Al ser el código más complicado, las páginas son más pesadas y gastan más ancho de banda. Además, tardan más en cargar, ya que hasta que no se carga todo lo que hay en la tabla, no se muestran los resultados parciales.

El futuro es XHTML y todos los sitios web importantes han rediseñado su layout con capas. Así que te animo a que cumplas los estándares y no uses las tablas para maquetar⁶

⁶En la web de Steal these buttons! (http://gtmcknight.com/buttons/) hay botoncitos muy cucos para mostrar al mundo que formas parte del Clan de Paladines del CSS.

Formularios

Mi fortaleza reside únicamente en mi tenacidad.

Louis Pasteur, microbiólogo y químico

Los formularios nos permiten recoger información introducida por el visitante de nuestra web. Esta información podemos enviarla por correo electrónico o procesarla con un script.

Si se manda por correo electrónico, es muy importante tener en cuenta de que se trata de información no cifrada y que podría ser interceptada, así que no debe contener datos importantes. Un uso aceptable sería un formulario con comentarios sobre nuestra página o para pedir un intercambio de links.

Si nuestro servidor dispone de tecnología como PHP o CGI (por ejemplo), podemos hacer más cosas con esa información, como guardarla en una base de datos o generar una página dinámicamente.

La etiqueta FORM

Todos los formularios están encerrados por <form> y </form>. Dentro de esta etiqueta, van los campos del formulario, y podemos usar párrafos y saltos de línea para organizarlos. Vamos a ver un ejemplo de etiqueta <form>, suponiendo que va a ser un formulario que se enviará por correo electrónico:

<form action=“mailto:leia@alianza.net” method=“post” enctype=“text/plain”>

El atributo action recoge qué se va a hacer una vez que se pulse el botón de enviar (Submit). En ese ejemplo, el formulario se envía a la dirección leia@alianza.net¹. Si tuviésemos un script para procesar el formulario, hubiésemos puesto algo como action=”enviar_info.php”.

¹ Lo siento chicos, pero la princesa Leia no me ha autorizado a publicar aquí su verdadera dirección de e-mail

Con method especificamos cómo va a ser enviada la información. Si utilizamos correo electrónico, le damos el valor de post. Para scripts se suele utilizar get, que pone el valor de las variables en la query string (URL) ².

² Si esto te suena a chino, no te preocupes. Sólo es necesario saberlo en el caso de que vayas a usar un script. . .Y en ese caso, ya lo aprenderás cuando te enseñen a programarlos.

Por último, con enctype=”text/plain” conseguimos que llegue a nuestra bandeja de entrada el formulario en forma de texto plano sin caracteres extraños.

Campos de texto

La mayoría de los campos de un formulario se crea con una sola etiqueta, <input>, y mediante su parámetro type especificamos el tipo de campo que queremos. Un campo de texto básico quedaría así:

<input type=“text” id=“nombre” name=“nombre” size=“20″ />

Vamos a pegarle un vistazo a los atributos. Con type=”text” indicamos que se trata de un campo de texto. El atributo size recoge el ancho del campo, medido en caracteres. Ahora bien, ¿qué hacen id y name?

Pues id es un identificador. Esto implica que nada en todo el documento puede llamarse igual que este elemento. Este parámetro sirve para CSS³ y para más cosillas, como usarlo con la etiqueta <label> (que veremos ahora).

³ Estableciendo un aspecto exclusivo para ese elemento, por ejemplo.

Con name damos nombre a la variable de ese campo. Por ejemplo, si el visitante escribe “Morpheo” en el formulario que hemos puesto de ejemplo, recibiríamos un e-mail que contendría algo así:

nombre = Morpheo

De todos modos, para ahorrarnos problemas, siempre que podamos es mejor escribir el mismo valor para id y name. Hay que complicarse la vida lo menos posible.

Hay otros atributos adicionales para nuestros campos de texto. Podemos indicar el número máximo de caracteres que puede introducir el usuario con maxsize Y si queremos que aparezca un valor por defecto, podemos usar value=”algo”. Por ejemplo, para pedir la dirección de la página web del visitante:

<input type=“text” name=“url” id=“url” size=“30″ maxsize=“255″ value=“http ://” />

Y, por supuesto, no debemos olvidarnos de nuestro socorrido title, que funciona igual que con la etiqueta <a>.

Campos de contraseña

Los campos de contraseña son exactamente iguales que los de texto, sólo que el visitante en lugar de ver los caracteres que ha introducido, ve asteriscos. Lo de “exactamente iguales” quiere decir eso: es un campo de texto, la información no va cifrada de ninguna manera. La diferencia entre un campo de texto y uno de contraseña es meramente estética.

Los atributos son los mismos que los de los campos de texto, lo único que cambia es qe debemos introducir type=”password”. Ejemplillo:

<input type=“password” name=“pass” id=“pass” />

Etiquetar campos

Ya hemos aprendido a crear campos de texto para nuestro formulario, ¿pero cómo le decimos al visitante qué es lo que tiene que introducir en cada campo? Podríamos hacer algo así:

<p>Nombre :

<br />

<input type=“text” name=“nombre” id=“nombre” />

</p>

Mal. Podemos tener problemas con navegadores no visuales. Entonces, ¿cómo sabemos que la palabra “Nombre” hace referencia al campo con el atributo id=”nombre”? Para eso disponemos de una etiqueta nueva: <label>.

Esta etiqueta se encarga de asociar texto con su campo correspondiente. Sólo tiene un atributo, for, y en él tenemos que indicar la id del campo al que queremos hacer referencia. El ejemplo anterior sería correcto de esta manera:

<p>

<label for=“nombre”>

Nombre :

</label>

<br />

<input type=“text” name=“nombre” id=“nombre” />

</p>

Áreas de texto

Con las áreas de texto damos a nuestros visitantes la posibilidad de introducir texto con varias líneas. La etiqueta a usar es <textarea>, y su funcionamiento es un poco diferente al de <input>.

La etiqueta <textarea> dispone de los atributos id, name y title, que funcionan como en el resto de campos de formulario. Además, disponemos de otros dos para indicar las dimensiones del área de texto: cols se encarga de establecer el ancho (medido en caracteres) y rows el alto, medido en líneas.

Como ejemplo, imaginemos que en una parte del formulario queremos poner un campo para que el visitante deje un comentario. Como probablemente sea largo, utilizamos un textarea:

<p>

<label for=“comentario”>

¿Algún comentario?

</label>

<br />

<textarea name=“comentario” id=“comentario” cols=“30″ rows=“5″>

Bla bla bla

</textarea>

</p>

Fíjate en que <textarea> tiene etiqueta de cierre. El texto que hay entre la etiqueta de apertura y la de cierre es el valor por defecto que contendrá el campo; en este caso “Bla bla bla”.

Casillas de verificación

Una casilla de verificación (más conocida como checkbox) es un cuadradito que el usuario puede activar y desactivar pulsando en él. Se crean con la etiqueta <input> y type=”checkbox”. Los atributos id, name y title funcionan con normalidad, pero value funciona de manera algo distinta. Lo que escribamos en value es lo que nos saldrá en el e-mail que recibamos como el valor de la variable (indicada en name) si la casilla está activada. Es decir, que si ponemos esto. . .

<p>

Has jugado a …

<br />

<input type=“checkbox” name=“monkey1″ id=“monkey1″ value=“si” />

<label for=“monkey1″>

Monkey Island I

</label>

</p>

…y el usuario activa la casilla, recibiremos un mail como este:

monkey1 = si

También podemos hacer que una casilla esté activada por defecto, si añadimos el atributo checked=”checked”. Así:

<p>

Has jugado a …

<br />

<input type=“checkbox” name=“monkey1″ id=“monkey1″ value=“si” checked=“checked” />

<label for=“monkey1″>

Monkey Island I

</label>

<input type=“checkbox” name=“xwing” id=“xwing” value=“si” />

<label for=“xwing”>

X- Wing Alliance

</label>

</p>

Nos quedaría entonces la casilla etiquetada como “Monkey Island” ⁴, mientras que la de “X-Wing Alliance” sin activar.

⁴ Yo soy cola, tú pegamento.

Botones de selección

No sé si el término “botones de selección” es en realidad el más adecuado como traducción, así que mejor pondré una explicación de lo que hacen. El nombre en inglés es radio buttons, y son casillas circulares agrupadas, en las que sólo una puede estar activada a la vez. Sirven para cuando queremos que el visitante sólo seleccione una opción de las múltiples que se le dan.

Aunque se crean con la etiqueta <input> indicando el parámetro type=”radio”, los radio buttons son algo “especiales”, así que los veremos un poco más despacio.

Pongamos el caso de que queremos que el visitante de nuestra web nos indique cuál película de la trilogía de Star Wars ⁵ es su favorita. Evidentemente, sólo puede coger una, así que nos toca emplear radio buttons en lugar de casillas de verificación. Necesitamos entonces un botón por cada película (tres en total). ¿Cómo los agrupamos? Pues dando el mismo nombre de variable a cada botón. Es decir, el atributo name es el mismo para todo el grupo. ¿Y qué hacemos con id? Bien, no puede haber dos valores de id repetidos, así que la id en cada botón ha de ser distinta. En otras palabras, los radio buttons son los únicos campos en los que la id y name deben ser diferentes. Disponemos además del atributo checked por si queremos marcar alguna opción por defecto. El código para este ejemplo sería así:

⁵ De la trilogía original, por supuesto. No queremos ofender a nadie.

<p>

Peli preferida :

<br />

<input type=“radio” name=“peli” id=“sw_hope” value=“hope” checked=“checked” />

<label for=“sw_hope”>

A New Hope

</label>

<input type=“radio” name=“peli” id=“sw_empire” value=“empire” />

<label for=“sw_empire”>

The Empire Strikes Back

</label>

<input type=“radio” name=“peli” id=“sw_jedi” value=“jedi” />

<label for=“sw_jedi”>

The Return of the Jedi

</label>

</p>

Como ves, usamos como nombre de variable (name) la palabra “peli”. Según la película que sea, cada botón tiene asignada una id diferente. Por ejemplo, A New Hope tiene asignada la id “peli_ hope”. El atributo value contiene el texto que tendrá la variable en caso de que se seleccione ese botón. Por ejemplo, si el visitante selecciona la película de The Return of the Jedi, recibiremos un e-mail con esta línea:

peli = jedi

Quizás parezca un poco lioso, pero una vez hayas hecho un par de formularios, todo irá bien.

Listas de selección

Las listas de selección tienen una función parecida a los radio buttons, en tanto que se nos presentan múltiples opciones agrupadas en las que escogemos una ⁶. La diferencia es que la lista aparece replegada y no ocupa apenas espacio en la web, así que son muy útiles cuando tenemos muchas opciones a elegir.

La etiqueta que las crea es <select> y tiene etiqueta de cierre. Entre ellas, insertamos las opciones que tenemos con la etiqueta <option>. Pongamos el mismo ejemplo de antes, el de elegir la película preferida de Star Wars.

⁶ Mentira, hay un atributo que permite que seleccionemos varias opciones de la lista, pulsando la tecla Ctrl. No seas un pequeño bastardo y lo pongas, que es muy incómodo.

<p>

<label for=“peli”>

Película preferida :

</label>

<br />

<select name=“peli” id=“peli”>

<option value=“hope”>

A New Hope

</option>

<option value=“empire”>

The Empire Strikes Back

</option>

<option value=“jedi” selected=“selected”>

The Return of the Jedi

</option>

</select>

</p>

Con selected=”selected” indicamos cuál es la opción por defecto, en este caso The Return of the Jedi. Como ves, aquí no tenemos el lío aquel con id name.

Botones de enviar y reestablecer

Ya hemos visto todos los campos de formulario que podemos crear, ahora sólo nos falta comentar dos botones especiales: el de enviar (submit) y el de reestablecer (reset).

Ambos se crean con <input>. El atributo id no tiene mucho sentido, a menos que usemos CSS para cambiar su aspecto de un modo concreto y exclusivo. Asímismo, name tampoco nos será útil si no empleamos algún tipo de script para tratar la información. Como nosotros enviamos el formulario por correo, no debemos preocuparnos.

En value indicaremos el texto que aparecerá en el botón. El botón de enviar se encarga de mandar la información del formulario, según lo que hayamos especificado en <form>. Para crear el botón, simplemente indicamos type=”submit”:

<input type=“submit” value=“Enviar” />

El botón de reestablecer borra el formulario y vuelve a poner los valores por defecto. Útil para formularios largos. Lo conseguimos con type=”reset”:

<input type=“reset” value=“Borrar” />

Ni que decir tiene que hay que diferenciar bien cuál botón es cuál y no poner textos extraños como título de los botones. Si te sientes creativo, vete a jugar al Lego. Fastidia mucho que se te borre todo el formulario por error, creyendo haberle dado al botón de enviar.

¿Qué es CSS?

Fuera del mundo de los sueños, la vida puede ser dura, incluso cruel. Pero es vida.

Final Fantasy X. Auron, guardián legendario.

En la parte de XHTML hemos comentado muchas veces que podemos cambiar el aspecto de una página web mediante CSS (Cascading Style Sheets). Ahora es el momento de aprender cómo hacerlo.

Me ha costado decidirme sobre cómo explicar las diferentes propiedades del CSS, pero creo que la mejor manera de aprender sin que se haga muy pesado es poniendo ejemplos de problemas comunes con los que nos topamos, junto con la manera de solucionarlo en CSS. Después de todo, esto no pretende ser una guía de referencia con todas las propiedades y todos sus posibles valores

Googleando un poco, podrás encontrar muchas. Y siempre te queda consultar las especificaciones oficiales en la web del W3C. Es un PDF muy majo de 359 páginas..

¿Dónde escribo el código CSS?

Hay dos opciones para insertar CSS en un documento XHTML. Lo más normal es hacerlo en un archivo externo (que se llama “hoja de estilos”) y enlazarlo desde nuestro documento XHTML. Esto tiene una ventaja enorme, y es que podemos tener muchas páginas enlazando a la misma hoja de estilos. Si más adelante queremos cambiar algo, sólo tenemos que modificar un único archivo (la hoja de estilos) y afectará a todas las páginas. Podemos enlazar una o más hojas poniendo esto dentro de la cabecera (<head>):

<link href=“hoja_estilos.css” rel=“stylesheet” type=“text/css” />

La otra opción es escribir la información referente a los estilos incrustada en el mismo archivo XHTML. Lo podemos hacer escribiendo entre las etiquetas <style> y </style>, que también deben ir en la cabecera.

Si hacemos las dos cosas a la vez, siempre tienen prioridad las reglas que estén dentro de <style>.

Vale, ¿pero cómo funciona?

En una hoja de estilos utilizamos reglas que consisten en elegir selectores a los que asignamos una serie de propiedades. Por ejemplo, si queremos que nuestra página web tenga el fondo blanco, las letras grises, y una fuente Arial de 10 puntos de tamaño, escribimos esta regla:

body {

background-color: #fff;

color: #666;

font-family: Arial, sans-serif;

font-size: 10pt;

}

Como ves, las líneas terminan en un punto y coma. Es muy importante que no se nos olvide. Ah, y si te lo estás preguntando, #fff representa al color blanco, y #666 a un gris oscuro.

¿Selectores?

Los selectores los utilizamos para elegir a qué elementos se aplican las propiedades que escribimos. Hay diferentes tipos de selectores, los más importantes son los que veremos ahora.

Si queremos elegir una etiqueta, simplemente escribimos su nombre. Por ejemplo, si queremos establecer las propiedades para los enlaces:

a {

…

}

También podemos elegir un elemento único utilizando su atributo id. Para ello, empleamos la almohadilla:

#menu {

…

}

Otra cosa que podemos hacer es definir una clase y hacer que muchos elementos la utilicen, escribiendo un punto antes del nombre. Por ejemplo, si queremos destacar algo:

.importante {

…

}

Luego podríamos emplear esa clase en los párrafos que queramos (o cualquier otro elemento), usando el atributo class de este modo:

<p class=“importante”>Bla bla bla</p>

También podemos seleccionar ciertos elementos, pero sólo cuando estén contenidos dentro de otros. Por ejemplo, si queremos seleccionar los <li>, pero sólo de las listas sin ordenar:

ul li {

…

}

¿Qué significa eso de “cascading”?

Cascading significa cascada, y tiene que ver con la herencia. En CSS, los elementos hijos heredan todas las propiedades de sus padres. Por ejemplo, si establecemos una regla para el elemento table, sus hijos (td entre otros) también tendrán esas mismas reglas.

Es por esto que si, por ejemplo, queremos establecer un tipo de fuente para todo el documento, debemos indicarlo en el elemento body para que se propague por toda nuestra página.

¿Puedo poner comentarios?

Claro, pero son distintos a los de XHTML, que van entre <!– y –>.

/* Esto es un comentario */

¿Por qué #fff significa blanco?

En CSS hay varias maneras de indicar un color. Podemos hacerlo en inglés, por ejemplo. En lugar de #fff escribimos white y lo solucionamos. El problema es que así es muy incómodo porque tenemos que aprendernos los nombres de cada color, y puede que exista algún color que queramos poner y que no tenga nombre\ldots además de que supone una falta de precisión absoluta. Así que normalmente se usa la notación en hexadecimal.

¿Recuerdas esas discusiones en parvulario sobre si cierto color era lila, morado, o fucsia? ¿Quién te dice que tu concepto de morado sea el mismo que el de tu navegador?

Los colores en nuestro monitor está formado por tres haces de luz: rojo, verde y azul. Se llama sistema RGB (Red Green Blue). Si cogemos un programa de dibujo, vemos que podemos eleigr un color indicando el valor de sus componentes rojo, verde y azul por separado. Este valor puede variar de 0 a 255 (se usan 8 bits para representar este rango). Por ejemplo, si queremos amarillo puro, ponemos 255 para el rojo, 255 para el verde y 0 para el azul.

¿Qué tiene que ver esto con el sistema hexadecimal? Pues que este rango de valores (0..255) puede ser representado con dos dígitos hexadecimales, que van desde el 00 hasta el FF. La forma de escribir un color completo es #RRGGBB, donde la almohadilla indica que se trata de un color hexadecimal, y RR, GG y BB son los dígitos correspondientes al rojo, verde y azul, respectivamente. Entonces el amarillo sería #ffff00.

La mayoría de los colores que usaremos tendrán por cada componente los mismos dígitos. Por ejemplo: #ff0000 (rojo), #0000aa (azul marino) o #000000 (negro). Estos colores los podemos abreviar y dejarlos en tres cifras. Por ejemplo, #f00 es completamente equivalente a #ff0000. Sin embargo, colores como #a0a0a0 no pueden ser abreviados.

Por tanto, para conseguir el color blanco, debemos poner poner todas las componentes a 255, que en hexadecimal nos quedaría #ffffff, y abreviado en #fff.

La mayoría de editores de código (X)HTML o de programas de dibujo nos mostrarán en la paleta el valor del color en hexadecimal. En cualquier caso, siempre podemos obtener el valor de sus componentes por separado y convertirlo a hexadecimal con una calculadora.

Colores, fondos y fuentes

Eh, yo he visto esto antes. No. . . lo he jugado antes. No. . . ¡lo he diseñado antes!

Post sobre “Piratas del Caribe” Ron Gilbert, desarrollador de videojuegos

Para empezar a meter mano al CSS, conviene conocer algunas propiedades sencillas. ¡Empezamos!

El color de primer plano

La propiedad color hace referencia al foreground color, es decir, al color que está por encima del fondo. Hablando en plata, viene a ser el color del texto. Si queremos que nuestra página tenga las letras de gris oscuro, lo conseguimos con esto:

body { color : #666; }

Muy fácil, ¿no? Que pase el siguiente.

El fondo

Podemos modificar el fondo de un elemento con la propiedad background, que tiene la siguiente sintaxis:

background : color | image | repeat | attachment | position ;

El primer parámetro corresponde al color de fondo, los siguientes son relativos a la imagen de fondo:

• image: aquí indicamos la ruta a la imagen que pondremos. Por ejemplo, url(fondo.gif).
• repeat: con esto establecemos si queremos que la imagen se repita o no, tanto horizontal como verticalmente. Con repeat se repite siempre en ambos sentidos (valor por defecto), mientras que con no-repeat no se repite nunca. Con repeat-x se repite sólo en horizontal, y con repeat-y sólo en vertical.
• attachment: sirve para indicar si el fondo se queda fijo en el sitio o se desplaza con scroll. Es un poco difícil de explicar, así que lo mejor es que lo probéis vosotros mismos: con scroll (valor por defecto) el fondo se desplaza, y con fixed se queda siempre en el mismo sitio.
• position: indica la posición del fondo. Indicamos tanto la posicion desde la izquierda como desde arriba (ya sea en píxeles, porcentajes, o incluso palabras). En este caso, si podemos usar palabras, es preferible que lo hagamos. Disponemos de top (arriba), bottom (abajo), left (izquierda) y right (derecha).
  Los valores por defecto son 0 % 0 %, que sitúan al fondo en la esquina superior izquierda. Si lo quisiéramos en las coordenadas 20,30 (tomando como el origen a la esquina superior izquierda), escribiríamos 20px 30px. Si queremos el fondo centrado, pues 50 % 50 %.

Podemos omitir alguna propiedad si queremos. Además, podemos establecer los valores de forma individual, usando las propiedades background-color, background-repeat, etc.

Veamos algunos ejemplos para poner fondo a nuestra página:

/* sólo color de fondo */

body { background : #fff; }

/* color de fondo e imagen en mosaico */

body { background : #fff url(fondo.gif); }

/* imagen fija , centrada y sin repetir */

/* a modo de marca de agua */

body {

background-color: #fff;

background-image: url(fondo.gif);

background-attachment: fixed;

background-repeat: no-repeat;

background-position: 50% 50%;

}

Hemos explicado de forma bastante detallada cómo funciona la propiedad background, pero no te malacostumbres. Ahora iremos mucho más deprisa, y seguramente te toque buscar más información por tu cuenta.

¿Recuerdas ese librito majo de 359 páginas?

Fuente

Hay varias propiedades que nos permiten jugar con el aspecto del texto. Podemos englobar todas bajo font, pero primero veremos algunas subpropiedades.

Antes de nada, debemos considerar que no todos los ordenadores tienen las mismas fuentes instaladas. Es decir, que mi wonderfulosa fuente llamada chachi.ttf no tiene por qué tenerla mi vecino. Es más, lo normal es que no la tenga. ¿Entonces qué hacemos? Usar sólo fuentes “estándar”, que tengan la mayoría de ordenadores. Además, podemos especificar varias, de forma que si no se tiene la primera, se muestre la segunda, si no se tiene la segunda, pues la tercera, etc.

La Ley de Murphy, como en cualquier otro aspecto de la vida, es aplicable al diseño web también.

A lo que íbamos. La propiedad que sirve para cambiar la fuente es font-family. Como acabamos de ver, podemos indicar varias fuentes, por orden de preferencia. Si el nombre de una fuente tiene espacios en blanco, hay que ponerla entre comillas. Por ejemplo:

Haz esto y muere. La irrupción de la Comic Sans por doquier sólo es comparable a la aparición de Jar Jar Binks en Star Wars.

font-family: “Comic Sans MS”, Arial, sans-serif;

EL tamaño de la fuente lo controlamos con font-size. Podemos indicar medidas en píxeles (px) o en puntos (pt).

Mentira cochina. Podemos (y mucha gente opina que debemos) usar medidas relativas, pero el tema de la herencia es muy importante en estos casos y… Dejémoslo en que no es newbie-friendly.

Para alinear el texto tenemos a text-align, que puede tomar los valores right (derecha), left (izquierda), center (centrado) o justify (justificado).

A mucha gente le gusta montar Guerras Sagradas acerca de la conveniencia o no de usar texto justificado. Todavía no se han puesto de acuerdo, así que probablemente es un asunto de gustos.

Es muy normal tener una clase así:

.centrar { text-align: center; }

Si queremos indentar los párrafos, pues usamos text-indent:

p { text-indent : 2em; }

¿Qué significa em? Es una unidad relativa. Lo más fácil es trabajar con píxeles o porcentajes, pero en algunos casos conviene utilizar otras unidades. 1 em equivale al tamaño de la fuente.

Bueno, exactamente equivale a la anchura de la letra “M” mayúscula.

Así, si por herencia o por cualquier otra cosa el texto se muestra en un tamaño de fuente diferente, la proporción de indentado sería siempre la misma. Si pusiéramos 20px, siempre sería esa, aunque el tamaño de la fuente fuera de 20 o de 32 píxeles.

También podemos cambiar la decoración del texto mediante text-decoration. Puede tomar diversos valores, como none (sin adornos), underline (subrayado), overline (subrayado superior) o line-through (tachado).

¡Cuidado! Los humanos tenemos la estúpida manía de pensar que cualquier texto subrayado es un enlace.

Si queremos que nuestros links no tengan subrayado, pondremos:

a { text-decoration : none; }

Podemos transformar las mayúsculas y minúsculas con la propiedad text-transform. Si ponemos lowercase, todo se mostrará en minúsculas; con uppercase, en mayúsculas; y con capitalize pondremos una letra capital al principio de cada palabra.

En cuanto al espaciado, para la distancia entre palabras usamos word-spacing; para el de las letras, letter-spacing; y para el interlineado, line-height.

Un ejemplo con todo esto, para la etiqueta <strong>:

strong {

color: #000;

letter-spacing: 0.25 em;

text-trasform: uppercase;

}

¿Demasiada información? Sí, pero ten en cuenta que no hay que memorizar todo esto. Ni de coña. Lo importante es saber que existe una propiedad que hace tal cosa, no cómo se llama ni qué parámetros tiene. Para eso ya están las guías de referencia rápida y los editores de CSS.

El modelo de caja

No consumo drogas, mis sueños ya son lo suficientemente escalofriantes

M.C. Escher, artista

Es hora de conocer uno de los fundamentos más importantes del CSS: el modelo de caja (box model). Es muy fácil, pero entenderlo bien es vital para poder realizar una buena maquetación de la web.

¿Cómo es el modelo de caja?

En realidad, todos los elementos de una web (párrafos, enlaces, imágenes, tablas, etc.) son cajas rectangulares. Los navegadores sitúan estas cajas de la forma que nosotros les hayamos indicado para maquetar la página.

Hay dos tipos de cajas: block e inline. Los elementos block rompen el flujo de maquetación. Esto es, aparecen solos, insertando “saltos de línea”. Los elementos inline siguen el flujo, y están contenidos dentro de elementos de bloque.

Por ejemplo, un párrafo sería un elemento block (no podemos tener un párrafo al lado del otro, sino que dos párrafos seguidos aparecerán uno abajo del otro. En cambio, un enlace es un elemento inline, ya que no “corta” el texto donde está metido.

Estas dos diferencias son importantes, pero hay que tener en mente que ambos tipos comparten el modelo de caja, que es el que aparece en la figura 1.
Figura 1 – Modelo de Caja

Las propiedades más importantes de una caja son: width (ancho), height (alto), padding (relleno), border (borde) y margin (margen).

Ancho y alto

La propiedad width es un poco confusa, y durante mucho tiempo era horroroso trabajar con ella debido a que Ya-Sabes-Quién no la implementaba correctamente. Afortunadamente, desde la versión 6 del IE, width funciona como debería, así que es un quebradero de cabeza menos.

Lo que ha dado lugar a competiciones de a ver quién conseguía el chanchullo más bonito para sortear el bug. Si estás interesado, googlea buscando “box model hack”.

A lo que íbamos, width representa el ancho de la caja. Pero es el ancho interior, es decir, si bordes, márgenes, ni padding. Podemos indicar este ancho en medidas absolutas (normalmente píxeles) o relativas (normalmente %).

Aunque los elementos inline tienen width, si la modificamos con CSS no veremos ningún resultado visual. Esto es porque el ancho de estos elementos se establece automáticamente para que se ajuste a las dimensiones del elemento inline. Por ejemplo, si tenemos un enlace que consiste en un texto de cinco caracteres, el ancho (width) de este elemento será lo que ocupen esos cinco caracteres.

Sobre el alto de la caja, se controla con la propiedad height, y todo lo que hemos dicho antes sobre el ancho, también se aplica aquí.

Padding

Con padding establecemos la distancia de “relleno” entre el límite interior de la caja y el exterior (borde). Es una definición muy mala, pero se entiende a la perfección en el dibujito.
Si queremos poner un padding de 20 píxeles para toda la caja, lo haríamos así:

padding : 20 px;

Podemos establecer un padding distinto para cada lado, usando los sufijos -top (superior), -bottom (inferior), left (izquierda) y right (derecha):

padding-top: 10px;

padding-bottom: 5px;

padding-left: 30px;

padding-right: 20px;

Podemos abreviar lo anterior en una sola línea, indicando primero el padding superior y luego siguiendo el orden de las agujas del reloj. Es decir, nos quedaría: arriba, derecha, abajo, izquierda. El ejemplo anterior se acortaría así:

padding: 10px 20px 5px 30px;

Otro atajo útil es especificar sólo dos medidas: una corresponderían al padding superior e inferior, y la otra al lateral. Si queremos que los paddings superior e inferior sean de 10 píxeles, y los laterales (izquierdo y derecho) de 20 píxeles, escribimos:

padding: 10px 20px;

Bordes

Si queremos que nuestra caja tenga bordes, lo conseguimos con la propiedad border. Tiene la siguiente sintaxis:

border: width | style | color

Como habrás supuesto, width especifica el grosor del borde. Normalmente es una medida en píxeles, pero también podemos utilizar las palabras thin (fino), medium (normal) y thick (grueso). Por supuesto, cómo de gordo es thick queda a interpretación del navegador.

En cuanto a style, es el tipo de borde. Hay bastantes, pero los más comunes son: solid (línea continua), dashed (línea discontinua), dotted (línea de puntos) y double (línea continua doble).

Por último, color indica el color del borde.

¡Wow!

Podemos escoger un tipo de borde diferente para cada lado con los sufijos -top, -bottom, -left y -right. Por ejemplo, para poner que algo tenga el borde inferior de 1 píxel a puntitos rojos:

border-bottom: 1px dotted #f00;

Para eliminar el borde, simplemente ponemos que tiene de grosor 0 píxeles o que el estilo del borde es none. Esto es muy importante con las imágenes, ya que si tenemos una imagen enlazando a algo, los navegadores la ponen con un reborde muy feo. Así que esto se ha convertido ya en un fijo de las hojas de estilos:

img { border: none; }

Márgenes

Los márgenes se controlan con la propiedad margin, y es la distancia entre el borde de la caja y los elementos que la rodean.

En cuanto a la forma de usarla, es igual que con la propiedad padding, así que la forma de escribir y los atajos es exactamente la misma. Por ejemplo, si queremos márgenes superior e inferior de 20 píxeles, y laterales de 5 píxeles:

margin: 20px 5px;

¡Truco del almendruco! Para centrar un elemento de bloque, podemos hacer uso de auto:

margin: 0px auto;

Capas

Vamos a hablar de una etiqueta XHTML que nos quedó por ver y está estrechamente ligada con CSS: <div>. Esta etiqueta se encarga de crear una capa, que es un elemento de bloque que sirve de contenedor a otros elementos de bloque e inline.

¿Para qué nos sirven? Primero, para organizar semánticamente nuestra página. El atributo id tiene carga semántica, así que si queremos poner en la cabecera3 de nuestra web el título y el menú, haríamos esto:

¡Ojo! Cabecera en cuanto a maquetación. ¡No tiene nada que ver con la etiqueta head!

<div id=“header”>

<h1>Mi blog</h1>

<ul id=“menu”>

<li><a href=“…” title=“…”>Principal</a></li>

<li><a href=“…” title=“…”>Acerca de</a></li>

<li><a href=“…” title=“…”>Enlaces</a></li>

</ul>

</div>

El otro uso de las capas es el de maquetar. Por ejemplo, el layout típico de un blog tiene cuatro capas: la cabecera, la del contenido principal, la de la barra lateral y la del pie de página. Mediante CSS, podemos controlar la disposición de estas capas, y así conseguir el diseño que queramos.

Muy útil y socorrida para poner pijadas, como la wishlist de Amazon. Y si cuela, cuela.

Floats

Los floats son probablemente una de las cosas que más cuesta dominar. En inglés los califican como “tricky”. Yo los califico como “pequeños cabroncetes”.

Lo que hacen los floats es alterar el flujo de la página, “incrustando” en él un elemento de bloque. El ejemplo más típico es el de si queremos poner una imagen acompañando a un texto, y que el texto “envuelva” a la imagen. Esto lo conseguimos creando una clase como la siguiente:

.izquierda {

float: left;

}

Podemos indicar tanto left (izquierda) como right (derecha). ¿Fácil, rápido y para toda la familia? No. Después de un float, suelen ocurrir sucesos paranormales. La mayoría de ellos suelen desaparecer mediante la propiedad clear, que se encarga de “anular” los floats. Los valores que admiten son left, right y both (que significa “ambos”).

Ya te darás cuenta, ya.

Volviendo al ejemplo de layouts de blogs, lo normal es poner el contenido y la barra lateral mediante floats. Lo que suele pasar es que una de estas dos columnas pasa por encima del pie de página, en lugar de quedar el pie al final de todo. Esto se suele arreglar así:

#footer {

clear: both;

}

Trucos con CSS

He visto cosas que nunca creeríais. . .

Blade Runner. Roy Batty, replicante.

A partir de ahora, los capítulos de CSS serán totalmente prácticos. Este primero mostrará diferentes “trucos” para conseguir ciertas cosas. Asegúrate de probarlos y de comprender todos ellos antes de continuar.

Links que cambian

Los enlaces tienen tres estados: sin visitar (“normales”), hover (cuando pasamos el cursor del ratón por encima), activos (cuando hacemos clic) y visitados (cuando ya hemos ido a esa dirección). Estos estados se corresponden a pseudoelementos, y podemos cambiar la apariencia de los enlaces con CSS. Sin embargo, algunos navegadores tienen un bug que, dependiendo del orden en el que escribamos las reglas, se mostrará el resultado correctamente o no. ¿Cómo lo solucionamos? Pues LoVe/HAte. Es un mnemotécnico que nos ayudará a recordar el orden en el que estas reglas funcionan bien en cualquier navegador. Quedaría así:

/* links normales */

a:link {

text-decoration: none;

color: #00a;

}

/* visitados */

a:visited {

color: #a00;

}

/* hover */

a:hover {

text-decoration: underline;

}

/* activos */

a:active {

font-weight: bold;

}

Lo que hace el código anterior es poner los enlaces de color azul marino y sin subrayado. Cuando pasamos el cursor por encima, aparece el subrayado. Al hacer clic, el texto del enlace se pone en negrita. Los enlaces que ya hemos visitado aparecen de color granate.

Fácil, ¿no?

Links con el subrayado de diferente color

Al usar la propiedad text-decoration, el color de la línea de subrayado es el mismo que el del texto del enlace. Podemos hacer un pequeño chanchullo para cambiar esto, y es quitar el subrayado y poner en su lugar un borde:

a {

color: #fff;

text-decoration: none;

border-bottom: 1px solid #f0c;

}

a:hover {

border: none;

}

Esto haría que los enlaces fueran de color blanco, y que la línea de subrayado fuese fucsia. Al pasar el cursor por encima, se eliminaría el subrayado. El pseudoelemento hover funciona para cualquier otro elemento de la web. No dudes en usarlo en celdas de tablas o capas.

A no ser que uses una versión antigua de un navegador subdesarrollado. . . Sí, ese.

Campos de formulario chulos

Un efecto muy Web 2.0² es hacer los campos de formulario con fuente gigante y que el fondo del campo cambie cuando el usuario está usándolo. Esto se consigue con el pseudoelemento focus:

²Es decir, pijo.

input, textarea {

font-size: large;

border: 3px solid #70C332;

color: #666;

background: #fff;

}

input:focus, text-area: focus {

background: #eee;

}

Lo anterior pondría los campos de formulario input y textarea con una fuente grande y gris oscura, borde gordito de color verde y el fondo blanco. Al hacer foco (es decir, cuando el visitante está situado en ese campo), el fondo cambia a un color gris clarito.

Blockquotes 2.0

Otro legado de la Web 2.0: blockquotes con texto gigante y unas comillas gigantes. Quizás es algo difícil de imaginar con esta descripción, pero si echas un vistazo a la figura 1, seguro que ya lo has visto en algún sitio antes.
Figura 1: Blockquote molón

Un ejemplo de código podría ser este:

blockquote {

background: url (comillas.gif) top left;

background-repeat: no-repeat;

text-indent: 30 px;

text-align: left;

font-size: x- large;

padding: 0px;

}

Tendrás que ajustar los valores según la fuente y la imagen en sí. En muchos casos, es más conveniente utilizar padding y quitar el indentado.

Cambiar texto por imagen

Muchas veces, especialmente en headings, queremos cambiar el texto y en su lugar que aparezca una imagen bonita. Un ejemplo del código sería este (suponiendo que nuestra imagen mide 300×100 píxeles):

<!–XHTML–>

<h3 id=“enlaces”><span>Enlaces</span></h3>

/* CSS */

h3# enlaces {

width: 300 px;

height: 100 px;

padding: 0px;

background: url(links.png) top left no-repeat;

}

h3 span {

visibility: hidden;

}

La etiqueta span es nueva, y no significa nada (literalmente). Es una etiqueta “vacía”, y sólo la usamos para conseguir ciertos efectos CSS. Como semánticamente no tiene ningún valor, hemos de evitar su uso todo lo posible.
Lo que hace el código anterior es hacer coincidir las dimensiones de <h1> con las de la imagen. Después, gracias al <span> nos encargamos de que el texto del heading sea invisible. No obstante, aunque el texto sea invisible, todavía existe. Por eso, si el título es muy largo, es posible que sea más grande que la imagen que usamos de fondo, y es posible que nos descoloque el layout. En este caso, puedes cambiar la fuente de <h1> y hacerla enana.

Crear un layout con CSS

La frase científica más excitante, la que precede a grandes descubrimientos, no es “¡Eureka!”, sino “Qué raro”.

Isaac Asimov, bioquímico y escritor

En este capítulo veremos cómo crear un layout sin tablas a dos columnas, muy típico en los blogs. Es bastante sencillo de seguir, y es un ejemplo de que dejar de usar tablas para maquetar no tiene por qué ser un proceso doloroso.

Características

Esta maquetación tiene las siguientes propiedades:

• Anchura fija
• Centrado
• 2 columnas (una de ellas de barra lateral)
• Cabecera (header)
• Pie de página (footer)

Puedes echarle una ojeada en la figura 1.
Figura 1: Layout de 2 columnas

Código XHTML

El esqueleto del código XHTML de nuestra página es el siguiente (iría dentro del body):

<div id=“container”>

<div id=“header”>

<h1>Título</h1>

<h2>Subtítulo</h2>

</div>

<div id=“sidebar”>

<h3>Sección</h3>

<p>Bla bla …</p>

</div>

<div id=“main”>

<h3>Sección</h3>

<p>Contenido principal</p>

</div>

<div id=“footer”>

<p>Pie de página</p>

</div>

</div>

Como ves, tenemos cuatro capas. Ahora veremos el código CSS de cada una de ellas.

#container

Esta capa es un contenedor para el resto de la página. Establece la anchura de todo y es la que centra el contenido. El truco está en usar auto dentro de margin para lograr el centrado. Esto no funciona en el IE, así que tendremos que echar mano de text-align: center en el body. El CSS completo es este:

body {

text-align: center;

}

#container {

width: 700px;

margin: 0px auto;

text-align: left;

}

#sidebar

Esta es la barra lateral tan famosa en los blogs. En otras páginas web, podemos poner ahí menús, publi, o cualquier otra cosa. La clave en esta capa es usar float: left, que la sitúa a la izquierda y hace que todos los demás elementos la rodeen. Aquí va el código:

#sidebar {

width: 200px;

padding: 10px;

float: left;

}

El padding no es obligatorio, pero lo he puesto para después poder explicar bien la siguiente capa. También es necesario especificar el ancho en píxeles. Ah, con este método la barra no se extenderá hasta abajo, sino que se corta en su final (esto se ve bien en la figura 13.1). Si pones la barra de otro color, y quieres que llegue hasta abajo, puedes usar la técnica de Faux Columns¹.

¹ http://www.alistapart.com/articles/fauxcolumns/ Es un chanchullo sencillo e ingenioso. Básicamente consiste en poner una imagen de fondo que simule la columna.

#main

Esta es la capa donde irá el contenido (en un blog, esto serían los posts). Lo importante en esta capa es indicar con margin-left la distancia desde el borde del #container hasta esta capa, pasando por encima de la barra lateral.

Nuestra barra lateral tiene 200 píxeles de ancho y 10 píxeles de padding a la izquierda y a la derecha. Si hacemos memoria del modelo de caja, el margen izquierdo que tenemos que indicar serían 200 + 10 + 10 + X, donde X es la cantidad que nosotros queremos dejar de separación entre la barra lateral y el contenido principal. Para el ejemplo, pondremos 5 píxeles:

#main {

margin-left: 225px;

}

#footer

La capa del pie de página viene bien para poner información de copyright/copyleft² o cualquier otro tipo de datos misceláneos. Aquí únicamente hemos de tener cuidado de “anular” el ?oat que tiene la barra lateral mediante un clear:

² Recordad, chicos, las licencias Creative Commons son buenas para la salud y para el karma.

#footer {

clear: both;

}

¡Ya tenemos nuestro propio layout tablas que cumple los estándares del W3C!

Cabecera

Su carencia de fe resulta molesta.

A New Hope. Darth Vader, sith.

Una de las cosas muy útiles que se han puesto de moda, es hacer que la cabecera de una web sea a su vez un enlace hacia la sección principal de una web. El hecho de que si nos perdemos tengamos un enlace bien gordo arriba del todo, es un salvavidas.

Código XHTML

Los estándares nos dicen que el título principal de la página se pone con la etiqueta <h1>. No obstante, el texto de esta etiqueta lo cambiaremos por una imagen. Como queremos además meterle un link, también usaremos la etiqueta <a>. Dentro del link, metemos una etiqueta <span> para poder ocultar con CSS el texto y que sólo se vea la imagen que hará de cabecera. . . pero nos estamos adelantando. El código XHTML sería este:

<div id=” header “>

<h1><a href =“…” title =“…”>

<span>Título</span></a></h1>

</div>

#header

Primero tocaremos el CSS de la capa #header. Establecemos el ancho y el alto de la capa con las medidas que tenga la imagen(400×100 en este caso). Además, ponemos la imagen de fondo y quitamos el margin y el padding:

#header {

background: url(bg.png) top left no-repeat;

width: 400px;

height: 100px;

margin: 0px;

padding: 0px;

}

El heading

También quitamos los márgenes a la etiqueta <h1> (para que la capa mida exactamente lo que la imagen) y hacemos invisible el contenido de la etiqueta <span>, para que el texto de la cabecera sólo se muestre en navegadores de texto o aurales:

#header h1 {

margin: 0px;

}

#header a span {

visibility: hidden;

}

El enlace

Ahora sólo nos falta la etiqueta <a>. Lo que queremos conseguir es que se pueda hacer clic en todo el área de la cabecera, no sólo en lo que sería el texto (invisible) del enlace. Para eso, tenemos que transformar el enlace en un elemento de bloque, y darle las medidas de la imagen.

Además, hemos de quitar los márgenes y el padding, así como la decoración del texto, para que no salga una línea de subrayado:

#header a {

width: 400px;

height: 100px;

display: block;

padding: 0px;

margin: 0px;

text-decoration: none;

}

Listas personalizadas

La Red es una pérdida de tiempo. Y eso es precisamente lo que está bien.

William Gibson, escritor.

Ahora vamos a aprender cómo modificar las listas desordenadas para que tengan viñetas personalizadas. Para ello, necesitaremos una imagen pequeñita que haga de viñeta. En Internet hay muchísimas para descargar, aunque puedes dibujar las tuyas propias. Supondremos que la imagen se llama bullet.png.

Código XHTML

Extremadamente simple. Se trata de una lista sin ordenar, sin más misterio:

<ul>

<li>Sonata Arctica</li>

<li>Nightwish</li>

<li>HIM</li>

</ul>

La lista

Ahora la parte de CSS. Disponemos de una propiedad que se llama list-style-image, pero da problemas con ciertas medidas de viñetas. Así que tenemos que guarrear un poco el código. Para el elemento ul sería:

ul {

padding-left: 10px;

margin-left: 10px;

list-style-type: none;

}

Lo más importante es el list-style-type: none, que se encarga de quitar esas viñetas feas que pone el navegador por defecto. El padding y el margin es para sangrar la lista (puedes poner los valores que quieras, o incluso quitarlos).

Los ítems

¡Ya sólo queda poner nuestra viñeta! Para ello, modificamos el estilo de los li que estén en listas desordenadas:

ul li {

padding-left: 12px;

background: url(bullet.png) 0em 0.5em no-repeat;

margin-bottom: 1em;

}

Lo primero que vemos es el padding} por la izquierda. Esto no es el sangrado, es una distancia de relleno que ponemos para que el texto del ítem no esté encima de la viñeta. Este valor lo tienes que modificar dependiendo de las dimensiones de la imagen de tu viñeta.

Después, nos encontramos con la propiedad background}. Después de establecer la imagen, debemos indicar en qué posición (recuerda: primero horizontal, luego vertical) se encuentra la viñeta. ¡Aquí hay truco! Como ves, trabajamos con em y no con medidas absolutas en píxeles. ¿Por qué? Porque así nos vale para cualquier tamaño del texto.

Recuerda que 1em equivale a la anchura de la letra M.

Lógicamente, es muy difícil dar con el valor correcto a la primera, así que habrá que probar varias veces hasta topar con el que mejor quede. Ah, no se nos puede olvidar el i para evitar el mosaico.

Por último, margin-bottom se encarga de establecer la separación entre un ítem y otro de la lista.

Muy sencillo, ¿no?

Menús verticales

Dije que era un adicto. No dije que tenía un problema.

House M.D., Greg House, médico

¿Sabías que con listas se pueden hacer menús verticales chulos? ¿Que por qué listas? Porque un menú vertical es una serie de elementos relacionados, y lo más semántico que podemos hacer es meterlo en una lista.

El principal problema es que las listas son feas. En el capítulo anterior vimos cómo hacerlas más bonitas, pero quizás queramos algo un poco más diferente para nuestro menú. CSS nos da la solución, así que ya no tendrás excusa para hacer un menú en Flash.

Que, por cierto, es de lo peor que se te podría ocurrir. Si alguien no tiene instalado el plugin de Flash (nunca des por supuesto que el vistante tenga instalado un plugin), ni siquiera podrá navegar por tu página.

En el menú que haremos ahora, hacemos apaños con los colores de fondo y los bordes para conseguir efectos cuando el ratón pase por encima. Puedes ver cómo quedaría en la figura 1. Como va con CSS, podríamos fácilmente incorporar imágenes, pero eso queda como ejercicio.

No tiene gracia si te lo dan todo mascadito.
Figura 1: Menú vertical

Código XHTML

Al grano, necesitamos una lista tal que así:

<div id=“menu”>

<ul>

<li><a href=“…” title=“…”>Home</a></li>

<li><a href=“…” title=“…”>Archivos</a></li>

<li><a href=“…” title=“…”>Enlaces</a></li>

<li><a href=“…” title=“…”>Acerca de</a></li>

</ul>

</div>

La lista

¡A meterle mano al CSS! Empezaremos primero con darle la anchura que queramos a la lista (que será la anchura del menú), poner una fuente maja y quitar las viñetas y márgenes de la lista.

#menu ul {

list-style-type: none;

margin: 0px;

padding: 0px;

width: 200px;

font-family: Arial, sans-serif;

font-size: 11pt;

}

Ponemos a continuación un color de fondo para los ítems de la lista (<li>). Lo normal sería poner aquí los efectos de hover, para que se activen cuando el ratón pase por encima de todo el bloque, no sólo del texto del enlace; pero Quien-Tú-Sabes en sus versiones 6 e inferiores no soporta hovers en cosas que no sean un enlace, así que vamos a tener que emplear una artimaña más adelante. Por ahora, el CSS para el elemento li sería así de sencillo:

#menu ul li {

background-color: #666;

}

Enlaces

Y aquí viene el chanchullo del que os hablaba antes para hacer el hover: poner el enlace como si fuera un bloque, y así ocupará todo el li y podremos manipular sus dimensiones.

Haz memoria: es lo mismo que empleamos en un capítulo anterior para poner un enlace en la cabecera de la web.

#menu ul li a {

color: #ccc;

text-decoration: none;

text-transform: uppercase;

display: block;

padding: 10px 10px 10px 20px;

}

Sólo nos queda hacer los cambios para el hover:

#menu ul li a:hover {

background: #000;

border-left: 10px solid #333;

color: #fff;

}

Si lo pruebas, verás que las letras se desplazan al hacer el hover, debido a que aparece el borde izquierdo. Si no os gusta este efecto, podéis añadir la línea siguiente al link cuando está normal. Lo que hace es poner un borde del mismo color que el fondo de los li, y así parece que no existe:

border-left: 10px solid #666;

Merece la pena trastear con esta técnica, puede dar lugar a menús muy logrados.

¿Por qué se ve “bien” con Internet Explorer y “mal” con Firefox?

Sólo hay dos cosas infinitas: el Universo y la estupidez humana, y no estoy muy seguro acerca del primero.

Albert Einstein, físico.

Un día una amiga me comentó que una compañera suya estaba haciendo una web, y que “en el Explorer se ve bien y en Firefox mal”, y me preguntó que a qué podría ser debido. Le di una respuesta deprisa y corriendo y creo que no me expresé bien, así que aquí va la full version. La comparto aquí con vosotros porque seguramente nos esperen muchas más preguntas de este estilo.

La clave para entenderlo bien es darle la vuelta a la tortilla. La realidad es que en IE se ve “mal”, y en el resto de los navegadores (no sólo Firefox) se ve “bien”. Pongo “bien” y “mal” entre comillas, porque son apreciaciones que hacemos los humanos, subjetivas.

Los navegadores no son adivinos con bolas de cristal que se conectan a la mente del maquetador web e interpretan su voluntad. El maquetador tiene que dejar escrito, detalladamente, el contenido y apariencia de la página web: esto se consigue con los lenguajes XHTML y CSS.

Estos lenguajes se encuentran bien definidos como estándar en el WWW Consortium (W3C para los colegas). Este organismo se encarga de describir con precisión cómo deben interpretar el XHTML y el CSS los navegadores.

Ahora bien, los navegadores no siempre cumplen a pies juntillas lo que dice elW3C. Es más, cierto navegador¹ no hace ni puto caso.

¹Quien-Tú-Ya-Sabes.

Pongamos un ejemplo ficticio: imaginemos que el Explorer “confunde” los colores rojo y blanco, y los intercambia, debido a un error de programación (no entraremos a valorar si por descuido o deliberadamente). Es decir, que donde pone #fff IE lo interpreta como #f00, y viceversa. En este ejemplo, supondremos que el resto de navegadores interpretan los colores correctamente.

¿Qué pasaría si quisiéramos hacer una página web con fondo blanco? En nuestro código CSS, pondríamos algo así. . .

body { background : #f00 };

. . . que en IE se mostraría blanco. Entonces cuando vamos alegremente a mirar la web con otros navegadores, vemos que se muestra de color rojo fosforito. “En Firefox se ve mal”. Pues no. Por mucho que se empeñe el Explorer en hacer creer a los desarrolladores web, el número #f00 significa rojo, y prou.

Lo que ha pasado es que una página se ha desarrollado mal (a menudo inconscientemente) para forzar a que se vea “bien” en IE. Lo que obtenemos es que en IE la página se visualiza incorrectamente, pero por casualidades místicas, esa visualización coincide con los deseos del diseñador.

Un caso real y muy gráfico de cómo IE visualiza mal las páginas lo podemos encontrar en el Acid Test. Es un ejemplo de página web que construye mediante código estándar y válido un dibujito de una cara sonriente. Según lo bien programado que esté el navegador, veremos ese dibujo más o menos bien.

Migración rápida a XHTML

Bienvenido al Mundo Real.

The Matrix. Morfeo, capitán de la Nabucodonosor

Si ya usabas HTML 4, puedes aprender muy rápido XHTML, puesto que las bases son las mismas. Sólo hay que tener en cuenta que XHTML deja de lado todo aspecto estético y se centra en el contenido y en la semántica. En lugar de usar una etiqueta para dar un aspecto concreto, usamos etiquetas para hacer que las palabras signifiquen una cosa u otra. Ahora veremos una serie de “reglas” a seguir para pasarnos a XHTML. También es recomendable leer el capítulo donde se explica la estructura de un documento XHTML. Evidentemente, no se muestran aquí todas las diferencias, pero sirve para hacernos una idea de qué es lo que nos espera¹.

Minúsculas y comillas, por favor

Antes era una práctica muy común escribir las etiquetas en mayúscula, para diferenciarlas del código. Por compatibilidad con XML, en XHTML todas las etiquetas deben ir en minúsculas.

Además, todos los atributos tienen que estar entre comillas dobles. Por ejemplo, si antes teníamos:

<IMG SRC=icono.gif ALT=Icono>

Ahora escribimos:

<img src=“icono.gif” alt=“Icono” />

Todas las etiquetas se cierran

Con HTML podíamos crear párrafos con la etiqueta <p> sin necesidad de cerrarla con </p>. Lo mismo ocurría con <li>, por ejemplo. En XHTML ninguna etiqueta puede quedar sin cerrar.

Lo de “ninguna” es literal, y etiquetas que no tienen una de cierre, como <img>, <br> deben ser cerradas también. ¿Cómo lo hacemos? Insertando la barra /, de forma que el salto de línea ahora nos queda <br />. El espacio en blanco que hay entre el nombre y la barra es necesario para que los navegadores antiguos reconozcan la etiqueta.

<FONT> y ciertos atributos desaparecen

Hemos dicho que XHTML deja de lado la apariencia del documento, ya que eso es controlado por CSS. Entonces, las etiquetas <font> y <basefont> carecen de sentido.

Además, esos atributos de algunas etiquetas que hacen referencia al color de las cosas, imágenes de fondo, etc. también desaparecen por este motivo: son sustituidos por reglas CSS. Así que sayônara a bgcolor y compañía. Lo mismo para el atributo align usado en párrafos e imágenes.

<B> y amigos también se van

Ciertas etiquetas de formato, como <b> (negrita), <i> (cursiva), etc. ya no se usan porque hacen referencia exclusivamente a la apariencia de las palabras. Si queremos dar énfasis, utilizamos <em>, y para dar énfasis más fuerte <strong>. Los navegadores suelen mostrarlas como cursiva y negrita, respectivamente, aunque esto es lo de menos porque podemos cambiarlo con CSS.

Hay que usar alt y title

XHTML hace hincapié en la accesibilidad de un documento, y por eso debemos facilitar atributos de “apoyo” a algunas etiquetas. La etiqueta <img> dispone del atributo alt, que se muestra cuando la imagen no se puede cargar (a veces también cuando se pasa el cursor del ratón por encima). Hay que utilizarlo siempre.

Existe un atributo muy similar llamado title, que se utiliza en la etiqueta <a> (entre otras) y sirve para mostrar una descripción del sitio al que nos dirigimos. Por ejemplo:

<a href=“http://www.google.es” title=“Buscador”>Google</a>

Cuidado al anidar etiquetas

XHTML es muy estricto en cuanto a la anidación de etiquetas. Básicamente, hay dos tipos de elementos: los block y los inline. Los block son etiquetas como párrafos, headings, listas, etc. Así a ojo los distinguimos porque siempre van solos e insertan saltos de línea. Los inline no interrumplen el flujo del texto. Son las etiquetas de formato, los enlaces, y demás. No podemos meter un elemento block dentro de uno inline.

Por ejemplo, si queremos hacer que el heading principal de nuestra página sea un enlace, esto sería incorrecto:

<a href=“..” title=“…”><h1>Texto</h1></a>

Hay que hacerlo así:

<h1><a href=“…” title=“…”>Texto</a></h1>

Además, hay ciertas etiquetas que no admiten otras dentro. Si tienes dudas, lo mejor es utilizar el validador de código del WWW Consortium.

No existen los frames

Aunque la especificación XHTML 1.0 Frameset permite el uso de frames (marcos) en una página, tanto la Transitional como la Strict los prohíben³. Así que ya no podemos usar ni frames ni inline frames.

³En realidad esto es como la Cherry Coke. Existir, existe, pero nadie la compra.

De todos modos, aunque se pudieran emplear, no deberíamos, ya que los frames son un atentado contra la usabilidad⁴.

⁴Y a Google no le gustan, de paso.

No se puede utilizar target

Antes, la etiqueta <a> tenía un parámetro llamado target que permitía especificar en qué frame debía cargarse el destino de un link. Como ya no hay frames, este atributo es innecesario.

A los amantes del target=”blank” para abrir webs en ventanas nuevas les digo que si el visitante quiere abrir un ventanuco nuevo, lo hará con el botón derecho del ratón. Y para los que usamos navegación con pestañas⁵ es bastante molesto que se abran nuevas instancias del navegador. Gracias.

⁵Ahora mismo prácticamente toda la humanidad con acceso a Intenet, ya que la nueva versión del Maligno por fin las trae.

Las tablas no se usan para maquetar

Aunque puedes crear un documento XHTML con tablas para maquetar que pase el análisis del validor del W3C, va contra la filosofía de dejar XHTML sólo para el contenido. Las tablas están hechas para representar información tabulada, no para diseñar layouts.

De todos modos, el paso para un layout tableless no suele ser fácil, así que creo que es conveniente familiarizarse primero con el resto de XHTML y CSS, y dejar la maquetación sin tablas para más tarde⁶.

⁶“Tarde” no significa “nunca”.

Los ampersands dan por saco

Si tienes URL’s que contengan el ampersand (&), te llevarás la sorpresa de que el validador del W3C se pelea con ellas. Esto es debido a las entities.

¿Qué demonios son? Pues la manera que tenemos de insertar caracteres de forma “segura”⁷. Por ejemplo, el carácter á se escribiría &aacute;. Como ves, las entities comienzan por un ampersand y acaban en punto y coma.

⁷Es decir, que se vean cuando usamos una codificación muy limitada, como el ASCII estándar. Si usamos Unicode no deberíamos tener ningún problema.

Por eso, cuando se leen las URLs que contienen ampersands, hay confusión porque lo que sigue no es una entity. . . Así que lo que tenemos que hacer es sustituir el ampersand por su propia entity, que es &amp;. Es decir, que esta URL:

http://alianza.net/p.php?nick=leia&show=all

Se quedaría en:

http://alianza.net/p.php?nick=leia&amp;show=all

Aunque hemos estado hablando de URL’s, también debemos emplear la entity &amp; en nuestro texto normal y corriente cuando queramos escribir un ampersand.

Usa Unicode

Un idiota no se curará hasta que se muera.

Proverbio japonés

A la hora de almacenar archivos de texto, podemos elegir entre bastantes codificaciones, que viene a ser qué numerito (y de qué tamaño en bits) se asigna a cada carácter.

¿Qué es lo que pasa cuando abrimos un archivo en una codificación (por ejemplo, la Shift-JIS que es una japonesa) y le decimos que la lea con otra (la ISO 8850-1, de caracteres latinos)? Pues que obtenemos un motón de símbolos extraños. Esto pasa, por ejemplo, cuando alguien me envía un trackback¹ con una codificación distinta a la que uso en el blog.

¹Los trackback son un tipo especial de “comentarios” en los blogs. Cuando alguien de otro blog te enlaza al tuyo, si te manda un trackback, aparecerá en tu post un comentario con la URL del blog de la otra persona. Es útil para saber quién habla sobre cosas que has dicho.

¿Pero qué pasa si se quiere hacer un documento multilingüe con distintos alfabetos? ¿Qué pasa si desde una aplicación quiero leer cualquier documento en cualquier lengua? Para esto existe una codificación de caracteres estándar, que es la Unicode. Sacado de su web.

Unicode proporciona un número único para cada carácter, sin importar la plataforma, ni el programa, ni la lengua.

Existen varios formatos de Unicode, el más usado es el UTF-8 y está bastante extendido en la Red. De hecho, en la blogosfera hispana las dos codificaciones más usadas son la ISO 8859-1 y la UTf-8. Usar Unicode es bueno y es la codificación estándar. Usadla.

1. ScribeFire, convierte tu Firefox en un editor enriquecido conectado a tu blog.
2. Wordpress Helper, toda la documentación de Wordpress en tu Firefox.
3. Screen Grab to Wordpress, haz screenshots y envialos directamente a tu Wordpress.
4. Wordpress Scanner, revisa la seguridad de tu blog.
5. Broken Link Checker, plugin que se encarga de revisar los enlaces de tu blog y marcar los que ya no están disponibles.
6. Google Syntac Highlighter, mejora estéticamente la visualización del código de tus posts. (Alternativas  WP-Syntax, WP-Chili, o SyntaxHighlighter Plus.)
7. Insights, plugin que te permite enlazar tu contenido con contenido multimédia de sitios como Flickr, Youtube, Wikipedia…
8. Windows Live Writer, Microsoft nos dá la aplicación necesaria para escribir offline nuestros artículos.(Para Mac tenemos ecto o Thingamablog)
9. Revision Control, herramienta que permite controlar las revisiones de posts, ideal para blogs con multiples autores.
10. Organize Series, un plugin ideal para crear series de artículos relacionados entre sí.
11. Wordpress Comment Moderation Notifiers, herramienta con la que podremos moderar nuestros comentarios más rápidamente.
12. Wordpress Comment Ninja, extiende las opciones de moderación de comentarios con este script de GreaseMonkey.
13. Adserve, controla la publicidad de tuWordpress.
14. Simple Tags, los tags nunca serán más fáciles, usando el Yahoo Term Extractions API este plugin te sugerirá los tags que poner.
15. Twitme, postea en twitter desde tu Wordpress (Alternativas Twitter for Wordpress, Twitter Tools, Twitpress, y SimpleTwitter).

Fuente: http://www.anieto2k.com
Bajo licencia Creative Commons

Fuente: http://www.trazos-web.com
Bajo licencia Creative Commons

La cuestión no era nada más que un duda relacionada con SEO. Yo no soy experto en SEO, algo he aprendido en mi corta experiencia desde el 2006, pero cuanto más sé sobre SEO, más me duele la cabeza cuando me nombran la palabreja… Sí creo que me he convertido en un ser Anti-SEO. Pero no le demos más vueltas y pasemos a la cuestión:

Gente!,
Acerca de los links a utilizar en los artículos, a los efectos de contribuir al posicionamiento y al trabajo de los buscadores, ¿es conveniente colocar varios links hacia un mismo blog que sea de nuestra red???
Por ejemplo: si se hace un post para Educasexo.com y el texto contiene varias palabras clave que se pueden linkear a varios temas que ya se han tratado en ese blog, es de utilidad colocarle varios links a educasexo.com; o con uno o dos son suficientes y es preferible buscar links externos o de otro sitio?.

Espero haber sido clara! Un saludo!.
Mi respuesta es, que si esos enlaces a otros posts de Educasexo, o blogs de nuestra red van a ser útiles para el lector, porqué no los vamos a poner. Pero además, es bueno ’salir a la calle y relacionarse’, con lo que ofrecer enlaces a otras páginas donde se exprese otra opinión u otro punto de vista sobre el tema es, si cabe, aún más positivo.

Todo esto es independiente de que contribuyan más o menos en el posicionamiento en buscadores. El tema de poner enlaces se está convirtiendo en una fórmula, y no debería ser así.

En mi opinión, es bueno que haya un poquito de todo. Pero sin tener que forzar el incluir un enlace interno o externo, cuando no hay una buena justificación para que exista dicha relación, simplemente porque os haya dicho que es mejor que hayan tanto enlaces hacia nuestros blogs como hacia otras fuentes externas.
Habrá ocasiones en que no será viable poner enlaces a alguno de nuestros blogs y otras en que no encuentres nada interesante en fuentes externas. Lo que no debes hacer es forzar un enlace para cumplir con la recomendación general y tirar millas. Sinó pasa lo que pasa…

Ya que estamos, aprovecharé para explicar cuatro teorías mías sobre los enlaces.

Lo primero que os sugiero es que escribáis primero para los lectores, y después para los buscadores. Hoy día, en muchos proyectos de Internet y en otras redes de blogs se le da excesiva importancia al SEO, y todo el mundo intenta aplicar técnicas SEO, lo notamos mucho en los que habéis trabajado para otras redes ;P. Pan para hoy, ostia de las grandes para mañana. Esto hay que dejárselo al que sepa realmente de SEO, para no caer en prácticas que puedan ser penalizadas algún día. Vosotros, como redactores/editores os tenéis que centrar en que se realicen buenos textos, 100% útiles para el lector, y pensados para él. ¿Porqué nadie le da el mismo valor a mejorar la calidad de sus contenidos, que a forzar en los contenidos 20 truquitos SEO? Porque no da resultados a corto plazo. Pero esto a mi entender es un error y os explicaré un ejemplo muy claro:

Hace unos años, un buen truco que estaba superexplotado por los blogs para aparecer en los primeros resultados de búsqueda, consistía simplemente en cruzar enlaces en la sidebar entre los 10/20 blogs pertenecientes a tu red o tu red de colegas que tenían su blog. Un día, Google cambió el algoritmo, para quitar valor a este tipo de linking. De un día para otro, el tráfico pasa a ser entre 10 y 25 veces inferior, ya que tu posicionamiento era fruto de unas técnicas artificiales que abusaban de una debilidad del algoritmo de Google. Buena ostia, sobretodo si pensamos en los ingresos.

Por tanto, no quiero sobreoptimizar la red con trucos/técnicas/prácticas SEO. Es muy arriesgado, y genera mucha incertidumbre a medio / largo plazo. Nuestra filosifía va a consistir en realizar artículos dignos de ser referenciados por otras webs o blogs. Cuando váis a buscar información sobre algo, qué es lo primero que se os pasa por la cabeza, ir a la Wikipedia, El País, o el blog de moda sobre dicha temática. Esto les convierte en las fuentes más referenciadas en Internet de forma NATURAL, lo que hace que ocupe los primeros resultados en los resultados de búsqueda.

La mejor optimización para buscadores que podéis hacer para vuestros posts, es escribir y enlazar de forma natural y con sentido común. Nos os voy a dar una receta que diga ‘tenéis que poner 3 enlaces que apunten aquí, 2 enlaces que apunten allá y otros tantos enlaces a eso otro’. Os lo voy a poner más difícil …

Sobre el tema que comentas, pondremos el siguiente post de Educasexo como ejemplo:

Los hombres que pierden peso pueden disfrutar más del sexo

Los tres enlaces que ha colocado el autor, son enlaces a otros documentos que tratan materias que complementan la idea central de la propia nota. Esto está perfecto, ya que estos enlaces ayudan al lector a comprender o ampliar la información sobre conceptos clave para entender el artículo. Independientemente de si son enlaces al propio blog de Educasexo o a otro blog de la red o a fuentes externas. La primera regla de sentido común es que los enlaces deben apuntar hacia una página relacionada con la temática tratada en la propia página.

Hasta ahí bien con el concepto, PERO es un desastre la ejecución… primer error grave, el autor se toma muchas molestias en hacer enlaces para SEO, pero ninguna en clicar sobre el enlace para comprabar que funciona. Se trata de un error típico el comerse el http://, y difícil de detectar en la revisión.

Pues creo entender que en SEO los enlaces rotos penalizan, al igual que penaliza para una persona que trata de seguir el enlace y se encuentra con una página de error (vaya mierda de página, los va a leer su santísima madre …). De nuevo, esto no es SEO, es sentido común. Pues resulta que los dos primeros enlaces, están mal y devuelven una página de error. Este post ahora mismo tiene menos futuro que yo en Eurovisión. Media hora de trabajo tirada a la basura.

Pasando a analizar los enlaces uno a uno, el primero trataba de ser un intento de enlazar a la Wikipedia. Ok, es una fuente muy buena. Pero si cambio la perspectiva a nivel de blog, me doy cuenta que entre el 80% – 95% de los posts incluye algún enlace a la grandísima Wikipedia… ¿Qué somos un subdominio de la Wikipedia? Yo como lector, creo que he pillado la indirecta. Iré directamente a consultar allí mis dudas. Gracias, hasta otro día. ¡Ale! un lector habitual menos. La gente ya conoce la Wikipedia. Enviarla allí es tontería, porque además seguramente ya habrá pasado por dicha información antes.

Personalmente, creo que se podría haber mejorado mucho el valor del post, si tratas de lanzar una búsqueda en Google tal que así: ‘blog obesidad mórbida’, ‘experiencia obesidad mórbida’ o ‘foro obesidad mórbida’, encontramos cosas interesantes en blogs y foros dignos de enlazar, que enriquecerán el ansia de conocimiento de nuestro ávido lector. Quizás en esta ocasión, el depredador de información considere guardar la dirección del blog en sus bookmarks, ya que le descubrimos nuevas fuentes de información interesantes. +1 en reputación.

Y encima en el caso de los blogs, son enlaces agradecidos, que permiten al autor que recibe el enlace descubrir nuestro blog y si tiene activados trackbacks, pues también a sus lectores. Eso quizá haga que algún día, dicho autor te enlace un post tuyo sobre la Andropausia con la keyword ‘Andropausia’ cuando él trate el tema en su blog y busque fuentes…

Anda pero si de rebote podemos conseguir ‘la crème de la crème’ de los enlaces según los manuales SEO: un enlace natural desde otro página que trata temas relacionados! ¿Pero estábamos haciendo SEO? No. Estábamos ampliando la información que ofrecemos en nuestro post con otras fuentes, que pese a ser desconocidas para el común de los internautas, son de un gran valor. No sabéis la de tesoros que se pueden encontrar en los blogs personales …

El segundo intento de enlace nos quería llevar a una nota de la web Gorditos.org sobre la operación del Bypass gástrico (ver aquí). Bien, aquí solo entraremos en un detalle, si vamos al final de la nota, vemos que no es más que una copia mal hecha de otra fuente, a la cual enlazan. ¿Porqué no se enlaza aquí a la fuente original? Si hasta tiene dibujitos de como rajan el estómago y el intestino. La diferencia entre una página y otra es abismal. De nuevo quedamos bastante mal con el lector, y encima damos crédito a quién no toca. Lo que nos resta crédito a nosotros. Ah! sí además hasta los tontos de los robots se dan cuenta que hemos enlazado a un contenido duplicado sin ningún valor, existiendo otros documentos mejores.

El tercer enlace, ok. En esta ocasión el enlace no nos lleva a una página de error. Lleva a un post del propio blog que trata sobre la disfunción eréctil. Y donde además se está generando cierto debate en los comentarios. Perfecto! es un enlace útil para el lector! Además, vía trackbacks queda relacionado en el otro post, y los lectores que lleguen allí podrán continuar su lectura en nuestro post si lo consideran interesante.
El tema da aún más desí. Viajaremos a otro post de Educasexo.com, que en este blog los posts son divertidos:

Cuando un hombre conoce a una mujer, piensa en sexo, y antes de conocer a una mujer también pensamos en sexo, apostillo.

Al turrón. En este post, el primer enlace se trata de un ejemplar extraído directamente de un manual de SEO. Se enlaza la keyword Estados Unidos a un post del blog de viajes Donde Viajar donde también aparece la keyword de Estados Unidos. Aquí la hemos clavado, es el enlace perfecto. Que grandes SEOs somos, pensarán ustedes.

PUES MENUDA MIERDAAAAA. Que tendrá que ver un post donde se habla sobre las trabas que se pusieron en los aeropuertos de los USA tras los atentados suicidas, con el tema de que cuando un hombre conoce a una mujer, piensa en sexo… A partir de este momento el resto de enlaces se convierten en invisibles para el lector. Ya que se ha dado cuenta que los enlaces de este artículo carecen de sentido alguno. Por supuesto, la imagen que da el blog es mala y dice poco de nuestra credibilidad como medio donde informarse. Otro artículo que tiramos a la basura ya en la primera línea. Somos unos campeones.

Esto es culpa nuestra por pedir a los redactores que enlacen a otros blogs de nuestra red, cuando posiblemente en la mayoría de posts, por su temática no es posible tal relación. Ni tanto ni tan calvo.
Otra costumbre, muy arraigada, es colocar enlaces al primer resultado de búsqueda que aparezca. Por ejemplo, Francia está enlazada en algún post a una landing de Destinia que vende hoteles, pero en ningún momento se habla de alojarse allí… bien. A parte que no le aporta al lector información sobre Francia, encima se puede considerar como un enlace pagado. De nuevo una conducta penalizable y que de cara al lector nos deja bastante mal.

Es un tipo de enlace muy peligroso, ya que las agencias de viajes online están llevando a cabo ‘estrategias SEO’ muy agresivas para aparecer bien posicionadas, y Google en su momento decidió en su momento castigar al que ponía el enlace no al que lo recibe. Ale, a comer mierda. De nuevo, siempre es mejor aplicar el sentido común, de lo que puede ser interesante para el lector y lo que no.

Para no extendernos más en ejemplos concretos, como resumen y orientación creo que la siguiente propuesta de trabajo a la hora de colocar un enlace puede sostenerse bien:

Escribid para los lectores no para los robots. Menos SEO y más opinar e investigar.

Un enlace debe apuntar a una página que amplíe la información o de otro punto de vista sobre el tema que se está tratando. Vamos, que estén temáticamente relacionadas.

Variedad en las fuentes. Enlazar día tras día los mismos recursos es un insulto para el lector que cada día sabe buscar mejor la información en Internet. Descubrámosles nuevas páginas.

Enlaza con inteligencia. Por ejemplo, aprovecha que los blogs tienen el sistema de trackbacks, lo que permite ‘avisar’ al autor y lectores del otro blog de que les estás enlazando y a la vez tratando el mismo tema. Con lo que es posible que te visiten para conocer tu opinión.

Enlaza a la fuente original. Trata de seguir el rastro de vías y fuentes que no son más que duplicados, hasta el foco original. Allí encontrarás un blogger o webmaster que te lo agradecerá y a la vez enlazarás webs con credibilidad, no planetas u otras fuentes de ruido y spam. Esto de los vías y Fuente, es algo curioso, una vez seguí hasta cinco vías con copias exactas para llegar hasta el original. Que manía de duplicar documentos existiendo los enlaces…

Revisad que el enlace funciona. Es muy doloroso encontrarse con una página de error.

Por cierto, ¿que piensas? ¿Que estrategia seguís para enlazar otros recursos?

Podéis encontrar más información sobre como tratar los enlaces en dos de los blogs con más solera de la blogosfera hispana (en algún aspecto no estoy del todo de acuerdo, pero sirvan de ejemplo):

Evitando el ‘Click aquí’, a tener en cuenta el Punto 2, Punto 3, Punto 5 y Punto 8.

Enlazar es importante, no estoy muy de acuerdo en la parte final donde se comentan sitios que se suelen ‘enlazar mucho’, ya que mal entendidos nos lleva a la situación que comentábamos antes de un 95% de los posts de un blog con más de 1.000 entradas contiene un enlace a la Wikipedia. Por favor, hay vida en Internet tras la Wikipedia o IMDB.

Por José M. Pérez
Fuente: http://www.smallsquid.com/
Bajo licencia Creative Commons

En el siguiente artículo veremos cómo puede optimizar su blog sobre Blogger para posicionar sus mejores posts en Google e incrementar el tráfico proveniente de buscadores de manera rápida y sencilla.

1. Conozca la naturaleza de Blogger
Lo primero que debe saber es que Blogger es un servicio gratuito de Google, desde este momento sabe que Google conoce absolutamente todo sobre su blog. Esto puede ser bueno y malo, según se mire.

Contrariamente a lo que se puede pensar, Google no otorga ningún tipo de privilegio a los blogs alojados en Blogger.

Blogger nos permite crear un blog de manera gratuita.

Presenta un interfaz muy sencillo que permite montar en pocos minutos un blog totalmente operativo sin necesidad de tener ningún conocimiento de html, programación o blogging. Por otro lado permite cierta flexibilidad a la hora de codificar html directamente.

Ofrece funcionalidades como configuración online, un editor wysiwyg para escribir los artículos, gestión de recursos por FTP, Site Feeds, etc.

Blogger puede personalizarse con plantillas prediseñadas para cambiar el aspecto del blog, y también tenemos acceso a los estilos CSS para modificar a nuestro antojo el diseño.

Permite la integración de herramientas de terceros para incluir funcionalidades extras (widgets) como nuevos sistemas de comentarios, track-backs, contadores de visitas, sindicación RSS para otras plataformas, etc.

2. Elija un nombre acertado para su blog
Blogger ofrece a sus usuarios la libertad de elegir un nombre de subdominio (siempre que el nombre esté libre) en el que alojar su blog. .blogspot.com

Puede elegir dos formatos de dominio (o mejor dicho subdominio) para su blog:

http://.blogspot.com
http://www..blogspot.com
Aunque no tiene una relación directa con el posicionamiento, la elección de un nombre para su blog es realmente importante y debe acometerlo teniendo en cuenta los mismos aspectos que valoraría a la hora de elegir un nombre de dominio.

No elija el nombre de su blog en función de los keywords más relevantes relacionados con sus búsquedas. Escape como de la peste de nombres del tipo: los-mejores-bares-de-copas-de-madrid.blogspot.com

Busque lo sencillo, lo corto, lo intuitivo y lo original, pejm: copeando.blogspot.com
Recuerde que el nombre de su blog no beneficia su posicionamiento para búsquedas competitivas pero puede perjudicar su imagen.

3. Optimice los títulos y urls de sus artículos
Tanto el título general del blog, como cada uno de los títulos particulares de los artículos tienen mucha importancia en el proceso de posicionamiento del blog.

El título del blog debe pensarse bien para que refleje de manera concreta, inequívoca y escueta el cometido principal del blog.

Cada post debe identificarse de manera única con un título que lo describa, además debe intentar incluir de manera natural los keywords más relevantes con las bus quedas que puedan realizar nuestros visitantes.

Existen herramientas para conocer estos keywords:

Wordtracker
Google Trends
Yahoo! Buzz Index
Por defecto Blogger muestra el título del blog antes del título de cada Post:

:
Si elegimos un título demasiado largo para nuestro blog, los títulos de los posts pueden verse relegados a un segundo lugar. Recuerde que cuanto más a la izquierda se encuentra una palabra en el título, mayor fuerza de posicionamiento logra.

Por este motivo es recomendable cambiar esta estructura, mostrando en primer lugar el título del post, para ello:

En el panel de control de Blogger, acuda a la pestaña Diseño y elija la opción Edición HTML.
Busca el código correspondiente a los títulos:

Sustituya ese código por el siguiente::


De esta manera conseguiremos que los títulos sigan el patrón idóneo para los buscadores: “Título del artículo – Nombre del blog”.

Para profundizar en la lectura sobre optimización de títulos, le recomiendo la lectura del siguiente artículo de HelloGoogle sobre cómo optimizar los títulos de una página web.

4. Cuide la Meta-información en cada post
Aunque la relevancia de la meta información de cara al posicionamiento de una página es bastante discutible, no debe pasarla por alto. Durante el proceso de búsqueda Google utiliza el contenido del meta Description para mostrar la descripción del contenido de una página en su página de resultados de búsquedas SERP.

Incluir en Blogger un Meta tag específico para cada artículo es un poco engorroso pues es necesario modificar plantilla general e incluir la meta-información cada vez que escribamos un artículo

En la pestaña Diseño vaya a la opción Edición HTML:
Justo debajo del código correspondiente a los títulos añada:


‘ name=’description’/>

‘ name=’keywords’/>
” == data:blog.url’>
‘ name=’description’/>
….

5. Optimice las imágenes para los buscadores
Los motores de búsqueda ignoran las imágenes de una web a menos que incluyan una información textual en los atributos Alt y Title. En este caso no sólo no las ignoran si no que su información es tomada con especial relevancia a la hora de indexar y posicionar la página.

Nota: Mientras que el atributo Alt debe incluirse siempre para describir las imagenes la utilización del atributo Title queda a la elección del usuario. Sin embargo debe saber que la inclusión de este último es necesaria para cumplir los estándares que dicta el W3C. El comportamiento de ambos atributos es diferente en función del navegador. El atributo Alt se utiliza en caso de que no pueda mostrarse la imagen, y Title se muestra como información adicional al posar el cursor sobre ella.

La información asociada a las imagenes debe describirlas de manera precisa y escueta. Si queremos incluir una descripción más extensa podemos recurrir al atributo longdesc.

En Blogger podemos optimizar las imagenes que contenga nuestra plantilla incluyendo su descripción en el atributo alt. Esto lo podemos hacer añadiendo el atributo title en el código html de la plantilla:

Participación de la Gente Común – Grassroots
La posibilidad de aprovechar la voluntad de miles de individuos para contribuir, cantar, actuar, enviar, editar, filtrar, compartir y seleccionar contenidos e ideas que ya están ahí, es probablemente la oportunidad de negocios más grande para seguir. Sacar el máximo provecho al conocimiento e información que tienen sus usuarios será también una táctica extremadamente poderosa que permitirá que sus lectores se conviertan en activos contribuidores al tiempo que aportan contenido a su sitio con rica y valiosa información. Usted pone a sus lectores a trabajar permitiéndoles contribuir con enlaces y señaladores a noticias y recursos relevantes, permitiéndoles iniciar nuevas conversaciones y facilitándoles foros donde pueden discutir y recibir ayuda en tópicos específicos. Obviamente, en algunos casos, esto va a proporcionar suficiente motivación y recompensa a los usuarios para justificar su esfuerzo extra.

9) Publicidad en Blogs
Si usted necesita emplear dinero en una campaña de marketing que necesita atraer la atención y compradores calificados a su sitio considere seriamente publicitar en blogs.

Utilizando un servicio como Blogads o Crispads usted puede identificar fácilmente sitios blogs para el mismo tema/tópico en el cual usted esté interesado, mientras que ahorra una enorme cantidad de dinero comparado con los canales más tradicionales de publicidad.

10) Filtrado y Agregado de Contenido
Si usted quiere algo nuevo realmente innovador para expandir significativamente su alcance, filtrado y agregado de contenido, esto es algo para considerar seriamente.

Si usted no ha escuchado de newsmastering, newsradars y palabras de moda similares es tiempo de que lo haga. Hay ahora un buen número de herramientas muy interesantes que pueden ampliar su búsqueda y su pericia en know-how específico diez mil veces. Entonces, si usted puede entender el poder de agregar, filtrar y seleccionar contenido de noticias en temas muy específicos ha sido momento de maximizar esta poderosísima oportunidad. Sin embargo le advierto: no se trata de crear sitios automatizados que levantan noticias y alimentadores RSS sobre un tema específico de manera no atendida y que le yuxtaponen publicidad AdSense al lado de ellos. Se trata de hacer esto con sus manos, ojos y cerebro. Convertirse en un punto de referencia para otros en cualquier tópico específico es lo que yo le estoy señalando a usted. Si usted lo va a hacer convirtiéndose en un lensmaster, un guía en About.com, o creando su propio concentrador de noticias, todo eso está sujeto a su elección.

Evitar a toda costa
Estas son tácticas de marketing online que enfáticamente recomiendo evitar:

- Intercambio de links via software automatizados – ni siquiera manualmente, esto es algo muy difícil de arrancar y de los centenares de personas que han usado este método para obtener un link de mí ninguno ha sido exitoso.

- Pop-ups. Si bien pienso que están funcionando mucho major ahora que durante el punto negativo culminante de su popularidad, todavía sugiero evitar esta metodología cuando sea posible.

- Spam de comentarios y trackbacks spam. No saque provecho de los sitios populares para colocar a mensajes explícitos de marketing y ventas a través de comentarios o pings de trackback.

- Azoogle Ads. Seleccioné esta pensando que me iba a ayudar en mis ingresos globales. Esta agencia tiene algunos productos interesantes, con comisiones muy bien pagas, que yo quería recomendar y promocionar. Desafortunadamente no solamente los links de estos anuncios aparecieron con páginas web repletas de desagradables anuncios de otros productos, sino también la atención al cliente online y fuera de línea dejaron mucho que desear. Evítelo.

- Marketing web y programas para incrementar el tráfico que lo invitan a usted a contribuir su contenido por algún prometido nuevo e importante ebook u otro paquete de contenido “super”.

- Blogs y alimentadores RSS totalmente automatizados en temas específicos y tópicos, creados solamente con el propósito de generar ganancias AdSense a través de anuncios contextuales ubicados al lado de un flujo continuo de noticias temáticas. No funciona. La gente no es estúpida, y a menos que usted le proporcione valor editorial adicional, como comentar, seleccionar manualmente ítems de noticias o agregar sus propias opiniones, usted necesitará construir decenas y decenas de estos para lograr alguna cantidad significativa de ingresos.

Fuente: http://www.masternewmedia.org
Bajo licencia Creative Commons

Muy básicamente, en las búsquedas se da una distribución de las palabras o frases de alta competitividad y frecuencia, decayendo hacia las palabras o frases de menor frecuencia:

La zona verde representa los términos de mayor frecuencia y por lo tanto, los más competitivos, mientras que la zona amarilla representan todos los demás términos de búsqueda que no son tan competitivos o frecuentes en las búsquedas de usuario. Esta zona amarilla es la llamada Long Tail o Larga Cola

Lo interesante de este concepto es que la suma total de los términos de menor frecuencia puede ser igual o incluso superior que la suma de términos altamente competitivos y más frecuencia.
Este concepto es el que aplica Amazon por dar un ejemplo, para generar increíbles cantidades de ventas. Según el artículo de Wired el 57% de las ventas de Amazon se realizan sobre términos que no son “populares”.

Desde el punto de vista de generación de tráfico es posible encontrar y utilizar términos en el Long Tail que generen tráfico que, sin ser populares, pueden llegar a significar un incremento considerable en visitas y conversiones.

¿Cómo aplicar el concepto de Long Tail?

Obviamente, no se deben descuidar las 4 ó 5 palabras y/o frases más competitivas, de modo de obtener la mayor cantidad de tráfico de éstas. Al mismo tiempo, investigar sobre palabras o frases generados en el Long Tail y crear contenido específico utilizando esos datos. Cuanto más contenido utilizando frases o palabras clave del Long Tail generes, mayor será la suma final de visitas que obtengas, que sumadas a las obtenidas a las obtenidas por los términos clave incrementarán tu tráfico.

Por ejemplo, supongamos que compito con la palabra clave “papel”. Seguramente, este término generará muchas búsquedas. ¿Qué pasaría con la frase “Papel fotográfico para impresora HP”? seguramente no será una frase tan frecuentemente utilizada, pero a la larga sumará visitas.
Otro aspecto interesante de esta frase es que es una búsqueda muy específica, lo que significa que esta visita tiene más posibilidades de comprar un producto específico que aquél que realizó una búsqueda más genérica.

Herramientas para analizar el Long Tail

Es evidente que el concepto de marketing web ha avanzado tanto que los viejos sistemas de estadísticas de hace unos años poco nos sirven hoy para analizar un sitio más profundamente.

La evolución de los sistemas de estádisticas aplican el concepto de Long Tail. Los siguientes son dos de los sistemas que utilizo a para analizar palabras clave:

HitTail – HitTail es un sistema que permite recopilar datos de búsqueda con solo agregar un código javascript al blog, generando un gráfico de distribución en base a estos datos e indicando cual es nuestro “long tail”. De esa información extrae palabras clave e incluso sugiere qué términos son los que podrían funcionar mejor aplicando el concepto de longtailing.
103bees – Esta herramienta es muy parecida a la anterior. Aunque cuenta con mayor información, no es tan funcional para trabajar con el concepto de Long Tail, aunque tiene bastantes datos que se pueden aprovechar.
El concepto de Long Tail permite extender el alcance de tu blog, ya sea creando contenido original y específico, o aprovechando estos términos no populares para campañas Pay per Click, como AdWords, generando nuevos nichos todavía no descubiertos.

Fuente: http://www.proweblogs.com
Bajo licencia Creative Commons

Fuente: http://gonzaloreynoso.com.ar
Bajo licencia Creative Commons

Por lo dicho hasta ahora tal vez puedas pensar que al centrarte en algo tan concreto el número de potenciales usuarios es mucho menor que hablando de todos los coches de la marca A. En parte llevas razón, hay muchas más búsquedas relacionadas con todos los coches que sólo con monovolúmenes, pero eso al fin y al cabo no es importante si no vas a conseguir estar el primero en buscadores para las búsquedas que te interesan. No tiene importancia que mucha gente busque sobre ese tema si no te van a encontrar a ti. En cambio, centrándote en un nicho más pequeño, aunque haya menos potenciales visitantes tienes más probabilidades de que lleguen a tu web porque no hay tanta competencia.

El verdadero potencial se encuentra en los nichos pequeños, ahí es donde puedes conseguir un éxito aceptable. Además, hacer una web sobre un tema muy genérico implica mucho más esfuerzo. Todo el material que hay que reunir, la elaboración de textos, el tiempo que requiere… Es mejor profundizar mucho en un tema y ser el mejor en él, que intentar abarcar demasiado y no destacar en nada.

La clave es esta: no intentes contentar a todo el mundo, conviértete en un especialista.

Razones por las que un nicho de mercado pequeño es bueno para ti

Puedes concentrar tus esfuerzos en un tema concreto para ofrecer cosas novedosas, dar mucha información y destacar.
El posicionamiento en buscadores te será más fácil al centrarte en un mercado en el que no hay tanta competencia como para otros más genéricos.
Es más fácil definir el público objetivo. Al ser un tema muy concreto, definir el tipo de audiencia y centrarte en lo que necesitan es más sencillo.

Los esfuerzo y recursos requeridos para desarrollar un proyecto así son menores.
Trabajar para un tema genérico requiere conocimientos y tiempo que en la mayoría de los casos no se tienen.
Para elegir tu nicho de mercado debes tener en cuenta tus hobbies, los temas que dominas, que te gustan y te motivan. Tener ganas de trabajar en algo es la mejor manera de hacerlo bien. No elijas un tema para tu web que no te interese o no te guste porque te acabarás aburriendo y la tarea resultará desagradable.

Elegir el nicho de mercado adecuado

El nicho de mercado adecuado es aquel en el que tienes posibilidades de tener una alta visibilidad y accesibilidad a las personas que se beneficiarán de lo que ofreces.
Es aquel en el que puedes emplear tu talento, tus conocimientos y es además una afición.
Cómo encontrar un buen nicho de mercado

Encuentra temas o productos que te apasionen y conozcas en profundidad.
Calcula las posibilidades de cada tema que hayas seleccionado anteriormente. Para eso:
Determina la demanda: una forma de hacerlo puede ser elaborar una lista con las palabras o frases relacionadas con cada tema e investigarlas con la herramienta de palabras clave de Adwords. Esta herramienta te ofrece datos sobre el número de búsquedas que pueden orientarte para saber si a la gente le interesa el tema o no.

Determina la competencia: con la misma herramienta anterior puedes ver la competencia que hay para cada palabra seleccionada. La clave está en elegir los temas que tengan más demanda y menos competencia.
Realiza sondeos: una vez hayas escogido uno o varios de los temas para tu página web en base a los parámetros anteriores, es conveniente hacer una encuesta para estimar el grado de aceptación que tendría tu página y decantarte por alguno. Hay páginas web como ya.com que tienen montada toda una comunidad alrededor de las encuestas. Puedes poner tu encuesta en estos sitios para intentar que la conteste el mayor número de personas posibles, o también puedes preguntar en foros y zonas de debate.

Autor: Verónica M.
URL: Nicho de mercado
Web: Como crear paginas web

Si quieres ir más allá, sin embargo, necesitas tomar medidas para mejorar tu blog desde al menos cinco perspectivas diferentes. En este artículo he querido compartir mis ideas sobre cómo deberías considerar tu meta, tu diseño, tu contenido, cómo lo promicionas y cómo lo conviertes en negocio. Por favor añade tus propias ideas a los comentarios, para que crezca la lista.

Que tu meta y tu audiencia objetivo estén claras
Mi argumento con el artículo completo pero especialmente con esta sección es preguntarte cuáles son tus auténticas metas con tu blog. Si no estás seguro, no pasa nada. Podrías no querer aún llevar tu blog al siguiente nivel. Pero si sientes que quieres tomártelo en serio —en sea cual sea la dirección que vas a darle a tu esfuerzo— considera todo esto muy seriamente.

1. Si tu meta es ser bien un blog de noticias, bien de entretenimiento, deja bien claro que es o que no es un blog de broma. Considera crear un blog aparte para tu material personal o de broma.
2. Si tu blog va a ser tu negocio, trátalo como tal. Utiliza las estadísticas, dedícate a construir una audiencia, dedícate a dar algo único. No te permitas ni una divagación en esto.
3. Si tu meta es ser un recurso para una comunidad, mezcla tu tiempo blogueando con el tiempo gastado entrando en contacto con la comunidad a la que te propones servir. Si es un acontecimiento offline, un evento local, asegúrate de estar allí. Sé activo. Conecta.
4. Si intentas ser profesional con tu blog, saca tiempo de donde sea para hacerlo bien. Nunca más escribas un artículo con el típico «perdón por no haber publicado últimamente». Nunca.
5. Ofrece material original. Sal de la cámara de eco. Los artículos yo-también no son la forma de construir un blog al nivel al que pretendes llegar.
6. Es correcto tener una voz propia. De hecho no tiene sentido un blog escrito por un frío robot. Pero recuerda mantener lo personal y lo útil en equilibrio.
7. Si pretendes hacer negocio en serio con tu blog, busca una forma de convertir lectores en clientes.
8. Si sólo va ser un negocio basado en publicidad, compite, y sé honesto con ello. Compite con otros en tu lucha por la audiencia, por el valor y por un mejor contenido. Mi opinión sobre este tema es que metiendo sólo la mitad del cuerpo en el agua no te mojas menos.
9. Si tu blog va a ser la primera fuente de información para cualquier comunidad, asegúrate de que también buscas fuentes de noticias e información fuera de la blogosfera para ser el mejor informado.
10. Dedícate a mejorar la comunidad a menudo en las secciones de comentarios de los blogs de otros, o en cualquier red social donde vuestros caminos se crucen.
La belleza va más allá de la piel
Considera los elementos de diseño de tu blog. Cambian la forma en la que la gente percibe tu trabajo. Y pueden ayudarte a mejorar tus oportunidades potenciales de negocio.
11. Obtén tu propia URL única. A la larga importa, especialmente cuando quieras cambiar tu servicio de alojamiento. Por ejemplo, si te marchas de tu cuenta de Blogger y tu blog en blogspot.com, pierdes todos los enlaces entrantes y el Pagerank para ese dominio, lo que significa que tienes que empezar desde cero. ¿Es tu caso? Haz el cambio ahora.
12. Considera trasladarte a un blog en alojamiento propio. En Bloghost.me te ofrecen un blog con Wordpress ya en marcha por sólo 10$ al año —y si usas el código «brogan» te lo dan por 9$ al año. Andy es amigo mío—.
13. Considera también utilizar un tema profesional. Soy un incondicional de Thesis por Chris Pearson. Hay otros temas de primera ahí fuera. —N. del T.; me permito recomendar ProSense, limpio, fácil de mantener y con la publicidad excelentemente integrada—.
14. O bien utiliza un tema Wordpress a medida. Por ejemplo de Nico Pin quien diseñó el de mi sitio. Obviamente hay muchos más que hacen ese trabajo.
15. ¿Utilizas demasiados widgets innecesarios en tu blog? Revísalos y decide si realmente le ofrecen valor a tu audiencia.
16. ¿Es tu distribución legible? ¿Las fuentes son limpias y fáciles de leer? ¿La elección de colores es acertada? Pierde un poco de tiempo con tu hoja de estilos, merece la pena.
17. Si tienes publicidad, ¿es la adecuada para tu comunidad? ¿Realmente estás comprometido con los productos que se anuncian? ¿Son efectivos?
18. El diseño y la distribución de tu blog, ¿está bien configurada para SEO? Varias plataformas incluyen plug-ins SEO para ayudar en esto. Aunque nada supera a que un profesional le eche un vistazo a como mejorar el SEO de tu blog, es un buen primer paso.
19. Un logotipo y un favicon a juego no hacen daño. Mucha gente ofrece este servicio a distintos precios. El mío fue creado por Justin Evans y su equipo en StressLimit Design. Otros amigos en California ofrecen también servicios muy recomendables.
20. Vigila qué imágenes publicas en tu sitio. ¿Añaden algo a la historia que pretendes contar? Si no, actualízare. Hay muchas imágenes libremente disponibles en Flickr, si buscas por el apropiado nivel de licencia Creative Commons.
Que tu contenido sea de primera
Hacer crecer artículos de calidad no es magia. No se trata de repartir galletas por toda la casa y esperar a que el Duende de los Blogs venga y nos escriba artículos magníficos a cambio de las galletas. Requiere mucho trabajo y mucho compromiso. Y aunque los resultados no vienen solos, se puede aprender a mejorar.
21. Pon tus artículos a dieta. Léelos con tu audiencia en mente. ¿Puedes adelgazar? Elimina palabras innecesarias. Hazlos ajustados.
22. Dale protagonismo a tu argumento principal. Si intentas ser un blog de noticias o de opinión de calidad, lleva tu argumento principal a la parte superior de tu artículo. No nos hagas cavar.
23. Enlaza. Si escribes sobre otra persona, artículo o sitio, enlaza adecuadamente. Es la estructura de la web. Mejora la historia, nos da sitios para seguir explorando y es una práctica de buen vecino.
24. Varía la longitud de tus artículos. Si escribes un artículo muy largo, que el siguiente sea breve para evitar la fatiga del lector. A no ser que tu blog vaya a ser un extenso ensayo en cada artículo, en ese caso buena suerte.
25. Lee, lee, lee. Sal de la blogosfera. Encuentra fuentes de información que vayan más lejos de adonde llega tu competencia.
26. Embárcate en un calendario regular de publicación. Tienes puntos extra si escribes algunos artículos por anticipado para esos días en los que no te queda tiempo.
27. Trabaja los titulares. Un gran titular atrae visitas, y también nos informa sobre qué vamos a aprender.
28. Huye de los artículos yo-también. Si tienes algo que añadir, hazlo y enlaza con el artículo original. Pero si vas a moverte al siguiente nivel, hazlo así cada vez menos. —En este sentido y sin embargo, cada caso es único—.
29. Considera utilizar audio, vídeo y otros medios. Si tu blog está compuesto principalmente por texto, considera mezclar un poco. Podrías encontrar neva audiencia, y podrías dar también a la gente una dimensión más acerca de quién eres.
30. Revisa tus artículos cada mes para ver si sigues cubriendo los mismos temas. Si lo haces, considera hacerte un calendario editorial para artículos, de forma que no repitas temas demasiado a menudo.
Promociona tu blog
A nadie le gustan los que sólo hablan sobre ellos mismos, pero si vas a trabajar para elevar el nivel de tu blog, asegúrate de que tu esfuerzo no es baldío.
31. Utiliza un servicio social de enlaces como AddThis o Share This en tus artículos para que la gente a la que le gusta tu trabajo pueda compartirlo fácilmente.
32. Facilita una opción bien visible para sucribirse por email a tu feed RSS. En mi blog más del 50% de mis suscriptores reciben mis titulares por email.
33. Añade la dirección de tus blogs a tu firma de email.
34. Asegúrate de que la URL de tu blog figura en tu perfil de Twitter, de Facebook, de Friendfeed y de otros servicios sociales. Ayuda a que gente que podría no conocer tu trabajo te descubra. Steve Rubel me lo contó hace unos meses, cuando me contó haber descubierto mi blog gracias a Facebook. Soy un convencido creyente desde entonces.
35. Si vas a promicionar tu blog utilizando servicios como Twitter, asegúrate de hacerlo con gusto en lugar de arrojar enlaces al río. Considera hacerlo preguntando algo, o apuntando a un comentario inspirador.
36. Asegúrate de cumplir lo básico, como darte de alta en Yahoo!, Google, DMOZ o Technorati.
37. Comentar en otros blogs conocidos de tu misma temática de una forma en la que no parezcas spam es una buena forma de que la gente a la que podría gustarle tu trabajo te descubra. No utilices enlaces flagrantes o seas maleducado de ninguna forma. Sé útil a la comunidad en ese sitio y deja comentarios útiles. Vendrán si lo que dices les interesa.
38. No olvides publicar ocasionalmente uno de tus artículos en el mensaje de estado de LinkedIn, te trae gente inteligente de vez en cuando.
39. ¿Es adecuado llevar a Digg o Stumble tus propios artículos? Hay distintas opiniones sobre esto. Yo he tenido poco éxito con Digg en este sentido. StumbleUpon es una historia diferente. Decide por ti mismo si crees que hacerlo es correcto. He oído a algunos llamarlo «flagelarse en público».
40. Escribe un artículo ocasional que merezca la pena enlazar. Cuando alguien añade uno de mis artículos a Delicious, obtengo mucho más tráfico que desde otras fuentes.
Convierte tu blog en un negocio
Puedes estar intentando hacer dinero de tu blog directamente, mediante publicidad o marketing asociado. O podrías buscar una posición de liderazgo para ofrecer servicios de consultoría. Podrías estar simplemente intentando mejorar la posición de una causa social, sin ánimo de lucro o con un propósito educativo. En cualquier caso cuando hablamos de negocio queremos decir valor más allá del blog en sí mismo.
41. Construye oportunidades de conversión. Si estás vendiendo algo directamente, piensa en una forma inteligente de publicar sobre ello que eduque, informe y ponga fácil pasar a la acción.
42. Asegúrate de que el diseño de tu blog lleva a la gente a tomar la acción que quieres que tomen. Financial Aid Podcast es un ejemplo sencillo.
43. Ofrece tu venta. Si vendes algo, no seas tímido. Pide que te compren, hazlo en un artículo en el blog o en un anuncio de creación propia. Sé directo y honesto.
44. Mezcla lo que ofreces gratis con oportunidades adicionales. Si estás vendiendo algo parecido a lo que ya das en el blog gratis, deja claro cuál es la línea que divide las dos ofertas. Da pistas sobre lo que hay al otro lado.
45. Haz fácil entrar en tu juego. Como cuando ofreces ser comprado, asegúrate de ayudar a tus futuros clientes sobre cómo entrar en tu canal de ventas, si les interesa.
46. Crea contenido que vende. Si estás blogueando o publicando vídeos para promocionar un objetivo comercial, trabaja en construir contenido que lleva directamente a la decisión de comprar. ¿Esto es demasiado 1.0 para ti? Al menos inicia conversaciones sobre lo que pretendes conseguir.
47. Que sea muy fácil contactarte. Que tu página Acerca de sea limpia y fácil de leer. Pon nombres reales humanos en el sitio web y considera añadir una foto, de forma que la gente sepa a quién se dirige. Doy siempre este consejo y aún así veo todos los días ejemplos de gente que se lo salta.
48. Construye relaciones con blogs similares y comparte oportunidades. Si blogueas sobre hipotecas, conoce al resto de blogueros sobre el tema y aprende de ellos.
49. Ofrece sugerencias en tu blog. Si estás escribiendo sobre una oferta determinada, ¿hay una forma de compartir en qué consiste, o cómo quieres estar concernido?
50. Recuerda que incluso si el principal cometido del blog es vender, has de ser humano, interesante, e implicarte. Esto no es ya la vieja Internet. Tenemos muchas herramientas sociales que nos recuerdan que somos humanos. Utilízalas como son.

Mi meta al escribir esto ha sido ofrecer consejos y sugerencias sobre cómo uno puede intentar convertir su blog de «uno más en el paquete» a algo parecido a un destino en la red. No opino que todos deberían seguir todos los consejos. Hay muchos blogs que me encantan justo como son, y estoy seguro de que sus editores también.
Cada uno lo hace por un motivo, y la misma talla no nos vale a todos. Para todos los que, sin embargo, pretenden que su blog se convierta en una presencia autoritaria y profesional en la red, espero que les sirva de ayuda.

¿Tienes algo que añadir? ¿Qué opinas? ¿Qué se me ha olvidado sugerir? ¿Qué más preguntas tienes?

Autor: Chris Brogan
Fuente: http://www.seomarketingtools.org
Bajo licencia Creative Commons

Motores de búsqueda: Son la fuente principal de tráfico en internet.

Pagando publicidad: En programas como Google Adwords.
Vínculos desde otras páginas web: Existen numerosos servicios de intercambio de vínculos en la red, aunque estos no son recomendables. Los motores de búsqueda detectan este tipo de programas de intercambio y degradan el ranking de nuestra página. Lo que interesa, es publicar contenido de calidad con regularidad, de tal forma que otros webmasters encuentren útil crear vínculos hacia nuestra página, para dar un valor añadido al contenido de su propio sitio. Otra forma de conseguir vínculos que apunten a nuestra página, es participar activamente en la red, en blogs y foros, introduciendo siempre un vínculo hacia nuestro sitio, en nuestra firma.
Emails: No es recomendable realizar el envío masivo de correos electrónicos no solicitados, los programas anti Spam se han encargado de restar el atractivo que esta forma de publicidad disfrutó en su día. Sin embargo el correo electrónico continua siendo muy efectivo, si se realiza de la forma adecuada. Yo recomiendo utilizar alguna aplicación que facilite la suscripción voluntaria de los visitantes a nuestro sitio web, al envío periódico de newsletter, o mejor aún, de RSS Feed to Email, que remitirá de forma periódica, las actualizaciones que se produzcan en nuestro sitio web. Es importante que permitan, de manera sencilla, darse de baja de la suscripción.

También es muy útil, introducir un vínculo a nuestra página, en la firma de todos nuestros correos electrónicos.
Blogs y RSS Feeds: La información publicada en los blogs, es indexada por los motores de búsqueda mas rápido que la publicada en páginas web, además cuentan con la posibilidad de proporcionar RSS Feeds de una manera sencilla, los cuales permiten notificar de forma automática cualquier modificación que se introduzca en el blog.

Yo recomiendo la utilización simultánea de blog y página web, introduciendo numerosos vínculos entre ambos que, como consecuencia, incrementaran su ránking.

Redes sociales: Tales como FaceBook, han proporcionado una nueva dimensión a la distribución de la información, convirtiéndose en uno de los elementos más importantes de que disponemos para generar tráfico.

Para conseguir tráfico, debemos diseñar nuestro sitio de una forma ordenada. A continuación se relacionan algunas consideraciones a tener en cuenta, a la hora de elaborar y mantener nuestra página web:

Mantener centrado el tema de nuestro sítio web: Es imprescindible para conseguir tráfico de valor. Cuanto mas se ciña a un tema central, el contenido será mejor indexado por los motores de búsqueda resultando en un mejor ranking. Hacerlo, aumenta la densidad de palabras claveen nuestro dominio, convirtiendo a nuestro sitio en un experto del tema de que se trate, generando confianza en los visitantes y, por tanto, fidelizando el tráfico.
Proporcionar información útil: La mejor manera de que las visitas regresen, es introducir información que sea de utilidad. Por ejemplo artículos del tipo Como hacer algo…, que den respuesta a necesidades de la gente, que le resuelvan problemas. Hay que dotar a la página de un valor añadido, que haga que nos ganemos la confianza de las visitas, de manera que estas regresen una y otra vez. Este tipo de artículos, nos facilitará vínculos desde otras páginas que harán subir el ranking de nuestro sitio, en los motores de búsqueda.

Elegir palabras clave adecuadas: Al objeto de que los motores de búsqueda den como resultado alguna de nuestra páginas, al introducir el visitante potencial, una cadena de texto, es imprescindible que la elección de las palabras clave que se introducen en nuestra página, sea la correcta. Hay que hacer una investigación de las palabras clave, y optimizar en consonancia nuestro sitio web, con el objetivo de incrementar el tráfico.

Mantener un diseño simple y accesible: Esto asegurará una descarga rápida. La barra de navegación debe permitir llega a cualquier página en tres clicks como mucho. Un mapa del sitio facilitará la navegación al visitante y también a los motores de búsqueda.

Poner un título adecuado: Que represente con claridad el contenido de la página. Cuando los motores de búsqueda listen las páginas, el título aparecerá al lado del vínculo, deberá contener las palabras clave adecuadas, para aumentar las posibilidades de que el visitante lo clickee.

Añadir contenido de calidad periódicamente: Por dos razones fundamentalmente; teniendo muchas páginas aumenta la posibilidad de que algunas tengan un ranking elevado, los motores de búsqueda indexan con mayor frecuencia cuando se producen cambios y los visitantes vuelven cuando hay contenidos nuevos.

Mantenerse activo en internet: Participando activamente en foros y blogs. Tener un blog genera tráfico de otros blogs y de los motores de búsqueda.

Conseguir tráfico y fidelizarlo, es una tarea ardua que exige esfuerzo y constancia, tener en cuenta las puntos tratados, a la hora de diseñar nuestra página, sin duda ayudará a conseguir que avancemos en el camino correcto.

Fuente: http://trabajoofertas.blogspot.com
Bajo licencia Creative Commons

Así que propongo 10 formas de aumentar los comentarios en el blog (5 eticas y 5 no). Si quieres aportar los tuyos (éticos o no) utiliza los comentarios.

Forma poco ética
Insulta a la gente de todo un pueblo, por ejemplo, puedes llamar feas a todas las chicas de una población.
Menosprecia públicamente el trabajo de otro, de una empresa u organización. Tienes que utilizar insultos y descalificaciones ya que si lo haces educadamente sin herir la sensibilidad del afectado se considera ético.
Alaba la gestión de la SGAE o de cualquier otra organización que tiene el mundo en contra. Lo más común en este caso es que los comentarios que recibas no aporten valor al post.

Escribe sobre algo que no tengas ni idea (ni la más remota idea) e intenta aparentar que eres el que más domina sobre este asunto en los comentarios.

No pares de meter más cizaña en los comentarios

Forma ética
Pide opinión en tus posts, incluye preguntas y si es necesario remárcalas en negrita
Utiliza títulos que enganchen, muchas veces cuando tienes 300 feeds que leer, solo lees los titulares, si el título no engancha no lo leeremos, por tanto de comentar ni hablamos.

Fomenta el debate
Intenta responder todos y cada uno de los comentarios que te hacen. Si en cada comentario puedes aportar algo nuevo de valor, mejor.

Hay gente que utiliza preguntas al final de cada post con un enlace directo a los comentarios. A mi no me termina de gustar, pero dicen que funciona.

Fuente: http://www.online.com.es
Bajo licencia Creative Commons

YouTube había lanzado un sistema de publicidad para tratar de rentabilizar su modelo de negocio. El sistema consiste en un espacio de publicidad que aparece en los propios vídeos, durante un tiempo reducido, en una franja en la parte de abajo. Que además tiene la particularidad que puede ser cerrado por el propio usuario que ve la película.

Lo que no habíamos comentado todavía es la posibilidad de ganar dinero nosotros mismos a través del sistema publicitario de YouTube. Y es que este nuevo sistema de remuneración está a disposición de cualquier usuario de YouTube. Además, en Adsense, se ha creado un nuevo formato de publicidad para editores de páginas web que deseen colocar vídeos en sus páginas y ganar dinero a través de ellos.
Ganar ingresos como usuario de YouTube

Para obtener ingresos a través de los vídeos que has subido a YouTube debes estar dado de alta como Partner de YouTube. Este sistema está destinado a cualquier empresa de media o a creadores de vídeos particulares que sean usuarios de YouTube y que coloquen vídeos con frecuencia. Con la única restricción que los partners de YouTube deben ser ellos mismos los propietarios de los vídeos, es decir, poseer la propiedad intelectual de los materiales que vengan subiendo a la comunidad online de video. Existen multitud de partners de YouTube, tan conocidos como Televisión Española, Antena 3, Agencia Efe, etc.

Para ser partner de YouTube hace falta suscribir un formulario en la propia página de YouTube, que se puede encontrar en la URL: http://es.youtube.com/partners

Además, una vez somos partners, debemos autorizar a YouTube para colocar anuncios en los vídeos que son de nuestra propiedad.

Fuente: http://ligasmayores.bcn.cl
Bajo licencia Creative Commons

Si vas a empezar un blog para ganar dinero entonces, hay alternativas para hacerlo que hace un tiempo atrás no disponias : Montar tu propio blog o convertirte en un blogger pago.

Cada una de las opciones tiene ventajas y desventajas que deberás analizar cuidadosamente ya que implica una responsabilidad y una motivación que deberás sostener con el tiempo.

Montar tu propio Blog
Ventajas

Tener el completo control.
Poseer el control de lo que escribas es una ventaja fundamental para expresar tus puntos de vista y opiniones sin ningún tipo de ataduras o censuras.

Podés escribir del tema que se quiera, cambiar el tema con el tiempo, etc.
Hay veces que uno define un tema al comenzar con un blog pero con el tiempo va dando lugar a otros, o cambia el tema hacia un nicho más rentable o de más visitas.

Postear con la frecuencia deseada.
Aunque al empezar tu propio blog deberías proponerte una conducta a seguir, la libertad de postear con la frecuencia que desees permitirá que, por ejemplo, puedas tomarte tus ansiadas vacaciones o seguir tu propio ritmo de trabajo.

No compartir ganancias
Las ganancias son enteramente tuyas, y los ingresos que generes no los tendrás que compartir con socios u algún otro esquema de compartición de dinero.

Los posts que escribas son tuyos y continuarán generando dinero a lo largo del tiempo.
Quién es el dueño de los posts que se escriben es un tema que ha tenido algunas controversias. Algunas redes de blogs sostienen que ya que pagan por ese contenido, son dueños de lo producido. Otras son un poco más flexibles en este aspecto, pero en general tener tu propio blog no da lugar a confusión – a menos que estés copiando descaradamente los posts de otros bloggers, claro.

El éxito es sólo tuyo
El éxito que tengas con tu blog será solamente tuyo.

Desventajas

Lidiar con la parte administrativa
Montar un blog implica ciertas tareas administrativas que insumen tiempo, tiempo que tal vez dedicarías a escribir. Hacer backups, moderar comentarios, limpiar el spam, pagar por tus dominios y el hosting son algunas de las tareas que llevan tiempo y deberás tener en cuenta al momento de empezar tu blog.

Promocionar el blog
La promoción del blog recae completamente sobre vos. Conseguir enlaces entrantes, optimizar el blog para buscadores, enviarlo a directorios son algunas de las tareas básicas que se agregan a escribir posts.

Conseguir anunciantes
Deberás encargarte de la tarea de buscar sponsors, sistemas de publicidad, afiliados, etc. para generar dinero con tu blog. Sobre todo cuando comienzas y tenés poco tráfico, esto puede ser un tanto frustrante porque no se traducirá en ganancias por un buen rato.

El fracaso es solo tuyo
El fracaso que tengas con tu blog será solo tuyo.

Escribir para otros

Ventajas

Sólo te dedicas a escribir
El escribir para otros supone que solamente serás un blogger dedicado a escribir posts, y esa es tu función principal. No tendrás que soportar con las desventajas de montar tu propio blog.

Ganancias inmediatas y estables
En casi todos los esquemas de redes de blogs, los pagos son por post o por ingreso fijo. De una u otra forma, las ganancias son estables – aunque puede haber un componente generado por premios por mayor tráfico – e inmediatas.

Reputación y exposición
Escribir para una red de blogs popular puede generar cierta exposición y reputación más rápido que empezando tu propio blog. Por supuesto, habrá que ver hasta qué punto esto se aplica a tu persona y no al blog en si mismo.

Desventajas

Postear con frecuencia estipulada
Escribir para otros supone un compromiso que debes asumir al momento de firmar tu contrato. Probablemente te exijan un mínimo de posts semanales o xx cantidad por día, lo cual deberás cumplir al pie de la letra.

Mismas ganancias a lo largo del tiempo
Si bien una red de blogs te pagará de forma inmediata, el éxito del blog puede hacer que sientas que no estás ganando lo suficiente, y que teniendo tu propio blog podrías ganar más. Este es un riesgo que deberás tener en cuenta y resolver cuál opción se ajusta mejor a tus necesidades. También puede ser un motivo de desajuste en la relación empleado-empleador, como ha pasado en algunos blogs conocidos.

Lo que escribes no es tuyo
Los posts que escribas, en la mayoría de los casos son propiedad del blog, no tuyos. Si por alguna razón decidís no seguir escribiendo, estarás en el punto cero, y deberás comenzar nuevamente.

El éxito no es (todo) tuyo
El éxito del blog tendrá una componente de éxito- tus posts. Pero además tendrá otras componentes que no se relacionan con vos. Por lo tanto, es posible que el éxito sea del blog primero, y en menor medida, tuyo.

El fracaso no es sólo tuyo ( casi )
El fracaso del blog puede deberse a muchos factores, pero probablemente el responsable más directo y por el que decidan cortar seas vos, con lo cual serás el que se lleva la mayor parte del fracaso.

Por supuesto, estoy seguro de que me quedaron muchas razones fuera de la lista que son tan importantes como las que comento.
Otro factor de peso que dejo fuera de la lista pero no quiero dejar pasar es que en muchos casos, debido al cambio de moneda, escribir para otros países puede ser una opción muy interesante para ganar dinero, en un claro caso win-win en donde ambas partes ganan y donde oportunidades no faltan.

Fuente: http://www.proweblogs.com
Bajo licencia Creative Commons

Te recomiendo que leas completo el artículo traducido al español por Miguel Corsi, pero te dejo aquí un pequeño resumen (libre y adaptado) por si te da pereza hacer click. En el artículo, Robin expresa, además, opiniones interesantes sobre el debate publicidad-blogosfera y ofrece buenos consejos, tanto para quienes comienzan como para quienes ya son veteranos en este mundo:

1) Google AdSense: el recurso de monetización para blogs que mejor paga. Un servicio ofrecido por Google que permite a los editores independientes, bloggers y propietarios de sitios de noticias publicar avisos comerciales basados en texto, contextualizados, al lado del contenido en sus sitios.

Soluciones alternativas a AdSense: Kanoodle y Overture (en desarrollo). Ambos están abiertos por ahora sólo a grandes editores.

2) Blogads: solución efectiva que, a diferencia de Adsense, permite el control de los anuncios que se muestran. Es un servicio de publicidad para blogs, una buena opción para editores pequeños e independientes, blogs y sitios de noticias para vender su espacio de publicidad de una manera directa y efectiva. Blogads retiene el 20% porciento de la ganancia neta y paga el resto vía Paypal o cheque tan pronto como se alcance una cantidad predeterminada.

Servicios alternativos: Crispads (para blogs), GrokAds, Tagword, TextAds y The Idya System.

3) Amazon Associate: promoción como agente afiliado cualquier producto en el inventario de Amazon, simplemente agregando un código identificatorio pequeño a los enlaces que llevan a los visitantes de su sitio a una página específica del producto de Amazon. La recompensa es una pequeña comisión.

4) Enlaces de texto: son un nuevo mercado emergente de publicidad que vende pequeños enlaces solamente de texto, los cuales a menudo ni siquiera tienen que ser prominentes (el pago no está en los clics) en las páginas de su sitio. Lo que los anunciantes buscan es la presencia de un enlace para ganar una “autoridad” extra (como aquellas que da el indicador PageRank de Google) de manera artificial. Se recomienda un Google Pagerank de 4 o más.

Ejemplos: FaganFinder, LinkAdage Auctions (ofrece a los propietarios de blogs la oportunidad de vender enlaces de texto en su sitio a valor de mercado) , Text Link Brokerage, Paid Text Links, LinkAuctions y muchas más.

Ver también: ¿Seguirán rigiendo las publicidades de texto plano? (La caja de alertas de Jakob Nielsen)

5) Contenidos Premium: aunque suele asociarse con banners centellantes y destacados, lo cierto es que este sector publicitario está cambiando y expandiéndose: Eventos-X, podcasts, conferencias web en vivo y grabadas, entrevistas online, todo se presta a sistemas discretos y altamente relevantes.

Vea también: Nuevas estrategias de publicidad online: No Más Anuncios interruptivos

6) Informes relacionados: dirigido a sitios que cubren sectores muy específicos, resulta una buena oportunidad como recurso de marketing para centrales de investigación y grandes editores de reportes.

Un buen ejemplo de lo anterior es p2p-weblog, cuya tecnología ha sido desarrollada por 21Publish (el proveedor de hospedaje de comunidades de blogs) en asociación con Market Research.

7) Ventas de Afiliados: si los productos afiliados no afectan a la credibilidad del editor y los enlaces conducen a productos útiles, esta modalidad puede convertirse en una buena fuente de ganancias. Las comisiones pueden variar bastante dependiendo de los productos y la estrategia de marketing y ventas del vendedor original.

LinkShare y Commission Junction, pero mi proveedor favorito (el de Robin) es Share-It!, que ofrece pago total e infraestructura de e-commerce para cualquier editor online.

E-Books y Guías Online: libros autoeditados, e-books, miniguías, tutoriales u otros tipos de contenido premium puede también generar una respetable fuente de ingresos para aquellos que tienen contenido verdaderamente relevante y de utilidad para compartir. Guías focalizadas y publicaciones de referencia en áreas de nicho marcan una creciente demanda de clientes cualificados, especialmente cuando esos productos de información pueden ser fácilmente pre-evaluados de una manera u otra.

9) Distribución de librería y edición de POD: se puede incrementar la rentabilidad y publicidad de sus ebooks utilizando una compañía como Lightning Source, la cual puede incorporar su contenido digital a los escaparates de Amazon y, al mismo tiempo, ofrecer versiones impresas físicamente de sus trabajos con el uso de la tecnología POD (print on-demand, impresión bajo demanda)

Ver también: convierta su weblog en un libro, autopublicación con lulu.com y Trafford Publishing.

10) Merchandising: vender camisetas con su marca o gorrasl tiene sentido cuando su proyecto de edición tiene una fuerte marca, un mensaje poderoso o bastante éxito de audiencia.

CafePress ofrece un gran catálogo de shorts, gorras, calendarios, jarras y hasta más de 50 productos de promoción esperando únicamente por su logo y etiqueta para imprimirlos.

11) Colecciones, antologías, compilaciones, contenido de colecciones en CD-ROM: gracias a CafePress y otros servicios similares, los autores independientes tienen también la oportunidad enviar grandes cantidades de contenido, tales como antologías de artículos, informes, archivos de audio y vídeo en CD-Rom, ofreciendo una completa infraestructura de apoyo para la creación, duplicación, etiquetado y envío de esos productos.

Más información: CafePress Data CD

12) Mecenazgo: ésta es una de las principales controversias en el binomio publicidad-blogosfera, dado el creciente interés de las compañías por utilizar las bitácoras y otros sitios independientes para exponer, analizar o promover sus productos. El programa Marqui , en el cual participa Robin, es un buen ejemplo. Pero hay ciertamente otras formas de hacerlo: uno se puede vender a una compañía y convertirse en blogger oficial online o puede cobrar de otros sitios importantes y colaborar con ellos en temas específicos.

El único punto realmente importante aquí es ser claro y directo, ya que es la única forma de vencer las reticencias de aquellos que leían el blog cuando era independiente y ahora ven que el autor cobra por ello.

Desde mi punto de vista personal (el de Robin) puedo decir lo siguiente:

a) cuestione sus fuentes, no importa lo buenos que sean los productos o lo fanático que sea usted de ellos.

b) tome cierta distancia: no hay objetividad fuera de la transparencia del informante, blogger o periodista. Todos son influenciados de una forma u otra. Usted no necesita recibir dinero de un cliente para estar influenciado.

¿Que me dice de todos esos periodistas o bloggers que reciben periódicamente productos tecnológicos, para su evaluación, por los cuales todos los demás tienen que pagar? ¿No genera eso influencia? ¿Invitaciones a cenas de prensa? ¡Vamos!

Lo que cuenta, y lo que pienso que los lectores valoran más, es ser frontal, transparente, creíble. Recibir dinero per se no es un acto censurable, ni tampoco lo es que le paguen a uno por utilizar su propia habilidad como escritor para cubrir un producto en particular: ¿no es eso lo que los periódicos le ordenan a sus editores que hagan?

Lo que los críticos del mecenazgo han subestimado es la cantidad de demanda y oferta que existe. Si los escritores pagos son transparentes, responsables y profesionales con lo que le han asignado hacer, esto es tan legítimo como cualquier otra actividad.

Supongo que usted solamente necesita decidir si está en esto por el arte o por la parte.

Marqui actualmente paga 800 dólares a cada bloggers que ha sido aceptado y que escribe cuatro artículos por mes en el cual Marqui tiene al menos una mención y un enlace.

13) Donaciones: si usted apoya alguna causa que va más allá del simple reportaje de noticias en su área de interés, ¿por qué no considerar pedir a sus lectores lisa y llanamente apoyo económico?

Herramientas: Donaciones PayPal, el sistema de honor de Amazon y BitPass.

14 ) Redes de autores: ¿por qué no unirse a un grupo de blogs? Hay experiencias importantes: Metafilter, Chris Pirillo Lockergnome Channels, Blogcritics, WikiNews, Blogit o en proyecto del propio Robin, como MasterNewMedia, MasterViews y Kolabora.com, en el que siempre se necesitan colaboradores adicionales.

Otros ejemplos: Weblogs Inc., Creative Weblogging y Get Local News. tiene un idea inteligente lista para ser tomada.

15) Desarrolle su blog lo mejor que pueda sin preocuparse por producir dinero en ninguna forma directa: el dinero vendrá como consecuencia de su audiencia y visibilidad. Hacer un blog simplemente sin tener segundas intenciones aumentará su credibilidad y autoridad en el campo y podrá ganar un ingreso extra cuando se le pida su opinión. Tener un blog en el cual uno exhiba su mejor talento en mostrar, explorar o analizar temas y productos es la mejor manera de promocionarse uno mismo, de ser un escaparate viviente de sus propios talentos y habilidades.

Fuente: http://mangasverdes.es
Bajo Licencia Creative Commons

Tu primera preocupación debe ser cuestionar de nuevo el contenido conforme al nicho que has seleccionado y ver si puedes mejorar y definir mejor sus rasgos y características específicos. Cuanto más definas e identifiques el perfil de tu nicho más fácil será ofrecer a la audiencia contenido y publicidad que coincidan con sus expectativas.

?El siguiente paso es el tráfico. Una vez que has identificado claramente tu nicho es el momento de centrarse en conseguir tráfico cualificado a tu sitio. Cuanto más pertinentes e interesados en tus temas, más lectores probablemente disfrutarán tu contenido, harán clic en algunos anuncios, agregarán tu sitio a sus favoritos y volverán por más.??Según Robin, sin embargo, si no puedes conseguir por lo menos 500 o más visitantes por día, no debes comenzar a planificar enviar una carta de renuncia a tu actual jefe, al menos en un futuro próximo. Sí, incluso con un flujo de tráfico pequeño, pero altamente orientado, se puede empezar a ver un interesante flujo de ingresos, pero debes asegurarte de que tus anuncios y los patrocinadores sean muy importantes para tus lectores y sus intereses, para no enajenarlos o distraerlos del asunto que realmente les interesa.

?Qué Hacer Antes de Pensar en el Dinero?Tú deberías considerar la posibilidad de monetizar tu blog sólo después de que hayas establecido tu blog de alguna manera.

?Si recién has abierto tu blog y lo has empapelado con anuncios de Google o de productos de afiliados, u otras cosas, creo que estamos perdiendo el tiempo. Creo que no deberías hacerlo.

?Creo que primero , deberías descubrir por ti mismo:
si te gusta lo que estás haciendo,
si puedes hacerlo bien si recibes pocos comentarios de la gente, o de tus amigos después de leer lo que tienes,
si tienes visibilidad en los motores de búsqueda importantes, especialmente Google.

?O sea: “si escribes el tema de tu último artículo, puedes encontrarlo en Google en una de las primeras páginas?”, y así, sucesivamente.??

Una vez que eso sucede, y por lo tanto, una vez que empiezas a tener tráfico real, puedes entonces pensar en la publicidad.

?Y luego, si tienes, al menos, yo diría que unos 500 a 1000 visitantes por día, y hablas de un tema muy específico, para el que hay una serie de productos y servicios, y empresas que desean anunciar y puedes encontrarlas mucho antes, incluso antes de comenzar la publicación de tu sitio de blogs, deberías ver algunos ingresos en el orden de … 

?… si estás en un nicho que tiene un buen valor podría hacer unas pocas decenas de dólares por día: 10, 20, 30, 40, 50 dólares por día, o más.??Elije un Buen Nicho de Mercado?Depende mucho del tema en el que te enfoques.?Algunos temas tienen más valor económico que otros, porque los productos y los servicios que se venden a la gente después que hacen clic en los anuncios valen mucho más dinero y generan más ingresos a las empresas que otros productos.

?Una botella de Coca-Cola tiene poco margen de ingresos. Una hipoteca de una casa tiene un enorme margen durante un tiempo muy largo para quien lo vende, sólo para darte una idea general.

??Dinero = Esfuerzo?
Yo diría que un blog bien preparado que trabaja en un nicho, y tiene alguna autoridad antes de poner anuncios en las mejores y correctas ubicaciones en la página, debe hacer por lo menos 500 a 1000 dólares por mes para justificar invertir las tres a cuatro horas al día que pueda necesitar.

?Quizá mucho menos en algunos casos, tal vez un poco más en algunos otros. Pero ese es el tipo de número que me indica si vale la pena gastar más tiempo en el blog o no.

?Si no haces entre 500-1000 dólares al mes o bien estás haciendo algo mal en la forma en que publicas tu blog, o tu nicho no vale lo suficiente, o necesitas entender mejor cómo trabajar tu contenido y, a continuación, aprender cómo escribir magníficos títulos, y el aspecto general del sitio para que los robots de búsqueda de Google te indexen mejor, y puedas ser encontrado por gente que busca ese tema.

?Eso es lo que puedo decir. No hay un conjunto específico de normas y cifras, pero yo diría que el umbral para hacer algo de dinero es superior a 500 visitantes en un nicho específico. Allí debe empezar a hacer algo (dinero), y deberías hacer de unos pocos cientos a mil o más si estás haciendo sus cosas bien.

?Espero que te haya resultado de utilidad.

Fuente: http://www.masternewmedia.org
Bajo licencia Creative Commons

2. Los redactores SEO hacen cada artículo escaneable: Me explico, el lector debe poder examinar los artículos que escribes – nunca esperes que lean el artículo completo. Ellos deben poder encontrar fácilmente pequeños titulares que expliquen de lo que trata la siguiente sección. También deben encontrar listas ordenadas (numeradas) y desordenadas. Esto conduce a incrementar los enlaces desde otros sitios.

3. Los redactores SEO avanzados apuntan a un grupo de palabras clave en cada artículo: Ten una palabra clave como objetivo en cada artículo y ponla de 3 a 4 veces en dicho artículo.

4. Ellos ponen las palabras clave en etiquetas <h1>, <h2>, etc.: Si eres un blogger significa que te aseguras de que tu palabra clave este en el título de la página. También puedes añadir tus palabras clave dentro de etiquetas <h1>, <h2>, <h3> o <h4> entre el contenido del artículo.

5. Ellos saben que hay muchas variaciones de la palabra clave objetivo: Si un artículo tiene como objetivo la palabra clave ‘redactores SEO’, probablemente deberías tener también como objetivo a ‘escritores SEO’ y ‘redacción SEO’.

6. Ellos no exageran la orientación por palabra clave en los artículos: Un mal escritor añadirá bastantes veces la palabra clave a la que quiere apuntar, lo que es incluso peor que no apuntar a ninguna palabra clave.

7. Ellos no mantienen un estándar en la densidad de palabras clave de cada artículo que escriben: Piensa en ello, si tienes exactamente el 5% de densidad de palabras clave para cada página de tu sitio, es muy fácil para los buscadores saber lo que estás haciendo. Incluso, recomendaría no comprobar la densidad de palabras clave. Pon tus palabras clave naturalmente dentro del texto del artículo 3 o cuatro veces.

8. Nunca intenta engañar a los buscadores: Usar métodos sospechosos como texto oculto y cloaking finalmente te hará penalizar. Un buen redactor SEO nuca lo estará, nunca tendrá un sitio penalizado pues él/ella no usará técnicas sospechosas.

9. Ellos optimizan los títulos HTML, el nombre de archivo de la imágenes, las etiquetas alt y las meta etiquetas: Tener una imágen relacionada con tu palabra clave puede ayudar a posicionarla SI usas como nombre de archivo de la imágen la palabra clave. También debería usar la palabra clave en la etiqueta alt de la imágen. Si usas el plugin ‘All in One Seo Pack’ para WordPress, tu palabra clave será añadida en el título HTML y en la meta descripción de tu página SI lo usas en el título y en el primer párrafo del artículo.

10. Ellos etiquetas los artículos con las etiquetas correspondientes a su palabra clave: Un gran redactor SEO sabe cuales son las etiquetas que le pueden servir para determinado artículo dependiendo de la palabra clave escogida.

Fuente: http://www.trazos-web.com
Bajo licencia Creative Commons

Por ello voy a explicar de lleno diferentes técnicas SEO de forma superficial y su implicación ética.

El listado quedará divido en dos partes. En uno está el lado oscuro (los practicantes serían Blackhat SEOs) que son los que abusan de técnicas para generar su spam en los buscadores y el lado ético (whitehat) que sería lo correcto.

#Blackhat SEO (spam)

• Cloacking: Consiste en ocultar una cloaca detrás de una web de apariencia normal. De forma que solo los buscadores (o viajando sin javascript ven ese contenido sucio que normalmente es texto plano, con h1, negritas y muchos enlaces que nunca pondrían en la portada.
  Esta técnica es la más habitual entre spamers y desde el punto de vista ético es ridículo utilizar este engaño ya que el texto ocultado es precisamente el que debe resaltar la web normal para los usuarios.
• Comprar enlaces: Google plantó posición en este asunto hace tiempo y decidió que la compra/venta de enlaces de cara a inflar la relevancia de las webs a base de backlinks es totalmente ilegal.
  De hecho la imposición del famoso nofollow fue precisamente para permitir la opción de vender enlaces y avisar de ello a los buscadores para no ser penalizado.
• Creación de granjas: Consiste en generar contenido basura de forma automática o copiando (que es peor). Está a la orden del día, como el spam en comentarios o en los emails.
  Esta práctica intenta colar sus miles y miles de páginas en los índices de los buscadores. Para ello se dispersan en distintos servidores, dominios, estructuras contenidos diferentes para dificultar su eliminación.
• Abusos de keywords: Para hacer posicionar se debe optimizar los títulos, descripciones y encabezados al máximo, pero esto es campo abonado para el abuso. Un spamer pondría en un título todo tipo de palabras muy buscadas para intentar acaparar con una sola web el numero mayor de búsquedas. La diferencia entre tener ética y hacer spam está en ser coherente y fiel con el contenido. Un spamer posiciona por búsquedas a las que no aporta nada relacionado ni valioso.
• Contenido duplicado: Está claro, aprovechar un texto colocándole en múltiples páginas con intención de tener más páginas indexadas, que poco a poco adquirirán antigüedad y un poquito de importancia y con ello transfieren relevancia a la página de verdad, la que genera el dinero.
• Texto oculto: Consiste en ocultar enlaces y keywords en una web. Para hacerlo se suelen utilizar divs ocultos, fuentes de letra inapreciables o el viejo truco de texto blanco sobre fondo blanco por ejemplo.
• Y más técnicas que se puedan imaginar…

#Whitehat SEO (lo correcto)

• Optimización de textos: Ubicando el titulo donde ha de ir, la descripción donde ha de ir… y así con todo. Fuera del circulo de bloggear donde todo el mundo sabe que el titulo es de los factores más cruciales, hay cientos de miles de empresas con páginas web en las que no posicionan ni si quiera por su propio nombre. Aquí la laborSEO es crucial y por eso los buscadores lo promueven. Una prácticaSEO correcta solo posicionará búsquedas sobre las que tiene un contenido real y coherente.
• Implementación de estándares de accesibilidad: Por ejemplo en el caso de las imágenes, hoy en día prácticamente todo webmaster sabe que para que un buscador entienda lo que contiene una imagen debe añadir el parámetro alt=“texto” y una pequeña descripción (aquí sí se debe escribir para los buscadores). Y como esta regla hay muchas más que realzan el contenido de cara a los buscadores y cualquiera está en su derecho de utilizarlas, aunque sea a un profesional especializado.
• Crear una estructura de enlaces: Muchas webs necesitan rehacer la forma de enlazarse entre ella misma. Tanto es así que es muy habitual ver como la página más relevante de un site es la página de Información legal…
• Y muchas más correcciones y optimizaciones; labores de un especialista SEO que hace una Internet más amplia y accesible, dentro del limite ético, la competitividad de una web.

  Fuente: http://gonzo.teoriza.com/
  Bajo licencia Creative Commons

El ‘SEO‘ utilizará diversas técnicas de posicionamiento para conseguir estas buenas posiciones en los resultados. Es un gran conocedor de la WWW (los sitios web de Internet), y principalmente le ayudará a conseguir enlaces de calidad hacia su sitio web, y a reestructurar -en caso de que sea necesario- dicho sitio web y sus contenidos.
Es verdad que para obtener buenas posiciones en los resultados de búsqueda, hay técnicas que son penalizadas por los buscadores, y éstos pueden llegar incluso a eliminar su sitio web, por lo que hay que seguir una serie de normas a la hora de buscar ese mejor posicionamiento posible en los buscadores de la web.
Cómo mejorar nuestro posicionamiento:
1.Participando en la blogosfera
Enlazando otras páginas y buscando que nos enlacen
comentando en otros blogs
Incluyendo nuestros enlaces en un buen blogroll

2.Registrar nuestro blog en directorios, buscadores o redes de blogs
* Alianzo
* Technorati
* Google
* Bitacoras
* Directorio RSS
* Bitadir
* BloGalaxia

* Blogesfera

O esta lista de directorios

Esta práctica va a consistir en registrarnos en 2 de ellos (preferentemente de entre los 4 primeros) y escoger, de entre nuestros post ya publicados, y a partir de ahora siempre, los mejores, y enviarlos a alguna de las redes sociales que aparecen ya en lacoctelera: technorati, menéame y del.i.cious). Poner en “sobre mí” el icono del ránking en el que nos hayamos registrado.

1. Mal código
Es imprescindible revisar que el código de nuestra página web cumple los estándares establecidos por el World Wide Web Consortium . Si el código no es válido, algunos buscadores serán incapaces de interpretarlo, identificar el idioma en que está escrita la web, etc. Algunos errores no son visibles por visitantes humanos utilizando determinados navegadores, por lo que es posible que, aunque su sitio web se vea perfecto a simple vista, el código no sea completamente correcto.

2. Web ilegible

Al hilo de lo dicho en el punto anterior, aunque los visitantes humanos puedan ver perfectamente el contenido de nuestro sitio web, es posible que los robots de los buscadores no tengan tanta suerte. Tengamos en cuenta que utilizan un protocolo muy básico de lectura de HTML (aunque cada vez se están sofisticando más), y hagamos lo posible por ponérselo fácil. Algunos errores que pueden hacer la web invisible o ilegible para los buscadores son los siguientes:

La web está hecha completamente en Flash.
Los menús están hechos con JavaScript o AJAX.
Hay demasiadas imágenes y/o no tienen texto alternativo, sobre todo las que forman parte de menús o enlazan a otras páginas.
Si a pesar de ello desea tener una web completamente en Flash, lea nuestros consejos para optimización SEO de webs en Flash . ¡No hay por qué renunciar a la belleza!

3. Redirecciones innecesarias

La página principal de nuestro sitio web debería dar una idea del contenido de éste , no sólo para los buscadores sino también para los visitantes humanos. Su contenido debería ser lo suficientemente rico como para incluir enlaces a las secciones principales y descripciones de algunas páginas interiores. Algunos errores que se cometen casi inadvertidamente pero que son fatales para un buen posicionamiento natural en buscadores son:

Uso de splash pages o una página principal donde únicamente se nos da a elegir por ejemplo entre varios idiomas o varios departamentos de la empresa, y que por tanto no tiene contenido interesante para los buscadores.
Redirección desde la página principal a una página interior, muchas veces permitiendo el paso de visitantes humanos pero cortándolo para los robots de los buscadores, que pueden ser incapaces de seguirla.
Cambio de dominio sin utilizar una redirección permanente o 301, perdiendo por tanto el posicionamiento ya conseguido en el dominio anterior y también visitas que intentarán llegar al dominio antiguo.
4. Frames

Es cierto que los frames se utilizan cada vez menos. Es un alivio, sobre todo porque muchas veces son incómodos incluso para los visitantes humanos . Si su sitio web todavía los usa, es buen momento para plantearse un rediseño, teniendo en cuenta el resto de los consejos sobre SEO que le damos en este blog y en otras webs. Si de todas maneras en su caso son imprescindibles por el motivo que sea, entonces le recomendamos que incluya la descripción del sitio web en la sección noframes , que enlace todas las páginas interiores a la principal y que use JavaScript para forzar que, si sus visitantes llegan a una página huérfana desde un buscador, aparezca toda la estructura de frames y navegación y no se encuentren perdidos.

5. URLs antipáticas

Si las URLs o direcciones de sus páginas web son demasiado largas, tienen demasiadas variables, utilizan identificadores de sesión o no contienen ninguna palabra clave , no ayudarán en absoluto a un posicionamiento natural de sus contenidos. Siempre hay alternativas, como utilizar cookies en lugar de sesiones o aprovechar la función mod_rewrite del servidor para hacer las direcciones más bonitas.

6. Metatags o title inexistentes

Demasiadas veces encontramos en nuestro trabajo diario páginas webs cuyo título es “Página nueva” o incluso el nombre del editor HTML que se ha utilizado para crearla. Es la mejor forma de desperdiciar uno de los recursos más importantes de un buen SEO, ya que los motores de búsqueda utilizan el título de las páginas tanto como los humanos para hacerse una idea de su contenido.

Igualmente, los metatags o etiquetas de metainformación de cada página dentro de nuestro sitio web son importantes para que los buscadores las identifiquen correctamente.

7. Respuestas del servidor diferentes a OK

Si para alguna página el servidor devuelve como código de estado HTTP la respuesta 404 (no encontrada), 302 (encontrada pero movida temporalmente), 500 (error interno del servidor) o cualquier otro error o respuesta inadecuada, se impone buscar el motivo y hacer las correcciones necesarias. Lo ideal sería que la respuesta fuera 200 (OK), salvo excepciones establecidas conscientemente. En cualquier caso, y para evitar que ningún visitante (incluidos robots) se sienta frustrado si no encuentra alguna de nuestras páginas, conviene tener una página de respuesta 404 que no sea un callejón sin salida, sino que ofrezca opciones de navegación y búsqueda evitando así pérdidas de audiencia.

8. robots.txt dañado o con errores

Si su fichero robots.txt, que indica a los robots de los buscadores las páginas que tienen que indexar y las que no , contiene errores y por equivocación les está diciendo que no indexen ninguna página o determinados directorios que sin embargo sí le interesan que se indexen, es como si nuestra web fuera invisible para ellos.

Compruebe periódicamente que este fichero está en buenas condiciones y si debe variar las directivas incluidas en él.

9. Demasiado código

Para ahorrar espacio en sus bases de datos, algunos buscadores instruyen a sus robots para que indexen sólo determinado número de Kb de cada página. Por eso algunos especialistas SEO recomiendan poner el contenido importante para buscadores al principio de la página .

En cualquier caso, conviene que el código sea limpio y fácilmente legible. Una forma fácil de hacerlo es utilizando hojas de estilo en ficheros independientes y separar los códigos JavaScript también en sus propios ficheros.

10. Técnicas poco recomendables

Algunos administradores de webs incurren en prácticas no adecuadas incluso sin saberlo. Para evitar esto, lo mejor es estar avisado y conocerlas. De esta forma, errores como incluir una palabra clave repetida demasiadas veces (que puede ser fácilmente un simple vicio de redacción en lugar de mala fe) o pagar por incluir nuestra web en un directorio (que puede ser una compra legítima de publicidad) serán fácilmente evitables gracias a disponer de información sobre sus posibles consecuencias .

Algunos sitios web mejoran muchísimo su SEO interno simplemente teniendo en cuenta estas simples directrices. Algunos cambios aquí y allá pueden hacer que un mes después su web salte a la primera página de los buscadores por su palabra clave favorita. ¿Está su web en esa situación? Tampoco cuesta tanto averiguarlo.

Fuente: http://10enseo.es
Bajo licencia Creative Commons

La Importancia de los Títulos
El título de un artículo es sin duda la parte más importante a tener en cuenta dado los siguientes factores de importancia:

Desde el punto de vista del Lector o Usuario un título que indique lo que busca de modo claro y descriptivo influenciará a su lectura. La mayoría de las veces el título es lo único que se lee para decidir si acceder al artículo o no.
Los buscadores le dan un peso elevado al título y toman en cuenta la relevancia de las palabras usadas en relación con el contenido del artículo.
7 Consejos para el buen diseño contextual de un título

Sencillez y objetividad. Evita títulos que intenten ser inteligentes, crípticos, sólo bonitos, o de poca relación con el contenido.

Se informativo. Piensa en como buscarías tu artículo en Internet poniéndote en la cabeza de los usuarios.
Palabras clave. Usa siempre en el Título una o más de las palabras clave que reflejen el contenido. La densidad (cantidad) de palabras clave que aparezcan en el contenido del artículo elevarán el peso en las palabras del título. Los buscadores analizan este factor para su ranking (posicionamiento).

Gramática. Haz pruebas combinando plurales, singulares, posición de las palabras, sinónimos, etc. Usa variaciones gramaticales de las palabras clave tanto en el Título como en el contenido del Post.

No copies títulos. La copia de un título te pone en directa competencia con artículos ya establecidos, a no ser que tu contenido sea más relevante que el suyo y poseas un PageRank elevado tendrás que competir con el hecho de que probablemente estos ya poseen el respaldo de otras webs enlazándolos.

Divide el contenido con Títulos. Si tu artículo contiene varias secciones divídelas con títulos, estos deben seguir los mismos puntos mencionados en cuanto a su diseño, más adelante explicaré como hacerlos sobresalir para que los buscadores les den más peso.

Escribe el título al final. Una buena técnica es escribir un borrador del título nada más empezar e ir modificándolo a medida que vayamos redactando el Post, siendo su optimización el último paso a realizar.
Técnicas SEO avanzadas para Títulos

Toma ventaja de las etiquetas HTML:
Como he dicho los Buscadores dan un peso elevado a los títulos en el momento de analizar una Página usando como medida ciertas reglas establecidas con las etiquetas

a

. Estas son las reglas de importancia existentes y que luego cambiaremos:

H1 para el nombre del Blog.
H2 para los Títulos de los Posts.
H3 para secciones dentro del Post.
etc.
Para darle más peso al artículo editaremos nuestra plantilla y cambiaremos estas reglas de la siguiente manera:

H1 para los Títulos de los Posts.
H2 para el nombre del Blog y las secciones dentro del Post.
Para los títulos dividiendo secciones de un Post usaremos H2 desde el editor que usemos para redactar.

Alterna palabras clave entre el Título y su URL:
Los buscadores también analizan la URL de un Post aunque con un peso bastante pequeño, aun así si tu intención es exprimir todo el jugo entonces aprovecha y amplia el espectro del título alternando plurales y sinónimos, por ejemplo:

Título: Aprende a mejorar tu blog
URL: como-optimizar-mejor-tu-blog
Con esto abarcamos las palabras: aprende, mejorar, mejor, optimizar, blog

Optimiza la estructura de los Permalinks:
Ya os he hablado con anterioridad de la importancia de la URI del artículo, la construcción de este debe ser óptima para ganar peso en su indexación, sigue este enlace para acceder al tutorial acerca de cómo optimizar tus Permalinks.

Ordena el Título general adecuadamente:
Es importante que el título de un Post aparezca antes que el nombre del Blog ya que será lo primero que el usuario leerá. Wordpress pone por defecto el nombre del Blog primero. Este factor se controla a través de las Meta Tags, para solucionarlo puedes usar alguno de estos Plugins de optimización SEO:

Headspace2
All in One SEO Pack
SEO Title Tag
Aunque estos plugins harán el trabajo a la perfección si deseas integrar esta funcionalidad directamente en tu plantilla puedes usar el algoritmo de optimización SEO que encontrareis en este enlace.

Ejemplos y consejos prácticos de títulos

-Las listas tienen un índice de efectividad elevado para atraer a los lectores:

Top 10 trucos para Ganar dinero en Internet
Las mejores 20 fotos del 2007
16 consejos para mejorar tu Blog
-Usa sinónimos, antónimos, plurales y singulares. Recuerda que debes usar variaciones de estas palabras en el contenido de tu artículo manejando su densidad:

Como ser un ganador y nunca perder dinero
Mejora los enlaces o vínculos en tu página web
El primer ratón (mouse) de la historia
-Escribe con Objetividad y Sencillez siendo Informativo al mismo tiempo:

Mis Blogs Favoritos
20 Blogs interesantes que debes leer
Trucos para Webs
10 trucos para mejorar tu Web
Fotos de animales interesantes
16 fotografías de los animales más curiosos

Conclusión
Aunque para atraer más tráfico a tu blog puedes ayudarte con todo tipo de técnicas SEO, la verdad es que ninguna técnica es un substituto de buen contenido, por mucho que intentes posicionarte bien si no escribes algo que interese y guste a los lectores tus visitas serán puntuales. Así que escribe algo interesante y disfruta haciendolo.

Fuente: http://www.perraco.com
Bajo licencia Creative Commons

Comparte:

]]> http://traffickr.info/2009/04/tecnicas-de-seo-para-escribir-y-mejorar-los-titulos-en-un-blog/feed/ 1 http://traffickr.info/2009/04/canonical-tag-nueva-tecnica-seo-para-contenido-duplicado/ http://traffickr.info/2009/04/canonical-tag-nueva-tecnica-seo-para-contenido-duplicado/#comments Sun, 26 Apr 2009 12:51:31 +0000 admin http://traffickr.info/?p=135 Google, Yahoo y Live han anunciado que soportarán un nuevo tag llamado “Canonical URL Tag” que ayudará a los webmasters y dueños de sitios a eliminar sus páginas con contenido duplicado del índice. Lo que sin duda se convertirá en una gran herramienta para la SEO…

Para comprender en que consiste este nuevo tag, vamos a desarrollarlo paso a paso.

¿Cómo funciona la Canonical Tag?
La etiqueta HTML será ubicada en la cabecera (header) de la página web, en la misma sección donde podemos encontrar la etiqueta title o la meta description. En realidad, este no es un tag nuevo, sino que, como pasóa con nofollow, simplemente usa un nuevo parámetro “rel”. Por ejemplo:

Esto le dirá a Yahoo, Live y Google que la página en cuestión debe ser tratada como si fuera una copia de la URL www.baluart.net y que todos los enlaces y la relevancia deben ser redirigidas a la URL.

El atributo canonical es similar en muchos aspectos a una redirección 301 desde la perspectiva SEO. En esencia, uno le esta diciendo a los buscadores que múltiples páginas web deben ser consideradas como una (redirección 301), sin redirigir a sus visitantes a la nueva URL. Veamos algunas diferencias.

Diferencias entre la redirección 301 y la Canonical Tag
A diferencia de una redirección 301 que redirige todo el tráfico (robots y visitantes humanos), la etiqueta Canonical es sólo utilizado por los buscadores, por lo que aún podemos hacer tracking de nuestros visitantes por las distintas versiones de URL.

El peso de una redirección 301 es mucho mayor al de una canonical tag, y esto debido a que los buscadores van a optimizar su algoritmo para asegurarse de que los webmasters, por error o con mala intención, no vayan aplicar el tag equivocada e indiscriminadamente.

Con una redirección 301 nosotros podemos redirigir visitantes de una página del dominio1.com al dominio2.com y hacer lo mismo con los buscadores. Esto no se aplica a las Canonical URL Tags, los cuales se aplican exclusivamente a un único dominio raíz (a través de sub carpetas y sub dominios).

Con el paso del tiempo, seguramente irán evidenciándose más diferencias, pero como este tag es aún nuevo, habrá que esperar un tiempo.

Un ejemplo práctico donde usar la Canonical Tag
Por lo general, las páginas PHP muestran la sesión ID del visitante, lo que crea una infinidad de páginas con contenido duplicado y reducen la relevancia de la URL original (ver imagen).

A partir de esto, ya pueden imaginar la cantidad de casos en que podemos aplicar esta nueva etiqueta.

Fuente: http://www.baluart.net/
Bajo licencia Creative Commons

Comparte:

]]> http://traffickr.info/2009/04/canonical-tag-nueva-tecnica-seo-para-contenido-duplicado/feed/ 0 http://traffickr.info/2009/04/como-funciona-el-pagerank-video/ http://traffickr.info/2009/04/como-funciona-el-pagerank-video/#comments Sun, 26 Apr 2009 12:09:03 +0000 admin http://traffickr.info/?p=132 El siguiente vídeo muestra como actúa el algoritmo Pagerank de Google. El Pagerank (PR) es el algoritmo que Google patentó el 9 de enero de 1999, y con el Google crea el orden de los SERPs. No hay que confundir el Pagerank con el Pagerank público, la barrita verde por la que tanto luchan los webmasters. En los resultados de búsqueda no solo influye el Pagerank, pues es común observar en un resultado concreto, que páginas con un menor PR público ocupan posiciones superiores a otras con un mayor PR.

Para conocer como funciona este algoritmo, se ha incluido un vídeo elaborado por Podmathcast, en el que se detalla como funciona el pagerank mediante una fórmula matemática. Aunque la explicación es algo compleja merece la pena verlo.

Fuente: http://www.gigle.net/
Bajo licencia Creative Commons

Comparte:

]]> http://traffickr.info/2009/04/como-funciona-el-pagerank-video/feed/ 0 http://traffickr.info/2009/04/todo-acerca-de-robotstxt/ http://traffickr.info/2009/04/todo-acerca-de-robotstxt/#comments Sun, 26 Apr 2009 05:41:14 +0000 admin http://traffickr.info/?p=130 El archivo robots.txt es un archivo de texto que dicta unas recomendaciones para que todos los crawlers y robots de buscadores cumplan (¡ojo! recomendaciones, no obligaciones). Pero comencemos por el principio.

Un crawler es un robot de una entidad (generalmente buscadores) que acceden a las páginas web de un sitio para buscar información en ella, añadirla en los buscadores, etc. También son llamados spiders, arañas, bots o indexadores.

Por ejemplo, Googlebot es el nombre del crawler del buscador Google. También existen otros como:

Mediapartners-Google, que es el crawler que se encarga de revisar los anuncios de Google Adsense.
Googlebot-Image, robot indexador de imagenes del buscador de Google.
Slurp, crawler de indexación del buscador Yahoo!
noxtrumbot, del buscador Noxtrum.
Scooter, del buscador Altavista.
Y muchísimos más. Si establecemos un control en nuestro robots.txt, podremos conseguir una serie de beneficios:

Impedir acceso a robots determinados: Puede parecer contradictorio, pero algunos crawlers no nos proporcionarán sino problemas. Algunos robots no son de buscadores, e incluso algunos robots no son ni amigos. Pero de eso ya hablaremos más tarde.
Reducir la sobrecarga del servidor: Podrás controlar el flujo de algunos robots. Algunos de ellos son un verdadero descontrol de peticiones que pueden llegar a saturar tu servidor.
Prohibir zonas: Nos puede interesar tener disponible una zona en nuestra web, que sea accesible para algunos, pero que no aparezca en buscadores.
Eliminar contenido duplicado: Uno de los casos más importantes, que casi siempre es olvidado por los webmasters. Si eliminamos la duplicidad de contenido, los buscadores nos puntuaran muy alto, aumentando el flujo de visitas.
Fijar mapas del sitio: También es posible acoplar un sitemap para indicar el buen camino a los robots.
¿Y entonces, que hay que hacer? Es muy sencillo.

Sólo tenemos que crear un fichero de texto robots.txt y comenzar a escribir en el. Partiré del siguiente ejemplo donde permitimos la entrada a todos los crawlers (igual que sin ningún robots.txt):

User-agent: *
Disallow:
En User-agent debemos introducir el nombre del robot, y a continuación las rutas donde queremos prohibir que acceda. Algunos ejemplos:

Disallow: / prohibe la entrada a todo el sitio.
Disallow: /foro/ prohibe la entrada a los documentos del directorio foro.
Disallow: permite la entrada a todo el sitio.
En algunos casos suele utilizarse en lugar de Disallow, la palabra Allow. Aunque por definición es correcta, es conveniente no utilizarla, puesto que las rutas omitidas se asumen que están permitidas por defecto, y algunos crawlers no entienden la palabra Allow.

Es posible acumular varios Disallow bajo un mismo User-agent, pero no podemos utilizar varios User-agent encima de un Disallow. Bien, algún ejemplo:

# Crawler de MSN
User-agent: msnbot
Disallow: /links.html
Disallow: /private/
Disallow: /photos/
Este código impide al crawler del buscador de Live (MSN) acceder a la página links.html, y las carpetas private y photos (y todo su contenido) de nuestro sitio.

Añadiendo el carácter # al principio de una linea podemos escribir comentarios que no interpretará el crawler.

Es posible ir acumulando reglas para distintos crawlers, formando un robots.txt más largo y completo. Cada vez que escribamos un User-agent deberemos dejar una linea en blanco de separación. Además, existe una ligera adaptación que permiten usar comodines ($ y *) en las rutas en algunos crawlers (sólo Googlebot y Slurp):

User-agent: Slurp
Disallow: /*.js$
Disallow: /2006/*
Disallow: /2007/*
Disallow: /articulos/*/pagina/*
Se está indicando al robot de Yahoo, que no indexe los ficheros que terminen en .js (javascript), direcciones que empiecen por 2007 o 2006 (fechas), ni artículos con la palabra pagina (paginado de comentarios). Estos casos pertenecen a la idea de no indexar contenido duplicado.

En la mayoría de los blogs, puedes acceder a un mismo artículo por las direcciones:

blog.com/articulo/titulo, la dirección principal.
blog.com/2007/04/, el archivo del mes.
blog.com/articulo/titulo/feed, feed RSS del artículo.
blog.com/articulo/titulo/pagina/2, pagina 2 de comentarios.
Todo esto es contenido duplicado, una de las razones más importantes de penalización para un buscador, a no ser, claro, que te las ingenies para que sólo sea accesible desde una dirección. A la hora de ver los resultados te asombrarás lo bien que estarás quedando ante los ojos de Google, por ejemplo.

Hay que tener mucho cuidado con usar cosas como Disallow: /pagina o Disallow: /*pagina, puesto que en lugar de bloquear lo que queríamos (carpeta pagina o artículos paginados), terminen bloqueando direcciones como /decorar-mi-pagina o /paginas-para-amigos/.

Si revisas estadísticas y demás, también puedes observar que a veces algunos crawlers «se pasan» revisando nuestro sitio, y funden a peticiones a nuestro pobre servidor. Existe una manera de tranquilizar a los robots:

User-agent: noxtrumbot
Crawl-delay: 30
Con esto le decimos al robot de noxtrum que espere 30 segundos entre cada acceso. Cuidado, porque Crawl-delay no lo soportan todos los crawlers (al menos MSNBot y Slurp si lo soportan, y Googlebot desde el panel de webmasters también).

Finalmente, podemos también incluir un mapa del sitio en nuestro robots.txt de la siguiente forma:

Sitemap: http://www.emezeta.com/sitemap.xml
En RobotsTXT.org podrás encontrar documentación oficial si quieres profundizar y en esta búsqueda de Google encontrarás muchos robots.txt de ejemplo, incluso robots.txt optimizados para tu tipo de web. Además, también tienes un validador de robots.txt.

Recordar a todos que con el fichero robots.txt no podemos bloquear los accesos por «fuerza bruta». Robots.txt es una recomendación del webmaster a los buscadores, que como son «robots buenos», las seguirán al pie de la letra.

Existen otros «robots malos» (que buscan direcciones de correos o formularios para hacer SPAM) que no dudarán en acceder a los lugares que hayas prohibido si lo desean. Para bloquear estos, deberemos echar mano al fichero .htaccess, pero como decía Michael Ende, eso ya es otra historia…

Fuente: http://www.emezeta.com
Bajo licencia Creative Commons

Comparte:

]]> http://traffickr.info/2009/04/todo-acerca-de-robotstxt/feed/ 0 http://traffickr.info/2009/04/como-posicionar-nuestro-blog-usando-keywords-y-metatags/ http://traffickr.info/2009/04/como-posicionar-nuestro-blog-usando-keywords-y-metatags/#comments Sun, 26 Apr 2009 05:36:58 +0000 admin http://traffickr.info/?p=127 Guía de posicionamiento en buscadores
Posicionar una página siempre empieza con palabras. ¿Cuáles son las palabras que describen nuestra oferta? y ¿cuáles son las que buscan los usuarios de Internet?
¿Hablamos de palabras clave o frases clave (keywords)?
El análisis de palabras clave es un paso previo esencial al posicionamiento en buscadores de una página web. De poco nos sirve todo el trabajo técnico de optimización si no lo enfocamos a palabras adecuadas y relevantes a nuestra página web. Puesto que las palabras individuales son en general muy buscadas, y por lo tanto suelen atraer muchísima competencia, el camino correcto es elegir“frases clave” que consistan en frases de dos a cinco palabras que posteriormente emplearemos para la optimización de cada página de un sitio web que queremos .

Por ejemplo, si consideramos la palabra clave “viajes”, una búsqueda en Google produce casi 2,5 millones de páginas que compiten para conseguir un ranking alto para esta palabra. Como muestran muchos estudios, pocos consumidores llegarán más lejos que las primeras páginas de los resultados de una búsqueda, y por lo tanto, empleando esta palabra clave, solo unas 30 páginas van a conseguir visitas. Los demás pueden comprarse un anuncio en la televisión.

El esfuerzo, talento y suerte requerido para conseguir un posición alta en buscadores con esta palabra superaría la mayoría de los grandes profesionales de posicionamiento, pero por otro lado, no es la cuestión. La palabra “viajes” no es una buena palabra clave ya que carece de enfoque y claridad. La persona que busca esta palabra, ¿quiere un viaje al Caribe, a Bruselas o a Villanueva de la Vera? ¿Quiere comprar un billete, o quiere una guía de un destino? Si quiere un billete, ¿de avión, tren o autobús? Las preguntas son infinitas. Por lo tanto podemos concluir que con tantas páginas indexadas, tenemos que ser más precisos a la hora de escoger las palabras clave.

En general, los usuarios de buscadores aprenden rápidamente cómo hacer una búsqueda más refinada para conseguir lo deseado. Muy pocos ya buscan con una palabra suelta, optando por frases más largas que obtienen resultados más enfocados. La lección entonces para el que quiere posicionar una página web es, en una palabra, precisión.

Simplemente, si añadimos a nuestra búsqueda las palabras clave “al caribe” los resultados se reducen a unos 50.000. Para los que lo tienen que saber hay 2.000 páginas que corresponden al buscar “viajes a Villanueva de la Vera.” (Creo que está en Cáceres.)

En conclusión, si al elegir nuestras palabras clave, o frases, somos muy precisos, nos beneficiaremos de menos competencia y más visitas. Si fuera poco, si es que realmente ofrecemos viajes al Caribe o a Villanueva de la Vera, nuestra página web, cuidosamente optimizada para estas palabras clave, tal vez puede conseguir algún visitante que quiera comprarnos algo.

Truco adicional – Analizando las estadísticas de tu página web, se puede encontrar muchas palabras y frases clave que no imaginabas.

Cómo elegir las palabras clave con precisión
Otro problema que a menudo surge a la hora de seleccionar las palabras clave para nuestra página web es el tamaño del mercado para ciertas frases. Por ejemplo, mientras el director comercial de una franquicia de coches preferiría que su página web hablara de “coches de ocasión”, en realidad hay muchas más personas que buscan la frase “coches usados.”

Es muy importante tener en cuenta que la persona media no piensa de la misma manera que un director de marketing. Lo que suena bien para un eslogan promocional no corresponde a las frases que probablemente utilizarán los clientes potenciales a la hora de buscar su producto.

¿Cómo sabemos las frases que utiliza la persona media cuando busca información en internet? Afortunadamente, existen varias herramientas que nos sirven para el análisis de palabras clave. Nos permiten introducir una palabra o frase y descubrir cuántas personas han utilizado esta palabra o frase en varias buscadores y directorios. Las mejores de estas herramientas también nos ofrecerán algunas alternativas o frases parecidas que quizá no hemos considerado.

Los más populares son:

Herramienta de sugerencia de palabras de búsqueda de Overture (enlaza con la herramienta en español. También es disponible en inglés.)

Esta herramienta gratuita nos proporciona la cantidad de búsquedas de una frase en todos los portales afiliados a Overturedurante el mes anterior. También ofrece unas variaciones de la frase introducida por el usuario y la cantidad de búsquedas que corresponden a ellas.
Hay que tener en cuenta que, debido a la naturaleza de Overture, que ofrece publicidad pagada en su buscador, los resultados incluyen las búsquedas de programas automatizados cuyo única función es vigilar las pujas para ciertas palabras clave. Esto puede distorsionar los resultados en el caso de ciertas palabras muy populares, pero, como todavía Overture se emplea muy poco en el mundo hispanohablante, no debería causar muchos problemas. Desde luego, es gratuito.

Wordtracker Keyword Generator

Por desgracia, esta herramienta maravillosa está disponible únicamente en inglés (confieso que para mí, como puedan haber adivinado, no es un problema ya que soy un guiri) pero dentro de poco espero publicar un guía de uso en español. Mientras tanto, los que no dominan esta lengua pueden utilizar un traductor como Reverso.

Aunque hay una versión gratuita de su servicio, la mayoría de webmaster optan por versión de pago que incorpora una abundancia de ventajas. Los precios de suscripción son 6 dólares estadounidenses por un día hasta 225 dólares al año.

Los usuarios pueden introducir una sola palabra o frase y descubrir una lista extensa de palabras similares que también pueden ser analizadas. Se puede averiguar la frecuencia de búsqueda de cada frase en los buscadores más importantes, cuántas sitios web compiten por un ranking con esta frase y un índice, conocido como el KEI, que corresponde a la frase. El KEI es un cálculo matemático que compara el número de búsquedas de una frase con la cantidad de sitios que compiten por esta frase. Cuanto más alto el KEI, más probabilidades de tener un éxito con esta frase que se convertirá en, esperamos, muchas visitas.

Cómo refinar las palabras clave
Teniendo ya delante de nosotros esta gran acumulación de información y datos sobre las palabras clave y frases relevantes a nuestro sitio web, llega la hora de decidir cuáles de ellas deberíamos emplear para conseguir un alto ranking en buscadores. Según la popularidad del tema central del sitio, puede que tengamos entre una docena y cientos de opciones.

¿Cuántas frases deberíamos emplear? En el caso del webmaster de un sitio de cinco páginas es mejor que no intente conseguir los primeros resultados en buscadores para cien frases distintas. De igual manera, el webmaster de un sitio de cinco mil páginas no se debería ver limitado a una veintena.

Como regla muy generalizada, para cualquier página que tenga bastantes contenidos escritos ( por encima de las 250 palabras) deberíamos tratar de emplear de una a tres frases. No es esencial posicionar la página “Contactar con nosotros”, pero si hay una página con cierta cantidad de contenidos, hay que aprovecharlo.

¿Cuáles son las frases que deberíamos elegir? Normalmente, las frases que nos pueden conseguir más visitas son las que atraerán también más competencia, a no ser que tenga la enorme suerte de ser el único en su mercado. Si hay competencia en el mercado físico, lo más probable es que también habrá en el mercado virtual.

Para empezar, si no tiene mucha experiencia, suele ser aconsejable posicionar sus páginas empleando frases que tengan menos competencia pero bastante tráfico. En general, es mejor conseguir un alto ranking en buscadores para una frase menos buscada que un ranking bajo para una frase altamente demandada.

Nuestras primeras palabras
Hay que declarar antes de empezar que no soy la persona adecuada para dar lecciones en la redacción de textos en español en cuanto a su estilo y gramática. Como no me canso de decir, soy un guiri. En estas páginas se trata únicamente de la redacción en cuanto al posicionamiento de páginas web, teniendo en cuenta que no solo los visitantes de su página van a leer los contenidos, sino también los buscadores.

Aunque los directorios como Yahoo! o DMOZ (Open Directory Project) incluyen en sus listados solo un título y una descripción de nuestro sitio, los buscadores como Google o Altavista intentarán visitar cada una de nuestras páginas con su programas robot (spider) y añadirlas a su base de datos. Al realizar la visita, hacen lo que pueden para “leer” los contenidos y añadir a su índice cada palabra que encuentran. Posteriormente los buscadores utilizarán los contenidos para establecer su relevancia en cuanto a las búsquedas realizadas por parte de sus usuarios.

Como los contenidos del cuerpo de la página (entre las etiquetas <body>) son tan importantes en la determinación de nuestro ranking, se debería considerar cada página como una oportunidad más para salir en los primeros resultados en buscadorespara una frase que nos interesa.

Antes de redactar, hay que decidir cuáles son las palabras clave que vamos a emplear en cada página para su posicionamiento. Una buena manera de empezar es hacer un listado de todas las páginas que van a constituir nuestro sitio. Si nuestro sitio es muy grande, con una abundancia de páginas de contenidos generados dinámicamente, será más fácil incluir solo las páginas que tengan bastantes contenidos (más de 250 palabras.)

Una vez hecha esta lista, la podemos comparar con nuestra lista de frases y elegir cuáles de ellas son naturalmente relevantes y apropiadas para cada página. El objetivo es conseguir entre u