Vijf alternatieven
voor Dreamweaver
die je moet kennen

De geschiedenis van Adobe Dreamweaver in een notendop

In 1997 publiceerde Macromedia de eerste versie van Dreamweaver, in eerste instantie alleen voor het Apple-besturingssysteem Mac OS 8. Na ongeveer drie maanden, met versie 1.2, werd ook de ondersteuning voor Microsoft Windows-systemen geïmplementeerd. Tien jaar later nam de softwareontwikkelaar Adobe de webontwikkelingssoftware over en voegde deze toe aan zijn Creative Suite (die inmiddels is opgevolgd door de Creative Cloud) als vervanging voor de editor GoLive. Wie de zeer omvangrijke toepassing voor het maken van mockups en vormgeven van responsieve websites wil gebruiken, moet ofwel het aangeboden abonnement voor één app afsluiten, of het complete Creative Cloud-pakket huren. Daarom werken hoofdzakelijk professionele gebruikers met de software.

In deze leidraad worden eerst kort de bijzonderheden van het Adobe-programma toegelicht en daarna interessante, grotendeels kosteloze alternatieven voor Dreamweaver gepresenteerd.


Zo onderscheidt Adobe Dreamweaver zich

Dreamweaver valt op met zijn voor Adobe typische interface, waar gebruikers van onder andere Photoshop, InDesign en Illustrator al bekend mee zullen zijn. Het aantal verschillende functies van de HTML-editor, die wat betreft WYSIWYG ongenaakbaar is, is vooral sinds de lancering van de Creative Cloud aanzienlijk toegenomen. Daardoor is het schrijven van codes kinderspel geworden. Zo kunnen bijvoorbeeld alle wijzigingen live worden bekeken, zonder steeds de pagina te moeten vernieuwen, en kan een CSS-code dankzij een inline-editor direct in het HTML-bestand worden bewerkt. Verder helpt de geïntegreerde coderingsengine een zuivere code te schrijven, doordat snippets door middel van Emmet-ondersteuning automatisch worden aangevuld. Tevens worden automatische inspringingen gegenereerd en bij elkaar horende elementen worden gekleurd weergegeven. Daarnaast biedt Dreamweaver de volgende features:

  • codevalidatie
  • ondersteuning van CSS-preprocessors (Sass, Less)
  • ondersteuning van PHP (vanaf PHP 5.4)
  • meerdere cursors om verschillende coderegels tegelijkertijd te schrijven en te bewerken
  • geïntegreerde CSS-framework bootstrap voor responsief webdesign
  • toegang tot licentievrije foto's en vectorafbeeldingen van Adobe Stock
  • eenvoudige toegang tot eigen afbeeldingen, designs en andere assets via de Creative Cloud

Welke kosteloze Dreamweaver-alternatieven zijn er?

Wie toegang heeft tot alle producten van de Creative Cloud en ervaren is in het gebruik van Dreamweaver, weet dat je met de software van Adobe een goed pakket in handen hebt. Voor ontwikkelaars met een beperkt budget zijn er echter goede Dreamweaver-alternatieven, die gratis te gebruiken zijn. In de volgende alinea’s stellen we vijf interessante vervangers voor. Daarbij willen we enerzijds hun eigenschappen en bijzonderheden laten zien, maar anderzijds willen we ook de verschillen en overeenkomsten met de software van Adobe belichten en de bruikbaarheid van de verschillende tools onder de loep nemen.


Alternatieven voor Dreamweaver: BlueGriffon

BlueGriffon

De Composer/Nvu-opvolger BlueGriffon van Disruptive Innovations maakt gebruik van de rendering engine Gecko, die in C++ is geschreven en onder andere in de webbrowser Firefox wordt gebruikt, als basis voor de geïntegreerde WYSIWYG-editor. Hiermee kunnen HTML4-, HTML5- en XHTML-pagina's worden gemaakt en bewerkt, die je tijdens het creëren meteen al in een voorbeeldversie kunt bekijken. De gebruikersinterface is beschikbaar in 20 talen, waaronder Nederlands, Engels, Duits, Spaans en Frans. BlueGriffon loopt op nieuwe Windows- (vanaf 7) en macOS-systemen (vanaf 10.8) alsook, in tegenstelling tot Dreamweaver, op de Linuxdistributie Ubuntu (vanaf 16.04). Verder wordt de webeditor gekenmerkt door de volgende eigenschappen:

  • eenvoudige integratie van HTML5-formulieren, -video's en –audiobestanden
  • CSS-editor (mogelijkheid tot 2D- en 3D-transformatietechnieken)
  • SVG-editor
  • font manager voor Font Squirrel en Google Fonts
  • syntaxiskleuring en automatische aanvulling
  • aanpasbare menubalken en sneltoetsen
  • toegankelijkheid dankzij ARIA (Accessible Rich Internet Applications)

Alternatieven voor Dreamweaver: gebruikersinterface van BlueGriffon
Engelstalige gebruikersinterface van BlueGriffon

Naast deze functies, die je in de freeware-variant van BlueGriffon gratis kunt gebruiken, zijn er een aantal hoogwaardige aanvullende componenten, die je kunt verkrijgen door eenmalig een licentie te kopen voor het Dreamweaver-alternatief. De betaalde versie bevat onder andere een verbeterde CSS-editor, inclusief visuele CSS-selectoreditor, een toolkitmanager voor het invoegen van meerdere JavaScript- en CSS-bestanden met slechts één klik, alsook toegang tot ruim 2.500 kant-en-klare sjablonen. De opensourcecomponenten van BlueGriffon vind je op GitHub of op de homepage van de officiële website. Op de laatstgenoemde pagina kun je ook de licentie kopen, mocht je interesse hebben in de aanvullende functies.

Voordelen Nadelen
Ondersteunt HTML5 Ontbrekende ondersteuning van PHP
Eigen SVG-editor Ingewikkelde gebruikersinterface
Goede compatibiliteit
Veel extensions beschikbaar

Alternatieven voor Dreamweaver: KompoZer

KompoZer

Ook de webontwikkelingssoftware KompoZer is voortgekomen uit het Mozilla-project Nvu en is dus eveneens gebaseerd op de Gecko-engine. In eerste instantie was KompoZer alleen een geoptimaliseerde versie van de Nvu-software, totdat het programma uiteindelijk als zelfstandige webeditor onder de vrije licenties GNU GPL (GNU General Public License), GNU LGPL (GNU Lesser General Public License) en MPL (Mozilla Public License) werd gepubliceerd. Het team van Mozilla heeft de ontwikkeling in 2010 stopgezet, maar de software is nog steeds op alle gebruikelijke Windows- en macOS-systemen, alsook op Ubuntu (vanaf versie 14.04) te gebruiken. Voor KompoZer bestaan er inmiddels meer dan 20 verschillende taalpakketten, waaronder Nederlands, Engels, Duits, Frans, Italiaans en Spaans.

KompoZer behoort weliswaar niet tot de Dreamweaver-alternatieven die het Adobe-programma wat betreft aantal functies en complexiteit kunnen bijhouden, maar de opensourcetoepassing biedt zijn gebruikers toch enkele functies waarmee een professioneel design voor websites kan worden gemaakt:

  • sterke WYSIWYG-editor, waarmee eenvoudig tussen code en voorbeeld kan worden geschakeld
  • geïntegreerde CSS-editor, inclusief importfunctie voor bestaande stylesheets
  • aanpasbare menubalken
  • spellingcontrole en syntaxiskleuring
  • tabbladen om tegelijkertijd meerdere pagina's te bewerken
  • formulierassistent
  • geïntegreerde markup-cleaner die je projecten op W3C-conformiteit controleert
  • FTP-paginamanager, inclusief drag-and-dropfunctie voor mediabestanden zoals afbeeldingen

Alternatieven voor Dreamweaver: Gebruikersinterface van KompoZer
Gebruikersinterface van KompoZer

Daarnaast zijn er voor het programma een aantal nuttige extensions, bijvoorbeeld een linkchecker, waarmee de geldigheid van geïntegreerde koppelingen kan worden gecontroleerd. Als mogelijk alternatief voor Dreamweaver van Adobe ontbreekt het KompoZer echter zowel aan de ondersteuning van PHP als aan de ondersteuning van nieuwere webstandaards, zoals CSS3 en HTML5. Alle downloadversies voor de verschillende besturingssystemen, alsook een uitvoerige documentatie, vind je op de officiële website.

Voordelen Nadelen
Snel werkende WYSIWYG-editor met voorbeeldfunctie Ontbrekende ondersteuning van PHP
Beschikbaar in meer dan 20 talen Ontwikkeling stopgezet
Programmabestanden zijn slechts enkele MB groot Ondersteunt moderne standaards als HTML5 of CSS3 niet

Alternatieven voor Dreamweaver: Brackets

Brackets

Brackets is een opensource-alternatief voor Dreamweaver, dat Adobe in 2011 zelf als communityproject in het leven heeft geroepen. In de officiële GitHub-repository vindt je tegenwoordig meer dan 5.500 forks van de software met MIT-licentie die is gebaseerd op HTML, CSS en JavaScript. De webeditor is beschikbaar voor Windows, Mac en Linux (Ubuntu en Debian), maar de Linuxvarianten bevatten niet alle functies. Brackets draait op basis van de JavaScript-toepassing Node.js en kan door talrijke extensions worden aangevuld: onder andere door een WYSIWYG-editor, die niet tot de standaarduitvoering behoort.

In dit Dreamweaver-alternatief zie je het resultaat van je code dus niet standaard direct in het programma. Je kunt het voorlopige resultaat van je webproject echter wel op elk moment in Google Chrome bekijken. Hiervoor moet je natuurlijk wel de internetbrowser installeren. De ontwikkelaars van Brackets leggen de nadruk op drie fundamentele eigenschappen voor de moderne webeditor:

  • Snel bewerken: Brackets vormt het perfecte platform voor het schrijven van een code. Als je het programma opent, kun je meteen beginnen te schrijven. Daarbij moet je niet tussen verschillende bestanden voor HTML, CSS en JavaScript heen en weer schakelen, maar gebruik je gewoon geïntegreerde editors voor stylesheets en scripts direct in het HTML-document. Je kiest het gewenste element uit en opent dan met behulp van shortcuts de genoemde bewerkingsvensters.
  • Live voorbeeld: als je de voorbeeldfunctie met Chrome gebruikt, stuurt Brackets automatisch alle wijzigingen in de HTML- en CSS-code direct naar de webbrowser, zodat je meteen kunt controleren of de wijzigingen het gewenste effect hebben. Wijzigingen in JavaScript-toepassingen zijn tot nu toe nog niet in de voorbeeldfunctie geïntegreerd, maar volgens de ontwikkelaar is deze functie wel gepland. Het is wel al mogelijk JavaScript-wijzigingen in het voorbeeld te zien door het Bracketsproject eerst op te slaan.
  • Ondersteuning van preprocessors: codebewerking blinkt in het kosteloze alternatief voor Dreamweaver niet alleen uit door een hoge snelheid, maar ook door de mogelijkheid Less- en SCSS-bestanden te gebruiken, dankzij de ondersteuning van de CSS-preprocessors Less en Sass. Met hun vereenvoudigde syntaxis, waarmee Brackets geen enkele moeite heeft, schrijf en bewerk je de stylesheets nog sneller.

Alternatieven voor Dreamweaver: Brackets-interface
Screenshot van de Brackets-interface

Brackets profiteert vooral van de eerder genoemde uitbreidbaarheid door de grote betrokkenheid van de community: vrijwel elke week verschijnen er nieuwe plug-ins. Zeer populair zijn onder andere de W3C-validator, de Emmet-plug-in en Beautify, een tool om de HTML-, JavaScript- en CSS-code te optimaliseren. De eenvoudige en veelzijdige uitbreidingsmogelijkheid van het ontwikkelingsplatform maakt Brackets zonder twijfel een van de beste Dreamweaver-alternatieven.

Voordelen Nadelen
Permanente ontwikkeling door de community Ontbrekende ondersteuning van PHP
Ondersteuning van CSS-preprocessors Beperkte functies in de Linuxversies
Inline-editors voor CSS en JavaScript WYSIWYG-interface alleen beschikbaar als extension

Alternatieven voor Dreamweaver: Aptana Studio

Aptana Studio

Aptana Studio is een vrije, geïntegreerde ontwikkelomgeving van het bedrijf Aptana Inc. Het platform is gebaseerd op de Java-tool Eclipse en ondersteunt naast JavaScript, HTML5 en CSS3 ook diverse programmeertalen zoals PHP, Python en Ruby. Daarnaast kunnen Ajax-bibliotheken als jQuery, Prototype of script.aculo.us direct aan de toepassing worden toegevoegd en voor het ontwikkelingsproces worden gebruikt. Het Dreamweaver-alternatief is beschikbaar als standalone versie voor Windows (vanaf XP), Linux (vanaf Ubuntu 9.04/Fedora 12) en macOS (vanaf OS X 10.5), alsook als Eclipse-plug-in (ten minste Eclipse 3.6). Het team van ontwikkelaars verspreidt Aptana Studio aan de hand van een duaal licentiemodel: gebruikers kunnen ofwel een combinatie van GNU-GPL-licentie en Aptana-GPL Exception of de Aptana Public License (APL) kiezen.

Naast de brede ondersteuning van programmeertalen en platforms heeft de webeditor de volgende kenmerkende features:

  • Code-assistent: de code-assistent stelt mogelijke argumenten, eigenschappen of methoden voor en geeft bovendien de ondersteuning van alle HTML-, CSS- en JavaScript-elementen van je webproject in de gebruikelijke internetbrowsers aan.
  • Geïntegreerde debuggers: JavaScript- en Ruby-on-Rails-debuggers zijn al geïntegreerd en helpen fouten in je webapplicatie op te sporen en te verhelpen.
  • Deployment wizard: Aptana Studio biedt met de deployment wizard een tool aan die je helpt bij het uploaden, downloaden en de synchronisatie van de bestanden van je webproject via FTP, SFTP en FTPS.
  • Versiecontrole: je kunt je webproject eenvoudig aan Git koppelen en er zodoende voor zorgen dat je veilig samen aan de broncode kunt werken, zoals bijvoorbeeld online mogelijk is bij GitHub.
  • Geïntegreerde tool voor commandoregels: dankzij de ingebouwde terminal voer je systeemcommando's direct uit in Aptana Studio.
  • Flexibele ontwikkelomgeving: je kunt Aptana Studio naar wens configureren en de basismogelijkheden uitbreiden met scripts voor standaardcommando's. Daarnaast kun je shortcuts instellen voor de optimale bruikbaarheid.

Alternatieven voor Dreamweaver: Visuele interface van Aptana Studio
Visuele interface van Aptana Studio

Dankzij de nauwe verbinding met Eclipse bevat het kosteloze alternatief voor Dreamweaver ook diens basisfuncties. Voorbeelden daarvan zijn de visuele syntaxiskleuring, de intelligente codeaanvulling of het automatisch sluiten van geopende tags. Bovendien ondersteunt Aptana Studio de nieuwste webstandaards, zoals HTML5. Installatiebestanden voor alle platforms en de Eclipse-plug-in vind je op de officiële website. Op GitHub kunnen de basiscomponenten alsook diverse plug-ins voor de webeditor worden gedownload.

Voordelen Nadelen
Ondersteunt diverse programmeertalen zoals Perl, Python, PHP en Ruby Onder andere afhankelijk van Java, Git en Eclipse (in de variant als plug-in)
Versiecontrole met behulp van Git Geen Nederlands taalpakket
Ondersteunt de nieuwste webtechnologieënKan alleen worden geïnstalleerd als Node.js is geïnstalleerd – Aptana wijst hier echter niet op
Gebruikersinterface zeer ingewikkeld

Alternatieven voor Dreamweaver: Atom

Atom

Onder de naam Atom heeft GitHub, de hostingdienst voor allerlei ontwikkelingsprojecten, in 2014 zijn eigen alternatief voor Dreamweaver uitgebracht. Als basis voor deze webeditor fungeert het framework Electron (voorheen Atom Shell), dat de browser Chromium met de JavaScript-toepassing Node.js combineert en eveneens door GitHub is ontwikkeld. Nadat eerst alleen extensions en pakketten onder een opensourcelicentie beschikbaar werden gesteld, besloot GitHub uiteindelijk ook de broncode van het volledige project inclusief alle standaard ‘packages’, zoals de functiemodules van de editor worden genoemd, onder de MIT-licentie beschikbaar te stellen. De functies van de webeditor zijn bereikbaar via afzonderlijke JavaScript-API's, waarbij de ontwikkelaars het gebruik van CoffeeScript in plaats van JavaScript adviseren. Voor CSS-inhoud is in Atom de vereenvoudigde stylesheet-taal Less als standaard ingesteld.

De webeditor ondersteunt dankzij plug-ins niet alleen de nieuwste standaards van HTML, CSS en JavaScript of CoffeeScript, maar ook diverse programmeertalen, zoals PHP, Ruby, Java, C, C++, Python en Perl. Tot de veelzijdige features van het kosteloze alternatief voor Dreamweaver behoren onder andere:

  • Geïntegreerde ‘Package Manager’: Atom heeft zijn eigen package manager apm (Atom Package Manager), waarmee de integratie en installatie van packages kinderspel wordt.
  • Automatische aanvulling: afhankelijk van met welke programmeertaal je werkt, komt Atom tijdens het schrijven met suggesties om de code aan te vullen. Met een druk op een toets kunnen deze voorstellen dan worden aangenomen. Bovendien kan de pool van mogelijke voorstellen worden aangevuld met eigen codesnippets.
  • Syntaxiskleuring: voor geïnstalleerde programmeertalen biedt het Dreamweaver-alternatief syntaxiskleuring voor de belangrijkste regels. Als deze optie is ingesteld, worden de bij elkaar horende regels automatisch in kleur weergegeven.
  • Versiebeheer: zoals je zou verwachten, heeft Atom als GitHub-toepassing de versiecontroletool Git geïmplementeerd. Deze tool helpt je het overzicht over wijzigingen in je webproject te bewaren. Je kunt de editor bijvoorbeeld zo instellen dat gewijzigde regels worden gemarkeerd.
  • Bestandensysteembrowser: dankzij de bestandensysteembrowser zoek en open je losse bestanden, een compleet project of zelfs meerdere projecten heel eenvoudig in een enkel venster.
  • Commandopaneel: via een simpele toetsencombinatie roep je een zoekvenster op, waarmee je beschikbare commando's kunt vinden en deze eenvoudig kunt gebruiken.

Alternatieven voor Dreamweaver: Menu van de webeditor Atom
Menu van de webeditor Atom

Naast het hoge gebruikscomfort, dat het coderen aanzienlijk vereenvoudigt, maakt vooral de uitbreidbaarheid de modulair opgebouwde webeditor een goed Dreamweaver-alternatief. Meer dan 90 packages en 13 themes voor de gebruikersinterface (stand: december 2016) geven de standaardinstallatie een groot aantal functies, inclusief de genoemde uitstekende compatibiliteit met programmeertalen. Mis je een functie, neem dan eens een kijkje in de map met extensions op de Atom-homepage. Hier heb je toegang tot duizenden andere packages en themes die door de betrokken community zijn ontwikkeld en uitgebracht. Zo vind je hier bijvoorbeeld een pakket dat de webeditor uitbreidt met een livevoorbeeldfunctie van je HTML-code.

Discutabel zijn de twee standaardpackages ‘metrics’ en ‘exception reporting’. De eerste zendt gegevens aan Google Analytics en de tweede geeft abnormale gebeurtenissen (programmacrashes, fouten, enz.) via bugsnag.com door aan het team van ontwikkelaars van Atom. Ook al dienen beide packages om de Atomsoftware te verbeteren, is het toch beter deze instellingen te deactiveren. Tot op heden heeft het Dreamweaver-alternatief nog geen Nederlandstalige gebruikersinterface. Actuele en oudere versies van het GitHub-programma, dat op Windows, macOS en Linux (64-bit Ubuntu, Debian, Fedora) draait, kun je downloaden op de officiële website of in de GitHub-map.

Voordelen Nadelen
In hoge mate uitbreidbaarGeen Nederlandstalige gebruikersinterface
Geïntegreerde oplossingen voor het beheren van packages en versiecontrole Bedenkelijke (maar deactiveerbare) standaardpackages voor het verzamelen van gegevens
Uitstekende ondersteuning van programmeertalen (onder andere PHP, HTML, CSS, JavaScript, Java, JSON, SQL)

De beste Dreamweaver-alternatieven uit het opensourceveld: conclusie

Adobe Dreamweaver biedt nieuwelingen op het gebied van programmeren een omvangrijk totaalpakket voor het ontwikkelen van websites, dat dankzij de talrijke functies en de directe koppeling aan de Creative Cloud zonder twijfel alles in huis heeft wat je nodig kunt hebben voor het maken van een succesvolle en goed vormgegeven webapplicatie. Dat gaat echter ook gepaard met een hoge complexiteit en continue kosten. Bovendien is de Adobe-software niet bepaald een zuinige oplossing. Ervaren ontwikkelaars kiezen dan ook meestal voor editors die meer vrijheid bieden.

De opensource-alternatieven voor Dreamweaver die in deze leidraad zijn voorgesteld, vormen in zekere zin een middenweg tussen het modulaire principe van het Adobe-programma en de kale programmering met behulp van een gewone teksteditor. Dit komt hoofdzakelijk door de vrij beschikbare programmacode die de opensource-webeditors hun grote flexibiliteit geeft. Zo kun je een programma als Atom gebruiken als minimalistische editor met syntaxiskleuring en codeaanvulling, maar ook als volwaardige ontwikkelomgeving die maar op weinig punten onderdoet voor de commerciële Dreamweaver.

Aan de andere kant kun je bij de kosteloze alternatieven voor Dreamweaver echter ook niet uitgaan van de stabiliteit die het Adobe-product te bieden heeft. De professionele software van Dreamweaver wordt continu verder ontwikkeld, heeft zodoende ook de nieuwste webstandaards paraat en vormt vaak een decennialang gerijpt totaalpakket. Als er problemen met de software optreden of als je hulp nodig hebt bij je project, staat er deskundige support voor je klaar. Deze service wordt echter ook door enkele opensource-vervangers geboden, bijvoorbeeld BlueGriffon (niet gratis). Bij de kosteloze oplossingen ben je vaak aangewezen op de hulp van de community, of het nu gaat om technische problemen met het programma of om de algemene ontwikkeling van de software.

Beschikbaar voorNederlands taalpakketHTML5 en CSS3PHPBijzonderheden
AtomWindows, macOS, LinuxNeeJaJaGeïntegreerde Package Manager
Aptana StudioWindows, macOS, LinuxNeeJaJaJavaScript- en Ruby-on-Rails-debugger, gebaseerd op Eclipse
Blue GriffonWindows, macOS, UbuntuJaJaNeeSVG-editor, aanvullende commerciële features
BracketsWindows, macOS, Linux (beperkt)NeeJaNeeInline-editors voor CSS en JavaScript
KompoZerWindows, macOS, UbuntuJaNeeNeeKleine bestandsgrootte
  • Gecertificeerde veiligheid

    Gecertificeerde veiligheid
  • Beste hostingbedrijf

    Beste hostingbedrijf
  • MKB Best Choice

    MKB Best Choice
  • Professionele support

    Professionele support
  • Hosted in Germany

    Hosted in Germany