Adobe Dre­a­mwe­a­ver je pro­fe­si­o­nal­no orodje za razvoj spletnih strani, ki omogoča vizualno obli­ko­va­nje spletnih strani ali obli­ko­va­nje v ure­je­val­ni­ku kode. Podpira HTML, CSS, Ja­va­Script in druge spletne teh­no­lo­gi­je ter ponuja funkcije, kot so predogled v realnem času in ozna­če­va­nje sintakse. Posebej pri­lju­bljen je med obli­ko­val­ci in raz­vi­jal­ci, ki želijo združiti vizualno obli­ko­va­nje z ne­po­sre­dnim nadzorom kode.

Kaj je Adobe Dre­a­mwe­a­ver?

Leta 1997 je Ma­cro­me­dia izdala prvo različico Dre­a­mwe­a­ver­ja, namenjeno izključno za ope­ra­cij­ski sistem Apple Mac OS 8. Šele tri mesece kasneje – z različico 1.2 – je bila dodana podpora za sisteme Microsoft Windows. Deset let kasneje je pro­gram­sko podjetje Adobe prevzelo pro­gram­sko opremo za razvoj spletnih strani in jo dodalo v svoj Creative Suite (ki je bil kasneje na­do­me­ščen s Creative Cloud) kot na­do­me­sti­lo za prej vključen ure­je­val­nik GoLive. Vsak, ki želi upo­ra­blja­ti obsežno apli­ka­ci­jo za ustvar­ja­nje in obli­ko­va­nje odzivnih spletnih aplikacij, mora kupiti sa­mo­stoj­no naročnino ali najeti celoten paket Creative Cloud, zato pro­gram­sko opremo upo­ra­blja­jo predvsem pro­fe­si­o­nal­ni upo­rab­ni­ki.

Kaj Adobe Dre­a­mwe­a­ver izstopa?

Z značilnim vmesnikom Adobe, ki je znan upo­rab­ni­kom programov Photoshop, InDesign in Il­lu­stra­tor, Dre­a­mwe­a­ver takoj naredi vtis. HTML-ure­je­val­nik, ki velja za vodilno rešitev WYSIWYG, se je od izida Creative Cloud znatno razvil, kar je olajšalo kodiranje.

Na primer, vse spremembe je mogoče pre­gle­da­ti v realnem času, ne da bi bilo treba ponovno naložiti stran ali urejati CSS-kodo ne­po­sre­dno v datoteki HTML z uporabo vgra­je­ne­ga ure­je­val­ni­ka. Poleg tega in­te­gri­ra­ni kodirni motor pomaga pri pisanju čiste kode, saj samodejno do­pol­nju­je odlomke s podporo Emmet, ustvarja samodejne zamike in barvno označuje ujemajoče se elemente. Poleg tega Dre­a­mwe­a­ver ponuja naslednje funkcije:

  • Pre­ver­ja­nje kode
  • Podpora za CSS pred­pro­ce­sor­je (SASS, Less)
  • Podpora za PHP (različici 5.6 in 7.1)
  • Več kurzorjev za sočasno pisanje in urejanje različnih vrstic kode
  • In­te­gri­ran CSS okvir Bootstrap za odzivno spletno obli­ko­va­nje
  • Dostop do brez­plač­nih slik in vek­tor­skih grafik iz Adobe Stock
  • Enostaven dostop do lastnih grafik, oblik in drugih sredstev prek Creative Cloud

Katere brez­plač­ne al­ter­na­ti­ve za Dre­a­mwe­a­ver obstajajo?

Izkušeni upo­rab­ni­ki Dre­a­mwe­a­ver­ja, ki imajo dostop do izdelkov Creative Cloud, bodo v pro­gram­ski opremi Adobe našli za­ne­slji­vo izbiro. Raz­vi­jal­ci z omejenim pro­ra­ču­nom pa se lahko odločijo za več brez­plač­nih al­ter­na­tiv Dre­a­mwe­a­ver­ju. V na­da­lje­va­nju pred­sta­vlja­mo pet možnosti, njihove glavne zna­čil­no­sti, edin­stve­ne lastnosti in pri­mer­ja­vo z Adobejevo pro­gram­sko opremo v smislu eno­stav­no­sti uporabe in funk­ci­o­nal­no­sti.

Vizualni kod Visual Studio

Visual Studio Code, pogosto imenovan VS Code, je od­pr­to­ko­dni ure­je­val­nik kode podjetja Microsoft, ki je od svoje izdaje leta 2015 hitro postal najbolj pri­lju­blje­no razvojno okolje na svetu. Kot brez­plač­na in več­plat­for­mna al­ter­na­ti­va Dre­a­mwe­a­ver­ju se ure­je­val­nik odlikuje po visoki pri­la­go­dlji­vo­sti, modularni strukturi in aktivni skupnosti. VS Code deluje na ope­ra­cij­skih sistemih Windows, macOS in Linux, osnovna različica pa že vključuje številne funkcije, ki za­do­vo­lju­je­jo potrebe sodobnih spletnih raz­vi­jal­cev. Te vklju­ču­je­jo in­te­gri­ra­no podporo Git, ozna­če­va­nje sintakse, in­te­li­gen­tno do­pol­nje­va­nje kode (na podlagi In­tel­li­Sen­se), in­te­gri­ran terminal in predogled v realnem času prek ustreznih raz­ši­ri­tev.

Kljub temu, da se Visual Studio Code osre­do­to­ča na čisto kodiranje namesto na vizualne obli­ko­val­ske elemente, kot je Dre­a­mwe­a­ver, ga je mogoče z nekaj vtičniki razširiti v zmogljivo okolje, podobno WYSIWYG. Raz­ši­ri­tve, kot je Live Server, omogočajo delovni tok, ki razvoj HTML, CSS in Ja­va­Script naredi enako udoben kot z Dre­a­mwe­a­ver­jem. Tisti, ki upo­ra­blja­jo stre­žni­ške jezike, kot je PHP, ali okvire, kot so React, Angular ali Vue, bodo v VS Code našli brezhibno razvojno okolje z orodji za od­pra­vlja­nje napak, lintingom in gradnjo, ki so ne­po­sre­dno in­te­gri­ra­na ali jih je mogoče enostavno dodati z enim klikom.

Image: Screenshot of the VS Code website
Visual Studio Code is one of the most popular de­ve­lop­ment en­vi­ro­nments, also offering extensive support for web de­ve­lop­ment.

Za­hva­lju­joč številnim raz­po­lo­žlji­vim temam, bli­žnji­cam na tip­kov­ni­ci, knji­žni­cam odlomkov in pri­la­go­di­tvam upo­rab­ni­ške­ga vmesnika je ure­je­val­nik zelo pri­la­go­dljiv. Raz­vi­jal­ci, ki so začeli z grafičnim vmesnikom Dre­a­mwe­a­ver in se zdaj želijo pre­u­sme­ri­ti v pro­gra­mi­ra­nje, bodo v VS Code našli moderno, pri­ho­dno­stno al­ter­na­ti­vo, ki raste z na­ra­šča­jo­či­mi zahtevami, ne da bi po­tre­bo­va­li ko­mer­ci­al­no licenco.

Prednosti Slabosti
Pri­la­go­dlji­vost zaradi velikega izbora raz­ši­ri­tev in tem Brez raz­ši­ri­tve ni podpore za WYSIWYG
Podpira vse sodobne spletne teh­no­lo­gi­je Učenje za začetnike
In­te­gri­ran terminal, Git in raz­hro­šče­val­nik Poraba veliko po­mnil­ni­ka z veliko raz­ši­ri­tva­mi

KompoZer

Pro­gram­ska oprema za razvoj spletnih strani KompoZer izvira iz projekta Nvu podjetja Mozilla in temelji na motorju Gecko. Sprva je KompoZer vklju­če­val manjše op­ti­mi­za­ci­je pro­gram­ske opreme Nvu, dokler program ni bil končno izdan kot neodvisni spletni ure­je­val­nik pod prostimi licencami GNU GPL (GNU General Public License), GNU LGPL (GNU Lesser General Public License) in MPL (Mozilla Public License). Ekipa iz okolja Mozilla je razvoj ustavila leta 2010, vendar je program še vedno uporaben na večini pogostih sistemov Windows in macOS ter Ubuntu. Ker je KompoZer 32-bitni program, ni več združljiv z novejšimi raz­li­či­ca­mi macOS. Za KompoZer je na voljo več kot 20 različnih je­zi­kov­nih paketov, med drugim angleški, nemški, francoski, ita­li­jan­ski in španski.

Čeprav KompoZer ni med al­ter­na­ti­va­mi Dre­a­mwe­a­ver­ju, ki bi se po funk­ci­o­nal­no­sti in kom­ple­ksno­sti lahko pri­mer­ja­le z Ado­be­je­vim programom, ta od­pr­to­ko­dna apli­ka­ci­ja svojim upo­rab­ni­kom vseeno ponuja nekaj funkcij, ki pomagajo pri obli­ko­va­nju pro­fe­si­o­nal­no izdelanih spletnih strani:

  • Zmogljiv ure­je­val­nik WYSIWYG, ki omogoča enostavno pre­kla­plja­nje med kodo in pre­do­gle­dom
  • In­te­gri­ran ure­je­val­nik CSS, vključno s funkcijo uvoza za obstoječe stilne liste
  • Pri­la­go­dlji­ve menijske vrstice
  • Pre­ver­ja­nje črkovanja in ozna­če­va­nje sintakse
  • Zaviheki za sočasno urejanje več strani
  • Čarovnik za obrazce
  • In­te­gri­ra­ni čistilnik oznak, ki preveri skladnost vaših projektov s standardi W3C
  • Upra­vi­telj FTP-mesta, vključno s funkcijo povleci in spusti za medijske datoteke, kot so slike
Image: Screenshot of the KompoZer website
KompoZer is no longer offi­ci­al­ly developed, but it remains popular.

Poleg tega program ponuja nekaj koristnih raz­ši­ri­tev, kot je pre­ver­ja­nje povezav, s katerim lahko preverite ve­ljav­nost vgrajenih povezav. Kot po­ten­ci­al­na al­ter­na­ti­va programu Adobe Dre­a­mwe­a­ver KompoZer še vedno ne podpira PHP in novejših spletnih stan­dar­dov, kot sta CSS3 in HTML5. Na spletni strani KompoZer najdete vse različice za prenos za različne platforme ter podrobno do­ku­men­ta­ci­jo. Tam lahko tudi prijavite odkrito napako ali pre­dla­ga­te nove funkcije.

Prednosti Slabosti
Hiter ure­je­val­nik WYSIWYG s funkcijo pre­do­gle­da Po­manj­ka­nje podpore za PHP
Na voljo v več kot 20 jezikih Razvoj ustavljen
Pro­gram­ske datoteke so velike le nekaj MB Ne podpira sodobnih stan­dar­dov, kot sta HTML5 ali CSS3

Feniks

Phoenix je sodoben, sku­pno­stno usmerjen ure­je­val­nik kode, ki ga lahko obrav­na­va­mo kot ne­po­sre­dne­ga na­sle­dni­ka zdaj opuščene al­ter­na­ti­ve Dre­a­mwe­a­ver­ju, Brackets. Po tem, ko je Adobe leta 2021 uradno opustil Brackets, so Phoenix ustvarili predani raz­vi­jal­ci, da bi ohranili potencial pri­lju­blje­ne­ga ure­je­val­ni­ka in ga hkrati namerno iz­bolj­ša­li. Pro­gram­ska oprema je pod licenco MIT in se aktivno razvija. Na voljo je za različne platforme, kot so Windows, macOS in Linux, in uporablja sodobne spletne teh­no­lo­gi­je, kot so HTML, CSS ali Ja­va­Script, tako kot njegov pred­ho­dnik. Phoenix ima sodoben upo­rab­ni­ški vmesnik, ki jasno črpa iz originala, vendar z ob­no­vlje­no ar­hi­tek­tu­ro, op­ti­mi­za­ci­jo zmo­glji­vo­sti in po­so­do­blje­ni­mi knji­žni­ca­mi.

Urednik je namenjen predvsem raz­vi­jal­cem front-endov, vendar njegova odprta ar­hi­tek­tu­ra in raz­šir­lji­vost omogočata tudi uporabo na drugih področjih. Posebnost je vgrajen predogled v živo, ki samodejno prikazuje spremembe HTML- in CSS-kode v realnem času v br­skal­ni­ku (npr. Google Chrome) brez ročnega ponovnega nalaganja. To funkcijo podpira brezhibna in­te­gra­ci­ja z Node.js, ki omogoča hitro ko­mu­ni­ka­ci­jo med urednikom in br­skal­ni­kom.

Image: Screenshot of the Phoenix website
Phoenix is an evolution of the popular Dre­a­mwe­a­ver al­ter­na­ti­ve Brackets.

Poleg tega Phoenix lahko točkuje z dodatnimi funk­ci­ja­mi:

  • Vgrajeni ure­je­val­ni­ki: pravila CSS in Ja­va­Script lahko urejate ne­po­sre­dno v dokumentu HTML, brez pre­kla­plja­nja med da­to­te­ka­mi.
  • Sodobno upra­vlja­nje raz­ši­ri­tev: Dodatne funkcije in teme je mogoče enostavno namestiti prek in­te­gri­ra­ne­ga vmesnika za vtičnike. Skupnost aktivno razvija nove raz­ši­ri­tve, vključno z ozna­če­va­njem sintakse, orodji za obli­ko­va­nje ali linterji za HTML, CSS in Ja­va­Script.
  • Upra­vlja­nje projektov na več plat­for­mah: projekte je mogoče or­ga­ni­zi­ra­ti prek zavihkov, in­te­gri­ra­ni upra­vi­telj datotek pa omogoča hitro brskanje in urejanje imenikov.

Z doslednim razvojem, znano upo­rab­ni­ško izkušnjo in osre­do­to­če­no­stjo na sodobne frontend delovne tokove je Phoenix trenutno ena najbolj pri­vlač­nih od­pr­to­ko­dnih al­ter­na­tiv Adobe Dre­a­mwe­a­ver­ju. Je vredna izbira, zlasti za raz­vi­jal­ce, ki cenijo eno­stav­nost uporabe, predogled v živo in aktivno skupnost.

Prednosti Slabosti
Nenehno raz­vi­ja­nje s strani skupnosti Do­ku­men­ta­ci­ja je na nekaterih področjih še vedno nepopolna
Osre­do­to­če­nost na sodobne standarde in zmo­glji­vost Omejena podpora za stre­žni­ške jezike, kot je PHP
Vgrajeni ure­je­val­ni­ki za CSS in Ja­va­Script

Aptana Studio

Aptana Studio je brez­plač­no in­te­gri­ra­no razvojno okolje podjetja Axway. Čeprav je uradna podpora zdaj pre­ki­nje­na, je ure­je­val­nik še vedno mogoče prenesti iz uradnega re­po­zi­to­ri­ja Aptana GitHub. Platforma temelji na orodju Java Eclipse in poleg Ja­va­Script, HTML5 in CSS3 podpira tudi različne pro­gram­ske jezike, kot so PHP, Python in Ruby. Poleg tega je mogoče knjižnice Ajax, kot so jQuery, Prototype ali script.aculo.us, ne­po­sre­dno in­te­gri­ra­ti v apli­ka­ci­jo in jih upo­ra­blja­ti v razvojnem procesu.

Poleg široke podpore za pro­gram­ski jeziki in platforme se spletni ure­je­val­nik odlikuje po na­sle­dnjih osnovnih zna­čil­no­stih:

  • Pomočnik za kodo: Pomočnik za kodo ponuja predloge za možne argumente, lastnosti ali metode in prikazuje tudi podporo za vse elemente HTML, CSS in Ja­va­Script vašega spletnega projekta v običajnih spletnih br­skal­ni­kih.
  • In­te­gri­ra­ni raz­hro­šče­val­ni­ki: Raz­hro­šče­val­ni­ki Ja­va­Script in Ruby on Rails so že im­ple­men­ti­ra­ni in pomagajo pri pre­po­zna­va­nju in od­pra­vlja­nju napak v vaši spletni apli­ka­ci­ji.
  • Pomočnik za raz­vr­šča­nje: Aptana Studio ponuja orodje za pomoč pri raz­vr­šča­nju, ki vam pomaga pri nalaganju, pre­na­ša­nju in sin­hro­ni­za­ci­ji datotek vašega spletnega projekta prek FTP, SFTP in FTPS.
  • Nadzor različic: Svoj spletni projekt lahko enostavno povežete z Git, da za­go­to­vi­te varno so­de­lo­va­nje pri delu na izvorni kodi, kot je to mogoče na spletu z GitHub.
  • In­te­gri­ra­no orodje za ukazno vrstico: z vgrajenim ter­mi­na­lom lahko izvajate sistemske ukaze ne­po­sre­dno v Aptana Studio.
  • Pri­la­go­dlji­vo razvojno okolje: Aptana Studio lahko kon­fi­gu­ri­ra­te po svojih željah in iz­bolj­ša­te osnovne funk­ci­o­nal­no­sti s skripti za stan­dar­dne ukaze, do­da­ja­njem bližnjic za optimalno upo­rab­nost.
Image: Screenshot of the Aptana website
Aptana Studio is also no longer being developed but can still be down­lo­a­ded from GitHub.

Zaradi tesne in­te­gra­ci­je z Eclipseom ta brez­plač­na al­ter­na­ti­va Dre­a­mwe­a­ver­ju ponuja tudi osnovne funkcije, kot so vizualno ozna­če­va­nje sintakse, pametno do­pol­nje­va­nje kode ali samodejno zapiranje odprtih oznak. Poleg tega Aptana Studio podpira naj­no­vej­še spletne standarde, kot je HTML5.

Prednosti Po­manj­klji­vo­sti
Podpora za različne pro­gram­ski jeziki, kot so Perl, Python, PHP in Ruby Številne od­vi­sno­sti, vključno z Java, Git in Eclipse (v različici vtičnika)
Nadzor različic s pomočjo Git Upo­rab­ni­ški vmesnik je zelo zapleten
Podpora za naj­no­vej­še spletne teh­no­lo­gi­je Na­me­sti­tev deluje samo z na­me­šče­nim Node.js, kar Aptana ne omenja

Pulsar

Pulsar je sku­pno­stno razvita različica ure­je­val­ni­ka Atom, ki ga je prvotno razvil GitHub in katerega uradna podpora se je končala decembra 2022. Pulsar želi ohraniti znane elemente Atom, hkrati pa po­so­do­bi­ti zastarele od­vi­sno­sti in za­go­to­vi­ti varnostne po­so­do­bi­tve ter nove funkcije. Projekt se aktivno vzdržuje in je na voljo pod licenco MIT, tako kot njegov pred­ho­dnik. Poleg tega se apm, Atom Package Manager, nadalje razvija pod imenom ppm (Pulsar Packet Manager), da omogoča nemoteno upra­vlja­nje paketov. Pulsar je na voljo za Windows, macOS in Linux ter podpira številne pro­gram­ski jezike, kot so HTML, CSS, Ja­va­Script, PHP, Python in druge, v skladu z izvirno fi­lo­zo­fi­jo Atom.

Image: Screenshot of the Pulsar website
As a successor to GitHub’s Atom editor, this Dre­a­mwe­a­ver al­ter­na­ti­ve benefits from a large community.

Največja prednost Pulsarja je v doslednem na­da­lje­va­nju modularne ar­hi­tek­tu­re: obstoječi paketi Atom večinoma še naprej delujejo, skupnost pa nenehno dela na migraciji pomembnih raz­ši­ri­tev. Med znanimi funk­ci­ja­mi so med drugim:

  • In­te­li­gen­tno samodejno do­pol­nje­va­nje: ure­je­val­nik med tipkanjem predlaga ustrezne odlomke kode in funkcije, ki jih je mogoče enostavno vključiti.
  • Upra­vlja­nje paketov s ppm: podobno kot apm, ppm omogoča na­me­sti­tev, od­stra­ni­tev in po­so­do­bi­tev raz­ši­ri­tev ne­po­sre­dno v ure­je­val­ni­ku ali prek terminala.
  • In­te­gra­ci­ja Git: Pulsar ponuja vizualno podporo Git za sledenje in upra­vlja­nje sprememb izvorne kode.
  • Teme in pri­la­ga­ja­nje upo­rab­ni­ške­ga vmesnika: Ure­je­val­nik je mogoče vizualno in funk­ci­o­nal­no obširno pri­la­go­di­ti in­di­vi­du­al­nim potrebam in podpira različne barvne sheme in bližnjice na tip­kov­ni­ci.

Za­hva­lju­joč aktivni udeležbi nekdanjih upo­rab­ni­kov Atom, projekt še naprej stabilno raste. Celovita do­ku­men­ta­ci­ja je na voljo tudi na spletni strani.

Prednosti Po­manj­klji­vo­sti
Visoka raz­šir­lji­vost Ne­zdru­žlji­vost s sta­rej­ši­mi Atom paketi
In­te­gri­ra­ne rešitve za upra­vlja­nje paketov in nadzor različic
Odlična podpora pro­gram­skih jezikov

Povzetek naj­bolj­ših od­pr­to­ko­dnih al­ter­na­tiv Dre­a­mwe­a­ver­ju

Adobe Dre­a­mwe­a­ver ponuja za­če­tni­kom v pro­gra­mi­ra­nju celovit paket za razvoj spletnih strani, ki vključuje številna orodja in ne­po­sre­dne povezave do Creative Cloud, ter za­go­ta­vlja vse, kar je potrebno za ustvar­ja­nje uspešne in umetniško obli­ko­va­ne spletne pri­so­tno­sti. Vendar pa je to povezano z visoko kom­ple­ksno­stjo in stalnimi stroški. Poleg tega pro­gram­ska oprema Adobe ni znana kot rešitev, ki je učin­ko­vi­ta z vidika porabe virov. Izkušeni raz­vi­jal­ci se običajno zanašajo na ure­je­val­ni­ke, ki ponujajo večjo fle­ksi­bil­nost.

Od­pr­to­ko­dne al­ter­na­ti­ve Dre­a­mwe­a­ver­ju, pred­sta­vlje­ne v tem vodniku, ponujajo kompromis med mo­du­lar­nim pristopom programa Adobe in osnovnim ko­di­ra­njem s stan­dar­dnim ure­je­val­ni­kom besedil. To je predvsem zasluga prosto dostopne izvorne kode, ki od­pr­to­ko­dnim spletnim ure­je­val­ni­kom za­go­ta­vlja visoko fle­ksi­bil­nost. Program, kot je Pulsar, lahko upo­ra­blja­te kot mi­ni­ma­li­stič­ni ure­je­val­nik s po­u­dar­ja­njem sintakse in do­pol­nje­va­njem kode ali kot celovito razvojno okolje, ki le na nekaterih področjih zaostaja za ko­mer­ci­al­nim Dre­a­mwe­a­ver­jem.

Po drugi strani pa od brez­plač­nih rešitev ne morete pri­ča­ko­va­ti enake ravni sta­bil­no­sti, kot jo oblju­blja­jo izdelki Adobe. Pro­fe­si­o­nal­na pro­gram­ska oprema, kot je Dre­a­mwe­a­ver, se nenehno razvija, kar za­go­ta­vlja naj­no­vej­še spletne standarde in pogosto ponuja – kot v primeru Dre­a­mwe­a­ver­ja – celovit paket, ki je bil iz­po­pol­njen v več de­se­tle­tjih. Če naletite na težave s pro­gram­sko opremo ali po­tre­bu­je­te pomoč pri svojem projektu, je na voljo kom­pe­ten­tna podpora. Pri brez­plač­nih rešitvah ste odvisni od pomoči skupnosti – naj gre za tehnične težave s programom ali splošni razvoj.

HTML5 in CSS3 PHP Zna­čil­no­sti
VS Code celovito razvojno okolje
Aptana Studio Debugger za Ja­va­Script in Ruby-on-Rails, ki temelji na Eclipse
Pulsar Številni dodatni paketi
Phoenix Vgrajeni ure­je­val­ni­ki za CSS in Ja­va­Script
KompoZer majhna velikost datoteke
Go to Main Menu