Artículo original por Thomas Baekdal – Jul. 12, 2006 (Autorizado por escrito)

¿Querés tener un ranking alto en los motores de búsqueda? Bueno, esta es una historia sobre cómo no hacerlo.

Una amiga de Thomas (el autor del artículo) abrió una tienda online, una de esas en las que podés comprar fácilmente. Esas de las que sólo subís el producto que querés vender y listo. Su sitio es muy popular y las cosas le están yendo bien. Entonces, un día su compañía de hosting le ofreció un "Pack de Optimización en Motores de Búsqueda" (search engine optimization pack)… pagás $3 por mes y obtenés un ranking alto en sitios como Google. Ella lo compró, pensando que eso era una buena idea…

Pero, después de 6 meses Google le mandó un e-mail notificandole que su sitio había sido dado de baja de su índice. Ellos le notificaron que ella estuvo usando páginas-puerta (páginas que sólo los motores de búsqueda ven, contando con muchas frases claves).

Lo que ella compró no fue un "pack SEO de $3/mes", fue un "pack de banneenme-de-cualquier-motor-de-búsqueda por $3/mes"!!!

Entonces, éste es el aviso que te hacemos. Si estás considerando mejorar tu ranking a través de esta vía – Simplemente no lo hagas! (como diría Reagan: Just Say No). Esto, a la larga, siempre te va a terminar por dañar.

Che! ¿Y que pasa con las compañías que se dedican al SEO seriamente?

Fácil, ninguna existe. El verdadero concepto de una buena compañía de SEO es falso (hoax). La estrategia de estas compañías de SEO es puramente hacer que tu sitio parezca mejor de lo que realmente es. No importa cómo lo veas vos, para un motor de búsqueda eso es hacer trampa. Ellos no quieren indexar tu mejor parte, lo que buscan indexar es tu verdadero Yo.

Si una compañía de SEO te llama y te ofrece que te puede elevar en el ranking, te sugiero decirles unas 7 u 8 puteadas y colgar. Te están tratando de convencer con algo que te gusta por $3/mes… lo mismo da que sea un chocolate, un corto de iTunes o lo que sea.

Enfocate en el ranking de la gente!

Si pasás tu tiempo tratando de obtener un ranking más alto en los motores de búsqueda, seguro que fracasarás. Es una estrategia muy poco efectiva.

En vez de eso, enfocate en hacer tu sitio mejor para la gente. Esto requiere

1. Escribir contenido interesante.
2. Usar un lenguaje claro.
3. No desordenar tu sitio con basura.

Por ejemplo: el título de este artículo es "Olvidate del SEO (Search Engine Optimization)", en vez de títulos poco claros como "Banneado por $3 al mes".

Cuando hacés esto, la gente eventualmente, empezará a fijarse en vos. Ellos le dirán a sus amigos y publicarán links a tu sitio (Nota de la traducción: qué mejor ejemplo que esta traducción que estoy haciendo)

Esto es algo que a los motores de búsqueda les agrada ver. Esto es un signo de relevancia. Google está diseñado para que busque así. MSN y Yahoo! tambien.

Ahora miremos el aspecto técnico de las mismas reglas que deben aplicarse:

1. Usá código claro (títulos con tags de título, tags de párrafos para los textos- layout sin tablas)
2. No desordenes el código con una sopa de tags o una mezcla de elementos.

Esto, definitivamente ayuda, pero mucho menos de lo que pensás. En la experencia de Thomas (y la mía también), organizar tu código de una manera determinada hace una pequeña diferencia.

Google también quiere que te registres en Google Sitemaps. Thomas (y yo también) lo hizo tiempo atrás y probablemente tuvo en efecto positivo, pero no se notó ningún cambio real.

Entonces, enfocate en escribir contenido claro y conciso para que la gente lo pueda usar. Esto ayuda a hacer tu sitio tecnicamente simple y estrucutrado. Y, por encima de todo, olvidate del "search engine optimization".

Bookmarkealo

Muchas veces, al armar un sitio, necesitamos imagenes con transparencia para para determinados diseños que así­ lo requieren. Siempre que pasa esto tenemos que pensar cuál es la alternativa más adecuada para lograr que el diseño se vea tal cual lo pensamos. Las altenativas que tenemos disponibles, al menos en principio, son:

1. Usar GIF transparente
2. Usar un JPEG con el fondo incorporado en la imagen
3. Usar un PNG

Pero cuando empezamos a trabajar nos damos cuenta que estas opciones tienen muchos contratiempos que paso a detallar:

1. GIF: la calidad de la imagen es muy reducida (como saben sólo permite hasta 256 colores), por lo que no podemos usar imagenes muy complejas en cuanto a colores. Y otro gran, e insalvable, problema es el del antialias… el GIF transparente siempre nos pide que le definamos un color de fondo para los bordes de las imagenes, ni hablar de un gradiente.
2. Usar un JPEG con el fondo incorporado en la imagen: esto en realidad es mucho más limitado, porque lo que justamente buscamos es poder variar el fondo sobre el que está la imagen.
3. El PNG, por su no pérdida de calidad, por la posibilidad de distintos niveles de opacidad, parece la mejor opción. Sin embargo, tiene algunas desventajas: pesa una tonelada y el maldito IE6 (y anteriores) no soporta las transparencias, si bien se puede hacer uso de filters agregados en la hoja de estilo que solucionan el problema, pero es poco versatil y bastante complicado hacer que funcione como uno quiera (el IE7 si va a aceptar transparencias… era hora!)

Entonces se me ocurrió algo… hacer un PNG con sus transparencias, pero en vez de montarlo directamente sobre el HTML lo meto dentro de un SWF (del mismo tamaño de la imagen) y luego a este SWF resultante, en el HTML le pongo el wmode=transparent y ahí­, además de haber logrado la imagen transparente sin perdida de calidad, le puedo reducir el peso al mismo nivel que un JPG normal!!!! Cuando hice este sitio, se me ocurrió hacer esto que acabo de explicar y me dio resultado!!El único problema que tiene este método, es que no sirve para hacer imágenes de background dado que los SWF no son soportados para cumplir esta función. Si se me ocurre como solucionar esto último, prometo postearlo.

Bookmarkealo

Googleando encontré esta página, que tiene un listado muy bueno de muchísimos plugins para el WordPress. Lo mejor de esto es que tiene una pequeña explicación en español sobre qué cosa hace cada plugin!!
Otros sitios que listan WP-plugins (todos en inglés):

• wp-plugins.net
• WordPress Wiki
• WordPress Plugins Repository

Bookmarkealo

The Scrutinizer es una herramienta utilísma cuando querés ver si has respetado todas las normas de accesibilidad, validar el código, la compatibilidad con los browsers, la optimización en los motores de búsqueda y otras cosas más. En el campo de texto que está por encima, ponés la URL que querés testear y después tenés que hacer click en los links de abajo.
Los tipos de validación son los siguientes:

• Validation
• Accessibility
• Search Engine Optimization
• Browser Compatibility
• Alternate Access
• Copyright
• Information
• Miscellaneous

Bookmarkealo

eXaminator es una herramienta muy muy útil para revisar y evaluar la accesibilidad en la web. La estuve probando y me pareció excelente. Además está en español!! Está desarrollada por Accesible.com.ar. Yo me parece que debo mejorar un poco…

El algoritmo de eXaminator analiza los diversos elementos y atributos en el código de una página web y cuenta el número de situaciones (errores y buenas prácticas) posibles de inferir automáticamente, teniendo como base las Pautas de Accesibilidad al Contenido en la Web 1.0 (WCAG 1.0).

Prometo que para doliaku2.0 voy a subir por lo menos a un 9!!! (si si prometí nomás)

Bookmarkealo

Reflection.js 1.0 allows you to add reflections to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers – Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it”ll degrade and your visitors won”t notice a thing. Best of all, it”s under 4KB.

Y la verdad es que es muy simple de aplicar, consiste en guardar el archivo reflection.js en tu carpeta de scripts (o donde sea que uno los guarde) y después aplicar a la imagen que se quiera reflejar class="reflect" en el mismo tag de la imagen. También se le pueden especificar color de background. Acá va un ejemplo:

Y acá va el código que usé para que sea vea lo de arriba:

Bookmarkealo

El problema:

El cliente querí­a que el menú de su sitio web (por cierto un diseño minimalista bastante bueno, hecho por Gabriel) ocupe la totalidad del ancho de la página. Esto implicaba que debia ajustarse a todas las resoluciones. Y por supuesto, debí­a funcionar bien en todos los browsers. Entonces lo primero que se nos ocurre probar con las listas, el clásico ul. No funcionó. Estuvimos buscando en bocha de lugares, pero no hubo caso. Sólo encontramos soluciones parciales al problema. Cuando lográbamos hacerlo andar en firefox, no andaba en IE y viceversa. Asi que, bueno… tuvimos que pensar en otra solución…

La solución

Es realmente simple: primero hacer un div que englobe los elementos. Cada ítem que lleva el menú no lo haremos usando el tag ul, sino que deberán ser puestos en un div por cada uno. Así debería quedar el HTML:

Se ve fácil, no? Muajajajaja… no, en serio, la parte del CSS es también muy simple: al div que contiene los ítems, al que nosotros llamamos nav, debemos especificarle mediante la propiedad width que ocupe el 100%. Luego debemos definir los divs que están dentro del div nav: debemos aplicar el float:left para que los elementos se alinéen a la izquierda uno al lado del otro y acá viene lo más importante y a la vez la gran falencia de este método: a la propiedad width debemos ponerla en el porcentaje relativo a la cantidad de ítems de la lista, esto hace por ejemplo, que no se pueda usar para generar ítems dinámicamente. Para que se entienda mejor: si tenemos 5 ítems en la lista, entonces el width para cada uno será de 20%. Otra falla que tiene es que si a ese ítem le queremos añadir margin, padding o border, debemos también ajustar el width para que no se nos desacomode.
Énigüei, es algo simple y sirve si ya está definida la cantidad de ítems y sea un sitio estático. Aunque ahora que me pongo a pensar sí se puede hacerlo de manera dinámica! Y ahi una cosita más: como siempre el fáquin IE necesita un poquito de hacks!!! Acá va el código CSS:

Bueno, espero que sirva, si alguien conoce una solución mejor, por favor que me la haga saber.

Bookmarkealo

Cameron Olthuis en su blog hace un top 10 de tutoriales CSS. Coincido casi al 100%. Por supuesto, por ahi uno haría algunos cambios de orden o aparecerían otros sitios, pero quería respetar la decisión del autor y dejé la lista tal como está en el post original. Bueno, acá va la lista:

1. Hoverbox Image Gallery: Linda galería de imágenes hechas solamente con CSS.
2. CSS Bar graphic: Si para mostrar los resultados de una encuesta te enredabas con imágenes en distintas proporciones, ahora con un poco de CSS ya lo tenés resuelto muy fácil.
3. CSS Vertical Menus: Una lista con muchos menúes verticales libres para usar.
4. Listamatic: colección de menúes tanto verticales, horizontales o experimentales. Muy recomendable, me ha sacado de apuros en más de una ocasión.
5. Floatutorial: Excelente colección de modos de uso de la propiedad float
6. Rounded Corners:
7. 40 CSS Layouts: como su nombre lo indica, un compendio de 40 layouts.
8. CSS Photo gallery: otro tutorial como el que está en el primer lugar de este top 10, pero un poco más complicado
9. CSS Drop Shadows: sombras tras las imágenes muy bien logrado
10. Style Sheet Switcher: para cambiar el estilo de una página

Y bueno, no pude dejar de caer en la tentación de poner algunos a los que yo considero que deben estar en el top 10:

• BBMD Nice Forms
• Text Tricks
• CSS Image Maps
• CSS Play (acá siempre están experimentando)

Bookmarkealo

Esta web permite hacer testeos de carga del sitio web que uno quiera mediante una pequeña aplicación java (por ende se necesita tener la Java Virtual Machine). Una vez que se ejecuta la apicación se puede elegir entre varias velocidades, que van desde los 9,6Kbps hasta 512Kbps. Muy útil para saber si el sitio que uno acaba de hacer va a ser un embole para los sufridos usuarios de dial-up (lo digo por ustedes, desarrolladores en flash!). Aunque si bien es cierto que se está tendiendo a que todo el mundo tenga ADSL, todavía quedan muchos usuarios de dial-up, por lo menos acá en Argentina. Asi que, además de desarrollar sitios estéticamnete, debemos tambien pensar en que debe ser accesible a todo el mundo!

Sloppy deliberately slows the transfer of data between client and server.
Example usage: you probably build web sites on your local network, which is fast. Using Sloppy is one way to get the “dial-up experience” of your work without the hassle of having to install a modem.

Ah! casi que me olvido… el programa, está disponible también para MacOS X y Linux

Bookmarkealo

Mi admirado Vitaly Friedman, que ya dio un inmensísimo aporte a la comunidad de los webdevelopers con su manual para el derrollador web y sus bookmarks esenciales para el desarrollador web, escribió un artículo bastante interesante sobre cuáles son las reglas a tener en cuenta para desarrollar una web exitosa. Ojo, esto no significa que sea algo absoluto y único que si no lo cumplís te puede causar el mismo efecto que comer una sandía y tomar vino y esas cosas, pero es una muy buena guía para tener en cuenta. Como pequeño aporte que hago, traduzco los tí­tulos de estas reglas… a la explicación de cada uno se la van a tener que bancar en el idioma de Shakespeare, que está aquí. La lista es la siguiente (y la traducción no es del todo literal, pero ayuda):

1. Respetá a tus visitantes. No les obligues a leer determinado contenido, dejá que naveguen libremente.
2. La mala publicidad (es decir mal diseñada o fuera de lugar) es pésima. Capaz que con un banner chillón captás la atención, pero después te van a odiar por eso.
3. Informá y enseñá a tus visitantes. Compartí tus ideas, experiencias, etc. de esa manera vas a obtener a la larga que mucha gente se entere de quién sos y qué ofrecés
4. Desarrollá tu propio estilo. Desarrollá tus propias ideas. Navegá mucho, inspirate, pero no copies, porque eso es una bosta!

\r\n

5. Respetá los estándares. Pensá en la gente que visita tu sitio.
6. Sé claro (aka no compliqués las cosas al pedo). Si es ambiguo lo que decís/mostrás va a ser muy dificil que te tengan en cuenta.
7. Odiá al Internet Explorer si querés, pero no ignorés a la gente que lo usa. Sí, el Internet Explorer es un invento de satán, pero lamentablemente mucha gente lo usa (muchisima). Y lo mejor que se puede hacer es que el sitio sea accesible para todos sin importar el browser que use.
8. Preocupate por el contenido de tu sitio.
9. No te preocupes por los web-crawlers ni por la SEO. Ni tampoco te preocupes por el PageRank o cosas por estilo… si tu sitio esta bien hecho, esas cosas vienen solas.
10. Hacé contactos, publicitá tu sitio, pero no llegues a hacer spam. El spam es una mierda, que seguro se vuelve en tu contra).
11. Escribí, publicá, sentite libre de preguntar. Participá en todo lo que puedas, una cosa maravillosa que tienen los blogs es la posibilidad de hacer comentarios y opinar y preguntar y funciona!!!
12. Respondé tus e-mails immediatamente!!! (algo que debo aprender, no puedo ser tan fáquin colgado)
13. Usá las ventajas de la Semántica Web.
14. Conectáte con tus colegas, sean bloggers, galerías CSS… lo que sea.
15. Pensá en términos globales.
16. Nunca compromentas tus principios. Eso quiere decir que no dejes llevar por las pelotudeces que diga alguien (sea cliente, jefe, etc), si está equivocado, corregilo. no le digas si a todo
17. Está siempre actualizado. Siempre es bueno saber qué está pasando en la red.
18. Aprendé a manejarte en el bloque creativo. Buscá info en foros, blogs para poder llevar tus ideas a cabo.
19. Hacé más linda la Web. Con tu aporte podés hacer que la internet sea un poco más agradable.
20. Conocé el Poder de la Web. Tenés la palabra! podés ayudar a mucha gente.

Bueno, espero que sirva… sé que mi traducción no es la mejor, pero ayuda como guía, el texto original en inglés tiene su link arriba, pero lo repito por las dudas: http://www.alvit.de/blog/article/20-rules-of-…

Y repito, estas reglas no van a traer el éxito si no creés en lo que estás haciendo ni explorás tu creatividad. cada idea puede ser la idea.

Bookmarkealo