Menu

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.

24 Comentarios

  1. erick
    1

    gracias por tus consejos soy nuevo en esto y boy a aprender lo que se pueda

    • Natalie
      1.a

      Con gusto Erick! No encanta escribir, solo que a veces no tenemos el tiempo que quisiéramos para hacer mas tutoriales. Cualquier duda que tengas nos puedes contactar por acá o a nuestro correo info@webmentor.cr 🙂

      Saludos

  2. Lilliana Bravo
    2

    Bueno, eso de ser los primeros en html5 no es nada cierto, hay cientos de empresas en Costa Rica que trabajan en html5 y css3 desde hace tiempo, (para muestra un boton, la empresa http://jadesarrollos.com ) desde que salio a la luz, inclusive mi hija de noveno año el en el colegio recibio un curso de html5, css3, javscript, xml y php y desde entonces trabaja y presenta todos sus proyectos con esos sistemas al igual que todos los estudiantes del colegio.

    • mentor-admin
      2.a

      Hola,

      No entiendo muy bien a que se refiere con el comentario, si el tema es con respecto a editores de programas para diseño Web.

      Si se refiere a otro tema que hicimos, con respecto a nuestras impresiones de diseñar en HTML 5, por eso pusimos al pie del artículo lo siguiente: “Creo que estamos entre las pocas empresas de diseño Web que hacen un sitio en HTML5 en Costa Rica”

      Dicha entrada fue puesta en Julio del año pasado. Resulta evidente que de a esa fecha a hoy, otras se pudieron haber incursionado.

    • Dagoberto
      2.b

      Pues Esta señora bravo parece que vino a hacer spam y propaganda a ese sitio, más que a opinar algo productivo, y viendo este sitio que ella recomienda se ve en su código que es WordPress, y eso no importa, pero el diseño está bastante feo, pienso que debería saber acerca de lo que opina antes de meterse con un aire ofensivo. EN cambio esta empresa me parece más “tuanis” en los diseños y eso. Una de las mejores que he visto en internet… Del precio, ahí pues no se, el resultado habla.

  3. Marcel
    3

    Muy buen post, le tengo cariño a toda la suite de Adobe, yo empecé con Dreamweaver porque es lo que conocía y utilizaba todo el mundo pero hoy en día no se que sentido puede tener.
    Personalmente me encanta Coda y no me da el problema que comentas con el COMMAND+Z, vamos que el cursor se comporta como debe, has probado de actualizar la versión?

    • mentor-admin
      3.a

      Estás en lo correcto Marcel. No lo había actualizado. Voy a actualizar el tópico. Mil gracias! Ahora sí funciona y tiene el split-screen que me fascina de Sublime Text. Faltaría lo de múltiples cursores y snippets.

      Un saludo y mil gracias!

  4. Esteban Gonzalez
    4

    ESTOY EMPEZANDO A INCURSIONAR EN ESTO DEL DISENO WEB, ME GUSTA MUCHO EL DISENO DE SU PAGINA Y LOS EDITORIALES QUE PUBLICAN. ME GUSTARIA ME DIERAN CONSEJOS DE DONDE ENCONTRAR TUTORIALES PARA DESARROLLAR MIS HABILIDADES IO TALVEZ ALGUN SITIO DONDE ESTUDIAR.

    GRACIAS

    SALUDOS

    • mentor-admin
      4.a

      Hola Esteban,

      Claro que sí. Pero se refiere a habilidades de diseño como tal o habilidades de codificar lo que tiene en mente diseñar? Dos cosas diferentes :). Saludos!

  5. Esteban Gonzalez
    5

    Me refiero a las habilidades de diseno como tal.

  6. Gustavo Quiros
    6

    Excelente post, desde que inicie con el Diseño Web he usado Dreamweaver tanto para diseñar como para programar aunque bien a veces utilizo Notepad++ para corregir pequeños errores y asi no tengo que abrir de nuevo el DW(que tambien la vista del navegador no es igual a la vista del programa), pero desde hace tiempo he querido buscar otra opcion me han hablado que el Aptana pero nunca lo he usado, voy a probar con el Coda

    • mentor-admin
      6.a

      Hola Gustavo,

      Gracias por el comentario. Suerte con Coda. Recientemente, he estado utilizando Sublime Text 2 por que me he pasado a utilizar LESS, estaré escribiendo más sobre LESS en un futuro.

      Saludos!!

  7. Steve Duran
    7

    y aptana studio 3?? que opina?? es mejor que migre a otro, porque apenas voy empezando

    • Natalie
      7.a

      Hola Steven!
      No sabría decirte no hemos utilizado Aptana Studio 3. Vamos a utilizarlo y le contamos como nos fue.
      Saludos,

  8. daniel
    8

    buenas, soy un estudiante de arquitectura, pero he empezado a ver programas de diseño web y me ha gustado mucho. pero no se donde puedo aprender o llevar lecciones para aprender, eventualmente me atrae mas el diseño de paginas web que la misma arquitectura. pero no se por donde empezar

    saludos

    • mentor-admin
      8.a

      Hola Daniel,

      Creo que en cuestiones de diseño no tendrías problemas. El diseño Web, sigue líneas de inspiración con respecto a qué prácticas son recomendadas o no. Aquí lo que debo de saber es si te gusta utilizar Photoshop o no. Creo que el ser estudiante de arquitectura es un gran plus.

      Lo que te falta es saber acerca de HTML-CSS. Como libro, para empezar, te recomiendo Head First XHTML- CSS. http://www.headfirstlabs.com/books/hfhtml/. Mucha suerte!!

  9. Marianne
    9

    como hago para recueperar archivos realizados en Sublime Text 2, trabaje le di save UTF 8 pero no me abre todo el trbajo realizado que hago?

    • mentor-admin
      9.a

      Hola Marianne,

      Has intentado abrirlo con Text-Edit? O Notepad, que es el equivalente en Windows. Si lo abris quizás lo puede ver bien y luego le pone el encoding correcto.

      Saludos

  10. Ariel
    10

    Hola, los programas que pones aca son excelentes…

    Hay algun programa para diagramar mediante DIV y CSS..???
    el Lado Visible mucho mas controlable y a nuestro gusto…

    • mentor-admin
      10.a

      Hola Ariel,

      Sorry por demorar tanto. No estoy seguro que le sigo. Ud quiere diagramar y luego tirar el código a CSS?

      Si es así, creo que Adobe Edge te puede servir.

  11. David Castrillo
    11

    Hola, Estoy terminando un master en desarroyo y diseño web adaptativo, soy Español y estaba mirando por la web ideas para realizar un proyecto de fin de curso que nos piden para darnos un certificado con nota etc… y me ha sorprendido mucho vuestro sitio, las reflexiones y la filosofia de trabajo artesanal que desarroyais, nos han enseñado a trabajar con sublimeText2, a utilizar control de versiones con GIt con programas como Tower, empleamos codeKit para trabajar con sas, coofeScript, less y todas las ventajas que incorpora este potente programa para optimizar el tienpo que pasamos picando codigo delante del ordenador, hemos aprendido a trabajar con responsive web design trabajando desde mobileFirst, inyectar contenido con ajax, con media querys para los cortes de los distintos anchos de pantalla y cambios de distribución, hemos aprendido javaScript con jquery,todo esto a un nivel, medio,nos queda un mundo por aprender, tambien he estudiado PHP y MySQl, como para hacer cosillas interesantes, pero me queda mucho por recorrer, aunque tengo mucha ilusion, por aprender cada dia mas, tengo 39 años y empece a estudiar esto por que despues de muchas calamidades al final cerro la imprenta en la que trabajaba, prestando mis servicios como impresor de una heidelberg speedmaster de 6 colores. Las artes graficas se han derrumbado en Madrid y este mundo siempre me ha apasionado, ahora me paso el dia delante del mac, leyendo las apis de jquery y la documentación de php.net y esas cosas.
    Estoy empezando en este mundo para dedicarme a esto como profesional y me han encantado vuestros consejos y vuestra filosofia.
    Me ha dado muchos animos y muchas fuerzas, para seguir luchando en este mundo en el que nunca dejamos de aprender, gracias por vuestros consejos, para mi, junto con los profesores que he tenido soys un referente.

    • mentor-admin
      11.a

      Hola David,

      Gracias!!! Nos gustaría escribir más y tenemos planes de hacerlo pronto, pero primero queremos re-diseñar el sitio nuestro pero hemos tenido mucho trabajo.

      Un saludo desde Costa Rica!

  12. Alejandro
    12

    Hola quería consultar si puedo diseñar mi sitio en WebPlus x7 y luego añadirle wordpress para que un tercero administre las entradas (una vez que el sitio está creado y diseñado). WordPress no me agrada, ya que se pierde gran parte del diseño, pero me sirve para que el cliente administre sus entradas. Gracias!!!

    • mentor-admin
      12.a

      Hola Alejandro,

      Debo serte honesto. Nunca hemos usado WebPlus X7…

Deje Su Respuesta a erick

Responder a erick Cancelar respuesta