A következő tanfolyam indul

2017. szeptember 21.
1

Aptana vs. Notepad++ – Melyiket használjuk?

Nem, nem káromkodunk, ezek bizony kódszerkesztő programok nevei. Mire is jó egy kódszerkesztő? Forráskódokat, kódsorokat létrehozni, kódokat szerkeszteni, módosítani, kisebb-nagyobb programozásokat végrehajtani.  Melyiket használjuk? Aptana-t vagy Notepad++-t? Bármelyik jó választás, működési elvükben akadnak csak különbségek. Bejegyzésünkben sorra vesszük a fontosabb tulajdonságaikat, és részletesen kitérünk a használatuk mibenlétére is.

A Webdesign tanfolyamon is ezzel a két alapszintű, ingyenes kódszerkesztő programmal  ismerkednek meg a hallgatók. Hol egyik, hol másik programmal kezdenek el egyszerű HTML kódokat, CSS parancsokat sikeresen szerkeszteni, azonban ha már éles weboldal fájljainak a szerkesztésére kerül a sor, gyakran elbizonytalanodnak – mert itt jön elő a kétféle program működésének, használati módjának az eltérése. Öntsünk tehát tiszta vizet a pohárba, hogy senkinek ne okozzanak fejtörést ezek a kódszerkesztők! :)

Közös tulajdonságaik:

  • ingyenesek
  • egyszerre több fájl megnyitható és szerkeszthető bennük
  • a sorok számozva vannak, így könnyen eligazodunk közöttük, gyorsan megtaláljuk a szükséges kódsort
  • jelölik a hibákat (nem a megszokott, standard színekkel szedik a kódokat)
  • egy kattintással visszavonhatóak a beírások, átszerkesztések (Szerkesztés/Visszavonás)

Eltérő tulajdonságaik:

  • Aptana – angol nyelvű, Notepad++ – magyar nyelvű
  • MAC számítógépre az Aptana program alkalmas, Windows számítógépre Aptana és Notepad++ egyaránt alkalmas
  • működési elvük, használatuk módja eltérő – Lássuk!

Míg a Notepad++ segítségével közvetve tudjuk szerkeszteni a weboldal fájljait (azaz az oldalhoz tartozó fájlokat a módosítások elvégzése és a mentés után FTP klienssel vissza kell tölteni a tárhelyre), addig az Aptana kódszerkesztővel közvetlenül tudjuk szerkeszteni a weboldal fájljait (azaz az oldalhoz tartozó fájlokat a módosítások elvégzése után csak menteni kell, nem kell visszatölteni a tárhelyre). Tehát az Aptana közvetlenül eléri a tárhelyen tárolt fájlokat, ezért tudjuk azokat és így magát a weboldalt közvetlenül szerkeszteni, és éppen ezért nem szükséges a fájlok tárhelyről történő letöltése, illetve a tárhelyre való visszatöltése.

Letöltésük:

Notepad++

https://notepad-plus-plus.org/download/v7.3.1.html

Aptana

http://www.aptana.com/products/studio3/download.html

Előzetes megjegyzés:

Windows operációs rendszer esetén az Aptana letöltéséhez még a Node JS for Windows JavaScript fájl letöltése is szükséges

https://nodejs.org/download/release/v0.10.42/x64/node-v0.10.42-x64.msi

Erre a linkre kattintva ez automatikusan letöltődik a gépedre, Te pedig ezt követően tudod telepíteni az Aptana-t.

 

Aptana

  • ha most először használjuk az Aptana programot fájlok szerkesztésére, akkor először hozzá kell adnunk a tárhelyet az Aptana-hoz, csak ezt követően tudjuk elérni a tárhelyen lévő, az adott weboldalhoz tartozó fájlokat
  • nyissuk meg az Aptana programot
  • a felső menüsorban válasszuk ki a Window/Show View/Remote opciót
  • a megnyíló bal oldali sávban, a Remote fülön jobbklikkeljünk, majd válasszuk a New/Add New FTP Site opciót
    • Site Name: tetszőleges név megadása
    • Protocol: FTP
    • Server: szerver megadása (pl.: ftp.domain.hu)
    • Username: felhasználónév megadása
    • Password: jelszó megadása (ea felhasználónév és a jelszó megegyezik a cPanel belépési adatokkal)
    • Remote Path: automatikusan megadja a public_html gyökérkönyvtárat, illetve a Browse gomb lekattintásával mi is kiválaszthatjuk
    • Test gomb lekattintása – csatlakozik a szerverhez, azaz a tárhelyhez
  • ezt követően a bal oldali sávban megjelenik az új FTP Site – ha ezt duplakattintással lekattintjuk vagy a nyíl segítségével lenyitjuk, akkor ezen belül megtaláljuk az adott weboldalhoz tartozó könyvtárakat, mappákat, fájlokat
  • a fájlokat duplakattintással tudjuk megnyitni, és máris szerkeszthetjük, majd menthetjük őket (File/Save)
  • ha a böngészőben meg van nyitva az adott weboldal, akkor frissítést követően azonnal láthatjuk is a változásokat

aptana-1 aptana-2 aptana-3 aptana-4 aptana-5

 

+ Megjegyzések:

  • ha egy következő alkalommal megnyitjuk az Aptana-t, akkor az alábbi lépésekkel tudunk csatlakozni a tárhelyhez, és elérni az adott weboldal fájljait: az Aptana bal oldali sávjában jobbklikkelünk az adott FTP Site nevére – Properties opció kiválasztása – OK (ha szükséges valamelyik belépő adat megadása, akkor azt adjuk meg)

aptana-6

  • ha aldomainen létrehozott weboldalon dolgozunk, akkor nem kell új FTP Site-ként felvenni, az adott FTP Site-ot (fő domain) kell lenyitni, és azon belül megtaláljuk az adott aldomain könyvtárát, azon belül pedig a hozzá tartozó mappákat, fájlokat

Notepad++

  • ha egy éles weboldalon (pl. WordPress weboldalon) dolgozunk, akkor a szerkeszteni, módosítani kívánt fájlt (pl. a használatban lévő WordPress sablon style.css fájlját) FTP kliens segítségével töltsük le a tárhelyről a számítógépre (a tárhelyhez FTP klienssel és a megfelelő belépési adatok megadásával tudunk)

filezilla-letoltes

  • a számítógépre lementett fájlt jobbklikkeléssel nyissuk meg a Notepad++ programban (egyszerű duplaklikkel valószínűleg Jegyzettömbben nyílna meg a tartalma, azonban abban nem igazán boldogulnánk vele :))
  • szükség szerint szerkesszük, módosítsuk a fájl tartalmát, azaz a kódokat, kódsorokat (pl. címsor betűszínének módosítása)

notepad-szerkesztes

  • Fájl/Mentés opcióra kattintva mentsük a fájlt (a biztonság kedvéért nagyobb volumenű szerkesztés esetén már közben is ajánlott a fájlra rá-rámenteni), majd a számítógépen tárolt fájlt FTP kliens segítségével töltsük vissza a tárhelyre, a megfelelő helyre, tehát ahonnan letöltöttük (pl. /public_html/dev/wp-content/themes/twentytwelve

(ez a könyvtár már tartalmaz ilyen fájlt (style.css), hiszen a meglévő fájlon hajtottunk végre módosításokat, ezért a fájl feltöltése után felül kell írni a könyvtárban lévő azonos fájlt, tehát az erre figyelmeztető üzenetet okézzuk le)

filezilla-feltoltes

  • a böngészőben megnyitott weboldalon frissítést követően lépnek érvénybe a változtatások (pl. címsor betűszínének megváltozása)
  • ha ismét módosítani szeretnénk ezen a fájlon, akkor vagy a gépen tárolt változatát módosítjuk (ha még megtalálható a gépen), és mentés után azt töltjük fel a tárhelyre, felülírva a könyvtárban lévő azonos fájlt, vagy a tárhelyen lévő fájlt letöltjük a gépünkre, elvégezzük a módosításokat, majd mentés után visszatöltjük a tárhelyre, felülírva a könyvtárban lévő azonos fájlt

+ Megjegyzés:

  • ha még csak a számítógépen vannak tárolva egy egyszerű oldal fájljai (pl. egy nagyon egyszerű, saját lekódolású képgaléria HTML és CSS fájlja), és a böngészőben meg van nyitva ez az „oldal” (azaz maga az index.html fájl), akkor ha szerkesztésre megnyitjuk a style.css fájlját a Notepad++-ban, és módosításokat hajtunk végre benne, majd rámentünk a fájlra, akkor a változtatásokat – a böngészőben megnyitott oldal frissítése után – közvetlenül is láthatjuk az oldalon (természetesen ugyanez igaz pl. az index.html fájl módosítására is)
  • ha már éles az oldal, tehát már tárhelyen van és a hozzá tartozó összes fájl is, akkor már nem ilyen egyszerű a dolog – akkor a már ismert módon járunk el, lsd.: előző pontok (letöltés – módosítás – feltöltés)

kepgaleria_1

style.css-2

kepgaleria_2

 

Tippek-tanácsok:

Aki már igazán gyakorlott, rutinos, és nem fél az esetleges hibáktól, problémáktól, annak a weboldal fájljainak a módosításához kódszerkesztőre sincs szüksége, azokat közvetlenül a weboldalon is szerkesztheti. WordPress weboldal esetén ehhez a WP adminban, a Megjelenés/Szerkesztő menüpontban válasszuk kiaz adott fájlt a közvetlen szerkesztéshez, majd mentsük (Fájl módosítása gombra kattintással) és frissítés után máris látszik az eredmény a weboldalon. Kezdőknek, kevésbé gyakorlottaknak azonban nem ajánlott ez a módszer, ugyanis így kevésbé átlátható a fájl (pl. nincsenek számozott sorok), és ami a legfőbb, itt bizony nincs visszavonási lehetőség!

Éles weboldal fájljainak a módosításához célszerű az Aptana kódszerkesztőt használni, hiszen így nagyon könnyen és gyorsan tudunk dolgozni, nem kell bajlódnunk a fájlok fel-le töltögetésével, főleg, ha csak egy-egy változtatást szeretnénk eszközölni :), míg a fájlok ellenőrzéséhez vagy egy-egy kód, kódsor kimásolásához elegendő a Notepad++.

 

Természesetesen mindenkinek magának kell eldöntenie, hogy saját munkamódszeréhez, rutinjához, tapasztalataihoz melyik az ideális kódszerkesztő! :)

Hozzászólások