(>_<) Doliaku | el blog » Utilidades

Olvidate del SEO (Search Engine Optimization)

lucas — Tue, 01 Aug 2006 04:33:25 +0000

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

Escribir contenido interesante.
Usar un lenguaje claro.
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:

Usá código claro (títulos con tags de título, tags de párrafos para los textos- layout sin tablas)
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".

¿HTML o XHTML?

lucas — Sat, 08 Jul 2006 21:49:23 +0000

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)

Definitivamente estricto. Los doctypes transicionales son exactamente lo que el nombre implica: un tipo de documento para una fase de transición, esto significa que no va a ser usado permanentemente. Si escribís HTML y elegís transitional, obtendrás un rendereo en Quirk Mode (algo asi como "modo caprichoso") de tu HTML, como resultado conseguirás que los browsers tratarán de imitar un comportamiento viejo e incorrecto. Si elegís XHTML Transitional para tu .HTML, el IE interpretará el código del modo más estricto disponible, en cambio obligarás a los browsers basados en Mozilla que lo interpren en modo "Casi Estandar".

En cambio, si usas el doctype strict, obtendrás una interpretación (por parte del browser) correcta, completamente compatible con los estándares, más consistente y más compatible a futuro.

¿Qué es XHTML?

Un documento XHTML es el que está bien armado de acuerdo con las reglas del XML. Todos los tags deben estar cerrados y correctamente jerarquizados, y para los tags como img, input, link, etc, se le debe agregar una barra al final de tag para cerrarlo, como este: . Si estás escribiendo código que debería ser accesible para la gente que usa Netscape 4 y algunos otros browsers viejos, entonces asegurate de poner un espacio antes de la barra (Nota: este tip no es para que se vea bien en Netscape 4, sino para que por lo menos funcione).

Supuestamente podés guardar una página hecha en XHTML y usarla sin problemas como XML.

¿Porqué XHTML?

Eso depende totalmente de tus necesidades. Alguna gente cree que es muy fácil y consistente escribir el código en esta moda XML, donde todo debe estar bien formado y todos los elementos deben estar cerrados. Otra gente lo elige para extender su funcionalidad con "namespaces", para usarlo en conjunción con MathML. Algunos otros, deben trabajar con XHTML, no por su propia elecciï¿½n, sino porque los productos de su compañía son entregados en XHTML.

¿Escuché algo sobre `application/xhtml+XML`?

Si, esto es el tipo MIME que va en tu código. Para el HTML, el tipo de media (MIME) es text/html. De acuerdo con el W3C, la organización responsable de recomendaciones como HTML, XHTML, etc. (mejor conocidas como estándares web), aplica en su documentación para los XHTML Media Type:

La application/xhtml+XML DEBERÍA ser usada para los documentos XHTML para aplicar a los agentes de usuario XHTML (XHTML user agents). Los autores que desean que sus archivos soporten ambos “user agents” (HTML y XHTML) DEBEN aplicar a su código el content negotiation (negociación del contenido) para identificar los documentos HTML con txt/html y a los XHTML con application/xhtml+XML. También nota que no es necesario para los documentos XHTML servidos como application/xhtml+XML seguir con las guías de compatibilidad HTML.

Esto significa que los browsers que puedan manejar application/xhtml+XML deberían renderizar la página de esta manera. Sin embargo, IE no soporta este media type, entonces, requiere que le mandes el código como txt/html. Básicamente, debes mandar las páginas con diferentes media types a diferentes browsers, usando algo llamado “Content negotiation” (negociación del contenido). Por ahora, probablemente pienses que todo esto suena mucho como una gran molestia, y decides aplicar directamente el txt/html para todos. Después de todo, el Apéndice C: Guías de Compatibilidad HTML, presenta la validez de renderizar los XHTML como txt/html.

Sin embargo, debes leer esto:

Los documentos XHTML servidos como txt/html no serán procesados como XML [XML1.0], entonces, los errores de armado “bien formado” (well-formed) del XML, no serán detectados por los user agents. También enterate que las reglas del HTML serán aplicadas para el DOM y las hojas de estilo…

Lo que significa que esos browsers no renderizarán tus páginas como XHTML, sino que lo harán como HTML y fallarán al manejarlo y tratarán de adivinar cómo se supone que debe ser. Entoces, muy probablemente, te volverás loco al ver que el comportamiento del documento no es el que buscas.

También, algo más que es completamente importante saber es que ciertos scripts no funcionarán cuando mandas el documento como application/xhtml+XML. Por ejemplo, si usas el document.write o tenés en tu página publicidades provistas por un proveedor de contenidos de publicidad (como Google AdSense), esto dejará de funcionar. Si implentas una aplicaacián AJAX usando la propiedad innerHTML en un elemento, tampoco funcionará.

¿Cuál es la opinión de Robert Nyman (autor del artículo)?

Su opinión es que la cosa más importante es que debes elegir un doctype estricto, sea HTML o XHTML Si querés usar XHTML y servirlo como txt/html, asegurate de que no tienes código que intencionalmente pueda romperse cuando lo presentas como application/xhtml+XML. No uses scripts como los mencionados arriba en una página XHTML y andá un poco más allá para que esté bien formado. Estáte alerta que la página mandada que no está bien formada como application/xhtml+XML no se renderizará para nada, en vez de eso, sólo le mandará al usuario final un mensaje de error.

Entonces, elige lo pienses que va a adecuarse mejor a tus necesidades, y elige prudentemente. Y asegurate de que es una decisión deliberada.

Lectura relacionada (en inglés):

Un plugin impresionante para IllUstrator: Scriptographer

lucas — Fri, 30 Jun 2006 21:12:28 +0000

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

Imágenes transparentes, una vuelta de tuerca

lucas — Thu, 29 Jun 2006 15:31:41 +0000

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:

Usar GIF transparente
Usar un JPEG con el fondo incorporado en la imagen
Usar un PNG

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

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.
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.
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.

A validar que se que acaba el mundo!

lucas — Thu, 01 Jun 2006 21:02:15 +0000

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

Plugins para WordPress

lucas — Tue, 30 May 2006 20:34:40 +0000

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):

eXaminator: evaluación de accesibilidad en la web

lucas — Sat, 20 May 2006 18:25:33 +0000

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 solución del problema de flash en IE7

lucas — Thu, 18 May 2006 18:37:47 +0000

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):

Justo debajo del último de tu página HTML, inserta el siguiente javascript:
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;
}
Salvá el archivo como fixit.js
O bien, bajá el archivo hecho (click derecho, guardar link como…)
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).

Consejos para desarrollar CSS

lucas — Mon, 08 May 2006 13:52:43 +0000

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.

Cuando estés con dudas, valida.

Cuando se procede con el debug, te puedes salvar de muchos dolores de cabeza simplemente validando el código como primera medida. XHTML/CSS escrito inapropiadamente causará muchos fallos técnicos.

Construye y testea tu CSS en los browsers más avanzados disponibles antes que en los otros, no después.

Si construyes y testeas un sitio en un browser "quebrado" (no conforme a los WebStandards), tu código estará relegado al modo "quebrado" de renderización de aquel browser. Cuando viene el tiempo de testear en browsers compatibles con los estándares, te frustrarás con una renderización impropia. Por lo tanto, empieza desde la perfección y a partir de ahí empezar a corregir con hacks para los browsers más viejos y menos compatibles. Tu código será más compatible con los estándares desde el inicio, y no serán necesarios muchos hacks para que funcionen en los otros browsers. Actualmente, los browsers estándares son Mozilla, Opera y Safari.

Al utilizar floats para el layout, asegúrate de asociarlos correctamente con la propiedad `clear`.

Los float son engañosos y no siempre se comportan como lo esperas. Si un float se extiende más alla de los bordes de un elemento contenedor, o no se comporta como esperas, asegúrate de que lo que quieres es posible. Chequea el tutorial de Eric Meyer sobre el tema.

Para evitar la sobreexposicion de los márgenes, aplica `padding` o `border`.

Debes "luchar" con el espacio en blanco extra donde no quieres ninguno o la inexistencia de este en donde sí lo quieres. Si estás usando márgenes, la sobreposición de los márgentes probablemente sea el responsable. Andy Budd explica cómo ganar esa "lucha".

Intenta evitar la aplicación de `padding/borders` y un ancho fijo en un elemento.

IE5 interpreta el boxmodel mal, lo que trae muchos problemas. Hay muchas formas de resolver el problema, pero lo mejor técnica es aplicar el padding a un elemento padre en vez de aplicarlo al elemento hijo que tenga el ancho fijo.

Evita el "flash" en el contenido sin estilos que aparece al cargar una página en IE.

Si usaste @import para linkear una hoja de estilos externa, tarde o temprano verás que el IE, al cargar una página provoca un "flash" en el contenido HTML sin formato antes de que el CSS sea aplicado en la página. ¡Esto se puede evitar!

No cuentes con el `min-width` en IE.

IE no ofrece soporte para el min-width. El IE considera width como min-width hasta cierto punto, por ello, con un poco de filtros para el IE, puedes simular el mismo resultado.

Cuando dudes, achica los anchos.

Algunas veces, los errores de redondeo producen cosas como 50%+50% igual a 100.1%, lo cual acaba arruinando el layout en algunos browsers. Trata de usar 49% en lugar de 50% o tambien 49.9%.

¿Contenido mostrado impropiamente en IE?

Es posible que sufras el bug Peekaboo, especialmente si el error aparece en un evento mouse-over. Mira position is everything para corregirlo.

Cuidado al estilizar links si estas usando anclas (anchors).

Si usas anclas en tu código (), observarás que éstas asumen las estilizaciones de las pseudoclases :hover y :active. Para evitar esto, usa id para las anclas, o usa sintaxis más específica: :link:hover, :link:active.

Asegúrate de que los efectos que buscas realmente existen.

Existen extensiones CSS específicas para determinados browsers que no son parte de las especificaciones oficiales. Al aplicar filtros o formatear la barra de scroll, estás trabajando con código propietario que sólo va a funcionar en IE. Si el validador te dice que el código es indefinido, es muy probable que sea código propietario, por lo tanto no van a funcionar bien en el resto de los browsers.

Divide y conquista: usa comentarios para "apagar" grandes secciones del estilo.

Especialmente útil cuando trabajas con hojas de estilo largas y a las que no estás familiarizados. Por ejemplo, tienes un error y no conoces la hoja de estilo usada, si comentando la mitad del CSS en cuestión el error persiste, entonces el error se encuentra en la otra mitad. Comenta lo que queda y prueba de nuevo. Si el problema ya no se presenta, es que está en la sección comentada. Perfecciona el comentario y prueba. Continúa hasta que el problema se resuelva.

Recuerda el proceso mnemónico LoVe/HAte para los links.

Al estilizar pseudo-clases para los links, siempre hazlo en este orden: Link, Visited, Hover, Active. Cualquier otro orden no trabajará consistentemente. Si usas :focus modifica el orden a LVHFA (o Lord Vader’s Handle Formerly Anakin”, como lo sugirió Matt Haughey).

Recuerda el proceso mnemónico "TRouBLEd" para los bordes.

Border, margin y padding admiten declaración abreviada en un orden preestablecido: en el sentido horario a partir de arriba, o sea: arriba (top), derecha (right), abajo (bottom) e izquierda (left), entonces margin:0 1px 3px 5px; significa que el margen superior será de 0 (cero) 1px para el margen derecho, 3px para el de abajo y 5px para el de la izquierda.

Declara siempre las unidades para los valores diferentes de cero.

El CSS requiere que especifiques las unidades en todas las cantidades, tales como fonts, margins y tamaños (la única excepción es el line-height, que extrañamente no requiere la especificación de unidad). El comportamiento particular de un determinado browser cuando una unidad no fue especificado, no debe ser considerado. Cero es cero, sea en px, em o lo que sea. No hay necesidad de especificar unidad alguna. Ejemplo: padding:0 2px 0 1em;

Prueba con diferentes tamaño de font.

Browsers avanzados como Mozilla y Opera te permiten redimensionar el tamaño del texto independientemente del tamaño especificado. Algunos usuarios utilizarán tamaños por defecto diferentes al tuyo, por ello intenta acomodar tu layout al mayor rango posible.

Utiliza la misma grafía en tu HTML y CSS.

Algunos browsers son case-sensitive (sensibles al tamaño de la letra). Usar una clase llamada homePage esta bien, pero aplicando el estilo como homepage causará problemas en browsers que renderizan en modo estricto (como el Mozilla por ejemplo).

Prueba tus CSS embebidos en el HTML, lanza el sitio con los CSS importados.

Si trabajas con la hoja de estilos embebida en código fuente del HTML, eliminas cualquier error de cache mientras testeas. Esto es muy importante cuando trabajas en algunos browsers en Mac. Pero luego, asegúrate de mover tu CSS a un archivo externo, importado con el @import o antes de publicar.

Agrega bordes evidentes para ayudar a corregir tu layout.

Una regla universal tal como div {border.1px solid #00;} puede ser una poderosa aliada para identificar un problema en el layout. Pero agregando bordes a elementos específicos puede ayudar a identificar sobreposición o espacio en blanco extra no deseado que de otra forma no podriamos identificar.

No uses comillas simples en los paths para las imágenes.

Cuando especifiques una imagen de fondo, no uses comillas simples para la imagen. No son necesarias y además IE5/Mac no las soporta.

No hagas links a hojas de estilo vacias para usarlos de "placeholders" (ej handheld o print).

IE5/Mac no soporta hojas de estilo vacias y como consecuencia, el tiempo de carga aumenta. En vez de eso, coloca por lo menos una regla (o tal vez un comentario) en la hoja de estilo para atender especificamente al IE5/Mac.

Y ahora, a partir de aquí, algunos items que no necesariamente se aplican al lado funcionalidad de las cosas, pero deben ser considerados cuando se desarrolla:

Organiza tu archivo CSS.

Asegúrate de comentar los bloques del CSS apropiadamente, agrupa los selectores parecidos entre si y establece una clara separación y nomenclación entre ellos, usa espacios en blancos para formatear tu código (recomendación: usa espacio simple para compatibilidad con diferentes plataformas).

Nomina los class/ID basados en su función en el código, no en su apariencia.

Si defines una clase por ejemplo .grandeazul, y después se te solicita cambiar el texto a pequeño y rojo, el nombre de la clase deja de tener lógica. En vez de eso, usa clases con nombre descriptivo de su función como por ejemplo .textoDestacado.

Usa los filtros CSS como último recurso.

Los hacks y los filtros del CSS pueden ayudarte a aplicar o a no aplicar selectivamente diversas directivas en varios elementos. Pero su uso indiscriminado no es aconsejable, trata de buscar una manera más estándar y para lograr tu objetivo. Si bien, estos hacks y filtros pueden llegar a ser la salvación, en lo posible trata de evitarlos. Aquí hay una larga lista de filtros.

Combina los selectores.

Mantener tu CSS liviano es importante para minimizar los tiempos de carga; siempre que sea posible, agrupa los selectores, saca partido de la herencia del CSS, y reduce las redundancia usando declaraciones abreviadas.

Considera la accesibilidad cuando usas técnicas de reemplazo de imágenes.

La clásica técnica de FIR para el reemplazo de imágenes tiene problemas para los screenreaders y para todos aquellos que tienen desactivada la carga de imágenes. Existen alternativas, usalas moderadamente.

Nota: esta traducción la hice en el castellano más neutro posible para que cualquiera pueda ponerlo en su blog

reflection.js

lucas — Thu, 04 May 2006 16:41:12 +0000

Es un mÃ©todo excelente para reflejar imÃ¡genes vÃa javascript sin necesidad de tener que editar de usar imÃ¡genes adicionales o editar la imagen en photoshop (o el programa que sea). Es muy simple de aplicar. reflection.js fue desarrollado por Cow’s Blog. En este link estÃ¡ el post de Cow y en este otro, la explicaciÃ³n de cÃ³mo funciona y de cÃ³mo se aplica (en inglï¿½s).

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:



ejemplos de reflection" align="center">







/images/yo.jpg" class="reflect" alt="" />
background:#000000">/images/yo.jpg" class="reflect" alt="" />
background:#ff0000">/images/yo.jpg" class="reflect" alt="" />