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…

|inline

Versión original del artículo por Robert Nyman (autorizado por él mismo vía e-mail)

Esto parece ser la eterna cuestión entre los desarrolladores web: ¿HTML or XHTML? En muchos lados aparece planteada la pregunta en foros y blogs, los desarrolladores web le preguntan a Robert o a otra gente que escribe sobre este tema: qué es lo que ellos piensan acerca de cuál es la mejor opción a seguir. Robert no escribió este post para decir cuál es la última opción, sino más bien para que nos enteremos cuáles son las consecuencias del camino que elegimos. Entonces, empecemos desde el principio:

¿Estricto o Transicional? (strict | transitional)

|inline

Navegando por unos de mis sitios favoritos, encontré este plugin excelente…su nombre: Scriptographer.
Se trata de un plugin para Adobe Illustrator CS y CS2, que utiliza la potencia del javascript dentro de illustrator. Todavía no lo entiendo muy bien, pero las poquitas cosas que logré hasta ahora me han impresionado. Supongo que incluso uno mismo podría hacer un javascript para aplicar a los vectores con este plugin. También se pueden vectorizar imágenes usando efectos muy buenos.

• Acá les dejo el link del sitio: www.scriptographer.com/
• Galería

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.

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

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… saqué un puntaje de 7.4 y estoy en la posición 26 de su ranking

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)

La gente de Mix-FX ha resuelto el problema que se inició a raiz del conflicto de patentes que hace que en IE se deba hacer un click adicional para poder ejecutar los los archivos que se encuentran entre los tags object y embed. Este conflicto afecta a los archivos Flash, QuickTime, Real Player, Java, Acrobat entre otros. Por este conflicto, en todo lo contenido de esos tags, para activarlo, te aparece una caja de texto (esas de los tips) que dice: "Haga click para activar y usar este control". Esto parecia casi una sentencia de muerte para el flash sobre todo, pero gracias a esta solución, ya no debemos preocuparnos tanto por eso, porque vía javascript, se activa el control automáticamente.

Paso a paso, cómo implementarlo (artículo original):

1. Justo debajo del último <object> de tu página HTML, inserta el siguiente javascript:
   <script type="text/javascript" src="fixit.js"></script>
2. En un nuevo documento copiá y pegá el siguiente contenido:
   
   theObjects = document.getElementsByTagName("object");
   for (var i = 0; i < theObjects.length; i++) {
   theObjects[i].outerHTML = theObjects[i].outerHTML;
   }
3. Salvá el archivo como fixit.js
   O bien, bajá el archivo hecho (click derecho, guardar link como…)
4. Subí los dos archivos a tu server y el problema debería estar resuelto.

Nota: el único problema que tiene es que no funciona en IE6 (con las últimas actualizaciones del güindous aparece este problema, sin ellas no).

A la hora de crear un sitio con CSS, seguramente te has encontrado con un montón de asuntos que más de una vez te han hecho dar ganas de golpearte la cabeza contra la pared. Dave Shea, ha escrito este artículo, que es un intento de hacer el proceso de diseño más fácil y una referencia rápida para ver cuando estás en algún problema.

Si tienes algún ítem para agregar, por favor siéntete libre de hacerlo aquí.

Hay traducciones disponibles en: inglés (el artículo original), francés, alemán, holandés, italiano, húngaro, finlandés, ruso, portugués, japonés y chino simplificado. Siéntete libre de proveer más.

|inline

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. Se puede ver en este ejemplo a lo que me refiero. É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.