Usá HTML correcto y ganá plata en el proceso

Domingo 8 de Octubre de 2006

Me gusta diseñar sitios web, me gusta programar, y me gustan las nuevas tecnologías; por eso, no debería ser ninguna sorpresa que siga al pie de la letra los estándares propuestos por la W3C para el HTML y las CSS. Pero, ¿es esta manía mia por seguir los estándares una empresa que desemboca en un callejón sin salida? (Sí, me gusta hacerme el bandoso de vez en cuando.) Espero que no, y espero que la gente comprenda la razón para adherirse a ellos.

La red es un medio visual, y la mayoría de sus usuarios usan entornos gráficos, así que la primera impresión de la gente es “Bah, pongo imágenes, si total es para gente que puede ver”. Esta forma de pensar es imbécil e irrespetuosa. Primero, es imbécil porque los motores de búsqueda son programas, y no pueden ver imágenes; además, si sólo diseñas el sitio para unos pocos, sólo unos pocos visitarán el sitio. Además, es irrespetuosa, porque existe, por un lado, gente que utiliza navegadores textuales. Yo no soy uno de ellos, pero es una parte del mercado y hay que apuntarles también. También, la gente ciega puede usar internet, y navega gracias a programas que leen el texto en pantalla. Esas son razones primarias para decidirse a diseñar un sitio de manera correcta, y apoyo cualquier ley que potencialmente limite a todos los sitios que no estén diseñados de una manera accesible. Claro, hay excepciones… un sitio de fotos o de videos no se beneficia de accesibilidad para gente invidente. Es bastante simple darse cuenta de las razones para lo que se conoce como separar contenido de presentación. HTML está hecho para contenido, y por eso no debe tener ningún tipo de información sobre la apariencia. CSS está hecho para la presentación, para la forma en que ese contenido se muestra al usuario; se pueden, además, aplicar distintos archivos CSS dependiendo si la presentación será por pantalla, por algún medio impreso, en una PDA, y más.

También existen otras razones, por un lado, está el beneficio de hacer que un sitio bien diseñado y construido es completamente modificable; con un poco de conocimiento sobre CSS, se puede modificar la hoja de estilos, y cambiar la forma y posición de cualquier elemento. Proyectos que demuestran estas capacidades son CSSZenGarden [inglés] y el Proyecto Camaleón [español]. Hay extensos blogs y sitios que explican cómo utilizar estas tecnologías de manera correcta; además, para todos los que aprecien y adoren la así llamada «Web 2.0» deberán aprender a aplicar el modelo DOM de Javascript, y la mejor forma de que funcione es con HTML correcto.

Además, es bastante fácil notar que es mucho mejor utilizar HTML correcto para la presentación, especialmente viendo que el principal error de los diseñadores es el mismo que hace diez años: Las tablas. Las tablas se usan para mostrar contenido tabulado, no para presentación, y es fácil notar que para cada tabla en el documento es necesario escribir <table><th><td></td></th></table> como mínimo, mientras que la forma correcta es usar <div id="contenido"></div>. ¿Y qué tal reemplazar cada uno de esos <font color="#FFFFFF" size="36pt"><b><i>AVISO</i></b></font> por un simple <span class="importante">AVISO</span>? Que, además, tiene el beneficio de que si uno modifica la hoja de estilo cambia todas las copias a la vez.

Pero esto no es todo perfecto; hay siempre una piedra en el camino. Esa piedra proviene de la compañia más conocida del mundo: Microsoft, con su navegador, Internet Explorer. El problema es que el navegador por defecto del sistema de las ventanas está configurado con estándares distintos a los especificados por la W3C. Por ejemplo, segun la W3C, si a un elemento se le define un ancho de 70px (píxeles), más un «acolchonado» (padding) de 20px, más un borde de 2px de ancho, el elemento ocupa un total de 114px de ancho (22 a cada lado, más 70 del centro). Pero el navegador de la e azul hace que ese elemento ocupe 70px. Esto hace que sea difícil para los diseñadores hacer un diseño apropiado para una página, sin sacrificar soporte en algún navegador, y sabiendo que más del 75% de la gente usa Explorer, no es difícil ver quienes llevan la desventaja en el diseño.

Afortunadamente, debido a la manera en que está programado, existen maneras de hacer que Explorer vea una cosa, y navegadores con soporte correcto para los estándares vean lo que deben.

Finalmente, quiero pedirle una cosa a todos los que tengan un sitio web: Adhiéranse a los estándares. Elijan la excusa que sea: Solidaridad con los demás, facilidad para diseñar sus propios sitios, ahorrarse ancho de banda, o simplemente molestar a Microsoft, pero por favor, hagan que la Red de Redes sea un lugar mejor.

Si te interesa lo que tengo para decir, seguime en Twitter.

Dejá tu comentario, o un trackback desde tu sitio. Podés seguir la conversación con el Feed de comentarios de este post.

2 Comentarios a “Usá HTML correcto y ganá plata en el proceso”

  1. MilVidas dijo:

    Domingo 8 de Abril de 2007, 00:22

    Y donde esta la parte de ganar plata??

    =P

    Bueno, hace unos dias por medio de una pagina (que no recuerdo ahora), verifique la accesibilidad de mi sitio y era bastante fea, en mayor parte por el codigo generado por adsense de google…

    Ahora, usando el validador de W3C.

    Me encuentro con 122 Errores.
    Asique voy a tener que reever el codigo que tiene el wordpress y ver porque joraca me genera 2 veces el >p&ly;>p&ly;…

    saludos!

  2. Tordek dijo:

    Domingo 8 de Abril de 2007, 07:57

    Ugh… esto era una actualización, no tenía que salir como post nuevo…

    La parte de ganar plata viene como efecto secundario de que las páginas sean más chicas: necesitamos menos transferencia, que reducen los pagos al proveedor (si es que tenemos visitas en cantidades notables; slashdot por nombrer uno).

    Veo que corregiste los errores, pero seguís en XHTML transicional; ¿por qué no cambiás a estricto?

Comentá:

Entrá con tu cuenta, registrate, o escribí tus datos:

XHTML permitido: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">