Archivo de la categoría ‘Utilidades’

Olvidate del SEO (Search Engine Optimization)

Viernes, 7 de agosto de 2009

Post publicado en el 2006

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

Imágenes transparentes, una vuelta de tuerca

Viernes, 7 de agosto de 2009

Post publicado en el 2006

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.

Plugins para WordPress

Viernes, 7 de agosto de 2009

Post publicado en el 2006

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

A validar que se que acaba el mundo!

Viernes, 7 de agosto de 2009

Post publicado en el 2006

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: evaluación de accesibilidad en la web

Viernes, 7 de agosto de 2009

Post publicado en el 2006

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

JS: reflejando imágenes

Viernes, 7 de agosto de 2009

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:

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

<table summary="ejemplos de reflection" align="center">
<tr>
<td>
<img src="/images/astronaut.png" class="reflect" alt="" /></td>
<td style="
background:#000000"><img src="/images/astronaut.png" class="reflect" alt="" /></td>
<td style="
background:#ff0000"><img src="/images/astronaut.png" class="reflect" alt="" /></td>
</tr>
</table>

Menú horizontal al 100% de ancho

Viernes, 7 de agosto de 2009

Post publicado en el 2006

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:

<div id="nav">
  <div><a href="
#">item1</a></div>
  <div><a href="
#">item2</a></div>
  <div><a href="
#">item3</a></div>
  <div><a href="
#">item4</a></div>
  <div><a href="
#">item5</a></div>
</div>

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:

#nav {
width:auto;
}
#nav div {
float:left;
text-align:center;
width:19%;
background:#f1f1f1;
margin-right:1%;!important
}
#nav div {
/*para IE */
float:left;
text-align:center;
width:19%;
background:#f1f1f1;
margin-right:0.9%;
}

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

Top 10 de tutoriales CSS

Viernes, 7 de agosto de 2009

Post publicado en el 2006

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
hover box image gallery

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:

Testeando velocidades de carga en websites

Viernes, 7 de agosto de 2009

Este post fue publicado en el 2006

sloppyEsta 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

Las 20 reglas para un desarrollo web

Viernes, 7 de agosto de 2009

Post publicado hace muuuucho

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!
  5. \r\n

  6. Respetá los estándares. Pensá en la gente que visita tu sitio.
  7. 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.
  8. 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.
  9. Preocupate por el contenido de tu sitio.
  10. 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.
  11. Hacé contactos, publicitá tu sitio, pero no llegues a hacer spam. El spam es una mierda, que seguro se vuelve en tu contra).
  12. 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!!!
  13. Respondé tus e-mails immediatamente!!! (algo que debo aprender, no puedo ser tan fáquin colgado)
  14. Usá las ventajas de la Semántica Web.
  15. Conectáte con tus colegas, sean bloggers, galerías CSS… lo que sea.
  16. Pensá en términos globales.
  17. 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
  18. Está siempre actualizado. Siempre es bueno saber qué está pasando en la red.
  19. Aprendé a manejarte en el bloque creativo. Buscá info en foros, blogs para poder llevar tus ideas a cabo.
  20. Hacé más linda la Web. Con tu aporte podés hacer que la internet sea un poco más agradable.
  21. 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.

Get Firefox!
Miembro de panic|(o)|zoo