Sobre los editores visuales de páginas web y otras peripecias

Comencé un curso de ASP.NET hace dos fines de semana. Es un curso básico, donde muestro las ventajas del .NET Framework para desarrollo web. Comencé hablando de lo que es, cómo se utiliza y ejemplos sencillos que muestran su funcionamiento.

Este sábado comenzamos un ejercicio que abarcará todo el curso. Empecé con la creación de un Master Page sencillo, mostrándoles las etiquetas que se pueden utilizar; después seguí con la implementación de algunos estilos en CSS, para después crear el primer WebForm…

En este punto, mientras veían lo que hacía, surgió una duda entre los participantes: ¿¡NO VAMOS A HACER EL EJERCICIO CON UN EDITOR VISUAL!?

Mi respuesta fue simplemente "Eh… no."

Esperaba no tener que extenderme, pero para continuar con el curso, primero tenía que aclarar algunos puntos. Me tomó algo de tiempo dar a entender mi punto de vista, y por qué mi "No" era definitivo. Este artículo trata de eso, y espero que le abra los ojos a unos cuantos (cientos) de programadores.

¿Qué tienen de malo los editores visuales?

Cada desarrollador web que inició su carrera en la década pasada recorrió su propio camino para estar en el nivel en el que se encuentra actualmente. Pero la mayoría comenzamos en el mismo punto de partida: Dreamweaver. Me atrevería a decir Macromedia Dreamweaver, porque muchos lo hicimos con la versión MX u 8, antes de Adobe. Como sea, ya fuera en la prepa/universidad o por cuenta propia, aprender desarrollo web no era algo sencillo, pues ya fuera prepa/universidad o por cuenta propia, estábamos solos.

¿Y por qué usábamos Dreamweaver? Por fácil. Era como FrontPage de Microsoft, pero sin la mala fama de la marca. Era tan sencillo como hacer un documento de Word que se viera bien en el Internet (disculpen la jerga de novato). ¿Por qué batallar escribiendo etiquetas?

Bueno, aquí están algunos de los porqués.

1. Código automático no es código nuestro

Mi primer trabajo en la Web fue el sitio de una escuela. Combinando Macromedia Fireworks y Dreamweaver, creé un sitio que a mi parecer (y al del director, muy importante) estaba bien. Lo mantuve los seis meses que duró mi servicio social de la universidad, y después lo dejé para que fuera continuado por algún otro desdichado practicante.

Más o menos al primer mes de estar trabajando en ese proyecto, me entró curiosidad por ver el código fuente. Vi un reguero de etiquetas por todos lados y lo que pensé fue "qué bueno que no lo tuve que hacer a mano, ¡gracias Dreamweaver!". A los meses, cuando ya entendía más de diseño web y volví a ver el código, me di cuenta, con horror, del desastre que el programa había hecho. Cada cambio que le daba a un texto en sus estilos me agregaba una etiqueta <span> con su propio class y la definición de éste en la etiqueta <style>, ¡aun cuando redefinía el estilo de un mismo texto! Eran span sobre span sobre span, y un class remplazando los estilos de otro class. Dejemos de lado el trabajo que nos tomaría el mantenimiento (total, lo seguimos haciendo con Dreamweva). Pensemos en el tamaño de nuestra página web. Un archivo HTML es texto plano. Cada caracter cuenta, y en un archivo así nos estamos excediendo demasiado.

Este fin de semana, precisamente, les quise mostrar cómo usar la vista de diseño en Visual Studio, y por qué no era tan sencilla. Agregué un par de elementos, traté de moverlos para mostrar que no es tan libre (porque es página web, no porque el programa fuera malo), y terminado el ejemplo me regresé a la vista del código fuente. Por agregar dos elementos y borrarlos, me desacomodó un par de divs que ya estaban creados, no sé por qué.

2. "En mi máquina sí sale bien" no es pretexto

Cualquier primerizo pensará que un programa como estos es un sistema en el que se puede "dibujar" la página web y que genera el código necesario. Pues es exactamente todo lo contrario. Programas como Dreamweaver utilizan la vista de diseño para agregar elementos que se traduzcan en etiquetas HTML y se muestren nuevamente en la vista diseño como (dicen ellos) se verá en el navegador. Obviamente para esto necesitan un sistema que genere la vista del navegador a partir del código, es decir, necesitan un motor de renderizado.

Hace unos años surgió Webkit como la opción más viable para los programas que requieren mostrar páginas web. Es la mejor opción disponible al público, porque Presto también está a su nivel, pero no es gratuito. Antes de Webkit, la mayoría de los programas para Windows que requerían una interfaz web no iban a gastar en un motor de renderizado (y tal vez Gecko no era tan popular), así que se decidían por usar el que el mismo sistema operativo traía ya instalado: Trident de Internet Explorer.

¿Y dónde está el problema? Dudo que alguien de la pubertad en adelante que esté leyendo esto no sepa la respuesta, si la década pasada todos usábamos Internet, niños y adultos. Actualmente Dreamweaver usa Webkit, pero eso no significa que la página se verá igual en todos los navegadores. Únicamente nos da más posibilidades que se vea igual en Safari y Chrome, y no es garantía.

En la actualidad no podemos confiar en cómo se ve la página en un solo navegador. Hay que probar en todos los posibles, y ningún programa con vista de diseño nos ayudará a esto. Muy probablemente será sólo una limitante.

3. No siempre trabajarás solo

Generalmente nuestro trabajo es hecho en equipo, y si no, muy probablemente será mantenido por otra persona en el futuro. ¿Dejarías tu trabajo mal diseñado por un software para que otro esté batallando? Ahora que tal vez somos egoístas y eso no nos importa tanto. Lo preguntaré de otra forma: ¿No te daría vergüenza que alguien vea que solo haces páginas con Dreamweaver? Porque créeme, se nota.

4. Urgencia de entrega

Me preguntaron ¿Qué pasa si el cliente necesita el trabajo para ya? Recordemos que "hacer el trabajo" no significa diseñar la página y entregarla, sino hacer las pruebas, los ajustes y las correcciones, entregarla y que el cliente haga sus pruebas y nosotros, los ajustes y correcciones necesarias, y finalmente, liberarla. La atención a errores en el producto también es parte de la entrega, y la rapidez en la corrección de errores también será parte de esa urgencia.

Retomando los puntos anteriores, ¿y si el error es específicamente en una etiqueta? No lo notaremos con la vista previa de nuestro editor. ¿Y si el problema es que el cliente no ve la página como yo la veo porque usa otro navegador? Nada que el editor pueda hacer por nosotros.

Conforme aprendas a manejar las etiquetas de HTML, el tiempo que te lleve diseñar una página desde el código fuente dejará de parecer un inconveniente, pues la misma práctica te dará la rapidez para escribir código, solventando el problema de la urgencia para terminar y facilitando el mantenimiento.

5. Aprender a hacer páginas web con editores visuales no es realmente aprender

Les comenté el sábado "Si no quieren aprender a usar las etiquetas, mejor les doy un curso de C# o de .NET, pero si quieren aprender desarrollo web, tienen que aprenderlo completo." Hacer etiquetas es parte de ese desarrollo web, y es la parte más importante, en realidad. Quien no sepa usar las etiquetas HTML, definir estilos CSS o aplicar Javascript, no puede decir que es un desarrollador web. No hace diez años, menos en estos tiempos.

6. Programas como Dreamweaver NO SE DEBEN usar en escuelas

Este punto es más enfocado a lo que es la educación. Dreamweaver es un programa muy completo, y por lo mismo, muy complejo. Es muy pesado, y requiere una máquina con ciertas características para funcionar. Di un curso de HTML hace unos meses, y lo único que les recomendé usar para diseño fue Notepad++, y si no, que usaran el bloc de notas, o lo que ellos quisieran. Si les vas a enseñar a hacer páginas web no requieres nada tan pesado.

Por otro lado (y me importa poco quien cuestione mi elevado grado de ética), Dreamweaver cuesta. ¡Y vaya que cuesta! La nueva versión CS6 está a USD$399.00 (casi $5,500.00, hoy que el dólar está a $13.78). Un abuso tal vez, pero eso cuesta. ¿Qué hacen los profesores que enseñan usando Dreamweaver? Lo "consiguen" o le dicen a los alumnos que lo "consigan".

Habiendo programas gratuitos, como WebMatrix, por ejemplo, o el ya mencionado Notepad++, ya no es necesario usar Dreamweaver porque, como he insistido, no deben aprender en un editor visual, y de paso, no estamos fomentando la piratería. Aprender con un bloc de notas no sólo nos libera del cargo de conciencia, también nos obliga a conocer las etiquetas, los atributos, cómo usarlos, cómo manipularlos a nuestro favor. Nos enseña a desarrollar de verdad, no nada más por encima.

El problema con los alumnos

Me comentaron en el curso que la mayoría de los alumnos no les interesa ver código, sino ver la página ya terminada.

Cada alumno debería preguntarse ¿Soy cliente o soy programador? No está mal ponernos en los zapatos del cliente para ciertas cosas, pero definitivamente, no para aprender a desarrollar. El cliente deberá preocuparse por cómo se ve el programa, pero uno debe preocuparse, además de eso, de cómo lo desarrollará, qué herramientas usará, qué tecnologías, etc. Si no me interesa el código, mejor estudio otra cosa, porque la programación no será lo mío.

Discúlpenme, pero es ridículo querer desarrollar sin querer aprender lo que realmente es, y HTML y compañía son parte del desarrollo. También debemos conocerlos.

El problema con las escuelas

Otra cosa que salió en esa discusión fue el que en las escuelas está determinado qué deben enseñar los profesores. De las escuelas que conozco, las carreras de ciencias computacionales llevan algunas materias de programación, y entre ellas, desarrollo web. El problema es que generalmente llevan una sola materia (en las universidades exprés, que dan materias cortas, podrán haber dos de desarrollo web, pero equivalen prácticamente a una de semestre). Tendría que ser un programa intensivo para ver todo lo que son las tecnologías estándares de la web más un lenguaje de programación, sea .NET, PHP, o cualquiera, y por lo general no es así. Es un programa ligero, que el alumno pueda llevar sin presiones, y por lo tanto, se debe sacrificar lo que se tenga que sacrificar, que generalmente es la parte de diseño. Lamentablemente no depende del profesor cambiar las cosas, y muchas veces tampoco depende de la escuela. El programa ya está definido, y debe seguirse.

El alumno llega esperando no batallar en diseño, y no es su culpa si no sabe realmente a lo que va. Pero la escuela sí está mal, porque su trabajo es de guía para el alumno, y no lo hace como debería.

¿Quieres aprender desarrollo web? Entonces apréndelo por completo

Desde mi punto de vista, las tecnologías de desarrollo ha evolucionado tanto, que las carreras de informática ya deberían estar divididas en distintas especialidades de programación, y que la especialidad de desarrollo Web se enfoque en eso, y se le dediquen las materias que sean necesarias.

Pero mientras no sea así, cada quien deberá entender esto por su propia cuenta, y hacer lo necesario para su propio desarrollo profesional.

Si te interesa programar, apréndelo, pero desde todos los ángulos. Si haces una aplicación para Windows en .NET, tampoco está de más saber qué hay en el .designer.cs. Si programas en Java con Netbeans, aprende lo que hay en el código generado. Es parte del código que forma tu aplicación, y también lo debes conocer.

Pasa lo mismo con la web. Tanto el código de lado del cliente como el código de lado del servidor forman una sola cosa que se llama aplicación, y si tú eres el desarrollador, tú debes conocerlo, tú debes saber manipularlo. Debes dedicar el tiempo necesario para aprender ambos. Haz cursos, practica, sigue guías por Internet, visita mi blog ;D, lo que tengas que hacer. A fin de cuentas, todo es para tu propio desarrollo profesional, de nadie más.

Israel Muñoz Valdez

Actualización (2012/05/15)

Debo aclarar que no es que esté en contra de los programas en sí, sino de trabajar con vista diseño, en ningún programa. Dreamweaver tiene muy buenas características, además de que la interfaz de diseño desde código es muy buena. Otros como Visual Studio, u otros menos sofisticados como NVU también son buenos. Pero repito: trabajar en vista diseño no está bien.