La primera versión de Dreamweaver, diseñada para el sistema operativo de Apple Mac Os 8, vio la luz en 1997 de la mano de Macromedia y, solo tres meses más tarde, la versión 1.2 implementó el soporte para sistemas de Microsoft. Diez años más tarde, Adobe adquirió este software de desarrollo web integrándolo en su suite creativa, entretanto convertida en la Creative Cloud, en substitución del Editor GoLive incluido hasta el momento. Para poder utilizar esta completa herramienta para la creación y el diseño de aplicaciones web responsivas es posible optar por una suscripción individual o por alquilar el paquete completo, siendo este el principal motivo de que sea utilizado en gran medida por el sector profesional de la edición web.
A continuación introducimos brevemente la herramienta de Adobe para presentar algunas alternativas a Dreamweaver, en parte gratuitas, y establecer una comparativa respecto al gran rival.
Dreamweaver despunta por su interfaz tan propia de Adobe y que los usuarios de Photoshop, InDesign o Illustrator conocen tan bien. La amplitud de las funciones del editor de HTML, ascendido a la categoría de estándar en términos de edición WYSIWYG, ha experimentado un crecimiento exponencial desde el lanzamiento de la nube creativa, lo que convierte a la escritura de código casi en un juego de niños. Esto es lo que permite, por ejemplo, revisar las modificaciones realizadas en tiempo real sin tener que actualizar el navegador, o editar código CSS directamente en el archivo HTML gracias al nuevo modo de edición rápida (Inline Editor). El nuevo motor de programación resulta de gran ayuda para escribir código limpio, ya que, gracias al soporte de Emmet, completa el código y crea sangrías de forma automática, así como también señala cromáticamente elementos de la misma clase. Remarcables son también las siguientes prestaciones:
Quien tenga acceso a todos los productos de la nube creativa de Adobe y sea experto en Dreamweaver no se encuentra con la dificultad de aquellos con un presupuesto más reducido, que se ven forzados a buscar alternativas buenas y baratas –y, mejor aún, gratuitas– a la popular herramienta de programación. Los siguientes párrafos se ocupan de cinco dignos representantes de los editores de código gratis y de sus diferencias y similitudes con el editor de la casa Adobe, con el objetivo de examinar su verdadera utilidad y validez como alternativas a Dreamweaver.
El sucesor de Nvu, el editor BlueGriffon, de Disruptive Innovations, se basa en el motor de renderizado Gecko, escrito en C++ y utilizado por el navegador Firefox. El editor WYSIWYG implementado hace posible crear y editar páginas en HTML4, HTML5 o XHTML, cuya calidad es posible comprobar en tiempo real gracias al modo de vista previa. Está disponible en 20 idiomas, entre ellos español, italiano, francés, alemán e inglés.
BlueGriffon funciona con las versiones más modernas de Windows (desde la 7) y macOS (desde la 10.8), así como, a diferencia de Dreamweaver, con la distribución Ubuntu desde la versión 16.04.
Entre sus características más importantes destacamos:
A estas funciones incluidas en la versión freeware de BlueGriffon se añade una serie de componentes opcionales de primera clase accesibles mediante licencia. La versión propietaria del editor contiene, entre otras cosas, un editor de CSS optimizado que incluye un editor visual de selectores de CSS, un Toolkit manager que permite añadir muy fácilmente varios archivos JavaScript y CSS, así como acceso a más de 2.500 plantillas.
Los componentes opensource de BlueGriffon se encuentran en GitHub o en su página web oficial, donde también es posible adquirir la versión propietaria.
| Pros | Contras |
|---|---|
| ✔ Soporta HTML5 | ✘ No soporta PHP |
| ✔ Editor SVG propio | ✘ Interfaz de usuario compleja |
| ✔ Elevada compatibilidad | |
| ✔ Dispone de muchas extensiones opcionales |
También el software de programación y desarrollo web KompoZer desciende del proyecto de Mozilla Nvu y también se basa en el motor Gecko. Inicialmente consistente en pequeñas mejoras al software de Nvu, cuyo autor abandonó su desarrollo en 2006, el programa acabó tomando un camino independiente hasta que se publicó como editor web autónomo bajo las licencias libres GNU GPL (GNU General Public License), GNU LGPL (GNU Lesser General Public License) y MPL (Mozilla Public License). El equipo de Mozilla interrumpe su desarrollo en 2010, pero aun así el software está operativo en todos los sistemas Windows, macOs y Ubuntu (desde la versión 14.04). Hoy cuenta con soporte para más de veinte idiomas, entre ellos español, inglés, francés, italiano y alemán.
Aun cuando KompoZer no pertenece al grupo de alternativas a Dreamweaver que puedan competir realmente con aquél en cuanto a funciones y complejidad, la aplicación libre ofrece a sus usuarios algunas características que permiten editar páginas web diseñadas profesionalmente, como son:
Cabe mencionar que la herramienta dispone de un gran número de extensiones que atienden a finalidades tan útiles como la del Link Checker, que comprueba la validez de los enlaces integrados en el proyecto.
Sin embargo, como posible alternativa a Dreamweaver, se echa de menos en KompoZer hasta hoy la compatibilidad con PHP o el soporte de los estándares web contemporáneos CSS3 y HTML5.
En la página web de KompoZer se pueden descargar todas las versiones para las diferentes plataformas, se accede a una detallada documentación y se pueden notificar errores del programa o proponer funciones nuevas.
| Pros | Contras |
|---|---|
| ✔ Ágil editor WYSIWYG con vista previa | ✘ No soporta PHP |
| ✔ Disponible en más de 30 idiomas | ✘ Su desarrollo se ha interrumpido |
| ✔ Los archivos del programa pesan muy poco | ✘ No soporta estándares modernos como HMTL5 o CSS3 |
En este caso estamos ante una alternativa a Dreamweaver de código abierto lanzada por Adobe mismo en 2011 como proyecto comunitario. En el repositorio de Brackets en GitHub se encuentran hoy más de 5500 bifurcaciones de este editor de código gratis, protegido con una licencia MIT y basado en HTML, CSS y JavaScript. Brackets puede usarse con Windows y Mac tanto como con Linux (Ubuntu y Debian), aunque en este último caso sin el abanico de funciones completo. Funcionando con el entorno de ejecución de JavaScrip Node.js, Brackets admite la ampliación con extensiones, entre las que se incluye un editor WYSIWYG que no integra la versión estándar. En esta alternativa a Dreamweaver no se puede comprobar la vista previa del código en el mismo programa, aunque se puede ir comprobando el estado del proyecto en Google Chrome, si se tiene instalado.
Tres son los componentes elementales de este moderno editor web que los desarrolladores de Brackets destacan especialmente:
La gran ventaja de Brackets es la ya mencionada escalabilidad gracias al enorme compromiso de la comunidad de apoyo, que lanza extensiones nuevas casi con regularidad semanal. Son especialmente populares, entre otras, el validador de W3C, el plugin Emmet y el Beautify, una herramienta de optimización de HTML, JavaScript y código CSS. Esta flexibilidad es la que convierte a esta plataforma de desarrollo en una de las mejores alternativas a Dreamweaver disponibles.
| Pros | Contras |
|---|---|
| ✔ Desarrollo permanente por la comunidad | ✘ No soporta PHP |
| ✔ Compatibilidad con preprocesores CSS | ✘ La versión para Linux no tiene todas las funciones |
| ✔ Editores integrados (inline) para CSS y JavaScript | ✘ Interfaz WYSIWYG solo disponible con extensión |
Aptana Studio es el entorno libre e integrado de desarrollo de Aptana Inc. Esta plataforma se basa en la herramienta de Java Eclipse y soporta diversos lenguajes de programación como PHP, Python y Ruby además de JavaScript, HTML5 y CSS3. También se pueden integrar en la aplicación las bibliotecas Ajax jQuery, Prototype o script.aculo.us para utilizarlas en el proceso de desarrollo. Nuestra cuarta alternativa a Dreamweaver está disponible como versión independiente para Windows (desde XP), Linux (desde Ubuntu 9.04 / Fedora 12) y macOS (desde OS X 10.5) y también como extensión Eclipse (desde Eclipse 3.6). Su equipo de desarrollo distribuye Aptana Studio bajo un modelo de licencia dual, según la cual los usuarios pueden bien decantarse por una combinación de licencia GNU-GPL y Aptana-GPL-Exception o por la licencia pública de Aptana (APL).
Además del amplio soporte de lenguajes de programación y de plataformas, estas características diferencian a este editor web:
Gracias a la estrecha vinculación con Eclipse, esta herramienta también ofrece sus funciones fundamentales, entre las que se cuentan la acentuación sintáctica por colores, el completamiento inteligente de código o la conclusión automática de etiquetas. Además de esto, este editor de código gratis provee soporte a los estándares web más modernos como HTML5.
En su página web se accede a los archivos de instalación para todas las plataformas, así como al plugin Eclipse. En GitHub, por su parte, se puede descargar el código fuente de los componentes centrales y diversas extensiones para el editor web.
| Pros | Contras |
|---|---|
| ✔ Soporta diferentes lenguajes como Perl, Python, PHP y Ruby | ✘ Numerosas dependencias, entre otras de Java, Git y Eclipse (en la extensión) |
| ✔ Control de versiones gracias a Git | ✘ Solo disponible en inglés |
| ✔ Compatible con las más modernas tecnologías web | ✘ La instalación solo funciona si se tiene instalado Node.js, algo que no indica Aptana |
| ✘ La interfaz gráfica es compleja |
En 2014, el servicio de alojamiento para todo tipo de proyectos de desarrollo GitHub publicó su propio editor web. El fundamento lo constituye el framework multiplataforma Electron (antes Atom Core), que combina el navegador Chromium con el entorno de ejecución JavaScript Node.js y lleva, asimismo, la firma de los desarrolladores de GitHub.
Inicialmente, las extensiones y diversos paquetes fueron los únicos publicados con licencia de código abierto hasta que, finalmente, GitHub decidió distribuir bajo una licencia MIT también el código fuente del proyecto completo, incluyendo todos los “Packages” estándar, como se denominó a los módulos de funciones del editor. Las funciones del editor web son accesibles a través de diversos API de JavaScript, aunque los desarrolladores recomiendan usar CoffeeScript en lugar de JavaScript. Para contenidos CSS, Atom utiliza como estándar el lenguaje de hojas de estilo simplificado Less.
Con los plugins correspondientes, este editor alternativo a Dreamweaver provee de soporte a diversos lenguajes como PHP, Ruby, Java, C, C++, Python y Perl, que se suman a los más recientes estándares de HTML, CSS y JavaScript o CoffeeScript.
Entre las numerosas prestaciones de Atom se cuentan:
Junto al elevado confort para el usuario que facilita la edición de código, es sobre todo la capacidad de ser ampliado la que convierte a este editor modular en una muy buena alternativa a Dreamweaver. Los más de 90 paquetes y 13 temas para interfaz conceden una gran diversidad funcional a la instalación estándar, incluyendo la mencionada excelente compatibilidad entre lenguajes, y, si se echa de menos alguna característica, merece la pena asomarse al directorio de extensiones de la página principal de Atom para acceder a un sinnúmero de paquetes y temas desarrollados y publicados por la comunidad. Entre otros, se encuentra aquí un paquete que añade al editor una función de vista previa en directo del código HTML.
Son, en cambio, discutibles los paquetes core metrics y exception-reporting. El primero envía datos a Google Analytics, mientras que el segundo envía al equipo de desarrolladores eventos extraordinarios como caídas, fallos, etc., mediante bugsnag.com. Aun cuando ambos paquetes tienen como única finalidad la mejora del software, se recomienda desactivarlos en la configuración.
En la página oficial de Atom o en GitHub se pueden descargar la versión actual y las antiguas del software, que sigue estando únicamente disponible en inglés y que funciona con Windows, macOs y Linux (Ubuntu de 64 bits, Debian, Fedora).
| Pros | Contras |
|---|---|
| ✔ Gran capacidad de ampliación | ✘ La interfaz solo está disponible en inglés |
| ✔ Soluciones integradas para gestionar paquetes y controlar las versiones | ✘ Paquetes estándar para recolectar datos que despiertan dudas, aunque se pueden desactivar fácilmente |
| ✔ Elevada compatibilidad con otros lenguajes (entre otros, PHP, HTML, CSS, JavaScript, Java, JSON, SQL) |
Adobe Dreamweaver ofrece a los programadores, en sus primeros pasos, un paquete de desarrollo web muy amplio, que gracias a un sinnúmero de funciones y a la integración en la nube creativa de Adobe ofrece todo lo que se necesita para crear una página de gran calidad. Eso sí, vinculado a una elevada complejidad y a gastos continuados, sin ser precisamente el software de la casa Adobe parco en recursos. Los desarrolladores con más experiencia suelen decantarse, por estos motivos, por editores que permitan una mayor libertad de movimiento.
Los editores de código gratis que hemos presentado en esta guía pueden considerarse, en cierta medida, una vía intermedia entre el principio modular del software de Adobe y la árida programación con un editor de texto simple. Esto es debido al código libre, que dota a estos editores open source de una gran flexibilidad. Es así como, por ejemplo, un programa como Atom puede usarse como un editor minimalista con resaltado sintáctico y sugerencias de código o como entorno de desarrollo prácticamente equiparable a la opción comercial.
Por otro lado, sin embargo, es importante ser consciente de las carencias en cuanto a estabilidad de las soluciones gratuitas, que en cambio sí puede garantizar la casa Adobe, que trabaja constantemente en el desarrollo del software, está al tanto de los últimos estándares web y se ocupa de ofrecer un paquete cien por cien funcional y preciso madurado durante más de una década. Si aparecen problemas con el software o el usuario necesita ayuda en su proyecto, puede contar con un soporte competente, aunque algunas soluciones open source como BlueGriffon (de pago) también lo ofrecen. En el caso de las soluciones gratuitas se depende del apoyo de la comunidad, sin importar si se trata de dificultades técnicas con el programa o de cuestiones relativas al desarrollo del software.
| Disponible para | Paquete en español | HTML5 y CSS3 | PHP | Características | |
|---|---|---|---|---|---|
| Atom | Windows, macOS, Linux | No | Sí | Sí | Gestor de paquetes integrado |
| Aptana Studio | Windows, macOS, Linux | No | Sí | Sí | Depurador para JavaScript y Ruby on Rails, basado en Eclipse |
| BlueGriffon | Windows, macOS, Ubuntu | Sí | Sí | No | Editor de SVG, funciones opcionales comerciales |
| Brackets | Windows, macOS, Linux (limitado) | Sí | Sí | No | Editor en línea para CSS y JavaScript |
| KompoZer | Windows, macOS, Ubuntu | Sí | No | No | Tamaño de archivo reducido |
Mientras que el usuario puede estructurar automáticamente la información de una página web mientras la lee, los robots de los buscadores necesitan indicadores especiales para interpretar sus conexiones semánticas. Esta información adicional se puede integrar en el código HTML mediante datos estructrurados. Para ello, los webmasters disponen de cuatro formatos, microformatos, RDFa, microdatos y...
Hoy en día, los desarrolladores web tienen una tarea fundamental y es la usabilidad. El diseño responsivo y todas aquellas medidas para garantizar la accesibilidad son los recursos de los diseñadores para reaccionar al creciente tráfico móvil sin descuidar el diseño. Desde febrero de 2016, los administradores de blogs y periódicos disponen también de las Accelerated Mobile Pages, la última...
A menudo, el camino a recorrer desde la concepción de una idea hasta el producto final suele ser largo y tedioso, algo que también se aplica al desarrollo web de una página o de una aplicación. Uno de los pasos cruciales para poner en práctica el concepto previsto es la visualización de las ideas de diseño, estructura y funcionalidad. La maquetación web, principalmente a través de mockups y...
Si ya tienes experiencia trabajando con CSS y buscas un framework especialmente flexible e individual, Tailwind CSS es una gran elección. La solución para profesionales simplifica el trabajo y ofrece numerosas opciones de diseño. Sigue leyendo para saber más sobre el framework y por qué a los principiantes les puede ir mejor utilizar una alternativa a Tailwind CSS.
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
Ver packs
