Buenos programas para diseño Web

En estas fiestas que acaban de terminar, plagadas de mucha comida y bebidas tanto alcohólicas como no, en una de ellas me topé con un abogado (juez) que le gusta el concepto de diseño Web, y que (según su propia definición) lo que le gusta es lo exacto que es, en lo cual o algo sirve o no y no hay margen de interpretación.  O se ve, o no se ve, o sirve o no sirve, lo cual es cierto para diseño Web, no tan cierto para errores lógicos (no de sintaxis) dentro de lenguajes de programación como PHP, Java, C, C++, etc.

Una de las preguntas que me hizo fue cuál programa para diseño Web utilizo y por qué. El utiliza Dreamweaver, programa que no es de mi agrado por razones que listaré más adelante. A partir de esa pregunta maso menos supuse que él también duda de lo bueno que es o por que quiere tomar el siguiente paso en términos de dificultad. Pero antes de contestar la pregunta siendo lo más imparcial posible, tenemos que asumir lo siguiente.

El diseño Web cubre lo que es visible y lo que no es visible

El lado visible

Dentro de las cosas peculiares del diseño Web es que tiene una capa estética y otra funcional y en la estética nos referimos a lo visual, las líneas que dividen el contenido dentro de una página Web, colores del sitio Web, texturas que se utilizan, tipografías elegidas y posicionamiento de bloques (menús, artículos, galerías, títulos, barras laterales, encabezados, etc), respetando criterios de espacio negativos entre ellos, y siguiendo las bases del diseño gráfico. El lado visible de un diseño Web usualmente se forja en un editor de gráficos o a papel y lápiz si se siente cómodo en ello. Usualmente es recomendable tener un esqueleto hecho a papel para hacer las revisiones necesarias y cuando está satisfecho con el resultado, saltar a un editor de gráficos como Photoshop, Fireworks o inclusive Illustrator (no es de mi agrado hacer un diseño Web sólo con Illustrator) y se hace el boceto totalmente digital. Los assets (archivos externos) que se necesitarán posteriormente por parte del código salen de aquí (como los fondos).

Existe una tendencia que actualmente aboga por no ir del todo a Photoshop para hacer una propuesta y comenzar rápidamente a codificar y darle a un cliente una muestra «inicial» del corte del diseño Web para hacer revisiones. No me gusta por tres razones:

1. El cliente a menudo ve algo en blanco y negro y asume incorrectamente que el sitio se verá de esa manera y naturalmente, se asusta.
2. A el cliente le cuesta imaginarse un sitio aún si es una obra gris.
3. Si pide cambios drásticos, es código y tiempo desperdiciados.

El lado invisible

El lado invisible dentro de un diseño Web es el código que ocurre detrás de las escenas para que lo visible, sea pues, visible :p. Nos referimos entonces, a el código que un navegador interpreta para desplegar lo que se visualiza en la pantalla del navegador. Cada página Web que uno accede es información que nuestro navegador solicita a el servidor donde dicha página es hospedada (el famoso hosting). Para esto se requiere dos componentes; el lenguaje como tal (HTML) para desplegar el contenido (párrafos, títulos, imágenes, etc.) y cómo lo voy a estilizar dentro del diseño Web mediante CSS (posicionamiento de bloques, colores, tipografías, fondos, etc, etc.).

Existe un tercer componente, muy utilizado hoy, que es Javascript, que es el que le añade el plus de interacción con distintos elementos de la página (imágenes que se animan, carretes, galerías, etc).

Para cualquiera de estos tres, Ud puede hacerlo en un blog de notas (Notepad en Windows) si Ud «domina» la sintaxis (lenguaje) de los dos (omitimos Javascript por el momento aunque también sirve así). Muchos prefieren un editor (igual yo) por que escribir todo «a pata» en un Notepad da pereza y además por que un Bloc de notas es eso, un bloc, no un editor para HTML o CSS.

Dreamweaver hace de todo

Dreamweaver es un editor que pertenece a la familia de Adobe, la suite total para profesionales no sólo en el ámbito de diseño Web. Dreamweaver es un editor muy extenso y hasta cierto punto intimidante. Ofrece la opción de crear plantillas con layouts para que Ud. rápidamente pueda comenzar a tener un sitio Web.

El problema de Dreamweaver es que es muy grande, con muchas opciones que uno no sabe que son, y las opciones de plantilla son demasiado rígidas como para que uno pueda hacer totalmente diferente con ellas. En otras palabras, el diseño de una página Web en Dreamweaver por medio de plantillas es muy restrictiva y se limita a lo que Dreamweaver le tira en código.

Otra de las cosas que también me hicieron no usar Dreamweaver es que tiene un editor WYSIWYG (What You See Is What You Get) lo cual es básicamente lo mismo que hacer «diseños Web» en Microsoft Word. No se puede, no es viable y jamás será un buen diseño Web. No hay discusión en este asunto.

Otra falla fundamental en mi opinión es que Dreamweaver es un editor que forma parte de la escuela vieja de tener contenido en un sitio Web, esto es, un webmaster haciendo los cambios, manejando las plantillas y archivos maestros de un sitio. En otras palabras, es un sitio estático que trata de ser dinámico por el esfuerzo humano del webmaster o los que administran el sitio por medio de Dreamweaver. A nivel de escalabilidad esto ya es considerado como algo obsoleto debido a que han surgido administradores de contenido (como WordPress, Drupal, Joomla, Expression Engine entre otros) que hacen todo lo dinámico por uno. En ellos, Ud publica artículos, entradas, posts o lo que quiera llamarlo, y ellos mismos se encargan de actualizar los cambios en las diferentes partes del sitio que lo requieren sin tener que estar uno recurriendo a Dreamweaver para cambiar partes del sitio. Esto en términos de escalabilidad lo hace muchísimo más idóneo que hacer un sitio en Dreamweaver y mantenerlo.

Si uno desea hacerlo todo desde cero (el diseño Web), igual, el programa es demasiado pesado, se ven demasiadas cosas que no son necesarias para realizarlo.

Una de las cosas que más me gusta de un editor es lo simple que tiene que ser, pero que tenga las opciones para que los bretecitos salgan lo más rápido posible. Busco por lo tanto, eficiencia y que la herramienta me entre como un guante (y no looks).

Para usar un buen editor debe de amaestrar el lado invisible.

No hay otra manera sencilla de decirlo. Si Ud. quiere utilizar un editor para tener más control sobre el diseño Web debe de dominar el lado invisible como tal. Esto requiere tener una línea de pensamiento diferente con respecto a la edición de plantillas para realizar un diseño Web y no basta con retocar cosas como el color, fondos y demás. Requiere saber qué son contenidos de bloques, qué son contenidos de una sola línea (inline elements), y cómo posicionarlos según el efecto que desee como punto mínimo de partida. Una página Web son «bloques» de contenido, y el truco consiste en saber ponerles una posición mediante reglas de CSS. Favor leer la entrada que listamos con respecto a posicionamiento en un diseño Web.

Estos editores que voy a listar no tienen plantillas predeterminadas ni hacen layouts fluidos, rígidos de una, dos, tres o cuatro columnas. Estos editores son para editar archivos ya hechos, o desde cero. Para cualquiera de los dos, se requiere un conocimiento de HTML-CSS.
Un diseño Web desde cero le otorga a uno el control necesario para hacer el sitio de la manera que Ud. requiere o lo visualiza. Le otorga a Ud. la libertad de hacerlo como Ud. quiera. Muchos dicen que manejar un auto en manual es mejor que automático, otros que no. Yo soy de los creyentes que manual, le otorga un mayor control y el diseño Web final puede (note que dije puede) ser muchísimo más bello, funcional y flexible que uno predeterminado por una plantilla de Dreamweaver.

Si no sabe mucho de HTML y CSS, entonces es prioritario aprender un poco más de ambos, y ojalá usando el editor nuevo. Para mí, el mejor lugar para empezar es la plétora de tutorías que existen en línea. Una que vi hace poco es la de Tutsplus, para personas totalmente nuevas al mundo de diseño Web o que no pueden aún codificar un sitio sin necesidad de utilizar una plantilla como base. Otro recurso que me fascina, por que explica las cosas con un enfoque muy diferente son los libros de Head First, y tienen uno para XHTML-CSS lo cual le da a uno «bases» para diseñar sitios desde cero, posicionando los bloques como uno desee. Eso es lo que interpreto como el punto que la gente quiere cuando dice que desea mayor control. Es no estar confinado a la rigidez de una plantilla, más si proviene de programas como Dreamweaver.

Para los que si saben trabajar el lado invisible.

He saltado entre varios editores, específicamente 4 de ellos (nota: soy fanático/obsesivo en codificar sobre fondo oscuro sobre código claro y no fondo claro sobre código oscuro):

Coda

Es uno de mis editores favoritos por que tiene AUTO-COMPLETE tanto para HTML, PHP, CSS y MySQL, que es lo que usamos para nuestros diseños Web. Me gusta que para cada proyecto tengo un menú lateral en donde puede utilizar los assets del diseño Web en el cual uno se encuentra trabajando. Tiene funcionalidad de FTP incluida, lo cual nuevamente, hace muy fácil subir los cambios si la información de FTP se encuentra configurada. Otro punto a favor es que muestra claramente errores de sintaxis (útil en PHP sobre todo) cuando no ha cerrado apropiadamente alguna parte del código.

Lo que más me disgusta es cuando uno «deshace» o «rehace» algo, el cursor no se posiciona donde se está deshaciendo (o rehaciendo) el código digitado. Quizás esto no es un gran problema al leerlo en este artículo, pero cuando uno tiene miles de líneas en código CSS, que es un número común para un diseño Web, y uno digita COMMAND+Z el no poder saber cuántos pasos hacia atrás hizo cambios, es un problema grande.

Actualización: gracias a Marcel de Netineti Design, que recalca que la última versión de Coda corrige el asunto del cursor. Ahora Coda también tiene pantalla dividida (múltiples), característica que me agrada muchísimo de Sublime Text 2.

Descargue Coda

Textwrangler

Fue el primer editor que utilicé cuando comenzaba a realizar los primeros diseños Web que hacía y por que no quería instalar Eclipse para programar en Java. Después de abandonar Dreamweaver, me gustaba por que no era tan pesado, tenía la barra lateral de archivos de un proyecto y por que era simple de usar. Con el paso del tiempo, lo fui dejando, más que todo por que carecía del feeling del editor que andaba buscando conforme el diseño Web se hacia mas completo. Ahora, rara vez lo utilizo.

Descargue TextWrangler

Dashcode

Este editor viene con el Xcode que es el IDE de la Apple para hacer aplicaciones en el iPhone (proyecto que he dejado de lado por el momento). Es un editor muy simple para CSS o HTML, lo pondría un peldaño debajo de Textwrangler por que no tiene la opción del menú lateral (navegador) y carece de cualquier opción de autocompletar.

Para descargar XCode, uno se debe de registrar como Developer en la Apple. El costo actualmente son de $5 o $10, y se puede hacer mediante la App Store que viene en cada Mac con Snow Leopard.

Sublime Text 2

Me topé con este editor vía Twitter, un seguidor me lo recomendó. Al principio me costó adaptarme por que es un editor muy, pero muy completo. Tiene la opción de instalar plug-ins, que son aplicaciones para el programa hechas por la comunidad. Lo dejé por un rato y luego me di cuenta en el blog de ellos que habían hecho mejoras. Lo volví a probar y ahora lo utilizo muchísimo más. Dentro de las cosas que tienen que me fascinan:

1. Cursor múltiple: Para programar es una delicia, si quiere cambiar el nombre de una variable antes había que copiar-empastar n-cantidad de veces en donde la variable aparecía o hacer un reemplazo. Con el cursor múltiple Ud. posiciona el cursor apretando COMMAND, y aparecen. Es demasiado útil.
2. Múltiples ventanas: Coda y Textmate tienen múltiples tabs, lo cual es útil, pero múltiples ventanas es aún mejor. Cuando en un diseño Web se tiene que estar editando constantemente entre el archivo HTML y CSS para realizar cambios (o dos archivos en PHP, etc), se necesita estar cambiando de pestañas. Usualmente yo navego por medio del teclado de una a la otra. Tengo una pantalla enorme (22 pulgadas) y dos monitores. Tener dos ventanas abiertas y poder pasar de una a otra usando el mouse, salva tiempo.
3. Modo libre de distracción: Esto lo que hace es ocultar el navegador y las ventanas que tenga abierta son las que ven únicamente. Sé que la Apple está empujando esto muchísimo con OSX Lyon, pero yo utilizo Snow Leopard así que tener este modo en un editor es genial.
4. Reconoce variables a nivel local para autocomplete: Una ventaja enorme que a su vez ahorra tiempo y errores. El autocomplete le sugiere variables declaradas dentro del scope del script.
5. COMMAND + Z sirve como debería de servir: No hay mucho que decir aquí. 🙂
6. Snippets y Github: No he utilizado mucho Github, tengo que leerme una buena tutoría para cuando tenga tiempo, pero tiene integración incluída por medio de plug-ins. Snippets, lo traté de implementar pero no he podido, son «extractos de código» que Ud. utiliza de manera repetitiva en otros scripts que haga. En vez de buscar, copiar y pegar, nada más llama a los snippets que Ud. tiene y listo, el código esta disponible. Muy útil.

Como desventaja, siento que el autocomplete no es tan intuitivo como el de Coda. Me ha sucedido que a veces el autocomplete me pone propiedades de CSS que nada que ver. Tampoco cierra los tags en HTML de manera tan inteligente como Coda. Tengo que cerrarlas yo mismo. Esto no me agrada mucho y espero que lo mejoren.

Descargue Sublime Text 2

Mención honorífica: Text Mate

He escuchado cosas buenas de Text Mate. Nunca lo he llegado a utilizar y esa es la razón principal por la cual no lo listo aquí.

Descargue TextMate

Ahora ante la pregunta de cuál es mi favorito, yo elijo entre Coda o Sublime Text 2. Creo que Coda es bueno para aquellos que aún no dominan bien el lenguaje de diseño Web como tal, y Sublime es la respuesta para incrementar la eficiencia de trabajo.

Creo que Coda es un editor más fácil de utilizar a la hora de ir aprendiendo CSS y HTML pero no es tan pesado como Dreamweaver o limitado como Dashcode o TextWrangler y SublimeText 2 es la opción para aquellos que son un poco mas «hardcore» codificando y saben utilizar dichos lenguajes con más naturalidad.