Yo la verdad consideraba a Dreamweaver el programa estrella e infranqueable para programar páginas webs, y no es para menos ya que tiene una interfaz agradable, funcional y que nos permite añadir código HTML, CSS Jquery y Bootstrap sin escribir una línea de código, además de Snippets de lenguajes como CSS, PHP, Javascript, etc. Y veía a los editores de código como un sinsentido entre ellos a Sublime Text o similares, de hecho, ¡me sigo pareciendo Sublime Text un programa malo por lo que es y encima de eso cuesta $ si quieres que te deje de salir el cartelito molesto diciéndote que compres el programa! Pero es que VS Code fue el que me incitó a romper mi esquema de: “Dreamweaver el Programa Perfecto para crear Páginas Webs”, debido a que me llamó la atención por su apariencia y porque lo veía en varios tutoriales de Youtube, otro programa que probé antes de VS Code fue Brackets, pero la imposibilidad de obtener las extensiones necesarias para explotar todo el potencial necesario de este programa hizo que me desanimara en utilizarlo.

Ojo, comparar a Dreamweaver con Visual Studio Code es una pelea algo injusta, ya que Dreamweaver es un IDE muy avanzado y VS Code es solo un editor de código, además Dreamweaver es de pago, por lo que se espera que un programa de estas características cumpla con los altos estándares y características de un programa de su categoría, siendo además de la línea de Adobe, mientras que VS Code ¡es gratuito! y sus extensiones ¡así lo son! Pese a todo esto puede dar una buena pelea y ponerse a la par en algunas cosas e incluso superar en otras a ¡Dreamweaver! Sin más preámbulos damos paso a esta pelea.

“Ventajas de Dreamweaver”

Es un programa todo en uno, simplemente lo instalas y ¡PUM!, ya tienes todo lo necesario para programar sitios webs. Además, es compatible con la línea de Adobe en programas tales como Photoshop por citar un ejemplo.

Como segunda característica fundamental tiene una interfaz de usuario bastante completa y agradable a la vista. ¡Nos permite diseñar webs en HTML y CSS sin tocar 1 línea de código! Si sabes programar te será más que fácil usar este software, cabe destacar que el resaltado de sintaxis es bueno y tiene un autocompletado de código para todos los lenguajes de desarrollo web comunes, mostrándonos sugerencias de código mientras escribimos y corrección integrada de errores. Si hacemos hover (pasar el mouse encima de un elemento) sobre el enlace de una imagen o un color nos mostrará una pequeña vista previa de la foto o el color que hayamos seleccionado siendo esto bastante cómodo.

¡El diseño de sitios webs en el CSS es brutal! Podemos crear y ver en tiempo real los cambios que aplicamos al documento mediante la vista en vivo que trae integrada, así como los cambios responsivos al reducir el tamaño de la web al momento sin tener que abrir el navegador ya que este programa trae un motor integrado de un navegador en el mismo, aunque siempre conviene revisar los cambios en un navegador en tiempo real. Crear gradientes y aplicar sombras, márgenes y cualquier estilo CSS es muy fácil con este programa, siendo este su principal punto fuerte. También se puede conectar a un servidor de manera remota o local y ver los archivos del mismo, así como subirlos al servidor entre sus diferentes opciones.

Otra característica del mismo serían los snippets integrados con fragmentos de código de PHP, animaciones CSS, entre otras muchas más. Dentro del diseñador que tenemos a la derecha nos permite cambiar entre diferentes lenguajes, teniendo integrado en el mismo Jquery con sus librerías y variantes tales como Jquery UI entre otras. En la pestaña de Fragmentos trae integrado Bootstrap con diferentes snippets del lenguaje, si posees la ultima versión de este software pues tiene Bootstrap 4.0.

Podemos insertar comentarios tocando un botón que tenemos a la izquierda para con este mismo elegir el lenguaje en cuestión sin esfuerzo ni complicación de tener que recordar como se inserta en cada lenguaje de programación, aunque esto no nos quita el hecho de que si elegimos mal el tipo de comentario este se inserte mal en el documento y deje de ser un comentario, pero lo notaremos rápidamente a que nos marcará un error con su resaltado de sintaxis el mismo programa y en cuanto a estilos se trata tenemos un formateador de código a la izquierda que nos estructura de manera correcta y legible nuestro código; cabe destacar que tenemos compatibilidad con los comandos de Emmet dentro de Dreamweaver.

Tenemos también en el diseñador CSS un selector de Medios para ir y buscar directamente una clase CSS sin tener que estar haciendo scroll dentro del documento de la hoja de estilos y además un selector de medios para ir cambiando entre las diferentes reglas de tamaño responsivo de nuestra web, permitiéndonos esta misma herramienta crearlas sin tocar una línea de código CSS, así como insertar las clases correspondientes a cada uno de estos medios, todo sin tocar código alguno salvo que queramos nosotros.

Podemos también tener una vista previa del documento si presionamos F12, esta tecla nos abrirá el navegador que hayamos configurado por defecto, siendo necesario guardar primero para poder visualizar los cambios.

“Desventajas de Dreamweaver”

¡Hugh! Aquí es cuando todo lo que parecía hermoso y perfecto se va por el inodoro y es que pese a que Dreamweaver es súper fácil de usar y bastante cómodo entre comillas tiene un error catastrófico que cuando ocurre te frustra y te hace perder el tiempo, te da una roña cuando ocurre lo siguiente: Resulta ser que a nuestro amiguito Dreamweaver le gusta al parecer cachear las clases de las hojas de estilos, tu tal vez digas: bueno…¿y cuál es el problema? Eso debería ayudar a la carga del sitio, ¿cierto? ¡No! Es pésima ya que llega un momento que el navegador no muestra los estilos que le hemos aplicado al documento y no se visualizan los cambios en las clases CSS y aunque guardemos el documento y lo volvamos a abrir es por gusto, nada, se sigue viendo como antes; y resulta ser que si entras al código fuente de tu archivo CSS mediante el navegador, efectivamente…no se han guardado los cambios en el documento y por ello es que el navegador no mostraba los estilos correctamente; tu tal vez dirás: bueno….cierro el programa, lo vuelvo a abrir y ya está, pero ¡no!, eso no lo arregla, si quieres seguir tu trabajo tienes o que usar otro navegador hasta que a este le vuelva a pasar lo mismo o entrar a las opciones del navegador y borrar la caché, las cookies, etc. Y ahí es entonces cuando puedes seguir tu trabajo con normalidad solo por un tiempo, porque te va a volver a pasar esto de nuevo y vas a tener que repetir este proceso el cual no es nada corto de tiempo, pues el proceso de buscar y borrar la caché de un navegador lleva su tiempito entre lo que entras a la configuración, que buscas la opción de borrar datos de navegación, que luego le dices que quieres borrar todos los datos para luego esperar a que termine de limpiar los datos el navegador has perdido un valioso tiempo de tu trabajo, ahora ¡imagínate tener que hacer esto varias veces!, sobre todo si trabajas mucho tiempo más lo harás; y esto puede que te desconecte de la línea de trabajo que seguías. Si te ha pasado esto alguna vez escríbelo aquí debajo en los comentarios. Este grave error lo tiene que corregir la gente de Adobe pues echa por tierra absolutamente este programa y lo vuelve ineficiente y hablando de ineficiencia veamos su siguiente desventaja.

Es un programa pesado que se siente que consume recursos de nuestra PC, se demora en cargar, pero vamos esto tampoco es para tanto. Pero lo que si molesta es que si has aplicado estilos a una de tus clases CSS y quieres ver los cambios en tiempo real lo más rápido posible no te mostrará ese resultado hasta que ocurra el tiempo de la animación que le has definido a esa clase, dando la sensación de que el programa va lageado, y si tu animación es de 1s o más, ¡uf! Se vuelve incómodo visualizar los cambios en tiempo real en la vista en vivo, lo cual, si quieres hacer ajustes pequeños como, por ejemplo: elegir cual es el tamaño más adecuado entre 5 y 15px de cualquier propiedad, hará que te demores 1s por cada pixel en el que quieras ver la diferencia, algo que si la transición CSS no estuviera activa no pasaría y verías el cambio instantáneamente sin tener que esperar a que termine la animación. Esto es algo que no está bien y espero que la gente de Adobe arregle esto; la verdad es que es increíble como cientos de profesionales que trabajan usando este programa no se han dado cuenta de esto o es que directamente no les importa.

Además, el programa de por sí se siente lento, tu lo usas y sientes que realmente es pesado, esto no te impide trabajar, pero sí que en algunos momentos puntuales se nota, además de que cada vez que abres un proyecto si es en PHP tiene que tocar un botoncito en cada fichero del proyecto diciéndole que detecte el contenido de manera dinámica, algo que te roba un poco de tiempo al empezar tu trabajo.

Algo que se echa en falta y es que esto solo lo tenemos en las propiedades que viene en el diseñador CSS es el Autoprefixer, el cual añade los atributos -moz- -webkit- -o- a las propiedades CSS que así lo necesitan para que sean reconocidas en los diferentes navegadores, pues si no ponemos estas propiedades puede que no nos funcione el estilo que le hayamos agregado a cierta clase, es decir que si ahora tu pones un background-image mediante código directamente en el CSS no te va a añadir los prefijos necesarios de esa etiqueta para cada navegador, por lo tanto si cierta propiedad que así lo requiera no está en el Diseñador CSS y no la añades por ahí tendrás que hacerlo tú manualmente, cosa que realmente quita tiempo sobre todo si no conoces bien el lenguaje y tienes que estarte poniendo a ver y buscar cuales eran las propiedades que requieren de los prefijos. cosa que en VS Code no sucede si le instalamos una extensión; ya de esto estaremos hablando en un próximo artículo sobre las extensiones de VS Code. Bueno, ya no les hago más spoiler.

“Ventajas de Visual Studio Code”

Aquí podemos empezar porque este programa es mucho más rápido y liviano que Dreamweaver, por lo que se cargará e iniciará bastante más rápido que este.

Su personalización es extrema, podemos cambiar desde el tamaño de la fuente, la tipografía de la misma en el editor, cambiar los iconos, el espacio de identado, crear snippets, así como  modificar el resaltado de sintaxis por el que a nosotros nos de la gana de entre la enorme variedad que hay en la tienda de visual studio, cosa que en Dreamweaver no podemos hacer pues solo tenemos 4 temas, entre muchas otras funciones que estaremos comentando en próximos artículos más a profundidad.

Sus extensiones, así como el programa son gratuitos, existen extensiones de pago, pero son muy pocas la verdad, por no decir que prácticamente nulas, yo solo me he topado con una la cual estaré comentando en un próximo artículo, y eso que he buscado y navegado bastante por el Marketplace de Visual Studio probando varias extensiones. El hecho de que las extensiones sean desarrolladas por la comunidad hace que el programa tenga un gran apoyo por parte de la misma y que los usuarios enriquezcan las funcionalidades del programa. Por favor si tu eres de los que pueden programar extensiones para este programa y tienes conocimientos acerca de esto y crees poder crear algo útil y que todavía no existe no dudes en hacerlo pues esto beneficiará en gran manera a la comunidad y a ti también, pues habrá mucha gente que te lo agradecerá si abres un sistema para recibir donaciones y te hará mejorar como programador; así como si tambien tienes las habilidades y el conocimiento para ayudar a la comunidad a resolver sus problemas o mejorar una extensión, también hazlo, pues con esto estas ayudando a corregir problemas y a fortalecer y mejorar la comunidad de desarrolladores, y seguro que te lo agradecerán mucho. Y hablando de agradecer si eres de los que tiene la posibilidad de enviar dinero a través de PayPal u otro sistema de pago, y realmente utilizas y te sirve para tu trabajo y día a día una extensión de algún desarrollador y este te da la posibilidad de enviarle donaciones, por favor no dudes en hacerlo, pues recuerda que él es una persona igual que tú que le ha dedicado tiempo y esfuerzo a crear esa extensión que tan útil te es y al apoyarlo con tu donación lo motivarás a seguir mejorando y desarrollando la misma, además es lo mejor que puedes hacer. Cabe destacar que aquí en Cuba no tenemos esa posibilidad el 99% de la población, pero si tu eres alguien de aquí o de otro país y puedes hacerlo te incito a hacerlo por todas las razones mencionadas anteriormente.

Volviendo al tema principal podemos decir que el resaltado de sintaxis que viene por defecto no es bueno, pero al instalarle algún tema podemos mejorarlo brutalmente mejor que le de Dreamweaver permitiéndonos entender el código de una manera mucho más clara y resultando más agradable a la vista.

Podemos añadirle soporte para cualquier enguaje o crear o añadir cualquier extensión para dotar de cualquier funcionalidad que se nos ocurra al programa siempre y cuando exista o la sepamos programar, cosa que en Dreamweaver no podemos hacer, pues solo podemos tener soporte para los lenguajes para los que fue diseñado el programa y usar solamente las funciones para las que fue programado, no permitiéndote extenderte más allá de sus funcionalidades.

También tenemos la posibilidad de crear snippets personalizados, para escribir código de manera mucho más rápida, cosa que estaremos viendo en un próximo artículo, así como utilizar extensiones que nos ahorren escribir líneas de código mediante los snippets, cosa de la cual carecemos en Dreamweaver, ya que los snippets de este son bastantes limitados en comparación a los que podemos obtener en VS Code y no se invocan mediante código, sino por la intefaz gráfica, cosa que nos hace perder tiempo, a diferencia de visual studio code el cual podemos crearlos y añadirlos a nuestro antojo y sin límites. Cabe destacar que mediante los snippets podemos obtener casi las mismas funcionalidades que las de la interfaz gráfica de Dreamweaver e incluso más funciones en algunos casos, pero con la diferencia que esto sería mediante código, cosa que si los aprendemos a usar nos ahorrarán muchísimo tiempo.

“Desventajas de Visual Studio Code”

Muy pocas, lo único que echo en falta sería la interfaz gráfica del Diseñador de CSS pues esta es muy cómoda y fácil de usar, en especial la parte de diseñar gradientes, pues no hay ninguna extensión en visual studio code que haga esto como en Dreamweaver. Existe el problema de que una extensión te pueda dar problemas en el sentido de que puede que esté mal programada y no se instale o que te tumbe por completo la carga de extensiones como me ocurrió a mi con una extension que convertía Sass a CSS, hasta que deshabilite la aplicación y se solucionó el problema; además puede ocurrir que una extensión no cumpla todas tus expectativas o funcione solo bajo ciertas condiciones como ocurre con una extensión para previsualizar las imágenes en una miniatura que se muestra en el editor, pues esta extensión si tu documento es HTML funciona sin problemas, pero si pones ese mismo link en un docuemento PHP con el cuerpo de un HTML no te funciona, esto no es problema del prgorama sino más bien del que desarrollo la aplicación pero es un punto a tener en cuenta

.Además hecho en falta una vista en vivo sin tener que recargar o guardar para que se muestren los cambios en tiempo real en cualquier lenguaje web incluido PHP dentro y fuera del editor, pues existen extensiones que hacen esto, pero muchas veces es necesario guardar para previsualizar los cambios, puede que no te admita PHP o que no se muestre la vista previa dentro del edito. Eso sería lo que simplemente extraño de Dreamweaver, que si esto es implementado algún día destronará por completo para mi gusto al programa de Adobe.

Conclusiones:

Dreamweaver es un programa recomendado para todo aquel novato que se quieran iniciar en el mundo de la programación por su sencillez y facilidad de uso que nos permiten maquetar sitios web con estilos básicos de HTML y CSS sin tocar código. Además, si quieres tener todas las herramientas necesarias para programar sitios webs sin tener que buscar e instalar extensiones, este programa es para ti.

Por otro lado, Visual Studio Code aporta más funcionalidades en algunos casos que Dreamweaver, permitiéndonos ahorrar mucho más tiempo mediante snippets y siendo un programa altamente personalizable y adaptable a nuestros gustos y necesidades. Además, es mucho más rápido y liviano que el programa de Adobe que mencionamos aquí, estando libre de los errores garrafales de los que carece el mismo, aunque yo apenas todavía no puedo asegurar que no tenga errores pues estoy empezando a usar y probar todas las extensiones que he descargado. Si conoces bien acerca de los lenguajes de programación y quieres escribir y programar como un PRO, este programa sin duda es para ti.

¿Qué te ha parecido este artículo? ¿Qué programa te parece mejor y por qué? Cuéntanos aquí abajo en los comentarios, gracias por leer este artículo.