8 Take Me Down To The Paradise City Where The Grass Is Green And The Girls Are Pretty 8

martes, noviembre 28, 2006

¿Y qué Editor Utilizas?

Cuando te pasas el día editando HTML o similares, casi siempre surje la duda de que editor es mejor. El otro día lo consultaron en la lista del eghost. Y resulta que para HTML hay algunos. Bastantes. Pero para establecer una división principal, vamos a dividirlos en dos grupos: WYSIWYG y no WYSIWYG.

Dentro de los primeros tenemos autenticos monstruos en lo referente a uso de memoria y espacio en disco duro. Más que editores, realmente son IDEs (entornos de desarrollo y programación) orientados, eso sí, a la web. Macromedia Dreamweaver, NetBeans, o (Dios nos libre!) FrontPage o Word entran dentro de esta categoría.

Que tienen sus ventajas, claro está: Los documentos HTML salen como churros, y no hace falta tener demasiados conocimientos para poder generarlos.

Pero es que las desventajas son muy evidentes: El 99% por ciento de las veces, se maqueta con tablas y el código generado no es del todo .... "elegante". Paso a explicar cada punto.

Utilizar tablas no es malo. Es el maquetar con ellas lo que no es correcto. Si se tienen que presentar datos en formato tabular usa tablas. Nadie te dirá nada. El problema es que una tabla es demasiado flexible: Permite hacer con ella lo que uno se imagine: Sin bordes, tanto de ancho, tanto de alto.... muy tentador a la hora de colocar los elementos de la manera que uno quiera. Pero esto quita accesibilidad. ¿Alguien se imagina un navegador de voz describiendo la página "tableada" a una persona con discapacidad visual? "Tabla, fila, celda, imagen, celda, imagen, celda, texto, fila, ...." Realmente, para no decir nada. Nada de contenido. El diseño es visual. Las tablas son elementos de información. Y los editores WYSIWYG casi siempre maquetan así.

El punto de la elegancia en el código es secundario. Son las ganas que tenga uno de complicarse la vida. Pero si lo que te va a tocar es limpiar código generado por una aplicación de estas, sí que piensas en cómo mejorar esta característica. Por ejemplo: En un editor WYSIWYG introduces un texto, pulsas INTRO (en el contexto de salto de línea) y lo que realmente pasa en el código es que te organiza la información en elementos tipo párrafo (<p> </p>) cuando realmente lo que te interesa es un simple salto de línea (<br />). Si, claro que puedes cambiar las opciones de edición para que te haga lo que yo digo.... pero ¿alguien se ha metido en serio dentro de la configuración de las opciones del Dreamweaver, por ejemplo? ¿Y cómo sería la tarea para alguien que no tiene conocimientos?

En el otro lado de la balanza tenemos editores. Simple y llanamente. No generan código. A lo más que pueden llegar es a autocompletar las etiquetas abiertas y a un resaltado de sintaxís con colorines. Punto. Con esto editas y si quieres ver como va, te abres un navegador, cargas el fichero y cada vez que edites algo, guardas y le atizas a F5 o actualizar. Editores tipo Bloc de Notas, Notepad2, Ultraedit o (ya en linux) los clásicos gedit, vim o emacs, o ya más orientado a desarrollo web, Quanta Plus, Aptana y/o similares....

Con este tipo de edición nos quitamos las dos pegas de los editores WYSIWYG: Maquetamos correctamente (elementos div) y el código es lo elegante que uno quiera que sea. Claro que no son la panacea. Hay que mentalizarse que si la página es de un tamaño majete, la edición llevará un tiempo. Y dado que no se poseen demasiadas ayudas, la referencia W3C de HTML, xHTML y CSS es obligatorio tenerlas a mano abiertas en un navegador a la hora de generar un documento bien formado.

Un apunte más. El sistema operativo. Si, he escrito lo que he escrito. Alguno dirá que tendrá que ver el sistema operativo con el desarrollo web remoto. Pues tiene que ver. Un documento HTML debe comenzar con la cabecera <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD lenguaje versión modo de comprobación //EN" "http://www.w3.org/TR/url-recurso-dtd.dtd">.

¿Alguien ha mirado el código fuente de un HTML generado por M$ Word?
Esta es su salida:

<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">


Totalmente estandar, como puede comprobarse.... Pero vamos a rizar el rizo. ¿Y si guardamos un email HTML de Outlook en formato HTML? Esta es su cabecera:

<head>
<link rel="important stylesheet" href="chrome://messenger/skin/messageBody.css">
</head>
<body>
<table border=0 cellspacing=0 cellpadding=0 width="100%" class="header-part1"><tr><td><b>Asunto: </b>Asunto del mensaje</td></tr><tr><td><b>De: </b>"Yo" <yo EN gmail.com></td></tr><tr><td><b>Fecha: </b>Tue, 27 Nov 2006 09:41:04 +0100</td></tr></table><table border=0 cellspacing=0 cellpadding=0 width="100%" class="header-part2"><tr><td><b>Para: </b><ti EN gmail.com></td></tr></table><br>
?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
[1]

<HTML lang=es xmlns="http://www.w3.org/1999/xhtml"
<META http-equiv=Content-Type content=text/html;charset=utf-8>
<META content="MSHTML 6.00.2900.2873" name=GENERATOR>
xml:lang="es"><HEAD><TITLE>Asunto del mensaje</TITLE>
[2] </HEAD>
<BODY>....


Tocotó. Pero me gustaría señalar lo que a mi me parece más importante:

[1] No es que sea un HTML genérico, sino que es la defición exclusiva del 24 de diciembre de 1999. Parece que no les sirve otra...
[2] ¿Que es eso de MSHTML etc...? Fácil. HTML es un lenguaje bastante flexible en lo relativo a sintaxís y estructura... pero para Micr0$0ft sigue siendo muy estricto. Solución: Todo el HTML que se genere desde software de M$ pasa por una librería de vinculo dinámico (dll) llamada MSHTML.dll que "retoca" el código generado y se asegura de que será legible por aplicaciones de M$. ¿Chapuza? No. Peor. Etiquetas mal formadas, atributos sin comillas, ochenta y cinco clases por cada etiqueta, atributos privativos.... Por lo visto HTML es demasiado rígido en su estructura y M$ lo que ha hecho es su propia versión. Muy laxa. Muy privativa. Pero que con IE va a las mil maravillas. Pero no es HTML. Es algo que se le parece.

Para terminar, mi opción: Genera código con un editor WYSIWYG si te es más fácil, pero revísalo a fondo (quitando tablas para maquetar, por ejemplo) con uno de los editores de texto que aconsejo. Visualizalo con diferentes navegadores, y para acabar, pásale algún test de compatibilidad del W3C. Tus documentos ganarán en calidad. Y nunca, nunca, nunca utilices el Word para generar contenido HTML.

Enlaces:

Editores:

Recursos: