lunes, 7 de enero de 2008

Las malas prácticas del programador web (parte 2)


Ya he discutido los malos hábitos de cientos de programadores web y sus orígenes respecto de PHP en otro post. En esta ocasión hablaré sobre HTML/XHTML.


Así como quien recién comienza a hacer sitios web descubre rápidamente sitios que le enseñen a utilizar PHP, también encuentra sitios análogos para HTML, y rápidamente enfrenta algo que todos sabemos: ¡ES HORRIBLE!

Tras hacer los primeros intentos cualquiera se da cuenta que hacer sitios visualmente atractivos o que queden como uno desea en HTML es sumamente difícil. Es entonces cuando surgen dos posibilidades, ambas igualmente malas.

La primer opción es que decida realizar todo su diseño por tablas. Las tablas son mucho más fáciles de controlar para hacer todo tipo de diseños, y viendo sus bordes es sumamente fácil predecir como se visualizará cada elemento. El problema radica, en que estamos armando tablas con contenido que no tiene sentido dentro de la misma. Si bien para un usuario promedio el sitio se ve bien, no necesariamente es así para todos. ¿Alguna vez se preguntaron como interpretaría esa maraña de tablas un lector para personas no videntes? ¿o como interpreta eso Google al indexarlo? Las tablas, aunque en apariencia simple, terminan complicando en usabilidad y posicionamiento cuando son usadas donde no corresponden.

La otra alternativa, es que renuncien por completo a escribir HTML a mano, y opten por usar herramientas como Front Page o Dreamweaver, pero ahí los problemas son otros. Si bien son sumamente simples y permiten obtener resultados agradables a la vista, tienen la muy mala práctica de, cada tanto, escribir código inválido.

Alguna vez alguien me preguntó porque los navegadores web son tan complicados si en apariencia su tarea es tan sencilla, y de hecho, ignorando JavaScript y CSS de los que mi interlocutor no sabía nada, debería de ser relativamente simple dibujar sitios con HTML plano.... si el código estuviese bien. No es extraño encontrar sitios donde hay tags que se abren y nunca se cierran, donde se insertan opciones que no existen, o donde se insertan opciones que existen pero con valores inválidos o formato incorrecto (usando mayúsculas donde deben ir minúsculas por ejemplo). Estos errores son tan frecuentes, que aquellos que crean navegadores web se han visto obligados a estar preparados para los mismos. A ser tolerantes, a leer más allá de lo que dice el documento y adivinar "lo que quiso decir". Esto es una tarea compleja y difícil.

Aún más importante, quien utiliza estas herramientas ve correctamente el sitio en el editor, ve correctamente el sitio en su navegador predilecto, y es feliz, dando por concluido su diseño, sin sospechar que su sitio podría no siempre verse así de lindo. Así como los sitios que enseñan PHP básico no dan un puente al mundo profesional y los sitios profesionales no dan ayuda al principainte, en los sitios de HTML para principiantes no suele haber referencia a las muy grandes diferencias que hay entre navegadores.

HTML es un lenguaje que se ha ido modificando con el paso de los años. Muchos navegadores incluyeron cosas nuevas, y como los sitios las empezaron a usar, todos los navegadores debieron adoptarlas (por ejemplo, los campos para contraseñas, con asteriscos en vez del texto tipeado, son un invento de Netscape). Así, con el fin de "ser superior" a los otros navegadores, se creó un inmenso abanico de tags y atributos, muchos de ellos superpuestos, que han conducido al caos. Un sitio que se visualiza bien en InterNet Explorer falla por completo en Opera y viceversa. Es del caos que surge el orden. La W3C (WWW Consortium) se ha encargado de estandarizar las diversas versiones del lenguaje HTML, sin embargo, el que exista un estandar no implica todos lo respeten, ni del lado de los navegadores web, ni mucho menos del lado de los editores visuales.

Si bien de a poco se está tendiendo a ello (FireFox 3, Internet Explorer 8, etc.) al día de hoy los exploradores tienen muy serias discrepancias, y no es raro escuchar cosas como "con FireFox eso no me pasa" o "con Internet Explorer lo veo bien", en el que la gente tiende a echar toda la culpa al navegador y no a quien hizo el sitio, dejandose libre así a quien en su ignorancia ha hecho mal el sitio y así previniendosele el aprendizaje.

El respeto del estandar da cierto nivel de garantía sobre la visualización del sitio indepedientemente del explorador o dispositivo desde el que se acceda, y por tanto, valoriza mucho más el mismo (en Europa y Estados Unidos existen empresas que EXIGEN a quienes desarrollan sus sitios los mismos validen los estándares), y no es raro que si vendes tu sitio, te paguen más si el código HTML es válido.

ASi que ya sabes, si quieres que tu sitio pueda ser accedido y disfrutado por todos, no uses diseño por tablas, no olvides testear tu sitio con MINIMAMENTE Internet Explorer 6 y FireFox (los dos más utilizados al día de hoy) y siempre intenta validar tu sitio para tener mayor seguridad de que será visualizado desde otros exploradores que no probaste u otros dispositivos (BlackBerry y similares por ejemplo).

La W3C ofrece su validador de HTML para quien lo quiera usar, pero como pronto descubrirás, verificar tras cada cambio es sumamente molesto. sin embargo, para esto te puede ser útil el HTML Validator (plug-in para FireFox del que ya hablé en otra ocasión). Recomiendo ir directo al sitio del mismo AQUI ya que la página de complementos de Mozilla dice que sólo está disponible para Windows, lo cual es falso.

2 comentarios:

El Oso dijo...

Juanma otra vez yo jaja, dije que iba a leerlo seguido.
¿Sabés si existe de hecho algún "contratiempo" respecto a como google indexa a los sitios que 'abusan' de las tablas?
Yo los -muy- pocos sitios webs que he hecho los he hecho utilizando una clase abstracta WebControl y de ahi heredo clases como por ejemplo Tabla, entonces desde el .php invoco a diversos métodos de dicha clase para finamlente invocar a un método ->HTMLOut(), que genera el codigo HTML de la tabla. En otras palabras en lugar de poner arriba el codigo html lo pongo bien abajo y mi pagina HTML solo es un tag < ? php ... ? > es decir no existe ni una -salvo contados casos por cuestiones de rapidez- sentencia HTML en el php invocado.
Es una forma que copie de una empresa para la que tuve que crearle 2 funcionalidades. No es muy elegante pero me permite desarrollar paginas rápidamente sin de hecho pensar en codigo html. El problema que justamente esto me lleva inevitablemente a un esquema de tablas dentro de tablas en muchos casos.
Aunque nunca he hecho paginas para rankear en google (ie: comerciales) me entro la duda si en efecto este esquema de diseño puede afectar un rankeo, incluso si uno configura los archivos para los robots en forma correcta, define las meta tags o cualquier forma de taggear el sitio o la pagina.

Saludos
Mariano

Juan Martín Sotuyo Dodero dijo...

Los buscadores, al determinar la relevancia de un sitio utilizan muchos factores. Más de 40, según palabras del mismísimo Ricardo Baeza Yates, un importante investigador que trabaja en Yahoo! desde hace un tiempo. No todos estos factores son conocidos (backlinks y densidad de keywords lo son, pero se afirma existen otros más sutiles), y no se conoce el peso exacto de cada uno, por lo que no puedo afirmar si va a rankear mejor o peor tu sitio por no usar tablas para diseñar.

Lo que sí te puedo afirmar, es que estos robots, al indexar una página, aplican cierta lógica para concoer cuales son las partes destacadas de un sitio. Esto se utiliza para decidir que sitelinks crear para un dominio, o que porción de texto mostrar junto al hipervínculo en el resultado de una busqueda.

Dado que, en general, una tabla anidada tiene menor importancia que una tabla de primer nivel, así como un <thead> es mucho más importante y descriptivo que un <tbody$gt;, sí he visto en sitios que hacían diseño por tablas, que esas 20 palabras que constituyen el primer contacto entre tu sitio y el usuario no han sido siempre las más adecuadas.

Esto trae como contratiempo que el usuario puede llegar a creer que ese sitio no tiene lo que realmente busca, y por tanto, nunca entra.

Más allá de esto, temo no estoy en posición de afirmar mucho más respecto a como se indexan los sitios, pero siempre, ante la duda, mejor ir a lo seguro, y evitar siempre que sea posible el diseño por tablas.

Y por otro lado, está el tema ya mencionado antes, de un sitio diseñado por tablas es caótico para los no videntes.